//var TObj = new TravelObj();

var vectorModel = new VectorModel();


function TravelObj() {}

//--------------------------------------------------------------
// TravelObj.Clear --------------------------------------
TravelObj.Clear = function(MapID) {
    var Mcode = Map.getMcodeFromMapID(MapID);
    var Moptions = Map.MapObj[MapID]
    //-----------------------------------------
    var TravelListSolution_container = document.getElementById("TravelSolution_DIVcont");
    TravelListSolution_container.innerHTML = "";
    //-----------------------------------------
    var Container = document.getElementById(Mcode + "^Map^" + "MapImage_TOI");

    var Child
    var elemType;
    var counter = -1
    while (counter < Container.childNodes.length - 1) {
        counter += 1
        Child = Container.childNodes[counter];
        if (!Child.id) { continue; }
        // elemType = Child.id.split("^")[1].split(">")[0]
        elemType = Child.id.split("^")[1]
        if (!elemType) { continue; }
        elemType = elemType.split(">")[0]
        if (elemType == "MWp" || elemType == "MRp" || elemType == "MTc" || elemType == "MLk") {
            Container.removeChild(Child);
            counter -= 1
        }
    }
    //-----------------------------------------
    document.getElementById(Mcode + "^MapTravelLine").innerHTML = "";     
}

//==============================================================
// TravelObj.MapCar ============================================
TravelObj.MapCar=function(){}
TravelObj.MapCar.MouseIsOver=false;
TravelObj.MapCar.HiddenTimer=0;
//--------------------------------------------------------------
// TravelObj.MapCar.Clear --------------------------------------
TravelObj.MapCar.Clear = function(_Container) {
    if (!_Container) { return; }
    var Mcode = _Container.id.split("^")[0];      
    var Container = _Container;
    var Child = document.getElementById(Mcode + "^MTc>")
    Container.removeChild(Child);
}
//--------------------------------------------------------------
// TravelObj.MapCar.Hidden  ------------------------------------
TravelObj.MapCar.Hidden = function(ElemID ){ 
    if (!ElemID){return;}
    var Mcode=ElemID.split("^")[0];
    var MapID=Map.getMapIDFromCode(Mcode);
    
    if(TravelObj.MapCar.MouseIsOver){return}
    //var Mcode=ElemID.split("^")[0];
    document.getElementById(Mcode + "^MTc>").style.visibility= "hidden";
    document.getElementById("PopUpTip").style.visibility= "hidden";
    TravelObj.MapTravel.LostFocus(ElemID)
   // var RoadOver = document.getElementById(Mcode + "^MRd>" + R + "|" + RR );
    //RoadOver.setAttribute("stroke", TravelObj.MapTravel.LineColor);
}
//--------------------------------------------------------------
// TravelObj.MapCar.Draw --------------------------------------
TravelObj.MapCar.Draw = function(MapID,Tdata,_Container,UseFor ){
    if (!Tdata.visible){return;} 
    var Mcode = Map.getMapCodeFromID(MapID);                                 
    var Container = _Container;
    var Handler_innerHTML="onclick='TravelObj.MapCar.onclick(this)'"+
                        " onmouseover='TravelObj.MapCar.onmouseover(this)'"+
                        " onmouseout='TravelObj.MapCar.onmouseout(this)'"  
                        
     
    var MapCarSize=0;
    var Usecursor="";
    var UseHandler_innerHTML="";                          
    if (UseFor=="Map"){ 
        MapCarSize=9;
        Usecursor="pointer";
        UseHandler_innerHTML=Handler_innerHTML;
    }else{
        MapCarSize=6;
        Usecursor="default";
        UseHandler_innerHTML="";
    }
    var InnerHTML = "<img id='"+ Mcode +"MTc>' class='MapCar'  style='cursor:"+Usecursor +"; "+
                                "left: 0px; top: 0px; "+
                                "width:"+parseInt(MapCarSize)+"px; height:"+parseInt(MapCarSize)+"px;'"+
                                "src=\'Images/RoadPoint1.png';"+UseHandler_innerHTML+"/>";
                                
   // var TravelCar_innerHTML="<img id='MTc>'style='position: absolute; display: block; z-index: 1011; visibility: hidden; "+
  //                          "padding: 0px; margin: 0px; border: none; left:0px; top:0px;' src=\'Images/RoadPoint1.png'/>";
    Container.innerHTML += InnerHTML;                             
} 
//--------------------------------------------------------------
// TravelObj.MapCar.onmouseover ----------------------------
TravelObj.MapCar.onmouseover=function(event_elem){
    if (!event_elem.id){return;}
    var Mcode=event_elem.id.split("^")[0];
    var MapID=Map.getMapIDFromCode(Mcode);
    if (Map.MapObj[MapID].ActiveTools!="Arrow"){return}
    TravelObj.MapCar.MouseIsOver=true;
}    
//--------------------------------------------------------------
// TravelObj.MapCar.onmouseover ----------------------------
TravelObj.MapCar.onmouseout=function(event_elem){
    if (!event_elem.id){return;}
    var Mcode=event_elem.id.split("^")[0];
    var MapID=Map.getMapIDFromCode(Mcode);
    if (Map.MapObj[MapID].ActiveTools!="Arrow"){return}
    TravelObj.MapCar.MouseIsOver=false;
}
//--------------------------------------------------------------
  
