<tal:block tal:define="layer python:request.get('layer',None);">
  <tal:block metal:use-macro="here/template/macros/module">


    <tal:block metal:fill-slot="icon"> M </tal:block>
    <tal:block metal:fill-slot="title"> Multi-layer Map </tal:block>


    <tal:block metal:fill-slot="menu">
       <ul id="account_menu">
        <li onclick="">Save</li>
        <li onclick="">Open</li>
    </tal:block>

    <tal:block metal:fill-slot="content">
      <!-- Subscreens:  mapping setup, map  -->
      <div class="subscreen main">
      
      <!--
      <span jstcache="0" style="display: none;" id="view_rss"> 
      <a jstcache="0" href="javascript:void(0)" id="view_rss_link">  <img jstcache="0" src="http://maps.gstatic.com/mapfiles/transparent.png" class="bar-icon view-as-rss">  <span jstcache="0" class="link-text">RSS</span> </a> 
      <img jstcache="0" src="http://maps.gstatic.com/mapfiles/transparent.png" class="bar-icon-divider bar-divider"> </span>
      <span jstcache="0" style="display: none;" id="view_kml"> 
      <a jstcache="0" href="javascript:void(0)" id="view_kml_link"> <img jstcache="0" src="http://maps.gstatic.com/mapfiles/transparent.png" class="bar-icon view-as-kml"> <span jstcache="0" class="link-text">In Google Earth anzeigen</span> </a> 
      <img jstcache="0" src="http://maps.gstatic.com/mapfiles/transparent.png" class="bar-icon-divider bar-divider"> </span> 
      <a jstcache="0" style="display: none;" href="http://www.google.com/mapmaker?ll=51.151786,10.415039&amp;spn=19.842079,51.899414&amp;t=h&amp;z=5&amp;source=gm_el" id="mapmaker-link" jsaction="rmi.open-mapmaker"> <img jstcache="0" class="bar-icon" src="http://maps.gstatic.com/mapfiles/gw_link.png"> <span jstcache="0" class="link-text">Bearbeiten</span> </a> 
      <img jstcache="0" style="display: none;" id="mapmaker-link-sep" src="http://maps.gstatic.com/mapfiles/transparent.png" class="bar-icon-divider bar-divider"> 
      <a jstcache="0" href="javascript:void(0);" jsaction="print.show" id="print"> <img jstcache="0" src="http://maps.gstatic.com/mapfiles/transparent.png" class="bar-icon bar-icon-print2"> <span jstcache="0" class="link-text">Drucken</span> </a> 
      <img jstcache="0" src="http://maps.gstatic.com/mapfiles/transparent.png" class="bar-icon-divider bar-divider"> 
      <a jstcache="0" id="showsendtox" href="javascript:void(0);" jsaction="stx.show"> <img jstcache="0" src="http://maps.gstatic.com/mapfiles/transparent.png" class="bar-icon bar-icon-email2"> <span jstcache="0" class="link-text">Senden</span> </a>  
      <img jstcache="0" src="http://maps.gstatic.com/mapfiles/transparent.png" class="bar-icon-divider bar-divider"> 
      <a jstcache="0" href="http://maps.google.de/?ie=UTF8&amp;ll=51.151786,10.415039&amp;spn=19.842079,51.899414&amp;t=h&amp;z=5" jsaction="link.show" id="link"> <img jstcache="0" src="http://maps.gstatic.com/mapfiles/transparent.png" class="bar-icon bar-icon-link2"> <span jstcache="0" class="link-text">Link</span> </a> 
	  -->
	  
      <div class="map_box">[loading...]</div>

      <div class="mapping_info">
      <table>
        <tr>
          <th>Map name</th>
          <td><input type="text" class="map_name" tal:attributes="value string:${layer}_map1" /></td>
        </tr>
      </table>
      <p><input type="button" class="map_save_button" value="Save map" /></p>
      <br>
      
      <h4>Layers</h4>
      <table width="100%" class="map_layer_table">
        <tr class="map_layer_header">
          <th>show</th>
          <th>layer name</th>
        </tr>
      </table>
      <p><input type="button" class="layer_add_button" value="Add layer" /></p>
      
      <p><input type="button" class="map_update_button" value="Update map" /><br />
       <!--    <input type="button" class="map_newwindow_button" value="Open map in new Window" /></p>
        --> 
      <input type="button" class="map_e4D_button" value="Open Map in Europeana4D" /></p>
        
      </div>

      </div>

      <!-- template for info table -->
      <table style="display:none">
        <tbody class="layer_info_tmpl">
          <tr class="layer_info">
            <td><input type="checkbox" class="layer_display_${idx}" checked="${display}" /></td>
            <td>${layer.name}</td>
            <td><input type="button" class="layer_edit_${idx}" value="edit" /></td>
            <td><input type="button" class="layer_delete_${idx}" value="del" /></td>
          </tr>
        </tbody>
      </table>
    <!--  Dialog for create table -->
    <div class="dialog add_layer_select" title="Select Layer" style="display:none">
      <form action="javascript:false;">
        <p>Select layer to add to map:<br/>
        <select size="5" name="add_layer_select" class="add_layer_select">
          <option>[loading...]</option>
        </select>
        </p>
      </form>
    </div>

    </tal:block>
  </tal:block>
</tal:block>