var isDoubleClick = false;
var numberOfClick = 0;

function pause(millis)
{
var date = new Date();
var curDate = null;

do { curDate = new Date(); }
while(curDate-date < millis);
} 

Function.prototype.method = function (name, func) {
	this.prototype[name] = func;
	return this;
};
points = new Array();
function Place(){
    this.marker,
    this.info
}
function Encode(){
    this.EncodePoints ="";
    this.EncodeLevels="";
}
function MyGMapManager(){
    this.map;
    this.markerManager;
    this.types;
    this.startPoint;
    this.originalLongitude;
    this.originalLatitude;
    this.zoomLevel;
    this.selectMarker;
    this.markers = new Array();
    this.controls = new Array();
    this.polyline = new Array();
    this.curentPolyline;
    this.lineColor = "red";
    this.fillColor = "#335599";
    this.lineWeight = 2.0;
    this.lineOpacity = 0.8;
    this.fillOpacity = .2;
};

MyGMapManager.method('Initial', function (longitude, latitude, zoom) {
	this.originalLongitude = longitude;
	this.originalLatitude = latitude;
	this.zoomLevel = zoom;
	});


MyGMapManager.method('CreateAdvanced', function (mapContentHolder) {
    //arrow, crosshair, pointer
    if(GBrowserIsCompatible()){

	this.map = new GMap2(document.getElementById(mapContentHolder), {draggableCursor: 'arrow', draggingCursor: 'pointer'});
	this.map.setCenter(new GLatLng(this.originalLongitude,this.originalLatitude), this.zoomLevel);
	
	var largeMapControl = new GSmallMapControl();
	this.map.addControl(largeMapControl);
	this.controls.push(largeMapControl);
	this.map.enableScrollWheelZoom();
	//this.map.disableGoogleBar();
	this.map.setMapType(G_HYBRID_MAP);
	
    }
});
	
MyGMapManager.method('Create', function (mapContentHolder) {
    //arrow, crosshair, pointer
    if(GBrowserIsCompatible()){

	this.map = new GMap2(document.getElementById(mapContentHolder), {draggableCursor: 'arrow', draggingCursor: 'pointer'});
	this.map.setCenter(new GLatLng(this.originalLongitude,this.originalLatitude), this.zoomLevel);
	var largeMapControl = new GLargeMapControl();
	this.map.addControl(largeMapControl);
	this.map.enableScrollWheelZoom();
	var overviewMapControl = new GOverviewMapControl();
    this.map.addControl(overviewMapControl);
    var scaleControl = new GScaleControl();
    //this.map.addControl(scaleControl);
    this.controls.push(largeMapControl);
    this.controls.push(overviewMapControl);
    this.controls.push(scaleControl);
    this.map.addControl(new GMapTypeControl());
    this.map.setMapType(G_HYBRID_MAP);
    
	//this.map.addControl(new GMapTypeControl());
	//this.map.setMapType(G_MAP_TYPE);
//	GEvent.bind(this.map, "click", this,this.onClick);
//	this.icon0 = new GIcon();
//	this.icon0.image = "http://www.google.com/mapfiles/marker.png";
//	this.icon0.shadow = "http://www.google.com/mapfiles/shadow50.png";
//	this.icon0.iconSize = new GSize(20, 34);
//	this.icon0.shadowSize = new GSize(37, 34);
//	this.icon0.iconAnchor = new GPoint(9, 34);
//	this.icon0.infoWindowAnchor = new GPoint(9, 2);
//	this.icon0.infoShadowAnchor = new GPoint(18, 25);
    }
});
MyGMapManager.method('LoadCurrentMap', function (service) {
    var currentMapManager = this;
    GDownloadUrl(service, function(data, responseCode) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          var isViewFirstStory = xml.documentElement.getAttribute("IsViewFirstStory");
          
          for (var i = 0; i < markers.length; i++) {
                currentMapManager.map.addOverlay(currentMapManager.CreateStoryMapMarker(markers[i], i));
          }
            
         if(isViewFirstStory =="True"){
//            var markerNode = xml.documentElement.getElementsByTagName("marker")[0]
//            var storyID = parseInt(markerNode.getElementsByTagName("story")[0].getAttribute("id"), 10);
//            mgr.ShowMarker(storyID);
         }
         
        });
});

MyGMapManager.method('LoadGMapViewer', function (service) {
    var currentMapManager = this;
    GDownloadUrl(service, function(data, responseCode) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
             currentMapManager.map.addOverlay(currentMapManager.CreateSinglePolyline(markers[i], i));
          }
            
        });
});

MyGMapManager.method('LoadAllClassicCatch', function (service) {
    var currentMapManager = this;
    GDownloadUrl(service, function(data, responseCode) {
            
          try
          {
              var xml = GXml.parse(data);
              currentMapManager.markers = xml.documentElement.getElementsByTagName("marker");
              
              for(var i=0;i<currentMapManager.markers.length;i++)
              {
                  var markerNode = currentMapManager.markers[i];
                  currentMapManager.CreateClassicCatchMaker(markerNode);
              }
          }
          catch(ex){}
    });    
});