//==============================================================
// TravelObj.MapRoadPoint ======================================
TravelObj.MapRoadPoint=function(){}
TravelObj.MapRoadPoint.mouseISover=false;
//--------------------------------------------------------------
// TravelObj.MapRoadPoint.Clear --------------------------------
TravelObj.MapRoadPoint.Clear = function(_Container ){
//    var Container = _Container;
//    var Child
//    var counter=-1
//    while (counter < Container.childNodes.length-1){
//        counter+=1
//        Child = Container.childNodes[counter];
//        if (!Child.id ){return}
//        if (Child.id.substr(0,4)=="MRp>"){ 
//            Container.removeChild(Child);
//            counter-=1
//        }
//    }
    // fix by TravelObj.MapTravel.Clear
}
//--------------------------------------------------------------
// TravelObj.MapRoadPoint.Draw ---------------------------------
TravelObj.MapRoadPoint.Draw = function(MapID,Tdata,_Container ,_rectMeter,_rectPix,UseFor){
    
    //Container.innerHTML="";
    if (!Tdata.visible){return;}
    var Mcode = Map.getMapCodeFromID(MapID);
    
    var Container = _Container;
    var RectMapMeter = _rectMeter;
    var RectMapPix = _rectPix; 
    var RoadLabel;
    var RoadPoint;
    var RoadPointPIX;
    var TravelChkBound ="";
    var InnerHTML ="";
   // var Handler_innerHTML="onclick='TravelMapWayPoint_Handler(event)'"+
   //                     " onmouseover='TravelMapWayPoint_Handler(event)'"+
   //                     " onmouseout='TravelMapWayPoint_Handler(event)'"
    var Handler_innerHTML="onclick='TravelObj.MapRoadPoint.onclick(this)'"+
                        " onmouseover='TravelObj.MapRoadPoint.onmouseover(this)'"+
                        " onmouseout='TravelObj.MapRoadPoint.onmouseout(this)'"                        

    var RoadPointSize=0;
    var Usecursor="";
    var UseHandler_innerHTML="";
    if (UseFor=="Map"){ 
        RoadPointSize=8;
        Usecursor="pointer";
        UseHandler_innerHTML=Handler_innerHTML;
    }else{
        RoadPointSize=6;
        Usecursor="default";
        UseHandler_innerHTML="";
    } 
     //--------------------------------------------------------------
    var TravelRectMap = new MapRect( Tdata.Bound.MinX, Tdata.Bound.MaxY, Tdata.Bound.MaxX,Tdata.Bound.MinY) 
    TravelChkBound =TravelObj.ChkRectIntersection(RectMapMeter,TravelRectMap)
    if (TravelChkBound=="Out"){return;}
    RoutesChkBoundIsNeed = false ; //"Contained"
    if (TravelChkBound=="Intersected"){RoutesChkBoundIsNeed = true}
    //--------------------------------------------------------------  
    for (R in Tdata.Routes){      
        var RouteRectMap = new MapRect( Tdata.Routes[R].Bound.MinX, Tdata.Routes[R].Bound.MaxY, Tdata.Routes[R].Bound.MaxX,Tdata.Routes[R].Bound.MinY) 
        if (RoutesChkBoundIsNeed){
            RouteChkBound =TravelObj.ChkRectIntersection(RectMapMeter,RouteRectMap);
            if (RouteChkBound=="Out"){continue;}
            RoadsChkBoundIsNeed = false ;
            if (RouteChkBound=="Intersected"){RoadsChkBoundIsNeed = true}  
        }else{
            RoadsChkBoundIsNeed = false ; 
        } 
        //--------------------------------------------------------------    
        for (RR in Tdata.Routes[R].Roads){
            RoadPoint=new MapPoint(Tdata.Routes[R].Roads[RR].Links[0].Points[0].x, Tdata.Routes[R].Roads[RR].Links[0].Points[0].y);
            if (RoadsChkBoundIsNeed){
                if (!RectMapMeter.contain(RoadPoint)){continue;}
            }
            RoadPointPIX = RoadPoint.transform(RectMapMeter, RectMapPix);   
            RoadPointPIX.x =parseInt(RoadPointPIX.x -(RoadPointSize/2));
            RoadPointPIX.y =parseInt(RoadPointPIX.y -(RoadPointSize/2)); 
            RoadLabel=TravelObj.InstructionLabel.Road(Tdata,R,RR) ;
            InnerHTML+= "<img id='"+ Mcode +"MRp>" + R + "|" + RR + "' class='MapRoadPoint'  style='cursor:"+Usecursor +"; "+
                                "left: " + parseInt(RoadPointPIX.x) + "px; top: " + parseInt(RoadPointPIX.y) + "px; "+
                                "width:"+parseInt(RoadPointSize)+"px; height:"+parseInt(RoadPointSize)+"px;'"+
                                "src=\'Images/RoadPoint2.png';"+UseHandler_innerHTML+"/>";

        }
    }
//    if (UseFor=="Map"){ 
//        InnerHTML=InnerHTML.replace(/<UseFor>/g, Handler_innerHTML);
//    }else{
//        InnerHTML=InnerHTML.replace(/<UseFor>/g,"");
//    }        
   Container.innerHTML+=InnerHTML;    
}
//--------------------------------------------------------------
// TravelObj.MapRoadPoint.onmouseover ----------------------------
TravelObj.MapRoadPoint.onmouseover=function(event_elem){
    if (!event_elem.id){return;}
    var Mcode=event_elem.id.split("^")[0];
    var MapID=Map.getMapIDFromCode(Mcode);
    if (Map.MapObj[MapID].ActiveTools!="Arrow"){return}
    
    
    var objtype = event_elem.id.split("^")[1].split(">")[0]
  
    var R=parseInt(event_elem.id.split("^")[1].split(">")[1].split("|")[0]);
    var RR=parseInt(event_elem.id.split("^")[1].split(">")[1].split("|")[1]);
          
    var CursorPos = Map.getElem.Centre(event_elem);
     
    event_elem.style.border="dotted 1px blue";
    document.getElementById(Mcode+"^MTc>").style.visibility= "hidden";
        document.getElementById("PopUpTip").style.visibility= "visible";
        document.getElementById("PopUpTip").style.left = CursorPos.x+10+"px"; 
        document.getElementById("PopUpTip").style.top = CursorPos.y+10+"px";

    RoadDirectionLabel = TravelData.Routes[R].Roads[RR].Info.Direction 
    RoadLabel= TravelObj.InstructionLabel.Road(TravelData,R,RR) ;
    var Info_innerHTML= "<img src=\'Images/Road_" + RoadDirectionLabel +".png'" +
                        "style='position: static; display:inline; float: left; width:20px; height: 20px; '/>" 
    Info_innerHTML+="<div style='position: static; display: inline; float: left;vertical-align:middle;"+
                    "padding-left: 3px;  padding-right: 3px;padding-top: 3px; padding-bottom: 3px;"+
                    "width: auto;  height: 20px;'>"
    Info_innerHTML+= "&nbsp;" +RoadLabel;
    Info_innerHTML+="</div>"; 
    
    document.getElementById("PopUpTip_Info").innerHTML =  Info_innerHTML;
    document.getElementById("PopUpTip_Title").innerHTML =  "Drive Instruction" + " ...";
    TravelObj.MapRoadPoint.mouseISover=true;
}
//--------------------------------------------------------------
// TravelObj.MapRoadPoint.onmouseout ----------------------------
TravelObj.MapRoadPoint.onmouseout=function(event_elem){
    if (!event_elem.id){return;}
    var Mcode=event_elem.id.split("^")[0];
    var MapID=Map.getMapIDFromCode(Mcode);
    if (Map.MapObj[MapID].ActiveTools!="Arrow"){return}
    

  //  var Mcode=event_elem.id.split("^")[0];
   // var objtype = event_elem.id.split("^")[1].split(">")[0]
        event_elem.style.border="none";
      //  try {objLRt06.style.color="#0065B3";}catch(err){}
      //  try {objLRt09.style.color="#0065B3";}catch(err){}
        document.getElementById("PopUpTip").style.visibility= "hidden";
    TravelObj.MapRoadPoint.mouseISover=false;
}
//--------------------------------------------------------------
// TravelObj.MapRoadPoint.onmouseout ----------------------------
TravelObj.MapRoadPoint.onclick=function(event_elem){
    if (!event_elem.id){return;}
    var Mcode=event_elem.id.split("^")[0];
    var MapID=Map.getMapIDFromCode(Mcode);
    if (Map.MapObj[MapID].ActiveTools!="Arrow"){return}

}
//--------------------------------------------------------------


//==============================================================
// TravelObj.MapWayPoint =======================================
TravelObj.MapWayPoint=function(){}
//--------------------------------------------------------------
// TravelObj.MapWayPoint.Clear -----------------------------------
TravelObj.MapWayPoint.Clear = function(_Container ){
//    var Container = _Container;
//    var Child
//    var counter=-1
//    while (counter < Container.childNodes.length-1){
//        counter+=1
//        Child = Container.childNodes[counter];
//        if (!Child.id ){return}
//        if (Child.id.substr(0,4)=="MWp>"){ 
//            Container.removeChild(Child);
//            counter-=1
//        }
//    }
    // fix by TravelObj.MapTravel.Clear
}
//--------------------------------------------------------------
// TravelObj.MapWayPoint.Draw -----------------------------------
TravelObj.MapWayPoint.Draw = function(MapID,Tdata,_Container ,_rectMeter,_rectPix,UseFor){
    if (!Tdata.visible){return;}
    if (!Tdata.WayPoints) {return;} 
    var Mcode = Map.getMapCodeFromID(MapID);
    
    var Container = _Container;
    var RectMapMeter = _rectMeter;
    var RectMapPix = _rectPix;     
    var WP_PointMeter
    var WP_PointPixel
    var InnerHTML ="";
//    var Handler_innerHTML=" onclick='TravelMapWayPoint_Handler(event)'"+
//                    " onmouseover='TravelMapWayPoint_Handler(event)'"+
//                    " onmousemove='TravelMapWayPoint_Handler(event)'"+
//                    " onmouseout='TravelMapWayPoint_Handler(event)'" 
    var Handler_innerHTML=" onclick='TravelObj.MapRoadPoint.onclick(this)'"+
                    " onmouseover='TravelObj.MapWayPoint.onmouseover(this)'"+
                    " onmouseout='TravelObj.MapWayPoint.onmouseout(this)'"                    
                    
                    
    var WayPointSize=0;
    var Usecursor="";
    var UseHandler_innerHTML=""
    if (UseFor=="Map"){ 
        WayPointSize=30;
        Usecursor="pointer";
        UseHandler_innerHTML=Handler_innerHTML;
    }else{
        WayPointSize=20;
        Usecursor="default";
        UseHandler_innerHTML="";
    }
    for (ww in Tdata.WayPoints) {
        SymbolName="TRI_WayPoint_WP.png"
        if (ww==0){SymbolName="TRI_WayPoint_From.png"};
        if (ww== Tdata.WayPoints.length-1 && ww!=0){SymbolName="TRI_WayPoint_To.png"};
        if (Tdata.WayPoints[0].Label== Tdata.WayPoints[Tdata.WayPoints.length-1].Label && ww== Tdata.WayPoints.length-1 && ww!=0){
            SymbolName="TRI_WayPoint_FromTo.png"
        };        
        var WP_PointMeter = new MapPoint(Tdata.WayPoints[ww].X, Tdata.WayPoints[ww].Y)
        if (!RectMapMeter.contain(WP_PointMeter)){continue;}
        WP_PointPixel = WP_PointMeter.transform(RectMapMeter, RectMapPix);   
        WP_PointPixel.x =parseInt(WP_PointPixel.x -(WayPointSize/2));
        WP_PointPixel.y =parseInt(WP_PointPixel.y -(WayPointSize/2)); 
        
        InnerHTML+=  "<img id=\'"+ Mcode +"MWp>"+ ww +"' class='MapWayPoint' style='cursor:"+Usecursor +"; "+
                            "left: " + WP_PointPixel.x + "px; top: " + WP_PointPixel.y + "px; "+
                            "width:"+parseInt(WayPointSize)+"px; height:"+parseInt(WayPointSize)+"px;'"+
                            "src=\'Images_MapSymbol/" + SymbolName + "';"+UseHandler_innerHTML+"/>";
                            

   } 
Container.innerHTML+=InnerHTML;    
}
//--------------------------------------------------------------
// TravelObj.MapWayPoint.onmouseover ----------------------------
TravelObj.MapWayPoint.onmouseover=function(event_elem){
    if (!event_elem.id){return;}
    var Mcode=event_elem.id.split("^")[0];
    var MapID=Map.getMapIDFromCode(Mcode);
    if (Map.MapObj[MapID].ActiveTools!="Arrow"){return}    
    if (TravelObj.MapRoadPoint.mouseISover){return;}
    //var Mcode=event_elem.id.split("^")[0];
    var objtype = event_elem.id.split("^")[1].split(">")[0]

        var W=parseInt(event_elem.id.split("^")[1].split(">")[1]);
        var objLRt06 = document.getElementById("LRt-06>"+ W );
        var objLRt09 = document.getElementById("LRt-09>"+ parseInt(W-1) ); 
     var CursorPos = Map.getElem.Centre(event_elem);
     
    event_elem.style.border="dotted 1px blue";
    document.getElementById(Mcode+"^MTc>").style.visibility= "hidden";
        document.getElementById("PopUpTip").style.visibility= "visible";
        document.getElementById("PopUpTip").style.left = CursorPos.x+10+"px"; 
        document.getElementById("PopUpTip").style.top = CursorPos.y+10+"px";       
            try {objLRt06.style.color="#FF9A00";}catch(err){}
            try {objLRt09.style.color="#FF9A00";}catch(err){}
            ToUseImage="Route_SetWayPoint.png"  
            if (W==0) {
                ToUseImage="Route_SetFromHere.png"
            } else if (W == TravelData.WayPoints.length-1) { 
                ToUseImage="Route_SetToHere.png"
            } 
            var Info_innerHTML= "<img src=\'Images/"+ToUseImage+"'" +
                    "style='position: static; display:inline; float: left; width:20px; height: 20px; '/>"  
            Info_innerHTML+="<div style='position: static; display: inline; float: left;vertical-align:middle;"+
                            "padding-left: 3px;  padding-right: 3px;padding-top: 3px; padding-bottom: 3px;"+
                            "width: auto;  height: auto;'>"+
                             GetZeroFrontNumber(W+1,2) + "    " + TravelData.WayPoints[W].Label +
                            "<br/>"+ TravelData.WayPoints[W].Time + "  ["+ GDI_DynamicLabel ['DepartureTime'] + "]" + "<br/>"+
                             TravelData.WayPoints[W].Time + "  ["+ GDI_DynamicLabel ['ArrivalTime'] + "]" ; 
            Info_innerHTML+="</div>"; 
            Info_innerHTML+="</div>";                           
            document.getElementById("PopUpTip_Info").innerHTML =  Info_innerHTML;
            document.getElementById("PopUpTip_Title").innerHTML =  "Way Point Info" + " ...";                        
}    
//--------------------------------------------------------------
// TravelObj.MapWayPoint.onmouseout ----------------------------
TravelObj.MapWayPoint.onmouseout=function(event_elem){
    if (!event_elem.id){return;}
    var Mcode=event_elem.id.split("^")[0];
    var MapID=Map.getMapIDFromCode(Mcode);
    if (Map.MapObj[MapID].ActiveTools!="Arrow"){return} 
        var W=parseInt(event_elem.id.split(">")[1]);
        var objLRt06 = document.getElementById("LRt-06>"+ W );
        var objLRt09 = document.getElementById("LRt-09>"+ parseInt(W-1) );    
    event_elem.style.border="none";
    try {objLRt06.style.color="#0065B3";}catch(err){}
    try {objLRt09.style.color="#0065B3";}catch(err){}
    document.getElementById("PopUpTip").style.visibility= "hidden";
    //return ; 
}
//--------------------------------------------------------------
// TravelObj.MapWayPoint.onclick ----------------------------
TravelObj.MapRoadPoint.onclick=function(event_elem){
    if (!event_elem.id){return;}
    var Mcode=event_elem.id.split("^")[0];
    var MapID=Map.getMapIDFromCode(Mcode);
    if (Map.MapObj[MapID].ActiveTools!="Arrow"){return} 

}
//--------------------------------------------------------------

