<?xml version="1.0" encoding="UTF-8" ?>
<Module>
<ModulePrefs title="Google Maps Digi-Clock" height="170" author="Pamela Fox"
 thumbnail="http://gmaps-samples.googlecode.com/svn/trunk/markerhider/thumb_gmapdigiclock.png"
 screenshot="http://gmaps-samples.googlecode.com/svn/trunk/markerhider/screenshot_gmapdigiclock.png"/>
<UserPref name="lat" display_name="Latitude" datatype="string" required="true" default_value="-17.925236" />
<UserPref name="lng" display_name="Longitude" datatype="string" required="true" default_value="25.8573" />
<UserPref name="zoom" display_name="Zoom" datatype="string" required="true" default_value="18" />
<Content type="html">
<![CDATA[

    <script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxSPW5CJgpdgO_s4yyMovOaVh_KvvhSfpvagV18eOyDWu7VytS6Bi1CWxw" 
      type="text/javascript"></script>

    <script type="text/javascript">
    var map;
    var markers = { "hour_10":[], 
                    "hour_1" :[],
                    "min_10" :[], 
                    "min_1"  :[],
                    "sec_10" :[],
                    "sec_1"  :[], 
                    "colon" : []};
      
    var numberLayouts = {
      "0" : [true,true,true,false,true,true,true],
      "1" : [false,false,false,false,false,true,true],
      "2" : [false,true,true,true,true,true,false],
      "3" : [false,false,true,true,true,true,true],
      "4" : [true,false,false,true,false,true,true],
      "5" : [true,false,true,true,true,false,true],
      "6" : [true,true,false,true,true,false,true],
      "7" : [false,false,true,false,false,true,true],
      "8" : [true,true,true,true,true,true,true],
      "9" : [true,false,true,true,false,true,true]
      };

   var markerIcons = {};

   var numberWidth = 30;
   var numberHeight = 50;
   var colonWidth = 10;
      
    function load() {
      var prefs = new _IG_Prefs(__MODULE_ID__);

      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        var lat = parseFloat(prefs.getString("lat"));
        var lng = parseFloat(prefs.getString("lng"));
        var zoom = prefs.getInt("zoom");

        map.setCenter(new GLatLng(lat, lng), zoom);
        map.setMapType(G_SATELLITE_MAP);

        var iconHorizontal = new GIcon();
        iconHorizontal.image = "http://gmaps-samples.googlecode.com/svn/trunk/markerhider/marker_hor.png";
        iconHorizontal.iconSize = new GSize(21, 8);
        iconHorizontal.iconAnchor = new GPoint(10, 4);

        var iconVertical = new GIcon();
        iconVertical.image = "http://gmaps-samples.googlecode.com/svn/trunk/markerhider/marker_vert.png";
        iconVertical.iconSize = new GSize(8, 21); 
        iconVertical.iconAnchor = new GPoint(4, 10);

        var iconColon = new GIcon();
        iconColon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markerhider/marker_colon.png";
        iconColon.iconSize = new GSize(8, 21); 
        iconColon.iconAnchor = new GPoint(4, 10);

        markerIcons["hor"] = iconHorizontal;
        markerIcons["vert"] = iconVertical;
        markerIcons["col"] = iconColon;


        addSegmentMarkers("hour_10", 0);
        addSegmentMarkers("hour_1", numberWidth);
        addColonMarker(numberWidth*2);
        addSegmentMarkers("min_10", numberWidth*2+colonWidth);
        addSegmentMarkers("min_1", numberWidth*3+colonWidth);
        addColonMarker(numberWidth*4+colonWidth);
        addSegmentMarkers("sec_10", numberWidth*4+colonWidth*2);
        addSegmentMarkers("sec_1", numberWidth*5+colonWidth*2);

       window.setInterval(clockTick, 1000);
      }
    }

     // Creates a marker at the given point with the given number label
    function createMarker(point, place, markerIcon) {
      var marker = new GMarker(point, markerIcons[markerIcon]);
      markers[place].push(marker);
      map.addOverlay(marker);
    }

    function addColonMarker(offset) {
      var mapNormalProj = G_NORMAL_MAP.getProjection();
      var mapZoom = map.getZoom();
      var centerPixel = mapNormalProj.fromLatLngToPixel(map.getCenter(), mapZoom);
      var segmentWidth = numberWidth*.66;
      var segmentHeight = numberHeight*.5;
      var startPixel = new GPoint(centerPixel.x - (numberWidth*3) + offset,centerPixel.y - (numberHeight*.5) + segmentHeight);
      createMarker(mapNormalProj.fromPixelToLatLng(startPixel,mapZoom), "colon", "col");
    }

    function addSegmentMarkers(place, offset) {
      var segmentWidth = numberWidth*.66;
      var segmentHeight = numberHeight*.5;

      var mapNormalProj = G_NORMAL_MAP.getProjection();
      var mapZoom = map.getZoom();
      var centerPixel = mapNormalProj.fromLatLngToPixel(map.getCenter(), mapZoom);

      var startPixel = new GPoint(centerPixel.x - (numberWidth*3) + offset,centerPixel.y - (numberHeight*.5));

      var segmentPixel;
      segmentPixel = new GPoint(startPixel.x, startPixel.y + segmentHeight/2.0);
      createMarker(mapNormalProj.fromPixelToLatLng(segmentPixel,mapZoom), place, "vert");
      segmentPixel = new GPoint(startPixel.x, startPixel.y + 3*segmentHeight/2.0);
      createMarker(mapNormalProj.fromPixelToLatLng(segmentPixel,mapZoom), place, "vert");
      segmentPixel = new GPoint(startPixel.x + segmentWidth/2.0, startPixel.y);
      createMarker(mapNormalProj.fromPixelToLatLng(segmentPixel,mapZoom), place, "hor");
      segmentPixel = new GPoint(startPixel.x + segmentWidth/2.0, startPixel.y + segmentHeight);
      createMarker(mapNormalProj.fromPixelToLatLng(segmentPixel,mapZoom), place, "hor");
      segmentPixel = new GPoint(startPixel.x + segmentWidth/2.0, startPixel.y + 2*segmentHeight);
      createMarker(mapNormalProj.fromPixelToLatLng(segmentPixel,mapZoom), place, "hor");
      segmentPixel = new GPoint(startPixel.x + segmentWidth, startPixel.y + segmentHeight/2.0);
      createMarker(mapNormalProj.fromPixelToLatLng(segmentPixel,mapZoom), place, "vert");
      segmentPixel = new GPoint(startPixel.x + segmentWidth, startPixel.y + 3*segmentHeight/2.0);
      createMarker(mapNormalProj.fromPixelToLatLng(segmentPixel,mapZoom), place, "vert");
    }
 
    function clockTick() {
      var now = new Date();
      var h = now.getHours() % 12;
      var m = now.getMinutes();
      var s = now.getSeconds();

      toggleSegments("" + Math.floor(h/10), "hour_10");
      toggleSegments("" + h%10, "hour_1");
      toggleSegments("" + Math.floor(m/10), "min_10");
      toggleSegments("" + m%10, "min_1");
      toggleSegments("" + Math.floor(s/10), "sec_10");
      toggleSegments("" + s%10, "sec_1");
    }

    function toggleSegments(number, place) {
      var numberLayout = numberLayouts[number];
      var placeMarkers = markers[place];

      for (i = 0; i < placeMarkers.length; i++) {
        if (placeMarkers[i].isHidden() && numberLayout[i]) { // if hidden and should be on
          placeMarkers[i].show(); 
        } else if (!placeMarkers[i].isHidden() && !numberLayout[i]) { // if showing and should be off
          placeMarkers[i].hide();
        } 
      }
    }

    _IG_RegisterOnloadHandler(load);

    </script>


    <div id="map" style="margin:auto; width: 100%; height: 165px"></div>

]]>
</Content>
</Module>