MyGMapManager.method('CreateClassicCatchMaker', function (markerNode) {
    var currentMapManager = this;
    var map = this.map;
    
    var latitudes = markerNode.getAttribute("latitudes");
      var longtitudes = markerNode.getAttribute("longtitudes");
      var classicCatchId = markerNode.getAttribute("classicCatchId");
      
      var point = new GLatLng(latitudes, longtitudes);
      $("#latitudes").attr("value",latitudes);
      $("#longtitudes").attr("value",longtitudes);
  
      var ico = new GIcon(G_DEFAULT_ICON);
      opts={icon:ico, title:'', draggable: false};
     
      var marker = new GMarker(point, opts);                         
      currentMapManager.map.addOverlay(marker);
      
      //var html = currentMapManager.CreateClassicCatchPopupHtml(markerNode);
      //var infoWindow = map.getInfoWindow();
      GEvent.addListener(marker, "click", function() {
              ShowClassicCatchDetail(classicCatchId);
              map.setCenter(marker, this.zoomLevel);              
//            this.openInfoWindowHtml(html, 
//            {maxWidth :'60', onOpenFn:function(){
//                                    
//                                   infoWindow.reset(latitudes,infoWindow.getTabs(),new GSize(60,60),null,null);
//                             }});             
     });       
});


MyGMapManager.method('CreateClassicCatchPopupHtml', function (markerNode) {
     var name = markerNode.getAttribute("name");
     var photoUrl = markerNode.getAttribute("photoUrl");
     var latitudes = markerNode.getAttribute("latitudes");
     var location = markerNode.getAttribute("location");
     
     var setWidthDiv = "style=\"width:100px\" ";     
     var html = "<div class=\"InfoMap\" id=\"InfoMapHolder\">";
     html += "    <div class=\"ColB\">";
     html += "        <div class=\"WrapInfo\" " + setWidthDiv + " >";
     html += "            <p class=\"OutBack\" > <strong><a class='More' href='" + '#' + "' >"  + name + "</a></strong></p>";
     html += "            <p>" +  location + "</p>";
     html += "        </div>";    
     html += "        <div class=\"PictureArea\">";
     html += "            <img width=\"55\" height=\"56\" src=\""+ photoUrl + " alt=\"\"/>";        
     html += "        </div>";
     
     html += "    </div>"
     html+= "</div>";
     
     return html;
});


MyGMapManager.method('LoadSingleGMapViewerClassicCatch', function (service) {
    var currentMapManager = this;
    GDownloadUrl(service, function(data, responseCode) {
            
          var xml = GXml.parse(data);
          currentMapManager.markers = xml.documentElement.getElementsByTagName("marker");
          var markerNode = currentMapManager.markers[0];
          //if(markerNode==null || markerNode== 'undefined') return;
          
         
          
          
          try
          {
            var latlngs = markerNode.getAttribute("latlngs");
            var levels = markerNode.getAttribute("levels");
            var latitudes = markerNode.getAttribute("latitudes");
            var longtitudes = markerNode.getAttribute("longtitudes");
          
              var point = new GLatLng(latitudes, longtitudes);
              $("#latlng").attr("value",point);
              $("#latitudes").attr("value",latitudes);
              $("#longtitudes").attr("value",longtitudes);
              
             var ico = new GIcon(G_DEFAULT_ICON);
             opts={icon:ico, title:'', draggable: true};
             //marker = this.selectMarker;
             var marker = new GMarker(point, opts);
             //tempMarker = this.selectMarker;
    //         GEvent.addListener(marker, "dragend", function(latlng) {
    //            $("#latlng").attr("value",latlng);
    //            $("#latitudes").attr("value",latlng.lat());
    //            $("#longtitudes").attr("value",latlng.lng());
    //         });
             
             currentMapManager.map.addOverlay(marker);
             currentMapManager.map.setCenter(point, 3);
         }
         catch(ex){}
              
          
          //currentMapManager.AddExistPolyline(latlngs, levels);
          
//          if(latlngs == null)
//            return;
//                    
//           var encodedPolyline = new GPolyline.fromEncoded({ color: "#FF0000",
//                                                      weight: 1.0, 
//                                                      opacity: 0.8, 
//                                                      points: latlngs, 
//                                                      levels: levels,
//                                                      zoomFactor: 32,
//                                                      numLevels: 4
//                                                    }); 
//            
//             GEvent.addListener(encodedPolyline, "mouseover", function() {
//                encodedPolyline.setStrokeStyle({
//                    color: "#0000FF",
//                    weight :2.0,
//                    opacity: 0.75
//                });
//            });
//                
//            GEvent.addListener(encodedPolyline, "mouseout", function() {
//                    encodedPolyline.setStrokeStyle({
//                        color: "#FF0000",
//                        weight :1.0,
//                        opacity: 0.75
//                    });           
//             });
//     
//            var points = currentMapManager.CreateLatLngsFromDecodedString(latlngs);
//            
//            if(points.length > 0)
//            {
//                var firstpoint = points[0];
//                currentMapManager.map.setCenter(firstpoint, currentMapManager.zoomLevel);
//                var icon = new GIcon();
//                icon.image = "http://labs.google.com/ridefinder/images/mm_20_purple.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);

//                opts = {draggable: false, icon:icon};
//                firstpoint = points[0];
//                firstNode = new GMarker(firstpoint, opts);
//                
//                currentMapManager.map.addOverlay(firstNode);         
//            }

//            currentMapManager.map.addOverlay(encodedPolyline);
        });
});