//==============================================================
// TravelObj.MapTravel =========================================
TravelObj.MapTravel=function(){}

TravelObj.MapTravel.LineWith=2       
TravelObj.MapTravel.LineColor="#00FF00"  
TravelObj.MapTravel.LineWithFocus=2       
TravelObj.MapTravel.LineColorFocus="blue" 


//--------------------------------------------------------------
// TravelObj.MapTravel.Clear -----------------------------------
TravelObj.MapTravel.Clear = function(Container) {
    if (!Container.id) { return; }
    var Mcode = Container.id.split("^")[0];

    var Child
    var elemType;
    var counter = -1
    while (counter < Container.childNodes.length - 1) {
        counter += 1
        Child = Container.childNodes[counter];
        if (!Child.id) { continue; }
        // elemType = Child.id.split("^")[1].split(">")[0]
        elemType = Child.id.split("^")[1]
        if (!elemType) {continue;}
        elemType = elemType.split(">")[0]

        if (elemType == "MLk") {
            Container.removeChild(Child);
            counter -= 1
        }
    }
    document.getElementById("M000^MapTravelLine").innerHTML = "";
  //  var Child = document.getElementById(Mcode + "^MTr>" )
  //  Container.removeChild(Child);
}



//--------------------------------------------------------------
// TravelObj.MapTravel.GetFocus -----------------------------------
TravelObj.MapTravel.GetFocus = function(RoadID ){
    var RoadOver = document.getElementById(RoadID);
    if (!RoadOver) { return false; }
    RoadOver.setAttribute("stroke", TravelObj.MapTravel.LineColorFocus);
}
//--------------------------------------------------------------
// TravelObj.MapTravel.LostFocus -----------------------------------
TravelObj.MapTravel.LostFocus = function(RoadID) {
    var RoadOver = document.getElementById(RoadID);
    if (!RoadOver) { return false; }
    RoadOver.setAttribute("stroke", TravelObj.MapTravel.LineColor);
}




