<div id="main">
   <div id="sg-content" class="sommarguide">
      <div id="lb-map" class="overlay">
         <a class="lb-overlay overlay lb-close"></a>
         <div class="lb-content">
            <a class="lb-close close-btn" tabindex="0"><span>Stäng</span></a>

            <div id="gmap" class="gmap">
               <a class="gmap-filter-btn text-btn">Visa kategorier</a>
               <div class="gmap-filter overlay">
                  <div class="gmf-box">
                     <a class="gmf-close close-btn"><span>Stäng</span></a>
                     <div class="gmf-box-inner-wrap">
                        <h3 class="gmf-title">Visa kategorier:</h3>
                        <div class="toggle"></div>

                        <div class="gmf-buttons">
                           
                           <a id="gmf-cat0" class="gmf-btn gmf-btn-all show-all">
                              <div>
                                 <div class="icon all"><span></span><span></span><span></span></div>
                                 <span class="text-show">Visa</span>
                                 <span class="text-hide">Dölj</span> alla
                              </div>
                           </a>

                           #set ($categoryCounter = 1)
                           #foreach ($categoryPage in $categoryPages)
                           #set ($categoryName = $propertyUtil.getString($categoryPage, 'displayName'))

                           <a id="gmf-cat$categoryCounter" class="gmf-btn gmf-btn-cat">
                              <div><div class="icon"></div>$categoryName</div>
                           </a>
                           #set ($categoryCounter = $categoryCounter + 1)
                           #end

                        </div>  <!-- gmf-buttons -->

                        <a class="gmf-close text-btn">Hitta aktiviteter</a>
                        
                        <div class="gmf-butterfly"></div>
                        
                     </div> <!-- .gmf-box-inner-wrap -->
                  </div> <!-- .gmf-box -->

                  <div class="gmf-overlay overlay"></div>
               </div> <!-- .gmap-filter -->
                  
					<div id="gmap-map" style="display:block !important;"></div>

               <a id="gmap-reset-btn"></a>

               <div id="gmap-info">
                  <div class="box">
                     <a class="gmi-close close-btn"></a>
                     <div id="gmi-content">

                     #foreach($object in $objectsArray)   
                        #set($categoryNrParts = $object.categoryNr.toString().split("\."))
                        #set($catNr = $categoryNrParts[0])

                        #set($objectNrParts = $object.objectNr.toString().split("\."))
                        #set($objNr = $objectNrParts[0])

                        #set($hasImageClass = "")
                        #if($object.hasImage)
                        #set($hasImageClass = "has-image")
                        #end

                        <div id="gmi-c${catNr}-o${objNr}" class="gmi-object cat${catNr} $hasImageClass">
                           <div class="head">
                              <div class="icon"></div>
                              <div class="title">$object.categoryTitle</div>
                           </div>

                           #if($object.imageUrl)
                           <div class="image bg-img" style="background-image:url($object.imageUrl);"></div>
                           #end

                           <div class="content">
                              <div class="title-1">
                                 <div class="nr"><div>$objNr</div></div>
                                 $object.header
                              </div>
                              <div class="row">
                                 <div class="col-text">
                                    <div class="title-2">$object.title</div>
                                    <div class="info address"> $object.address</div>
                                    
                                    #if($object.info.length() > 0)
                                    	<div class="info link"> $object.info</div>
                                    #end
                                 </div>     <!-- col-text -->

                                 #if($object.facilities && $object.facilities.size() > 0)
                                 <div class="col-icons">
                                    <div class="icons">
                                       #foreach($facility in $object.facilities)
                                       #set($iconClass = "")
                                       #set($facilityText = "")
                                       #if($facility == "Brygga")
                                       #set($iconClass = "icon-brygga")
                                       #set($facilityText = "Brygga")
                                       #elseif($facility == "Grillplats")
                                       #set($iconClass = "icon-grillplats")
                                       #set($facilityText = "Grillplats")
                                       #elseif($facility == "Hund")
                                       #set($iconClass = "icon-hund")
                                       #set($facilityText = "Hund")
                                       #elseif($facility == "Toalett")
                                       #set($iconClass = "icon-toalett")
                                       #set($facilityText = "Toalett")
                                       #elseif($facility == "Kiosk")
                                       #set($iconClass = "icon-kiosk")
                                       #set($facilityText = "Kiosk")
                                       #elseif($facility == "Rullstol")
                                       #set($iconClass = "icon-rullstol")
                                       #set($facilityText = "Rullstol")
                                       #end

                                       <div class="$iconClass"><i></i>
                                          <div class="icon-text">$facilityText</div>
                                       </div>
                                       #end

                                    </div>     <!-- icons -->
                                 </div>     <!-- col-icons -->
                                 #end
                              </div>     <!-- row -->
                           </div>     <!-- content -->   
                        </div>     <!-- gmi-c${catNr}-o${objNr} -->
                     #end  <!-- foreach-->
                     </div>  <!-- gmi-content -->
                  </div>  <!-- box -->
               </div>  <!-- gmap-info -->

		<!-- De båda divarna som stängs här nedanför har sina start-divar i modulen HTML 1 -->
			</div>  <!-- lb-content -->
		</div>  <!-- lb-map -->