MyGMapManager.method('LoadSingleGMapViewer', function (service) {
    var currentMapManager = this;
    GDownloadUrl(service, function(data, responseCode) {
          var xml = GXml.parse(data);
          currentMapManager.markers = xml.documentElement.getElementsByTagName("marker");
          markerNode = currentMapManager.markers[0]
          var latlngs = markerNode.getAttribute("latlngs");
          var levels = markerNode.getAttribute("levels");
          //currentMapManager.AddExistPolyline(latlngs, levels);
          
          if(latlngs == null)
            return;
                    
           var encodedPolyline = new GPolyline.fromEncoded({ color: "#FF0000",
                                                      weight: 1.0, 
                                                      opacity: 0.8, 
                                                      points: latlngs, 
                                                      levels: levels,
                                                      zoomFactor: 32,
                                                      numLevels: 4
                                                    }); 
            
             GEvent.addListener(encodedPolyline, "mouseover", function() {
                encodedPolyline.setStrokeStyle({
                    color: "#0000FF",
                    weight :2.0,
                    opacity: 0.75
                });
            });
                
            GEvent.addListener(encodedPolyline, "mouseout", function() {
                    encodedPolyline.setStrokeStyle({
                        color: "#FF0000",
                        weight :1.0,
                        opacity: 0.75
                    });           
             });
     
            var points = currentMapManager.CreateLatLngsFromDecodedString(latlngs);
            
            if(points.length > 0)
            {
                var firstpoint = points[0];
                currentMapManager.map.setCenter(firstpoint, currentMapManager.zoomLevel);
                var icon = new GIcon();
                icon.image = "http://labs.google.com/ridefinder/images/mm_20_purple.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);

                opts = {draggable: false, icon:icon};
                firstpoint = points[0];
                firstNode = new GMarker(firstpoint, opts);
                
                currentMapManager.map.addOverlay(firstNode);         
            }

            currentMapManager.map.addOverlay(encodedPolyline);
        });
});


MyGMapManager.method('CreateSinglePolyline', function (markerNode, number) {

     var latlngs = markerNode.getAttribute("latlngs");
     var levels = markerNode.getAttribute("levels");
     this.DrawPolylineFromEncodeString(latlngs, levels);
     var points = this.CreateLatLngsFromDecodedString(latlngs);
     var firstpoint;
     var firstNode;
     if(points.length > 0)
     {
        var icon = new GIcon();
        icon.image = "http://labs.google.com/ridefinder/images/mm_20_purple.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);

        opts = {draggable: false, icon:icon};
        firstpoint = points[0];
        firstNode = new GMarker(firstpoint, opts);
        
        this.map.addOverlay(firstNode);
     }
    var map = this.map;
    var polyLine = this.curentPolyline;
    var mapManager = this;
    var html = this.CreateStoryPopupHtml(markerNode);
  
    GEvent.addListener(polyLine, "mouseover", function() {
            polyLine.setStrokeStyle({
                color: "#0000FF",
                weight :2.0,
                opacity: 0.75
            });
    });
        
    GEvent.addListener(polyLine, "mouseout", function() {
            polyLine.setStrokeStyle({
                color: "#FF0000",
                weight :1.0,
                opacity: 0.75
            });           
     });
     
     GEvent.addListener(firstNode, "click", function() {
            this.openInfoWindowHtml(html,
            {maxWidth :'60', onOpenFn:function(){
                                   infoWindow.reset(lating,infoWindow.getTabs(),new GSize(60,60),null,null);
                             }}); 
            map.setCenter(firstpoint, this.zoomLevel);
     });
     
      GEvent.addListener(firstNode, "mouseover", function() {
            GEvent.trigger(polyLine,"mouseover"); 
      });
     
     GEvent.addListener(firstNode, "mouseout", function() {
            GEvent.trigger(polyLine,"mouseout"); 
     });

     return polyLine;
});