//--------------------------------------------------------------
// TravelObj.MapTravel.Draw ------------------------------------
TravelObj.MapTravel.Draw = function(MapID,Tdata,_Container ,_rectMeter,_rectPix, UseFor){
    if (!Tdata.visible){return;}
    var Mcode = Map.getMapCodeFromID(MapID);
    var Container = _Container;
    var ContainerLine=document.getElementById("M000^MapTravelLine");
    document.getElementById("M000^MapTravelLine").innerHTML="";
    var RectMapMeter = _rectMeter;
    var RectMapPix = _rectPix;    

   // var TravelLineWith=_LineWith        //2
   // var TravelLineColor=_LineColor     //"#00FF00"; //jg.setColor("#ffff66");    
     
    var TravelChkBound ="";
    var TravelRectMap;
    var RouteChkBound ="";
    var RoutesChkBoundIsNeed = false ;
    var RouteRectMap ;
    
    var RoadChkBound ="";
    var RoadsChkBoundIsNeed = false ;
    var RoadRectMap;
    var LinkChkBound ="";
    var LinksChkBoundIsNeed = false ;
    var LinkRectMap;
    var LinkRectPix;
    var SegmentChkBound ="";
    var SegmentsChkBoundIsNeed = false ; 
    //--------------------------------------------------------------
   var x=0;
   var y=0;
   var z=0;
   var w=0;
   var h=0;
   var TmpPoint;
   
    var ExpandInPixel=TravelObj.MapTravel.LineWith*2
    //--------------------------------------------------------------

    var mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    ContainerLine.appendChild(mySvg);
    mySvg.setAttribute("version", "1.1");    
    //--------------------------------------------------------------
    TravelRectMap = new MapRect( Tdata.Bound.MinX, Tdata.Bound.MaxY, Tdata.Bound.MaxX,Tdata.Bound.MinY) 
    TravelChkBound =TravelObj.ChkRectIntersection(RectMapMeter,TravelRectMap)
    if (TravelChkBound=="Out"){return;}
    RoutesChkBoundIsNeed = false ;
    if (TravelChkBound=="Intersected"){RoutesChkBoundIsNeed = true}
    //--------------------------------------------------------------   
     //--------------------------------------------------------------
   // var Handler_innerHTML= " onmouseover='RouteOver(event)' onmousemove='RouteOver(event)' onmouseout='RouteOver(event)' "
    var Handler_innerHTML=" onclick='TravelObj.MapTravel.onclick(this)'"+
                            " onmouseover='TravelObj.MapTravel.onmouseover(this)'"+
                            " onmouseout='TravelObj.MapTravel.onmouseout(this)'"  +
                            " onmousemove='TravelObj.MapTravel.onmousemove(event)'" 
                         
    
    var Link_innerHTML= new Array();
    //--------------------------------------------------------------Travel Route
    for (R in Tdata.Routes){                            
        RouteRectMap = new MapRect( Tdata.Routes[R].Bound.MinX, Tdata.Routes[R].Bound.MaxY, Tdata.Routes[R].Bound.MaxX,Tdata.Routes[R].Bound.MinY) 
        if (RoutesChkBoundIsNeed){
            RouteChkBound =TravelObj.ChkRectIntersection(RectMapMeter,RouteRectMap);
            if (RouteChkBound=="Out"){continue;}
            RoadsChkBoundIsNeed = false ;
            if (RouteChkBound=="Intersected"){RoadsChkBoundIsNeed = true}  
        }else{
            RoadsChkBoundIsNeed = false ; 
        }                            
        //--------------------------------------------------------------Travel Route Road                            
        for (RR in Tdata.Routes[R].Roads){  
            RoadRectMap = new MapRect(Tdata.Routes[R].Roads[RR].Bound.MinX,Tdata.Routes[R].Roads[RR].Bound.MaxY,Tdata.Routes[R].Roads[RR].Bound.MaxX,Tdata.Routes[R].Roads[RR].Bound.MinY)                 
            if (RoadsChkBoundIsNeed){
                RoadChkBound =TravelObj.ChkRectIntersection(RectMapMeter,RoadRectMap);
                if (RoadChkBound=="Out"){continue;}
                LinksChkBoundIsNeed = false ;
                if (RoadChkBound=="Intersected"){LinksChkBoundIsNeed = true}  
            }else{
                LinksChkBoundIsNeed = false ; 
            }           
            //------------------------------------------------------- 
            var LinkPointsPixel= new Array();
            var PrePoint= new MapPoint(0,0,0);
            //-------------------------------------------------------Travel Route Road Link
            for (LLL in Tdata.Routes[R].Roads[RR].Links){  
                LinkRectMap = new MapRect(Tdata.Routes[R].Roads[RR].Links[LLL].Bound.MinX,Tdata.Routes[R].Roads[RR].Links[LLL].Bound.MaxY,Tdata.Routes[R].Roads[RR].Links[LLL].Bound.MaxX,Tdata.Routes[R].Roads[RR].Links[LLL].Bound.MinY)                 
                if (LinksChkBoundIsNeed){
                    LinkChkBound =TravelObj.ChkRectIntersection(RectMapMeter,LinkRectMap);
                    if (LinkChkBound=="Out"){continue;}
                    SegmentsChkBoundIsNeed = false ;
                    if (LinkChkBound=="Intersected"){SegmentsChkBoundIsNeed = true}  
                }else{
                    SegmentsChkBoundIsNeed = false ; 
                }
                LinkRectPix = LinkRectMap.transform(RectMapMeter,RectMapPix);
                LinkRectPix = LinkRectPix.expandPix(ExpandInPixel)
                w= parseInt(LinkRectPix.w())
                h= parseInt(LinkRectPix.h())
                
                Link_innerHTML[Link_innerHTML.length] = "<div id='" + Mcode + "MLk>" + R + "|" + RR + "|" + LLL + "' class='MapRoadLink' style='"+
                                    "left: "+ parseInt(LinkRectPix.x1) + "px; top:" +  parseInt(LinkRectPix.y1 ) + "px; "+
                                    "width:" + w+ "px; height:" + h + "px;' <UseFor> ></div>"
                //-------------------------------------------------------Travel Route Road Link Segment
                for (pppp in Tdata.Routes[R].Roads[RR].Links[LLL].Points){
                    x=Tdata.Routes[R].Roads[RR].Links[LLL].Points[pppp].x;
                    y=Tdata.Routes[R].Roads[RR].Links[LLL].Points[pppp].y;
                    //z=Tdata.Routes[R].Roads[RR].Links[LLL].Points[pppp].z;
                    TmpPoint= new MapPoint(x,y,0)
                 //   if (TmpPoint.IsWithInRec(RectMapMeter)){
                        TmpPoint=TmpPoint.transform(RectMapMeter,RectMapPix);
                        TmpPoint=TmpPoint.ToInteger();
                        if (TmpPoint.IsWithInTolerance(PrePoint,0)){
                            LinkPointsPixel[LinkPointsPixel.length] =TmpPoint;
                            PrePoint=TmpPoint;
                        }
                  //  }
                }
                //------------------------------------------------------- 
            } 
            //-----------------------
            var PlineArrayStr= new Array();
            for (i=0;i<LinkPointsPixel.length;i++){
                PlineArrayStr[i]=LinkPointsPixel[i].x +","+LinkPointsPixel[i].y+","
            }
            var PlineStr=PlineArrayStr.join("") ;
            PlineStr=PlineStr.substring(0,PlineStr.length-1)
            
            //-----------------------
            var myPoly = vectorModel.createElement("polyline");
            myPoly.setAttribute("points",PlineStr);
            myPoly.setAttribute("stroke", TravelObj.MapTravel.LineColor);
            myPoly.setAttribute("stroke-width", TravelObj.MapTravel.LineWith+"px");
            myPoly.setAttribute("fill","none");
            myPoly.setAttribute("id",Mcode + "MRd>" + R + "|" + RR );
            mySvg.appendChild(myPoly);

        }
    }
    //var InnerHTML= Travel_innerHTML.join("") //+  " </div>";
    var InnerHTML= Link_innerHTML.join("") 

    if (UseFor=="Map"){ 
        InnerHTML=InnerHTML.replace(/<UseFor>/g, Handler_innerHTML);
    }else{
        InnerHTML=InnerHTML.replace(/<UseFor>/g,"");
    }
    Container.innerHTML += InnerHTML;
    PlineArrayStr=null;
    myPoly=null;
}      
//--------------------------------------------------------------
// TravelObj.MapTravel.onmouseover ----------------------------
TravelObj.MapTravel.onmouseover=function(event_elem){
    if (!event_elem.id){return;}
    var Mcode=event_elem.id.split("^")[0];
    var MapID=Map.getMapIDFromCode(Mcode);
    if (Map.MapObj[MapID].ActiveTools!="Arrow"){return}  
    //var objtype = event_elem.id.split("^")[1].split(">")[0]
        var Vals = event_elem.id.split("^")[1].split(">")[1].split("|");
        var R=parseInt(Vals[0])
        var RR=parseInt(Vals[1])
      //  var LLL=parseInt(Vals[2])
    TravelObj.MapTravel.GetFocus(Mcode + "^MRd>" + R + "|" + RR)
    clearTimeout(TravelObj.MapCar.HiddenTimer)
}
//--------------------------------------------------------------
// TravelObj.MapTravel.onmouseout ----------------------------
TravelObj.MapTravel.onmouseout=function(event_elem){
    if (!event_elem.id){return;}
    var Mcode=event_elem.id.split("^")[0];
    var MapID=Map.getMapIDFromCode(Mcode);
    if (Map.MapObj[MapID].ActiveTools!="Arrow"){return} 
        var Vals = event_elem.id.split("^")[1].split(">")[1].split("|");
        var R=parseInt(Vals[0])
        var RR=parseInt(Vals[1])
    TravelObj.MapCar.HiddenTimer = setTimeout( "TravelObj.MapCar.Hidden('"+ Mcode + "^MRd>" + R + "|" + RR +"')" , 200 );
} 
//--------------------------------------------------------------
// TravelObj.MapTravel.onmousemove ----------------------------
TravelObj.MapTravel.onmousemove=function(e){
    var EventTrigger= GetEventTrigger (e)
    if (!EventTrigger.id){return;}
    var Mcode=EventTrigger.id.split("^")[0];
    var MapID=Map.getMapIDFromCode(Mcode);
    if (Map.MapObj[MapID].ActiveTools!="Arrow"){return}  
    //var objtype = event_elem.id.split("^")[1].split(">")[0]
        var Vals = EventTrigger.id.split("^")[1].split(">")[1].split("|");
        var R=parseInt(Vals[0])
        var RR=parseInt(Vals[1])
        var LLL=parseInt(Vals[2])
        //----------
        //var pCont = getPosition_Object(TravelMapDraw_container.id);
        //var pCont = getPosition_Object(Mcode +"^MapContainer");
        //var pCurs = getPosition_Cursor(e);
       // var p ={x: pCurs.x - pCont.x , y: pCurs.y - pCont.y}
        //----------
        var pCont = Map.getElem.Position(Mcode +"^Map^MapContainer");
        var pCurs = Map.getCursorPosition(e);
       // var p ={x: pCurs.x - pCont.x , y: pCurs.y - pCont.y}
        var PointPix = new MapPoint(pCurs.x - pCont.x ,pCurs.y - pCont.y)
        //----------
        var Link =  TravelData.Routes[R].Roads[RR].Links[LLL];
        var LinkA = Link.Points.slice(); 
        if (LLL < TravelData.Routes[R].Roads[RR].Links.length-1){
            var nextLink = parseInt(LLL) + 1
            LinkA[LinkA.length] =  TravelData.Routes[R].Roads[RR].Links[nextLink].Points[0];
        }
        //----------
        //var PointPix = p.transform(ctoMap.ImageRect,ctoMap.MapRect);
        var PointMetre = PointPix.transform(Map.MapObj[MapID].ImageRect,Map.MapObj[MapID].MapRect);
        
        
        var nC = takeNearest(PointMetre.x , PointMetre.y , LinkA);
        nC.CarPix = nC.carMetre.transform(Map.MapObj[MapID].MapRect,Map.MapObj[MapID].ImageRect);
        nC.R = R;
        nC.RR = RR;
        nC.LLL = LLL;       
        var p1 = TravelData.Routes[R].Roads[RR].Links[LLL].Points[nC.PPPP];
        var p2 = TravelData.Routes[R].Roads[RR].Links[LLL].Points[nC.PPPP+1];    
    //----------
    var car_Info= TravelData.Routes[R].Roads[RR].Info.RoadLabel + 
                    "<br>[" + TravelData.Routes[R].Roads[RR].Links[LLL].Info.Type + "]<br> " +
                    GDI_DynamicLabel ["DriveDistance"] +"=" + TravelObj.ToLengthString(520) + "<br>" + 
                    GDI_DynamicLabel ["DriveTime"] +"=" +TravelObj.ToTimeString(500)
                    
                    var Digital = new Date();
                    var hours = Digital.getHours();
                    var minutes = Digital.getMinutes();
                    var seconds = Digital.getSeconds();
                    dn = "AM";
                    if ((hours >= 12) && (minutes >= 1) || (hours >= 13)) {
                        dn = "PM";
                        hours = hours-12;
                    }
                    if (hours == 0){
                        hours = 12;
                    }                
car_Info+=  "<br>" +hours +":"+ minutes+":"+  seconds+" "+  dn
        var Car = document.getElementById(Mcode + "^MTc>");
        Car.style.visibility= "visible";
        Car.style.left = parseInt(nC.CarPix.x-4)  + "px";
        Car.style.top = parseInt(nC.CarPix.y-4) + "px";
        
        var PopUp_X= parseInt(Map.MapObj[MapID].ImagePos.x+ nC.CarPix.x +10);
        var PopUp_Y= parseInt(Map.MapObj[MapID].ImagePos.y + nC.CarPix.y +10) ;
            //document.getElementById("PopUpTip").style.display="block";
            document.getElementById("PopUpTip").style.visibility= "visible";
            document.getElementById("PopUpTip").style.left = PopUp_X+"px"; 
            document.getElementById("PopUpTip").style.top = PopUp_Y+"px";
            document.getElementById("PopUpTip_Info").innerHTML =  car_Info;
            document.getElementById("PopUpTip_Title").innerHTML =  "Vechicle Info" + " ...";

    e.cancelBubble = true;        
        
}
//--------------------------------------------------------------

