#set ($LayoutLocalService = $serviceLocator.findService("com.liferay.portal.service.LayoutLocalService"))
#set ($JournalArticleLocalService = $serviceLocator.findService("com.liferay.portlet.journal.service.JournalArticleLocalService"))


#if(!$entries.isEmpty())

#set($baseUrl = "#getFRIndlUrl1('/agrupaciones-territoriales')")

<script type="text/javascript">

safeInit(function(){
   var originalWidth = 767;
   widthImg = parseInt($("#mapilla").width());

   function proportion(width){
        var propor = 1;
        propor = widthImg / 767;

       $(".puntoAgrupacion").each(function(){
            var left = parseInt($(this).attr("data-left").trim());
            var top = parseInt($(this).attr("data-top").trim());

            var newLeft = left * propor;
            var newTop = top * propor;

            $(this).css("left",newLeft+"px");
            $(this).css("top",newTop+"px");
       });

       $(".puntoAgrupacion").fadeIn();
   }

   proportion(widthImg);
   var resizeTimer;

   $(window).on('resize', function(e) {
      $(".puntoAgrupacion").hide();

      clearTimeout(resizeTimer);
      resizeTimer = setTimeout(function() {

        widthImg = parseInt($("#mapilla").width());
       proportion(widthImg);

      }, 500);
    });

	$(".puntoAgrupacion").click(function(e){

	   if($(this).children(".tooltipCirculos").css("display") == "none"){
    	   $(".tooltipCirculos").fadeOut("400");
    	   $(this).children(".tooltipCirculos").slideDown(400);
	   }else{
			if(e.target.tagName != 'A'){
			   $(this).children(".tooltipCirculos").slideUp(400);
			   $(".tooltipCirculos").fadeOut("400");
		   }
	   }
	});


	$(".toggleSpain").click(function(){
	    $(this).siblings("ul").slideToggle();
	    return false; #*Desactiva el href*#
	});

	$("#puntoSpain .puntoSpainToggle").click(function(){
	    $(".listaPuntoSpain").slideToggle();
	    return false; #*Desactiva el href*#
	});

});


</script>


<div class="mapaPuntos margin-top0">
	<div class="container">

		## ------- Sort by continent --------

		#set($continentsMap={})

		#foreach ($entry in $entries)

			#set( $renderer = $entry.getAssetRenderer() )
			#set( $journalArticle = $renderer.getArticle() )
			#set( $doc = $saxReaderUtil.read($journalArticle.getContentByLocale($themeDisplay.languageId)) )
			#set( $root = $doc.getRootElement() )
			#set( $continentId = $getterUtil.getInteger("#getField2($root 'Continente')", -1) )

			#set( $chapterList = $continentsMap.get($continentId) )
			#if($validator.isNull($chapterList))
				#set( $chapterList = [] )
			#end

			#set( $void = $chapterList.add({
			   'weight' : $getterUtil.getInteger("#getField2($root 'peso')", 0),
			   'name' : "#getField2($root 'nombre')",
			   'top': "#getField2($root 'top')",
			   'left': "#getField2($root 'left')",
			   'numero': "#getField2($root 'numero')",
			   'isSpain': $getterUtil.getBoolean("#getField2($root 'Es_Espana')"),
			   'urlTitle' : $journalArticle.urlTitle
			}))
			#set( $void = $continentsMap.put($continentId, $chapterList) )

			#set($chapterList=[])

		#end

		<!-- Header -->

		<h1 >#language("at.titulo")</h1>
		<p>
			#language("at.descripcion")
		</p>

		<!-- Map -->

        <div class="mapaAgrupaciones" style="position:relative;">

            <img id="mapilla" usemap="#mapaAgrupaciones" src="/iese-theme/images/mapaPuntos.png" alt="mapa de verdad" title="mapa" width="100%">

           #* SPAIN *#
            <div id="puntoSpain" data-left="345" data-top="163" class="puntoAgrupacion">
    			<div class="tooltipCirculos">

    				<a class="puntoSpainToggle" href="#">#language("pais.esp")</a>

                	<p>
                		<span>18679</span> <img src="/iese-theme/images/menWomen.png" alt="">
                	</p>

                	     <ul class="listaPuntoSpain">
                        #foreach ($continentId in $sortTool.sort($continentsMap.keySet()))
				            #set( $chapterList = $continentsMap.get($continentId) )
                            #foreach ($chapter in $sortTool.sort($chapterList, ['weight:desc','name:asc']))
                                #if($chapter.isSpain)
						            <li><a href="$baseUrl/$chapter.urlTitle">$chapter.name      <span>$chapter.numero</span></a></li>
						        #end
						    #end
						 #end
						</ul>


                </div>
            </div>
            #* FIN SPAIN*#

            #foreach ($continentId in $sortTool.sort($continentsMap.keySet()))

				#set( $chapterList = $continentsMap.get($continentId) )

                    #foreach ($chapter in $sortTool.sort($chapterList, ['weight:desc','name:asc']))
                         #if(!$chapter.isSpain)
                            <div data-left="$chapter.left" data-top="$chapter.top" class="puntoAgrupacion">
    							<div class="tooltipCirculos">

    								<a href="$baseUrl/$chapter.urlTitle">$chapter.name</a>

                					<p>
                						<span>$chapter.numero</span> <img src="/iese-theme/images/menWomen.png" alt="">
                					</p>
                				</div>
                			</div>
						#end
        			#end
			#end


		</div>

		<!-- Country list -->

		<div class="listadoMapaPuntos">

			<!-- Continent list -->

			#foreach ($continentId in $sortTool.sort($continentsMap.keySet()))

				#set( $chapterList = $continentsMap.get($continentId) )

				    #if($validator.equals("$continentId","1"))
				        <div class="span4">
        					<h1>#language("continent.$continentId")</h1>
        					<ul>
        					        #*SPAIN*#
        					    <li class="toggleSpain"><a href="#">#language("pais.esp")</a></li>

        					            <ul class="spainChapters">
        					               #foreach ($chapter in $sortTool.sort($chapterList, ['weight:desc','name:asc']))
        						            #if($chapter.isSpain)
                					            <li><a href="$baseUrl/$chapter.urlTitle">$chapter.name</a></li>
                					        #end
                					       #end

        					            </ul>

        					        #*FIN SPAIN*#

        						#foreach ($chapter in $sortTool.sort($chapterList, ['weight:desc','name:asc']))

        						    #if(!$chapter.isSpain)
        							    <li><a href="$baseUrl/$chapter.urlTitle">$chapter.name</a></li>
        							#end

        						#end

        					</ul>
        				</div>

				    #else
        				<div class="span4">
        					<h1>#language("continent.$continentId")</h1>
        					<ul>
        						#foreach ($chapter in $sortTool.sort($chapterList, ['weight:desc','name:asc']))
        							<li><a href="$baseUrl/$chapter.urlTitle">$chapter.name</a></li>
        						#end
        					</ul>
        				</div>

                    #end
			#end

		</div>
	</div>
</div>

#end

#macro (getField2 $root $fName)#*
	*##set ($xPathSelector = $saxReaderUtil.createXPath("dynamic-element[@name='$fName']"))#*
	*#$!xPathSelector.selectSingleNode($root).getStringValue()#*
*##end




#macro (getFRIndlUrl1 $fUrl)#*
    *##set ($currLayout = $LayoutLocalService.getFriendlyURLLayout($themeDisplay.getScopeGroupId(), false, $fUrl))#*
	*#$portalUtil.getLayoutFriendlyURL($currLayout, $themeDisplay)#*
*##end