MyGMapManager.method('CreateStoryMapMarker', function (markerNode, number) {

     var latlngs = markerNode.getAttribute("latlngs");
     var levels = markerNode.getAttribute("levels");
     this.DrawPolylineFromEncodeString(latlngs, levels);
     var points = this.CreateLatLngsFromDecodedString(latlngs);
     var firstpoint;
     var firstNode;
     if(points.length > 0)
     {
        var icon = new GIcon();
        icon.image = "http://labs.google.com/ridefinder/images/mm_20_purple.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);

        opts = {draggable: false, icon:icon};
        firstpoint = points[0];
        firstNode = new GMarker(firstpoint, opts);
        
        this.map.addOverlay(firstNode);
     }   
          
     var html = this.CreateStoryPopupHtml(markerNode);
	 var popupObj = document.getElementById("InfoMapHolder");
     var storyID = parseInt(markerNode.getElementsByTagName("story")[0].getAttribute("id"), 10);
    
     var map = this.map;
     var polyLine = this.curentPolyline;
     var mapManager = this;
      
     this.markers[number] = new Array();
     this.markers[number][0] = this.curentPolyline;;
     this.markers[number][1] = html;
     this.markers[number][2] = storyID;
   
     this.markers[number][3] = firstpoint;
     
   
     var infoWindow = map.getInfoWindow();
     GEvent.addListener(polyLine,"click", function(lating) {
            map.openInfoWindowHtml(lating, html,
                             {maxWidth :'60', onOpenFn:function(){
                                   infoWindow.reset(lating,infoWindow.getTabs(),new GSize(60,60),null,null);
                             }}); 
            map.setCenter(lating, this.zoomLevel);
            
            var holder = $(".WrapAdventure");
            for(var counter =0; counter < holder.length; counter++) {
                var temp = $($("input", $(holder[counter]))[0]);
                if(parseInt(temp.attr("value"),10) == storyID){
                    holder[counter].className = "WrapAdventure Current";
                    break;
            }
        }
    });

    GEvent.addListener(polyLine, "mouseover", function() {
            polyLine.setStrokeStyle({
                color: "#0000FF",
                weight :2.0,
                opacity: 0.75
            });
        
            var holder = $(".WrapAdventure");
            for(var counter =0; counter < holder.length; counter++) {
                var temp = $($("input", $(holder[counter]))[0]);
                if(parseInt(temp.attr("value"),10) == storyID){
                    holder[counter].className = "WrapAdventure Current";
                    break;
            }
        }
    });
        
    GEvent.addListener(polyLine, "mouseout", function() {
            polyLine.setStrokeStyle({
                color: "#FF0000",
                weight :1.0,
                opacity: 0.75
            });
            
            var holder = $(".WrapAdventure");
            for(var counter =0; counter < holder.length; counter++) {
                var temp = $($("input", $(holder[counter]))[0]);
                if(parseInt(temp.attr("value"),10) == storyID){
                    holder[counter].className = "WrapAdventure";
                    break;
                }
            }
     });
     
     GEvent.addListener(firstNode, "click", function() {
            this.openInfoWindowHtml(html, 
            {maxWidth :'60', onOpenFn:function(){
                                   infoWindow.reset(lating,infoWindow.getTabs(),new GSize(60,60),null,null);
                             }}); 
            map.setCenter(firstpoint, this.zoomLevel);
     });
     
      GEvent.addListener(firstNode, "mouseover", function() {
            GEvent.trigger(polyLine,"mouseover"); 
      });
     
     GEvent.addListener(firstNode, "mouseout", function() {
            GEvent.trigger(polyLine,"mouseout"); 
     });
     
     GEvent.addListener(polyLine, "MoveTo", function() {
            map.openInfoWindowHtml(firstpoint, html);
            map.setCenter(firstpoint, this.zoomLevel);
             
            var holder = $(".WrapAdventure");
            for(var counter =0; counter < holder.length; counter++) {
                var temp = $($("input", $(holder[counter]))[0]);
                if(parseInt(temp.attr("value"),10) == storyID){
                    holder[counter].className = "WrapAdventure Current";
                    break;
            }
        }            
     });
     
     
     
     
    
//    return ;
//    
//    GEvent.addListener(polyLine,"mouseover", function() {
//        times ++;
//        polyLine.openInfoWindowHtml(popupObj, opts);
//          
////        if(times == 1){
////            marker.closeInfoWindow();
////            marker.openInfoWindowHtml(html, opts);
////        }
//         //map.setCenter(marker.getLatLng(),9);
//    });
//    
//    //return;    
//    
//    GEvent.addListener(marker,"mouseout", function() {
//         //marker.closeInfoWindow();
//         //map.setCenter(marker.getLatLng(),9);
//    });
//    GEvent.addListener(marker,"infowindowopen", function() {
//        if($.browser.msie && $.browser.version <= 6.0)
//        {
//           pngfixForeGround();
//        }
//        /*var infoHolder = $("#InfoMapHolder").parent().parent().parent();
//        if(infoHolder.children(":nth-child(7)").height() < 100){
//           $("#InfoMapHolder").css("top","-60px");
//           $("#InfoMapHolder").css("position","absolute");
//            
//            infoHolder.children(":nth-child(7)").css("top", "-35px");
//            infoHolder.children(":nth-child(9)").css("top", "-45px");
//            infoHolder.children(":nth-child(6)").css("top", "-60px");
//            infoHolder.children(":nth-child(0)").css("top", "-60px");
//            infoHolder.children(":nth-child(1)").css("top", "-60px");
//            infoHolder.children(":nth-child(2)").css("top", "-60px");s
//            
//            infoHolder.children(":nth-child(7)").css("height", "128px");
//            infoHolder.children(":nth-child(8)").css("top", "87px");
//            infoHolder.children(":nth-child(3)").css("top", "87px");
//            infoHolder.children(":nth-child(5)").css("top", "87px");
//            infoHolder.children(":nth-child(4)").css("top", "87px");
//            infoHolder.children(":nth-child(3)").css("top", "87px");
//        //infoHolder.children(":nth-child(2)").css("top", "159px");
//        }
//		*/
//        var holder = $(".WrapAdventure");
//        for(var counter =0; counter < holder.length; counter++) {
//            var temp = $($("input", $(holder[counter]))[0]);
//            if(parseInt(temp.attr("value"),10) == storyID){
//                holder[counter].className = "WrapAdventure Current";
//                break;
//            }
//        }
//    });
//    GEvent.addListener(marker,"infowindowclose", function() {
//        var holder = $(".WrapAdventure");
//        for(var counter =0; counter < holder.length; counter++) {
//            var temp = $($("input", $(holder[counter]))[0]);
//            if(parseInt(temp.attr("value"),10) == storyID){
//                holder[counter].className = "WrapAdventure";
//                break;

//            }
//        }
//    });
//    
//    GEvent.addListener(marker,"dblclick", function() {
//                    //alert("hello world");
//                    //marker.openInfoWindowHtml(html);
//                   // map.setCenter(marker.getLatLng(),10);
//                });
////    GEvent.addListener(marker,"mouseover", function() {
////                    marker.openInfoWindowHtml(html);
////                });
////    GEvent.addListener(marker,"mouseout", function() {
////                   // marker.openInfoWindowHtml(html);
////                });

    return polyLine;
});

