var mapPicWidth = 2973;
var mapPicHeight = 2536;
var startLeft = -900;
var startTop = -1265;

var rangeWidth = -1 * (mapPicWidth - 850);
var rangeHeight = -1 * (mapPicHeight - 600);

var tempLeft = startLeft;
var tempTop = startTop;	

var cancelC = null;

 var Drag = {    
     x : 0, y : 0, o : null, moveF : null, endF : null
     , start : function (o) {    
         if (this.moveF) return;    
         var e = window.event || arguments.callee.caller.arguments[0], me = this;        
         this.o = o, this.x = e.clientX, this.y = e.clientY;
         o.setCapture && o.setCapture();
        
         if (document.attachEvent) {
             document.attachEvent('onmousemove', this.moveF = function (e) { me.move(e); });
             document.attachEvent('onmouseup', this.endF = function () { me.end(); });          
         } else if (document.addEventListener) {
             document.addEventListener('mousemove', this.moveF = function (e) { me.move(e); }, false);
             document.addEventListener('mouseup', this.endF = function () { me.end(); }, false);             
         }
         	
         tempLeft = startLeft;
		 tempTop = startTop;
		 
		 cancelC = null;
     },
     
     move : function (e) {     	 
         window.getSelection && window.getSelection().removeAllRanges();
         
         var me = this;
         var browser=navigator.appName;         
         var version=navigator.appVersion.split(";"); 
         var trim_Version=version[1].replace(/[ ]/g,""); 
   
         if(browser!="Microsoft Internet Explorer" || trim_Version!="MSIE6.0"){
            if(cancelC == null){
                 cancelC = 1;
             }  
         }         
                  
         var topctrl = document.getElementById("picContainer");
         var scrollL = 0;
         var scrollT = 0;
         
         if(!window.pageYOffset && !window.pageXOffset){
            scrollL = document.documentElement.scrollLeft;
            scrollT = document.documentElement.scrollTop;
         }else{
            scrollL = window.pageXOffset;
            scrollT = window.pageYOffset;
         }
         
         if(e.clientX + scrollL > topctrl.offsetLeft && 
            e.clientX + scrollL < topctrl.offsetLeft+topctrl.offsetWidth && 
            e.clientY + scrollT > topctrl.offsetTop && 
            e.clientY + scrollT < topctrl.offsetTop+topctrl.offsetHeight){				
		 }else{
		 	this.end();
		 	return;
		 }		 
         
         with (this.o.style) {
         					//cursor = "move";
         					
							tempLeft = tempLeft + (e.clientX - this.x);
							tempTop = tempTop + (e.clientY - this.y);														
							
							if(tempLeft >= 0){
							tempLeft = 0;            	
							}
							
							if(tempLeft <= rangeWidth){
							tempLeft = rangeWidth;
							}
							
							if(tempTop >= 0){
							tempTop = 0 ;            	
							}
							
							if(tempTop <= rangeHeight){
							tempTop = rangeHeight ;            	
							}
							
							this.x = e.clientX;
							this.y = e.clientY;
							
							left = tempLeft + "px ";
							top = tempTop + "px";	
         }         
         
     },
    
     end : function () {
         this.o.setCapture && this.o.releaseCapture();
         if (document.attachEvent) {
             document.detachEvent('onmousemove', this.moveF);
             document.detachEvent('onmouseup', this.endF);
                          
             //setTimeout(function(){
             //   document.detachEvent('onclick', cancelC);
             //},100);             
         } else if (document.addEventListener) {
             document.removeEventListener('mousemove', this.moveF, false);
             document.removeEventListener('mouseup', this.endF, false);
             
             //setTimeout(function(){
             //   document.removeEventListener('click', cancelC, false);
             //},100);                          
         }
         
         //this.o.style.cursor = "default";
         this.o = this.moveF = this.endF = null;
         
         
         startLeft = tempLeft;
		 startTop = tempTop
     }
    
 };
 
 function toggleTabs(index){     	 	
    var tab1 = $("metrobox1");
    var tab2 = $("metrobox2");
    var tab3 = $("metrobox3");
    
    var l1 = $("metraLink1");
    var l2 = $("metraLink2");
    var l3 = $("metraLink3");
    
    var li1 = $("li1");
    var li2 = $("li2");
    var li3 = $("li3");
 
 	switch(index){
 	    case 1: 	        
 	        tab1.style.display = "";
 	        tab2.style.display = "none";
 	        tab3.style.display = "none";
 	        
 	        l1.style.backgroundImage = "url(../images/tab_on.gif)";
 	        l1.style.color = "#000000";
 	        l2.style.backgroundImage = "url(../images/tab_off.gif)";
 	        l2.style.color = "#888888";
 	        l3.style.backgroundImage = "url(../images/tab_off.gif)";
 	        l3.style.color = "#888888"; 	
 	        
 	        li1.className = "tabs_on";  
 	        li2.className = "tabs_off";  
 	        li3.className = "tabs_off";  
 	    break;
 	    case 2:
 	        tab1.style.display = "none";
 	        tab2.style.display = "";
 	        tab3.style.display = "none";
 	        
 	        l1.style.backgroundImage = "url(../images/tab_off.gif)";
 	        l1.style.color = "#888888";
 	        l2.style.backgroundImage = "url(../images/tab_on.gif)";
 	        l2.style.color = "#000000";
 	        l3.style.backgroundImage = "url(../images/tab_off.gif)";
 	        l3.style.color = "#888888";
 	        
 	        li1.className = "tabs_off";  
 	        li2.className = "tabs_on";  
 	        li3.className = "tabs_off";  
 	    break;
 	    case 3:
 	        tab1.style.display = "none";
 	        tab2.style.display = "none";
 	        tab3.style.display = "";
 	        
 	        l1.style.backgroundImage = "url(../images/tab_off.gif)";
 	        l1.style.color = "#888888";
 	        l2.style.backgroundImage = "url(../images/tab_off.gif)";
 	        l2.style.color = "#888888";
 	        l3.style.backgroundImage = "url(../images/tab_on.gif)";
 	        l3.style.color = "#000000";//448ac9
 	        
 	        li1.className = "tabs_off";  
 	        li2.className = "tabs_off";  
 	        li3.className = "tabs_on";  
 	    break;
 	} 	
 }
 
 function setMetroNode(name){
    if(targetText == ""){
        targetText = "startNode";
    }
    
    if(targetText == "startNode"){
        $("startNode").value = name;
    
        $("r2").checked = true;        
        
        targetText = "arvNode";    
    }else{
        $("arvNode").value = name;
    
        $("r1").checked = true;
        
        targetText = "startNode";    
    }
 }
 
 function initPage(){ 
    $("r1").checked = true;    
    
    targetText = "startNode";
 }
 
 var targetText = "";
 
 function clickCheck(){
    if(cancelC == null){
        return;
    }
 
    cancelC = null;
    var e = window.event || arguments.callee.caller.arguments[0];
    if(!e.preventDefault){
        e.returnValue  = false;
     }else{
        e.preventDefault();
     }
 }
 
 function startSearch(){    
    var url = SHANGHAI_METRO_SEARCH_URL + "?";
 
    var start = $("startNode").value;
    var arv = $("arvNode").value;
    var now = new Date();
    
    if(start == "" || arv == ""){
        alert(HYP_MESSAGE["6001"]);
        return;
    }
    
    start = encodeURIComponent(start);
    arv = encodeURIComponent(arv);
    
    url += "dep_node=";
    url += start;
    url += "&arv_node=";
    url += arv;
    url += "&via_node01=&via_node02=&via_node03=";    
    url += "&year=";
    url += now.getFullYear();
    url += "&month=";
    url += (now.getMonth() + 1 );
    url += "&day=";
    url += now.getDate();
    url += "&hour=";
    url += now.getHours();
    url += "&minute=";
    url += now.getMinutes();
    url += "&search_type=2&sort=0&max_route=5&search_target=route&sum_target=7&valid_isFromSuggest=S%3A1%3BA%3A1";
    if( $( 'utrexprs' ).checked == false ){
		url += "&utrexprs=off";
    }else{
		url += "&utrexprs=on";
    }
    url += "&suggest_start_spot=";
    url += start;
    url += "&suggest_end_spot=";
    url += arv;
    
    // TODO:
    window.location.href = url;
 }
 
 function setTargetText(v){
    if(v == "1"){
        targetText = "startNode";
    }else{
        targetText = "arvNode";
    }
 }