{% extends "mappy/base_site" %}

{% block content %}
<div id="toolbar">

<form id="add" action="" method="post">
<label>Add your zipcode to the Big Map!</label>
<input type="text" size="40" name="email" value="--Email--" id="email" 
onFocus="value=''" />
<input type="text" size="5" name="zipcode" value="-zip-" id="zipcode" maxlength=5 
onFocus="value=''" />
<input type="submit" value="Go" />
</form></div>

<div id="content-main" style=" font-size: 10px;" >
<div style=" font-size: 10px; width:550px;background-color: #ffffff; text-align:left; margin:10px; padding:10px; " id="info" >
Pythoneers by Zipcode - {{message}}

</div>
    <div id="map" style="width: 600px; height: 400px; float:left"></div><div style="text-align:left; padding:10px; margin:10px; float:right; vertical-align:top" id="ziplist">

</div>
    
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAx0-9wVyXg9_9HzLSuos2FhR4TdRSTu7JcUBDgZmBmjCxZ4XN2BQIKh1SKnUwg8BdcMX-ZWPvhf7jxQ" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    function createInfoMarker(point, address) {
    //-- put a pin in the map
      var marker = new GMarker(point,icon); // use the mini icon
      var msg;
    
      GEvent.addListener(marker, "click",function() {
       // map.closeInfoWindow();
        marker.openInfoWindowHtml(address);
      });
      //GEvent.addListener(marker, "click",function() { 
      //marker.showMapBlowup(2,G_SATELLITE_TYPE)});
      return marker;
    } 
   
    function createAnchor (point, address){
//  add an anchor to the list
      var msg = document.createTextNode(address);
      var anchor= document.createElement('a');
      anchor.href="#";
      var marker = createInfoMarker(point, address);
      map.addOverlay(marker);
      anchor.onclick=function(){
        map.closeInfoWindow();
        map.centerAndZoom(point, 8)
      };
      anchor.appendChild(msg);
      return anchor;
    }

    var ziplist= document.getElementById("ziplist");
  // Create our "tiny" marker icon // Borrowed this piece from Google
    var icon = new GIcon();
    icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
    icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
    icon.iconSize = new GSize(12, 20);
    icon.shadowSize = new GSize(22, 20);
    icon.iconAnchor = new GPoint(6, 20);
    icon.infoWindowAnchor = new GPoint(5, 1);

    var map = new GMap(document.getElementById("map"));
    map.addControl(new GLargeMapControl());
    // center map at first point in list
    map.centerAndZoom(new GPoint({{points.0.lon}},{{points.0.lat}}), 8);
    
    // this list is generated by Django
    {% for z_point in points %}
      point = new GPoint({{z_point.lon}} , {{z_point.lat}});
      var anchor = createAnchor(point, "{{z_point.text}}");
      ziplist.appendChild(anchor);
      ziplist.appendChild(document.createElement('br'));

    {% endfor %}
    //]]>
    </script>

<div>



{% endblock %}