﻿ 

 

  
/*
YDMap design principals:

I don't have much time to design some great framework like markerManager and labeledMarker 


1.search result data structure (implemented)

{
 "resultCount":N {number},
 "resultList":[a0,a1,...,an] {array}
}

2.delay to search to protect data server from be request too frequently (implemented)

3.no increasing persist data cache for better performance on internet browsers' memory occupation (implemented)

3.animate effects
 a.animate marker adding (implemented)
 b.animate marker deleting ?(not implemented)
 c.animate action on markers' onmouseover and onmouseout events (not implemented)
 d.prompt information area fade-in and fade-out (not implemented)

4.many kinds of markers 
 a.each kind of marker has its unique icon 
 b.every kind marker can contains texture information  

5.prompt information (implemented)

6.extensions for marker's prompt-information-window (not yet in the plan)


*/


var YDMap = {
    //constants and helpers
 VERSION:"alpha 1.0",
 VIP_IMAGE:"/wd/js/gmap/vip.gif",
    utils:{
        format:function(str){
            var args = arguments;
            return str.replace(/\{(\d+)\}/g,function(match,index){return args[parseInt(index) + 1];});  
        },    
        $:function(id){return document.getElementById(id);},
        defaultLocation:function(){
            if(!YDMap.m_defaultLoc)
                YDMap.m_defaultLoc = new GLatLng(29.36557034389747, 113.11901092529297);
            return YDMap.m_defaultLoc;
        }
    },
    //properties
    m_maps:[],
    
    //base functions 
 /*
 YDMap can holds many m_maps ,base on the property "m_maps" {array}
  YDMap.m_maps = [];

 Every Map will have a container ,YD_PROPERTY, for its extension like markerManager and its promptInfoWindow (not come from google ,but an actually opacity div)
  YDMap.m_maps[i].YD_PROPERTY = {
   "markerManager":MARKER_MANAGER, // markerManager Object
   "addMarkerState":ADD_MARKER_STATE, //int field for a signiture
   "promptDraggableObject":PROMPT_DRAGGABLE_OBJECT, // GDraggableObject
   "promptWnd":PROMPT_WND //Html element div
  }
  
  addMarkerState : 0 - stopped,1 - running        

 */
    initialize:function(id,promptId,latlng,zoom,maptype){
        var map = new GMap2(YDMap.utils.$(id));
        latlng = latlng || YDMap.utils.defaultLocation();
        zoom = zoom || 18;
        maptype = maptype || G_HYBRID_MAP;
        map.setCenter(latlng,zoom,maptype);
      //  G_NORMAL_MAP.getMinimumResolution = function() {return 9;};
      //  G_NORMAL_MAP.getMaximumResolution = function() {return 19};
        map.setUIToDefault();
        map.YD_PROPERTY = {
            "promptDraggableObject":new GDraggableObject(YDMap.utils.$(promptId)),
            "promptWnd":YDMap.utils.$(promptId),
   "markerPane":map.getPane(G_MAP_MARKER_PANE),
   "shopNameDiv":document.createElement("div")
        };        
        map.YD_PROPERTY.markerPane.appendChild(map.YD_PROPERTY.shopNameDiv);
  map.YD_PROPERTY.shopNameDiv.style["color"] = "white";
        map.YD_PROPERTY.shopNameDiv.style["position"] = "absolute";
  map.YD_PROPERTY.shopNameDiv.style["whiteSpace"] = "nowrap";
  map.YD_PROPERTY.shopNameDiv.style["fontSize"] = "12px";
        map.YD_PROPERTY.shopNameDiv.style["zIndex"] = 1;
  map.YD_PROPERTY.shopNameDiv.style["cursor"] = "hand";
  map.YD_PROPERTY.shopNameDiv.style["filter"] = "FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://pages.anjukestatic.com/img/map/lable_normal_50x40.png',sizingMethod='rop')";
  YDMap.hideFullName(map);  
        map.YD_PROPERTY.promptWnd.style.top = YDMap.utils.$(id).offsetTop + 10 + "px";
        map.YD_PROPERTY.promptWnd.style.left = YDMap.utils.$(id).offsetLeft + 80 + "px";
        YDMap.m_maps.push(map);
        map.YD_PROPERTY.startListener = GEvent.addListener(map,"movestart",YDMap.mapDragStartEventHandler);
        map.YD_PROPERTY.endListener = GEvent.addListener(map,"moveend",YDMap.mapDragEndEventHandler);
		YDMap.searchHandler(map);
        map = null; 
    },
    unload:function(){
        while(YDMap.m_maps.length > 0)
            YDMap.m_maps.pop();
        GUnload();
    },
    
    //business logical functions
    mapZoomEndEventHandler:function(){
        YDMap.mapDragStartEventHandler.call(this);
        YDMap.mapDragEndEventHandler.call(this);
    },
    mapDragStartEventHandler:function(){
        YDMap.stopAddMarkers(this); 
        YDMap.stopSearchWait(this);                          
    },
    mapDragEndEventHandler:function(){
        //"this":GMap2 object
        YDMap.startSearchWait(this,YDMap.searchWaitDelay,YDMap.searchHandler,this);
    },
 
    //search
    searchWaitDelay:500, //ms 
    searchFunctionName:"GetMarkersInRectangle", //server-side function name
    search:function(){},/*This is going to be implemented outside*/
    startSearchWait:function(map,delay,callback,callbackArgs){
        map.YD_PROPERTY.searchTimeout = window.setTimeout(function(){callback(callbackArgs);},delay);
    },
    stopSearchWait:function(map){
        if(map.YD_PROPERTY.searchTimeout){
            window.clearTimeout(map.YD_PROPERTY.searchTimeout); 
            map.YD_PROPERTY.searchTimeout = null;
        }
    },
    searchCallbackExceptionHandler:function(exception,context){
        YDMap.setPrompt(context,"exception occurred!!!");
        window.alert(exception.substr(0,exception.length - 1));
    },
    searchCallback:function(result,context){
        //current GMap2 object is context
        var json = null;
        eval("json = " + result + ";");
        YDMap.setPrompt(context,json.resultCount === 0 ? "在当前区域中没有找到湾逗商铺!":YDMap.utils.format("在当前区域中找到{0}个湾逗商铺!",json.resultCount));
        var markers = [];
        for(var i = 0; i < json.resultList.length; ++i){
            markers.push(
                YDMap.createGMarker(
     context,
     new GLatLng(
                        json.resultList[i].lat,
                        json.resultList[i].lng
                    ),
                    {
						name:json.resultList[i].name,
						shopId:json.resultList[i].shopId,
						wdIndex:json.resultList[i].wdIndex,
						shopBrief:json.resultList[i].shopBrief,
						shopAddress:json.resultList[i].shopAddress
                    }
                )
            );
        } 
        YDMap.startAddMarkers(context,YDMap.addMarkers,markers); 
    },
    searchHandler:function(map){
  YDMap.clearMarkers(map);
        var bounds = map.getBounds();
        var sw = bounds.getSouthWest();
        var ne = bounds.getNorthEast();
        var args = YDMap.utils.format(
            "{0},{1},{2},{3},{4}",
            YDMap.searchFunctionName,
            sw.lat(),
            sw.lng(),
            ne.lat(),
            ne.lng()
        ); 
        YDMap.setPrompt(map,"开始搜索当前区域中的湾逗商铺...");
        window.setTimeout(
            function(){
                YDMap.search(args,YDMap.searchCallback,map,YDMap.searchCallbackExceptionHandler);
            },
            0
        ); 
    },    
 
 //markers
 createGMarker:function(map,latlng,opt_opts){
  opt_opts = opt_opts || {name:"湾逗商铺"};

  var div = document.createElement("div"); 
 // div.style["padding"] = "5px";
  div.style["width"] = "48px";
  div.style["height"] = "40px";
  div.style["fontSize"] = "12px";
  div.style["color"] = "white";
  div.style["whiteSpace"] = "nowrap";
  div.style["cursor"] = "hand";
  div.style["filter"] = "FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://pages.anjukestatic.com/img/map/mm.png',sizingMethod='scale')"; //http://maps.gstatic.com/intl/zh-CN_ALL/mapfiles/marker.png
  
  div.style["position"] = "absolute";  
  var point = map.fromLatLngToDivPixel(latlng);
  div.style.left = point.x + "px";
  div.style.top = point.y - 40 + "px"; // adjust div top
        
  div.title = opt_opts.name;  
  
  /*VIP shop*/
  if(opt_opts.wdIndex >= 300){
   var img = document.createElement("img");
   img.src = YDMap.VIP_IMAGE;
   div.appendChild(img);
  }
  var span = document.createElement("span");
  span.style["styleFloat"] = "left";
  span.style.marginTop = "5px";
  span.style.marginLeft = "5px";
  span.style.marginRight = "5px";
  span.innerHTML = "湾逗商铺";
  div.appendChild(span);
  
  div.onclick = function(){
   //window.open(YDMap.utils.format("shoppage_vip.aspx?id={0}",opt_opts.shopId));
   
   GEvent.removeListener(map.YD_PROPERTY.startListener);
   GEvent.removeListener(map.YD_PROPERTY.endListener);
   map.savePosition();
   map.openInfoWindowHtml(
    latlng,
    this.title + YDMap.utils.format("<div style=\"width:400px\"><hr color=\"red\">地址:{0},<br/>商铺网址:http://www.0730.bz/shopStyle/shopStyle1/shoppage_vip.aspx?id={1} <a href=\"shoppage_vip.aspx?id={1}\" target=\"_blank\">前往</a></div>",opt_opts.shopAddress,opt_opts.shopId),
    {
     maxTitle:this.title,
     maxContent:opt_opts.shopBrief,
     onCloseFn:function(){
      map.returnToSavedPosition();
      window.setTimeout(
       function(){
        map.YD_PROPERTY.startListener = GEvent.addListener(map,"movestart",YDMap.mapDragStartEventHandler);
        map.YD_PROPERTY.endListener = GEvent.addListener(map,"moveend",YDMap.mapDragEndEventHandler);      
       },
       1500
      )
     }
    }
   );
   
   return false;
  }
  div.onmouseover = function(){
  // YDMap.showFullName(map,latlng,opt_opts.name);
   this.getElementsByTagName("span")[0].innerHTML = this.title;
   this.style.zIndex = 1;
  }
  div.onmouseout = function(){  
//   YDMap.hideFullName(map);
   this.getElementsByTagName("span")[0].innerHTML = "湾逗商铺";
   this.style.zIndex = undefined;
  }

  return div;
 },
    
 //add markers
 addMarkerDelay:50,//ms 
    startAddMarkers:function(map,addMarkersHandler,markers){
        window.setTimeout(
            function(){
                addMarkersHandler(map,markers,YDMap.addMarkerDelay);
            },
            0
        );
    },
    stopAddMarkers:function(map){
        if(map.YD_PROPERTY.addMarkersTimeout){
            window.clearTimeout(map.YD_PROPERTY.addMarkersTimeout);
            map.YD_PROPERTY.addMarkersTimeout = null;
        }
    },    
    addMarkers:function(map,markers,delay){ 
        if(markers.length > 0){
   //2009-11-4
            map.YD_PROPERTY.markerPane.appendChild(markers.pop(),5);
            map.YD_PROPERTY.addMarkersTimeout = window.setTimeout(
                function(){
                    YDMap.addMarkers(map,markers,delay);
                },
                delay
            ); 
        }
        else{
            map.YD_PROPERTY.addMarkerTimeout = null;
            // GLog.write(this.YD_PROPERTY.markerManager.getMarkerCount(18));
        }
    },   
    clearMarkers:function(map){
        window.setTimeout(
            function(){
    //2009-11-4 this is the second fastest way to remove all child nodes,No.1 is innerHTML = ""   
    while (map.YD_PROPERTY.markerPane.firstChild)
     map.YD_PROPERTY.markerPane.removeChild(map.YD_PROPERTY.markerPane.firstChild);
            },
            0
        );
    },
 
 showFullName:function(map,latlng,fullName,address,site){
  if(!map.YD_PROPERTY.shopNameDiv.parentNode.tagName)
   map.YD_PROPERTY.markerPane.appendChild(map.YD_PROPERTY.shopNameDiv);
  map.YD_PROPERTY.shopNameDiv.style.display = "block";
  map.YD_PROPERTY.shopNameDiv.innerHTML = fullName;    
  var point = map.fromLatLngToDivPixel(latlng);
  map.YD_PROPERTY.shopNameDiv.style.top = point.y - 40 + "px";
  map.YD_PROPERTY.shopNameDiv.style.left = point.x + 50 + "px"; 
 },    
 hideFullName:function(map){
  map.YD_PROPERTY.shopNameDiv.style.display = "none";
 },
    setPrompt:function(map,text){
  map.YD_PROPERTY.promptWnd.innerHTML = text;
    }
};


 


