<!--
 -  Lightning Markup: HtmlMapTest
 -
 -  Filename: HtmlMapTest.cmp
 -
 -  Author: Peter Friberg, Fluido Sweden AB
 -
 -  Description:
 -     XXXXX
 -
 - Change Log:
 - 2017-12-11  Peter Friberg  Initial Development.
 -->

<aura:component description="HtmlMapTest" access="global"
                implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome">

    <aura:attribute name="image" access="global" type="String" />
    <aura:attribute name="alt" access="global" type="String" />
    <aura:attribute name="usemap" access="global" type="String" required="true" default="themap" />
    <aura:attribute name="width" access="global" type="Integer" />
    <aura:attribute name="height" access="global" type="Integer" />
    <aura:attribute name="navigate" access="global" type="Boolean" default="false" />
    <aura:attribute name="areas" access="global" type="Object[]" />

    <aura:registerEvent name="mapClick" type="c:mapClickEvent"/>

    <div class="slds">
        <img src="{!v.image}"    alt="{!v.alt}"
             width="{!v.width}"  height="{!v.height}"  usemap="{!'#' + v.usemap}" />

        <map name="{!v.usemap}">
            <aura:iteration var="theArea" items="{!v.areas}">
                <area shape="{!theArea.shape}"  coords="{!theArea.coords}"
                      href="{!theArea.href}"    alt="{!theArea.alt}"
                      title="{!theArea.alt}"    onclick="{!c.onClick}" />
            </aura:iteration>
        </map>
    </div>

</aura:component>