//==============================================================
// TravelObj.ListSolution ======================================
TravelObj.ListSolution=function(){}
//--------------------------------------------------------------
// TravelObj.ListSolution.Clear -------------------------------- 
TravelObj.ListSolution.Clear = function(_Container){
    var Container = _Container;
    Container.innerHTML="";
}
//--------------------------------------------------------------
// TravelObj.ListSolution.Draw -------------------------------- 
TravelObj.ListSolution.Draw = function(Tdata,_Container,UseFor){
    var Container = _Container;
    //this.Travel = _Travel;
    Container.innerHTML="";
    var Travel_innerHTML ="";
    var Route_innerHTML ="";
    var Road_innerHTML ="";
    var  DynamicLabel= "";
    var  RouteLabel= "";
    var  RoadLabel= "";
    var  Rt1String= "";
    var  Rt2String= "";
    var  Rd1String= "";
    var w =0;
    w = getObject_Size(Container).w ;
    if (w==0){w = parseInt(Container.style.width);}
    w=w-18
    
    
    //--------------------------------------------------------------
    var Handler_innerHTML= " onclick='TravelListSolution_Handler(event)'"+
                            " onmouseover='TravelListSolution_Handler(event)'"+
                            " onmouseout='TravelListSolution_Handler(event)'" 
    //--------------------------------------------------------------
    
        //--------------------------------------------------------------
        Travel_innerHTML= "<table id='LTr-00>' " +
                            "border='0' cellspacing='0' cellpadding='0' " +
                            "style='position: static; display: block; overflow:hidden;cursor:default; " +
                            "margin: 0px;padding: 0px; border:none; margin-top: 5px;background-color: white; " +
                            "font-family:Verdana,Arial,Verdana,Tahoma;font-size:11px;font-weight:normal;color:#6495ED;" +
                            "text-align:center;vertical-align:middle; text-transform:none;" + 
                            "width:"+ (w-5) +"px; height:auto;'>"
        //--------------------------------------------------------------                            
        Travel_innerHTML+= "<tr valign='middle' style='width:"+ (w-5) +"px; height:20px; overflow:hidden;'>" 
            Travel_innerHTML+= "<td id='LTr-01>'style='width:20px; height:20px;"+ 
                                "background-image: url(Images/S0_tree_Expand.png);'>" 
            
//                Travel_innerHTML+= "<img id='LTr-01>' title=''  alt='' " +  
//                                " style='position: static; display:block;cursor:default;overflow:hidden;"+
//                                " margin: 0px;padding: 0px; border:none; " +      
//                                " width:20px;height:20px;' "+
//                                " src=\'Images/S0_tree_Expand.png'/>";
                                
                                
            Travel_innerHTML+= "</td>"   
            Travel_innerHTML+= "<td id='LTr-02>'colspan='4' style='overflow:hidden;cursor:pointer; "+
                                "background-color: #f7fbff; color:#0065B3;font-weight:bold;" +
                                "border-left: #C6DBFF 1px solid; border-top: #C6DBFF 1px solid; '"
                                if (UseFor=="Map"){Travel_innerHTML+= Handler_innerHTML}
                                Travel_innerHTML+= ">"
            Travel_innerHTML+=Tdata.Info.Label
            Travel_innerHTML+= "</td>"                                                                   
            Travel_innerHTML+= "<td colspan='2'style='background-color: #f7fbff;border-top: #C6DBFF 1px solid; border-right: #3982C6 1px solid;'>"
                Travel_innerHTML+= "[" +GDI_DynamicLabel ["Way Points"] +"="  + parseInt(Tdata.WayPoints.length -2) +"]"  
                Travel_innerHTML+= "</td>" 
        Travel_innerHTML+= "</tr>" 
        //--------------------------------------------------------------       
        Travel_innerHTML+= "<tr valign='top' style='cursor:default;" +
                         "font-family:Verdana,Arial,Verdana,Tahoma;font-size:11px;font-weight:normal;color:#6495ED; '>"
            Travel_innerHTML+= "<td id='LTr-04>' rowspan='3' style='width:20px; "+
                                "background-repeat: repeat-y; "+
                                "background-image: url(Images/S0_tree_Line.png);'>"  
            Travel_innerHTML+= "</td>"
            Travel_innerHTML+= "<td style='width:"+ parseInt((w-35)/5) + "px;height:30px; overflow:hidden;" + 
                                "border-left: #C6DBFF 1px solid; border-top: #C6DBFF 1px solid;" +
                                "border-right: #C6DBFF 1px solid; border-bottom: #C6DBFF 1px solid;"+
                                "background-color: #fffff7;'>"        
                Travel_innerHTML+= GDI_DynamicLabel ["Length"]  + "<br />" + TravelObj.ToLengthString(Tdata.Info.Length); 
            Travel_innerHTML+= "</td>"  
            Travel_innerHTML+= "<td style='width:"+ parseInt((w-35)/5) + "px;height:15px; overflow:hidden;" + 
                                "border-top: #C6DBFF 1px solid;" +
                                "border-right: #C6DBFF 1px solid; border-bottom: #C6DBFF 1px solid; background-color: #fffff7;'>" 
                Travel_innerHTML+= GDI_DynamicLabel ["DepartureTime"] + "<br />" + TravelObj.ToTimeString (Tdata.Info.Time);
            Travel_innerHTML+= "</td>" 
            Travel_innerHTML+= "<td style='width:"+ parseInt((w-35)/5) + "px;height:30px; overflow:hidden;" + 
                                "border-top: #C6DBFF 1px solid;" +
                                "border-right: #C6DBFF 1px solid; border-bottom: #C6DBFF 1px solid; background-color: #fffff7;'>"
                Travel_innerHTML+= GDI_DynamicLabel ["Duration"]  + "<br />" + TravelObj.ToTimeString (Tdata.Info.Time); 
            Travel_innerHTML+= "</td>"         
            Travel_innerHTML+= "<td style='width:"+ parseInt((w-35)/5) + "px; height:30px;overflow:hidden;" + 
                                 "border-top: #C6DBFF 1px solid;" +
                                "border-right: #C6DBFF 1px solid; border-bottom: #C6DBFF 1px solid; background-color: #fffff7;'>"
                Travel_innerHTML+= GDI_DynamicLabel ["ArrivalTime"]  + "<br />" + TravelObj.ToTimeString (Tdata.Info.Time); 
            Travel_innerHTML+= "</td>" 
            Travel_innerHTML+= "<td style='width:"+ parseInt((w-35)/5) + "px; height:30px;overflow:hidden;" + 
                                "border-top: #C6DBFF 1px solid;" +
                                "border-right: #C6DBFF 1px solid; border-bottom: #C6DBFF 1px solid; background-color: #fffff7;'>"
                Travel_innerHTML+= GDI_DynamicLabel ["StopDuration"] + "<br />" + "SUMStopDuration";  //this.WayPoints[parseInt(R)+1].Time; ; 
            Travel_innerHTML+= "</td>"
            Travel_innerHTML+= "<td valign='bottom'  style='width:10px; " + 
                                "border-right: #3982C6 1px solid;  '>"   
                Travel_innerHTML+= "<img id='LTr-05>' title='"+ GDI_DynamicLabel ["Click to Show / Hide Map"]+ "' alt='' " +  
                                " style='position: static; display: block ;"+
                                " margin: 0px;padding: 0px; border:none; cursor:pointer;" +      
                                " width:10px;height:10px;' src=\'Images/S_tree_ShowMap.png'"+
                                Handler_innerHTML + "/>";
            Travel_innerHTML+= "</td>"              
        Travel_innerHTML+= "</tr>"                          
        //--------------------------------------------------------------
        Travel_innerHTML+= "<tr valign='top' style=' background-color: white; " +
                         "font-family:Verdana,Arial,Verdana,Tahoma;font-size:10px;font-weight:normal;color:#0065B3; text-decoration: none;'>"
            Travel_innerHTML+= "<td colspan='6' style='width:"+ parseInt(w-25) + "px; overflow:hidden;" + 
                                "border-left: #C6DBFF 1px solid; border-right: #3982C6 1px solid; border-bottom: #3982C6 1px solid;'>"    
                Travel_innerHTML+= "<div id='LTr-07_TravelMap>' style='position:static;display:block; overflow:hidden; visibility:visible;"+
                                    "border:none ; margin: 0px; padding: 0px; "+
                                    "background-image: url(Images/MapImage_empty5X5.gif); "+
                                    "background-repeat: no-repeat; background-color: transparent;"+
                                    "width: 100%; height: 5px; ' >"
                Travel_innerHTML+= "</div>"
            Travel_innerHTML+= "</td>" 
        Travel_innerHTML+= "</tr>"  
         //--------------------------------------------------------------
        Travel_innerHTML+= "<tr valign='top' style=' background-color: white; " +
                         "font-family:Verdana,Arial,Verdana,Tahoma;font-size:10px;font-weight:normal;color:#0065B3; text-decoration: none;'>"
            Travel_innerHTML+= "<td colspan='6' style='width:"+ parseInt(w-25) + "px;height: 5px; overflow:hidden;'>" 
//                Travel_innerHTML+="&nbsp;" ;
            Travel_innerHTML+= "</td>" 
        Travel_innerHTML+= "</tr>"        
        //--------------------------------------------------------------                                                    
        Travel_innerHTML+= "</table>"    
    //--------------------------------------------------------------                        
    for (R in Tdata.Routes){  
        Route_innerHTML= "<table id='LRt-00>"+ R + "' " +
                            "border='0' cellspacing='0' cellpadding='0' " +
                            "style='position: static; display: block; overflow:hidden;cursor:default; " +
                            "margin: 0px;padding: 0px; border:none; background-color: white; " +
                            "font-family:Verdana,Arial,Verdana,Tahoma;font-size:11px;font-weight:normal;color:#6495ED;" +
                            "text-align:center;vertical-align:middle; text-transform:none;" + 
                            "width:"+ (w-5) +"px; height:auto;'>"
        //--------------------------------------------------------------                            
        Route_innerHTML+= "<tr valign='middle' style='width:"+ (w-5) +"px; height:20px; overflow:hidden;'>" 
            if (R==Tdata.Routes.length-1){
                Rt1String="End" ;
                Rt2String="Emty" ;
            }else{
                Rt1String="Mid" ;
                Rt2String="Line" ;
            }       
        
            Route_innerHTML+= "<td id=\'LRt-01>"+ R + "' style='width:20px; height:20px;"+ 
                                "background-image: url(Images/S0_tree_Line_"+ Rt1String +".png);'>"  
            Route_innerHTML+= "</td>"   
            Route_innerHTML+= "<td style='width:20px; overflow:hidden;'>" 
                DynamicLabel= "Click to Expand / Collapse" ;                  
                Route_innerHTML+= "<img id=\'LRt-02>"+ R + "' title='" + GDI_DynamicLabel [DynamicLabel] + "'  alt='" + GDI_DynamicLabel [DynamicLabel]+ "' " +  
                                    " style='position: static; display: inline;float: left;overflow:hidden;"+
                                    " margin: 0px;padding: 0px; border:none; cursor:pointer;" +      
                                    " width:20px;height:20px;' src=\'Images/S_tree_Expand.png'" +
                                    Handler_innerHTML +"/>";         
            Route_innerHTML+= "</td>"   
            Route_innerHTML+= "<td id=\'LRt-03>"+ R + "'colspan='6' style='overflow:hidden;" +
                                "border-left: #C6DBFF 1px solid; border-top: #C6DBFF 1px solid;border-right: #3982C6 1px solid;'> " 
                RouteLabel= GetZeroFrontNumber(parseInt(R)+1,2)+ " " +  GDI_DynamicLabel ["Route"] + " " +  GDI_DynamicLabel ["from"];
                Route_innerHTML+= "<div id='LRt-04>"+ R + "' title='" + RouteLabel + "' "+
                                    "style='position: static; display: inline; float:left; overflow:hidden;" +
                                    "margin: 0px;padding: 0px;padding-left:5px; padding-top:2px; border: none; cursor:pointer;" +      
                                    "height:15px;" + 
                                    "font-family:Verdana,Arial,Verdana,Tahoma;font-size:11px;font-weight:normal;color:#6495ED;" +
                                    "text-align:left;vertical-align:middle;text-transform:none;'"  
                                    if (UseFor=="Map"){Route_innerHTML+= Handler_innerHTML}
                                    Route_innerHTML+= ">" +RouteLabel + "</div>"; 
                             
                RouteLabel=  Tdata.WayPoints[R].Label ;                       
                var ToUseImage="Route_SetWayPoint"               
                if (R==0){ToUseImage="Route_SetFromHere"}
                Route_innerHTML+= "<img id=\'LRt-05>"+ R + "' title='" + RouteLabel + "'  alt='' " +  
                                    " style='position: static; display: inline;float: left;overflow:hidden;"+
                                    " margin: 0px;padding: 0px;padding-left:3px;padding-top:2px; border:none; cursor:pointer;" +      
                                    " width:15px;height:15px;'src=\'Images/"+ ToUseImage +".png'"
                                    if (UseFor=="Map"){Route_innerHTML+= Handler_innerHTML}
                                    Route_innerHTML+= "/>" 
                Route_innerHTML+= "<div id='LRt-06>"+ R + "' title='" + RouteLabel + "' "+
                                    "style='position: static; display: inline; float:left; overflow:hidden;" +
                                    "margin: 0px;padding: 0px;padding-left:3px; padding-top:2px;border:none; cursor:pointer;" +      
                                    "left:20px;top:-12px;width:auto;height:15px;" + 
                                    "font-family:Verdana,Arial,Verdana,Tahoma;font-size:11px;font-weight:normal;color:#0065B3;" +
                                    "text-align:left;vertical-align:middle;text-transform:capitalize;'" 
                                    if (UseFor=="Map"){Route_innerHTML+= Handler_innerHTML}
                                    Route_innerHTML+= ">" +RouteLabel + "</div>";   
                Route_innerHTML+= "<div id='LRt-07>"+ R + "' title='" + RouteLabel + "' "+
                                    "style='position: static; display: inline; float:left; overflow:hidden;" +
                                    "margin: 0px;padding: 0px;padding-left:5px;padding-top:2px; border:none; cursor:pointer;" +      
                                    "height:15px;" + 
                                    "font-family:Verdana,Arial,Verdana,Tahoma;font-size:11px;font-weight:normal;color:#6495ED;" +
                                    "text-align:left;vertical-align:middle;text-transform:none;'" 
                                    if (UseFor=="Map"){Route_innerHTML+= Handler_innerHTML}
                                    Route_innerHTML+= ">" + GDI_DynamicLabel ["to"] + "</div>"; 
                                      
                RouteLabel=  Tdata.WayPoints[parseInt(R)+1].Label;
                var ToUseImage="Route_SetWayPoint"               
                if (R==Tdata.Routes.length-2){ToUseImage="Route_SetToHere"}
                Route_innerHTML+= "<img id=\'LRt-08>"+ R + "' title='" + RouteLabel + "'  alt='' " +  
                                    " style='position: static; display: inline;float: left;overflow:hidden;"+
                                    " margin: 0px;padding: 0px;padding-left:3px;padding-top:2px; border:none; cursor:pointer;" +      
                                    " width:15px;height:15px;'  src=\'Images/"+ ToUseImage +".png'"
                                    if (UseFor=="Map"){Route_innerHTML+= Handler_innerHTML}
                                    Route_innerHTML+= "/>" 
                                                      
                Route_innerHTML+= "<div id='LRt-09>"+ R + "' title='" + RouteLabel + "' "+
                                    "style='position: static; display: inline; float:left; overflow:hidden;" +
                                    "margin: 0px;padding: 0px;padding-left:3px;padding-top:2px; border:none; cursor:pointer;" +      
                                    "left:20px;top:-12px;width:auto;height:15px;" + 
                                    "font-family:Verdana,Arial,Verdana,Tahoma;font-size:11px;font-weight:normal;color:#0065B3;" +
                                    "text-align:left;vertical-align:middle;text-transform:capitalize;'" 
                                    if (UseFor=="Map"){Route_innerHTML+= Handler_innerHTML} 
                                    Route_innerHTML+=">" +RouteLabel + "</div>";                                              
            Route_innerHTML+= "</td>"              
        Route_innerHTML+= "</tr>"  
         //--------------------------------------------------------------       
        Route_innerHTML+= "<tr valign='top' style='cursor:default;" +
                         "font-family:Verdana,Arial,Verdana,Tahoma;font-size:11px;font-weight:normal;color:#6495ED; '>"
            Route_innerHTML+= "<td id='LRt-10>"+ R + "' rowspan='3' style='width:20px; "+
                                "background-repeat: repeat-y; "+
                                "background-image: url(Images/S0_tree_"+ Rt2String +".png);'>" 
                                 
            Route_innerHTML+= "</td>"
            Route_innerHTML+= "<td id='LRt-11>"+ R + "' rowspan='3' style='width:20px; "+
                                "background-repeat: repeat-y; "+
                                "background-image: url(Images/S_tree_Line.png);'>"  
            Route_innerHTML+= "</td>"            
            
            Route_innerHTML+= "<td id='LRt-12>"+ R + "'style='width:"+ parseInt((w-35)/5) + "px;height:30px; overflow:hidden;" + 
                                "border-left: #C6DBFF 1px solid; border-top: #C6DBFF 1px solid;" +
                                "border-right: #C6DBFF 1px solid; border-bottom: #C6DBFF 1px solid;"+
                                "background-color: #fffff7;'>"        
                Route_innerHTML+= GDI_DynamicLabel ["Length"]  + "<br />" + TravelObj.ToLengthString(Tdata.Routes[R].Info.Length); 
            Route_innerHTML+= "</td>"  
            Route_innerHTML+= "<td id='LRt-13>"+ R + "'style='width:"+ parseInt((w-35)/5) + "px;height:15px; overflow:hidden;" + 
                                "border-top: #C6DBFF 1px solid;" +
                                "border-right: #C6DBFF 1px solid; border-bottom: #C6DBFF 1px solid; background-color: #fffff7;'>" 
                Route_innerHTML+= GDI_DynamicLabel ["DepartureTime"] + "<br />" + TravelObj.ToTimeString (Tdata.Routes[R].Info.Time);
            Route_innerHTML+= "</td>" 
            Route_innerHTML+= "<td id='LRt-14>"+ R + "' style='width:"+ parseInt((w-35)/5) + "px;height:30px; overflow:hidden;" + 
                                "border-top: #C6DBFF 1px solid;" +
                                "border-right: #C6DBFF 1px solid; border-bottom: #C6DBFF 1px solid; background-color: #fffff7;'>"
                Route_innerHTML+= GDI_DynamicLabel ["Duration"]  + "<br />" + TravelObj.ToTimeString (Tdata.Routes[R].Info.Time);
            Route_innerHTML+= "</td>"         
            Route_innerHTML+= "<td id='LRt-15>"+ R + "'style='width:"+ parseInt((w-35)/5) + "px; height:30px;overflow:hidden;" + 
                                 "border-top: #C6DBFF 1px solid;" +
                                "border-right: #C6DBFF 1px solid; border-bottom: #C6DBFF 1px solid; background-color: #fffff7;'>"
                Route_innerHTML+= GDI_DynamicLabel ["ArrivalTime"]  + "<br />" + TravelObj.ToTimeString (Tdata.Routes[R].Info.Time);
            Route_innerHTML+= "</td>" 
            Route_innerHTML+= "<td id='LRt-16>"+ R + "'style='width:"+ parseInt((w-35)/5) + "px; height:30px;overflow:hidden;" + 
                                "border-top: #C6DBFF 1px solid;" +
                                "border-right: #C6DBFF 1px solid; border-bottom: #C6DBFF 1px solid; background-color: #fffff7;'>"
                                
                if (R==Tdata.Routes.length-1){
                    Route_innerHTML+="&nbsp;" ;
                }else {   
                    Route_innerHTML+= GDI_DynamicLabel ["StopDuration"] + "<br />" +Tdata.WayPoints[parseInt(R)+1].Time; 
                }                
               // Route_innerHTML+= GDI_DynamicLabel ["StopDuration"] + "<br />" + this.WayPoints[parseInt(R)+1].Time; ; 
            Route_innerHTML+= "</td>"
            Route_innerHTML+= "<td id='LRt-17>"+ R + "'valign='bottom'  style='width:10px; " + 
                                "border-right: #3982C6 1px solid;  '>"   
                Route_innerHTML+= "<img id='LRt-18>"+ R + "' title='"+ GDI_DynamicLabel ["Click to Show / Hide Map"]+ "' alt='' " +  
                                " style='position: static; display: block ;"+
                                " margin: 0px;padding: 0px; border:none; cursor:pointer;" +      
                                " width:10px;height:10px;' src=\'Images/S_tree_ShowMap.png'"+
                                Handler_innerHTML +"/>"; 
            Route_innerHTML+= "</td>"              
        Route_innerHTML+= "</tr>"                          
        //--------------------------------------------------------------
        Route_innerHTML+= "<tr id='LRt-19>"+ R + "'valign='top' style=' background-color: white; " +
                         "font-family:Verdana,Arial,Verdana,Tahoma;font-size:10px;font-weight:normal;color:#0065B3; text-decoration: none;'>"
            Route_innerHTML+= "<td id='LRt-20>"+ R + "'colspan='6' style='width:"+ parseInt(w-25) + "px; overflow:hidden;" + 
                                "border-left: #C6DBFF 1px solid; border-right: #3982C6 1px solid; border-bottom: #3982C6 1px solid;'>"    
                Route_innerHTML+= "<div id='LRt-21_RouteMap>"+ R + "' style='position:static;display:block; overflow:hidden; visibility:visible;"+
                                    "border:none ; margin: 0px; padding: 0px; "+
                                    "background-image: url(Images/MapImage_empty5X5.gif); "+
                                    "background-repeat: no-repeat; background-color: transparent;"+
                                    "width: 100%; height: 5px; ' >"
                Route_innerHTML+= "</div>"
            Route_innerHTML+= "</td>" 
        Route_innerHTML+= "</tr>"  
         //--------------------------------------------------------------
        Route_innerHTML+= "<tr id='LRt-22>"+ R + "'valign='top' style=' background-color: white; " +
                         "font-family:Verdana,Arial,Verdana,Tahoma;font-size:10px;font-weight:normal;color:#0065B3; text-decoration: none;'>"
            Route_innerHTML+= "<td id='LRt-23>"+ R + "'colspan='6' style='width:"+ parseInt(w-25) + "px;height: 5px; overflow:hidden;'>" 
//                Travel_innerHTML+="&nbsp;" ;
            Route_innerHTML+= "</td>" 
        Route_innerHTML+= "</tr>"        
        //--------------------------------------------------------------                                                    
        Route_innerHTML+= "</table>"    
        //--------------------------------------------------------------  
        
        Road_innerHTML= "<table id='LRd-00>" + R + "' " +
                            "border='0' cellspacing='0' cellpadding='0' " +
                            "style='position: static; display: block; overflow:hidden;cursor:default; " +
                            "margin: 0px;padding: 0px; border:none; background-color: white; " +
                            "font-family:Verdana,Arial,Verdana,Tahoma;font-size:11px;font-weight:normal;color:#6495ED;" +
                            "text-align:center;vertical-align:middle; text-transform:none;" + 
                            "width:"+ (w-5) +"px; height:auto;'>"
        //--------------------------------------------------------------         
        for (RR in Tdata.Routes[R].Roads){  
            if (RR==Tdata.Routes[R].Roads.length-1){
                Rd1String="End" ;
                Rd2String="Emty" ;
            }else{
                Rd1String="Mid" ;
                Rd2String="Line" ;
            }          
         //--------------------------------------------------------------                            
        Road_innerHTML+= "<tr valign='middle' style='width:"+ (w-5) +"px; height:20px; overflow:hidden;'>" 
            Road_innerHTML+= "<td id=\'LRd-01>"+ R + "|" + RR + "' rowspan='3'style='width:20px;" +
                            "background-repeat: repeat-y; "+
                            "background-image: url(Images/S0_tree_"+ Rt2String +".png);'>"  
            Road_innerHTML+= "</td>"  
            Road_innerHTML+= "<td id=\'LRd-02>"+ R + "|" + RR + "'style='width:20px;height:20px;" +
                            "background-image: url(Images/S_tree_Line_"+ Rd1String +".png);'>"  
            Road_innerHTML+= "</td>"  
            RoadDirectionLabel = Tdata.Routes[R].Roads[RR].Info.Direction 
            Road_innerHTML+= "<td id=\'LRd-03>"+ R + "|" + RR + "' title='" + GDI_DynamicLabel [RoadDirectionLabel] +"'"+
                            "style='width:20px; height:20px;" + 
                             "border-left: #C6DBFF 1px solid;border-top: #C6DBFF 1px solid;'>" 
                Road_innerHTML+= "<img id=\'LRd-04>"+ R + "|" + RR + "' title='" + GDI_DynamicLabel [RoadDirectionLabel] +"'  alt='' " +  
                                " style='position: static; display: block;"+
                                " margin: 0px;padding: 0px; border:none; " +
                                " width:20px;height:20px;' "+
                                " src=\'Images/Road_" + RoadDirectionLabel +".png'/>";              
            Road_innerHTML+= "</td>" 
            RoadLabel=TravelObj.InstructionLabel.Road(Tdata,R,RR) ; 
            Road_innerHTML+= "<td id='LRd-05>"+ R + "|" + RR + "' title='" + RoadLabel +"' "+
                                " style='width:"+ parseInt(w-75) + "px;height:15px;background-color: white; "+
                                " padding-left:5px; overflow:hidden;cursor:pointer; "+
                                " color:#6495ED; font-weight:normal; text-align:left; vertical-align:middle;" +
                                " border-top: #C6DBFF 1px solid; '"
                                if (UseFor=="Map"){Road_innerHTML+= Handler_innerHTML}
                                Road_innerHTML+= ">" 
                Road_innerHTML+=RoadLabel ;
            Road_innerHTML+= "</td>" 
            Road_innerHTML+= "<td valign='bottom'  style='width:10px; " + 
                            "border-top: #C6DBFF 1px solid;border-right: #3982C6 1px solid;  '>"   
                Road_innerHTML+= "<img id='LRd-06>"+ R + "|" + RR + "' title='"+ GDI_DynamicLabel ["Click to Show / Hide Map"]+ "' alt='' " +  
                                " style='position: static; display: block ;"+
                                " margin: 0px;padding: 0px; border:none; cursor:pointer;" + 
                                " width:10px;height:10px;'src=\'Images/S_tree_ShowMap.png' "+
                                Handler_innerHTML +"/>"; 
            Road_innerHTML+= "</td>"            
        //--------------------------------------------------------------
        Road_innerHTML+= "<tr valign='top' style=' background-color: white; " +
                         "font-family:Verdana,Arial,Verdana,Tahoma;font-size:10px;font-weight:normal;color:#0065B3; text-decoration: none;'>"
            Road_innerHTML+= "<td rowspan='2'd=\'LRd-07>"+ R + "|" + RR + "'style='width:20px;" +
                            "background-image: url(Images/S_tree_"+ Rd2String +".png);'>"  
            Road_innerHTML+= "</td>"                          
            Road_innerHTML+= "<td colspan='3' style='width:"+ parseInt(w-45) + "px; overflow:hidden;" + 
                                "border-left: #C6DBFF 1px solid; border-right: #3982C6 1px solid; border-bottom: #3982C6 1px solid;'>"    
                Road_innerHTML+= "<div id='LRd-08_RoadMap>"+ R + "|" + RR + "' style='position:static;display:block; overflow:hidden; visibility:visible;"+
                                    "border:none ; margin: 0px; padding: 0px; "+
                                    "background-image: url(Images/MapImage_empty5X5.gif); "+
                                    "background-repeat: no-repeat; background-color: transparent;"+
                                    "width: 100%; height: 5px; ' >"
                Road_innerHTML+= "</div>"
            Road_innerHTML+= "</td>" 
        Road_innerHTML+= "</tr>"  
         //--------------------------------------------------------------
        Road_innerHTML+= "<tr valign='top' style=' background-color: white; " +
                         "font-family:Verdana,Arial,Verdana,Tahoma;font-size:10px;font-weight:normal;color:#0065B3; text-decoration: none;'>"
            Road_innerHTML+= "<td colspan='3' style='width:"+ parseInt(w-45) + "px;height: 5px; overflow:hidden;'>" 
//                Travel_innerHTML+="&nbsp;" ;
            Road_innerHTML+= "</td>" 
        Road_innerHTML+= "</tr>"        
        //--------------------------------------------------------------                       
            
               
        Road_innerHTML+= "</tr>"  
        }
        Road_innerHTML+="</table>"  ;
        Route_innerHTML+= Road_innerHTML ;
        Travel_innerHTML+= Route_innerHTML
    }
    Container.innerHTML=Travel_innerHTML;      
}   
//==============================================================