MyGMapManager.method('CreateStoryPopupHtml', function (markerNode) {
    var storyNode = markerNode.getElementsByTagName("story")[0];
     var storyHeadline = storyNode.getElementsByTagName("headline")[0].firstChild.nodeValue;
     var storyLink =  storyNode.getElementsByTagName("link")[0].firstChild.nodeValue;
     var photoLink = storyNode.getElementsByTagName("photoUrl")[0].firstChild.nodeValue;
     var location = storyNode.getElementsByTagName("location")[0].firstChild.nodeValue;
     
     var date = storyNode.getAttribute("date");
     var id = storyNode.getAttribute("id");
     var photoId = storyNode.getAttribute("photoID");
     var pageNode = "";
     if(storyNode.getElementsByTagName("page").length > 0)
     {
         pageNode = storyNode.getElementsByTagName("page")[0];
     }
     
     var pageLink = "";
     if(pageNode.getElementsByTagName("link").length > 0)
     {
        if(pageNode.getElementsByTagName("link")[0].firstChild != null)
        {
            pageLink = pageNode.getElementsByTagName("link")[0].firstChild.nodeValue;
        }
     }
     
     var pageTitle = pageNode.getAttribute("title");
     
     var content = "";
     if(storyNode.getElementsByTagName("content").length > 0)
     {
        if(storyNode.getElementsByTagName("content")[0].firstChild != null)
        {
            content = storyNode.getElementsByTagName("content")[0].firstChild.nodeValue;
        }
     }
     
     var hasPhoto = (photoId != -1);
         
     var hasVideo = storyNode.getAttribute("hasVideo");
     var setWidthDiv = !hasPhoto ? "style=\"width:180px\" " : " ";
     
     html = "<div class=\"InfoMap\" id=\"InfoMapHolder\">";
     html += "    <div class=\"ColB\">";
     html += "        <div class=\"WrapInfo\" " + setWidthDiv + " >";
     html += "            <p class=\"OutBack\" > <strong><a class='More' href='" + storyLink + "' >"  + storyHeadline + "</a></strong></p>";
     html += "            <p>" +  location + "</p>";
     html += "            <p>&nbsp;</p>";
     html += "            <p class=\"Date\">" + date +"</p>";
     html += "        </div>";
     
     if(hasPhoto)
     {
         html += "        <div class=\"PictureArea\">";
         html += "            <img width=\"55\" height=\"56\" src=\""+photoLink + "&width=55&height=56\"  alt=\"\"/>";
            if(hasVideo =="True"){
            html += "            <a href=\"javascript:void(0);\" title=\"Video\"><span>Video</span></a>";
            }
         html += "        </div>";
     }
     html += "    </div>"
     html+= "</div>";
	 $("#HiddenPopupID").html(html);
	 
	 
     return html;
});

MyGMapManager.method('MoveToLocation', function (location, zoom) {
    if(location == null || location == '' || location == 'undefined' ){
        return;
    }
     geocoder = new GClientGeocoder();
     
     var map = this.map;
     var marker = this.selectMarker ;
     geocoder.getLatLng(location,
          function(point) {
            if (!point) {

            } else {
                  map.setCenter(point, zoom);
//                  var ico = new GIcon(G_DEFAULT_ICON);
//                  //ico.image = "http://www.gmaplive.com/marker_hex.php?n=5&hex=44EE00"
//                  opts={icon:ico, title:location,draggable: true};
//                  marker = new GMarker(point, opts);
//                  GEvent.addListener(marker, "dragend", function(ll) {
//                     $("#latlng").attr("value",ll);
//                    });
//                  map.addOverlay(marker);
//                  marker.openInfoWindowHtml(location);
                }
             });
     });