//==============================================================
// TravelObj.InstructionLabel ==================================
TravelObj.InstructionLabel=function(){}
//--------------------------------------------------------------
// TravelObj.InstructionLabel.Road  ----------------------------
TravelObj.InstructionLabel.Road = function(Tdata,_R,_RR){
   var msg = GDI_DynamicLabel [Tdata.Routes[_R].Roads[_RR].Info.Direction]+ 
            " < " + Tdata.Routes[_R].Roads[_RR].Info.RoadLabel+ " >" +
            GDI_DynamicLabel ["drive_for"] +" " + 
            TravelObj.ToLengthString(Tdata.Routes[_R].Roads[_RR].Info.Length) +
            " [" + TravelObj.ToTimeString (Tdata.Routes[_R].Roads[_RR].Info.Time) +"]";
return msg              
}
//--------------------------------------------------------------
// TravelObj.InstructionLabel.Drive  ----------------------------
TravelObj.InstructionLabel.Drive = function(_FromAzim,_ToAzim){
    var strLR="";
   // var strDT="";  
    var angle=180 -(_FromAzim-_ToAzim);
//    angle=Math.abs(angle);
    if (angle>180){angle=360-angle}
    
    if (angle<0){
        strLR="left"
    }else{
        strLR="right"
    }
    var ABSangle=Math.abs(angle);
    if (ABSangle>=160){
        return "Drive_on"  ;
    }
    if (ABSangle>=120){
        return "Drive_" + strLR  ;
    }    
    if (ABSangle>=30){
        return "Turn_" + strLR ;
    }   
    return "Inversion_" + strLR  ;
}
//.............................................................