MyGMapManager.method('SetType', function (type) {
    var mapHolder = this.map;
    var owner = this;
    if(type == "MAKE_MARKER"){
        var marker = this.selectMarker;
        GEvent.addListener(mapHolder,"click", function(overlay, latlng) {
            if(marker){
                mapHolder.clearOverlays();
            }
            
            if(latlng){
                $("#latlng").attr("value",latlng);
                $("#latitudes").val(latlng.lat());
                $("#longtitudes").val(latlng.lng());
                
                opts = {draggable: true};
                marker = new GMarker(latlng, opts);
                GEvent.addListener(marker, "dragend", function(ll) {
                     $("#latlng").attr("value",ll);
                     $("#latitudes").val(ll.lat());
                     $("#longtitudes").val(ll.lng());
                });
                mapHolder.addOverlay(marker);
            }
        });
    }
    
    if(type == "MAKE_POLYLINE"){
//        var contextmenu = document.createElement("div");
//        contextmenu.style.visibility="hidden";
//        contextmenu.style.background="#ffffff";
//        contextmenu.style.border="1px solid #8888FF";

//        contextmenu.innerHTML = '<a id="deleteMarkerLink(marker)"><div class="context">&nbsp;&nbsp;Delete this marker &nbsp;&nbsp;</div></a>'
//        mapHolder.getContainer().appendChild(contextmenu);
//                
//        GEvent.addListener(mapHolder,"singlerightclick",function(pixel,tile, marker) {
//                if(marker)
//                {
//                   //GEvent.trigger(overlay,"SingleRightClick"); 
//                     clickedPixel = pixel;
//                    var x=pixel.x + 5;
//                    var y=pixel.y + 5;
//                    if (x > mapHolder.getSize().width - 100) { x = mapHolder.getSize().width - 100 }
//                    if (y > mapHolder.getSize().height - 100) { y = mapHolder.getSize().height - 100 }
//                    var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(x,y));  
//                    pos.apply(contextmenu);
//                    contextmenu.style.visibility = "visible";
//                   // $("#deleteMarkerLink").click
//                }
//         });
//        
         GEvent.addListener(mapHolder,"dblclick", function(overlay, latlng){
            if(latlng){
//               isDoubleClick = true;
//                  var lastpoint =  owner.polyline[owner.polyline.length -1];  
//                  owner.map.removeOverlay(lastpoint);
//                  owner.polyline.splice(owner.polyline.length-1,1);
//                  owner.DrawPolyline();
            }    
         });
                
        GEvent.addListener(mapHolder,"click", function(overlay, latlng){
            if(latlng){
                  owner.MakePoint(overlay, latlng);
//                  window.setTimeout(function () {
//                        owner.MakePoint(overlay, latlng);
//                   }, 1000);
            }
        } );
    }
});

MyGMapManager.method('MakePoint', function (overlay, latlng) {
        
//        if(isDoubleClick)
//        {
//            numberOfClick++;
//            if(numberOfClick == 2)
//            {
//                isDoubleClick = false;
//                numberOfClick = 0;
//            }
//            return;
//        }
        var mapHolder = this.map;
        var owner = this;
    
        var icon = new GIcon();
        icon.image = "http://labs.google.com/ridefinder/images/mm_20_purple.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);

        opts = {draggable: true, icon:icon};
        var marker = new GMarker(latlng, opts);
        GEvent.addListener(marker, "dragend", function(ll) {
             $("#latlng").attr("value",ll);
        });
        GEvent.addListener(marker, "dragend", function(ll) {
            //owner.DrawPolyline();
        });
        GEvent.addListener(marker, "drag", function(ll) {
            owner.DrawPolyline();
        });
        GEvent.addListener(marker, "dblclick", function(ll) {
            var index = -1;
            for(var i =0; i< owner.polyline.length; i++)
            {
                if(owner.polyline[i] == marker)
                {
                    index = i;
                    break;
                }
            }
            owner.polyline.splice(index,1);
            owner.DrawPolyline();
            mapHolder.removeOverlay(marker);
        });
        
        mapHolder.addOverlay(marker);
        owner.polyline.push(marker);
        owner.DrawPolyline();
});

MyGMapManager.method('MakePolyline_click', function (overlay, latlng, t) {
    
});

MyGMapManager.method('DrawPolyline', function () {
    if(this.curentPolyline){
        this.map.removeOverlay(this.curentPolyline);
    }
//    if(this.polyline.length <= 1) {
//         return;
//     }
    
    var points = new Array();
    for(var i = 0; i < this.polyline.length; i++) {
      points.push(this.polyline[i].getLatLng());
    }
    this.curentPolyline = new GPolyline(points, this.lineColor, this.lineWeight, this.lineOpacity);
    this.map.addOverlay(this.curentPolyline);
    //test encode
    
    var encoded_points ="";
    var encoded_levels ="";
    var res = this.EncodePolyline(points, encoded_points, encoded_levels);
    //alert(res[0]);
    //alert(res[1]);
   // $("#test").html(res[0] + "-------" + res[1]);
    $("#latlng").attr("value", res[0]);
    $("#level").attr("value", res[1]);
});