//--------------------------------------------------------------
// ToLengthString
//--------------------------------------------------------------
TravelObj.ToLengthString = function(_Length){
var L
    if (_Length<1000){
        L=Math.round(_Length * 10)/10
        return L + " m" ;
    }
        L=Math.round(_Length /10)/100
        return L + " km" ;
 }
//--------------------------------------------------------------
// ToTimeString
//--------------------------------------------------------------
TravelObj.ToTimeString = function(_Time){
var t =Math.round(_Time);
var d = new Date();
d.setHours(0);
d.setMinutes(0);
d.setSeconds(t);

return  Right("00" + d.getHours(),2)+ ":" +   Right("00" + d.getMinutes(),2)+ ":" +  Right("00" + d.getSeconds(),2)
}


//--------------------------------------------------------------
//Check the Intersection between 2 rectangles
//--------------------------------------------------------------
TravelObj.ChkRectIntersection = function(rec1,rec2){
    var TopLeftPosition = TravelObj.GetPointLocationInRectacle (rec1 ,rec2.x1, rec2.y1)
    if ("36789".indexOf(TopLeftPosition)>-1 ){return "Out";}
    
    var BottomRightPosition = TravelObj.GetPointLocationInRectacle (rec1 ,rec2.x2, rec2.y2)
    if (TopLeftPosition=="1"){
        if ("12347".indexOf(BottomRightPosition)>-1 ){return "Out";}
        return "Intersected"; 
    }    
    if (TopLeftPosition=="2"){       
        if ("23".indexOf(BottomRightPosition)>-1 ){return "Out";}
        return "Intersected"; 
    }        
    if (TopLeftPosition=="4"){       
        if ("47".indexOf(BottomRightPosition)>-1 ){return "Out";}
        return "Intersected"; 
    }    
    if (TopLeftPosition=="5"){       
        if (BottomRightPosition=="5"){return "Contained";}
        return "Intersected"; 
    }
     return "none";      
}
//.............................................................
//--------------------------------------------------------------
// Get Point Location In Rectacle 
//--------------------------------------------------------------
TravelObj.GetPointLocationInRectacle = function(_rect,_X,_Y){
    //  S1   |    S2    |   S3
    //       |       x2 | y2

    //--------------------------
    //       |          |
    //       |          |
    //  S4   |    S5    |   S6
    //       |          |
    //--------------------------
    //    x1 | y1       |
    //  S7   |    S8    |   S9

    var p ="0"; // Point Position In Rectacle
    if(_X<_rect.x1){
         if(_Y>_rect.y2){p="1"; return p;}
         if(_Y<_rect.y1){p="7"; return p;}
         p="4"; return p;
    }    
    if(_X>_rect.x2){ 
         if(_Y>_rect.y2){p="3"; return p;}
         if(_Y<_rect.y1){p="9"; return p;}
         p="6"; return p;        
    } 
    if(_Y>=_rect.y2){p="2"; return p;}
    if(_Y<=_rect.y1){p="8"; return p;}
    p="5"; return p;               
}
//.............................................................




//--------------------------------------------------------------
// Get GetAzimouth CARTESIA
//--------------------------------------------------------------
TravelObj.GetAzimouth = function(_X1,_Y1,_X2,_Y2){ 
 //GetAzimouth (ByVal X1 as float ,ByVal Y1 as float , ByVal X2 as float ,ByVal Y2 as float )
	var b1= _X1 - _X2 ;
	var b2= _Y1 - _Y2 ;
    var rr = Math.sqrt(b1*b1 + b2*b2);
    var angleCOS =Math.acos(b1/rr) * 57.29577951;
	var angleSIN =Math.asin(b2/rr) * 57.29577951;
	var angle;
	if (angleCOS>=90 && angleSIN<0){angle = angleCOS-90;} 
	if (angleCOS>=90 && angleSIN>=0){angle = angleSIN+90; }
	if (angleCOS<=90 && angleSIN>0){angle = 270-angleCOS;} 
	if (angleCOS<=90 && angleSIN<=0){angle = 270+angleCOS;} 
    return angle;
}









function takeNearest(x,y,Link){
    var minD = 99999999;
    //var MousePosMeter = new MapPoint(x,y).transform(ctoMap.ImageRect,ctoMap.MapRect);
    var MousePosMeter = new MapPoint(x,y);


    var travelCounter = new Object();
    
    var LinkPointsPixel = Link;
     
    for (i=0;i<LinkPointsPixel.length-1;i++){
        var x1 = parseInt(LinkPointsPixel[i].x);
        var y1 = parseInt(LinkPointsPixel[i].y);
        var x2 = parseInt(LinkPointsPixel[i+1].x);
        var y2 = parseInt(LinkPointsPixel[i+1].y);
        //  var d = dotLineLength(x, y, x1, y1, x2, y2, true);
        var Nearest = TheMoreNearPoint(x1, y1, x2, y2, MousePosMeter.x, MousePosMeter.y);
        
        if(Nearest.d < minD){
            minD=Nearest.d;
            //travelCounter.LLL = LLL;
            travelCounter.PPPP = i;
            travelCounter.DisFromPoint = minD;
            //travelCounter.Car = new MapPoint(Nearest.x,Nearest.y).transform(ctoMap.MapRect,ctoMap.ImageRect);
            travelCounter.carMetre = new MapPoint(Nearest.x,Nearest.y);

        }
    }
return travelCounter;
}