MyGMapManager.method('MakeEncodingString', function (lat, lng) {
    var points = new Array();
    points.push(new GLatLng(lat,lng)); 
        
    var encoded_points ="";
    var encoded_levels ="";
    var res = this.EncodePolyline(points, encoded_points, encoded_levels);
    
    return res;
});

MyGMapManager.method('MouseMove', function (id) {
    for(var counter =0; counter < this.markers.length; counter ++){
        if(this.markers[counter][2] == id) {
            GEvent.trigger(this.markers[counter][0],"mouseover");
            break;
        }
    }
});
MyGMapManager.method('MouseOut', function (id) {
    for(var counter =0; counter < this.markers.length; counter ++){
        if(this.markers[counter][2] == id) {
            GEvent.trigger(this.markers[counter][0],"mouseout");
            break;
        }
    }
});

MyGMapManager.method('ShowMarker', function (id) {
    for(var counter =0; counter < this.markers.length; counter ++){
        if(this.markers[counter][2] == id) {
            GEvent.trigger(this.markers[counter][0],"MoveTo");
            break;
        }
    }
});

MyGMapManager.method('AddExistMarker', function (lat, lng) {
     point = new GLatLng(lat,lng);
     $("#latlng").attr("value",point);
     $("#latitudes").attr("value",lat);
     $("#longtitudes").attr("value",lng);
     
     var ico = new GIcon(G_DEFAULT_ICON);
     opts={icon:ico, title:'', draggable: true};
     //marker = this.selectMarker;
     var marker = new GMarker(point, opts);
     //tempMarker = this.selectMarker;
     GEvent.addListener(marker, "dragend", function(latlng) {
        $("#latlng").attr("value",latlng);
        $("#latitudes").attr("value",latlng.lat());
        $("#longtitudes").attr("value",latlng.lng());
     });
     this.map.addOverlay(marker);
     this.map.setCenter(point, 5);
});

MyGMapManager.method('AddExistPolyline', function (latlngs, levels) {
     this.RebuildPolylineFromEncodeString(latlngs, levels);  
});

MyGMapManager.method('ViewMarker', function (lat, lng, zoom) {
    point = new GLatLng(lat,lng);
    var ico = new GIcon(G_DEFAULT_ICON);
    opts={icon:ico, title:'', draggable: false};
    marker = new GMarker(point, opts);
    this.map.addOverlay(marker);
    this.map.disableScrollWheelZoom();
    this.map.setCenter(point, zoom);
//    this.map.disableDragging();
//    this.map.disableDoubleClickZoom();
//    var mapholder = this.map;
//     GEvent.addListener(mapholder, "click", function(latlng) {
//        alert('Modify code mote to view map page.');
//    });
});

MyGMapManager.method('ViewMarkerMinimize', function (lat, lng, zoom, url) {
    point = new GLatLng(lat,lng);
    var ico = new GIcon(G_DEFAULT_ICON);
    opts={icon:ico, title:'', draggable: false};
    marker = new GMarker(point, opts);
    this.map.addOverlay(marker);
    this.map.disableScrollWheelZoom();
    this.map.setCenter(point, zoom);
    this.map.disableDragging();
    this.map.disableDoubleClickZoom();
    for(var counter =0; counter < this.controls.length; counter++){
        control = this.controls[counter];
        this.map.removeControl(control);
    }
    var mapholder = this.map;
     GEvent.addListener(mapholder, "click", function(latlng) {
        window.location = url;
    });
});

MyGMapManager.method('EditMarkerMinimize', function (lat, lng, zoom, currentID) {
    point = new GLatLng(lat,lng);
    var ico = new GIcon(G_DEFAULT_ICON);
    //ico.image = "http://www.google.com/mapfiles/markerA.png";
    opts={icon:ico, title:'', draggable: false};
    marker = new GMarker(point, opts);
    this.map.addOverlay(marker);
    this.map.disableScrollWheelZoom();
    this.map.setCenter(point, zoom);
    this.map.disableDragging();
    this.map.disableDoubleClickZoom();
    for(var counter =0; counter < this.controls.length; counter++){
        control = this.controls[counter];
        this.map.removeControl(control);
    }
    var mapholder = this.map;
     GEvent.addListener(mapholder, "click", function(latlng) {
          var modifyUrl = "MakeMarker.aspx?storyID=" + currentID;
          var modifyType = "ModifyMap";
    	  ShowIframePopup(modifyUrl, modifyType);
    });
});
MyGMapManager.method('EncodePolyline', function (points,encoded_points, encoded_levels) {
    var i = 0;
    var plat = 0;
    var plng = 0;
    var encoded_points = "";
    var encoded_levels = "";

    for(i = 0; i < points.length; ++i) {
        var point = points[i];
        //var latlgn = point.getLatLng()
        var lat = point.lat();
        var lng = point.lng();
        var level = 3;

        var late5 = Math.floor(lat * 1e5);
        var lnge5 = Math.floor(lng * 1e5);

        dlat = late5 - plat;
        dlng = lnge5 - plng;

        plat = late5;
        plng = lnge5;
        
        encoded_points += this.EncodeSignedNumber(dlat) + this.EncodeSignedNumber(dlng);
        
        encoded_levels += this.EncodeNumber(level);
    }
    
    var res  = new Array();
    res[0] = encoded_points;
    res[1] = encoded_levels;
    return res;
});
MyGMapManager.method('EncodeNumber', function (num) {
    var encodeString = "";
     while (num >= 0x20) {
     encodeString += (String.fromCharCode((0x20 | (num & 0x1f)) + 63));
     num >>= 5;
     }
    encodeString += (String.fromCharCode(num + 63));
    return encodeString;
});
MyGMapManager.method('EncodeSignedNumber', function (num) {
    var sgn_num = num << 1;
    if (num < 0) {
    sgn_num = ~(sgn_num);
    }
    return(this.EncodeNumber(sgn_num));

});
// return GLatLng Array.
MyGMapManager.method('CreateLatLngsFromDecodedString', function (encoded) {
    var len = encoded.length;
    var index = 0;
    var array = new Array();
    var lat = 0;
    var lng = 0;

     while (index < len) {
        var b;
        var shift = 0;
        var result = 0;
        do {
            b = encoded.charCodeAt(index++) - 63;
            result |= (b & 0x1f) << shift;
            shift += 5;
        } while (b >= 0x20);
        var dlat = ((result & 1) ? ~(result >> 1) : (result >> 1));
        lat += dlat;

        shift = 0;
        result = 0;
        do {
            b = encoded.charCodeAt(index++) - 63;
            result |= (b & 0x1f) << shift;
            shift += 5;
        } while (b >= 0x20);
        var dlng = ((result & 1) ? ~(result >> 1) : (result >> 1));
        lng += dlng;
    array.push(new GLatLng(lat * 1e-5, lng * 1e-5));
    }
    return array;
});
MyGMapManager.method('CreateLevelsFromDecodedString', function (encoded) {
 var levels = [];
 for (var pointIndex = 0; pointIndex < encoded.length; ++pointIndex) {
 var pointLevel = encoded.charCodeAt(pointIndex) - 63;
 levels.push(pointLevel);
 }

 return levels;
});

// GPolyline(latlngs,  color?,  weight?,  opacity?,  opts?)
//fromEncoded(color?,  weight?,  opacity?,  latlngs,  zoomFactor,  levels,  numLevels)
MyGMapManager.method('DrawPolylineFromEncodeString', function (encoded, levels) {
    
    var encodedPolyline = new GPolyline.fromEncoded({ color: "#FF0000",
                                                      weight: 1.0, 
                                                      opacity: 0.75, 
                                                      points: encoded, 
                                                      levels: levels,
                                                      zoomFactor: 32,
                                                      numLevels: 4
                                                    }); 
     this.curentPolyline = encodedPolyline;   
     this.map.addOverlay(encodedPolyline);
});


MyGMapManager.method('RebuildPolylineFromEncodeString', function (encoded, levels) {
    //var temp = new GPolyline.fromEncoded("#ffffff", 1, 0.75, encoded, 32, levels,4); 
    
    var encodedPolyline = new GPolyline.fromEncoded({ color: "#0000FF",
                                                      weight: 1.0, 
                                                      opacity: 0.8, 
                                                      points: encoded, 
                                                      levels: levels,
                                                      zoomFactor: 32,
                                                      numLevels: 4
                                                    }); 
    
    var points = this.CreateLatLngsFromDecodedString(encoded);
    
    if(points.length > 0)
    {
        var firstpoint = points[0];
        this.map.setCenter(firstpoint, this.zoomLevel);
    }
    for( var counter = 0; counter < points.length; counter ++) {
        this.AddPointToPolyline(points[counter]);
    }
    this.DrawPolyline();
});

MyGMapManager.method('AddPointToPolyline', function (point) {
    var icon = new GIcon();
    icon.image = "http://labs.google.com/ridefinder/images/mm_20_purple.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);

    opts = {draggable: true, icon:icon};
    var marker = new GMarker(point, opts);
   
    GEvent.addListener(marker, "dragend", function(ll) {
        //owner.DrawPolyline();
    });
    var owner = this;
    GEvent.addListener(marker, "drag", function(ll) {
        owner.DrawPolyline();
    });
    
    GEvent.addListener(marker, "dblclick", function(ll) {
            //var index = owner.polyline.indexOf(marker);
            var index = -1;
            for(var i =0; i< owner.polyline.length; i++)
            {
                if(owner.polyline[i] == marker)
                {
                    index = i;
                    break;
                }
            }
            
            owner.polyline.splice(index,1);
            owner.DrawPolyline();
            owner.map.removeOverlay(marker);
    });
    
    this.map.addOverlay(marker);
    this.polyline.push(marker);
});