var map,legNodes;
var polyShape;
var startMarker,endMarker;
var routeMarkers = [];
var currentLegID,previousLegIndex=0;

var lineColor = "#009bd4"; //blue
var currentLineColor = "#DD2F87"; //Magenta
var opacity = .8;
var lineWeight = 5,baseIcon,startIcon,endIcon;
var lineOverLays=[];
var stdLines=[],currentLines=[];

function load() {
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(51.3,-2.9), 11);
        map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());
        map.setMapType(G_NORMAL_MAP);
        baseIcon = new GIcon();
        baseIcon.shadow = "images/flagShadow.png";
        baseIcon.iconSize = new GSize(27, 34);
        baseIcon.shadowSize = new GSize(37, 34);
        baseIcon.iconAnchor = new GPoint(9, 34);
        baseIcon.infoWindowAnchor = new GPoint(9, 2);
        baseIcon.infoShadowAnchor = new GPoint(18, 25);
        startIcon = new GIcon(baseIcon);
        startIcon.image = "images/flagStart.png";
        endIcon = new GIcon(baseIcon);
        endIcon.image = "images/flagEnd.png";
        loadLegs();
    }
}

function loadLegs(){
    GDownloadUrl("http://www.championrun.org.uk/data/getXMLFromSQL.aspx?name=leg&cmd=GetLegs&params=routeid|"+routeID, onLoadLegs);
//    GDownloadUrl("http://localhost/championrun/data/getXMLFromSQL.aspx?name=leg&cmd=GetLegs&params=routeid|"+routeID, onLoadLegs);
}

function loadPoints(){
    GDownloadUrl("http://www.championrun.org.uk/data/getXMLFromSQL.aspx?name=routePoint&cmd=GetRoutePoints&params=routeid|"+routeID, onLoadPoints);
//    GDownloadUrl("http://localhost/championrun/data/getXMLFromSQL.aspx?name=routePoint&cmd=GetRoutePoints&params=routeid|"+routeID, onLoadPoints);

}
function onLoadLegs(data, responseCode) {
    var xmlLegs= GXml.parse(data);
    
    legNodes = xmlLegs.documentElement.getElementsByTagName("leg");
    currentLegID=legNodes[0].getAttribute("LPTLegID");
    loadPoints();
    showLeg(0);
}
function onLoadPoints(data, responseCode) {
    var xmlData = GXml.parse(data),legID,lastLegID;
    var pointNodes = xmlData.documentElement.getElementsByTagName("routePoint");
    var point,points=[],color,i;
    
//    if (lineOverLays.length>0){
//        for (i=0;i<lineOverLays.length;i++){
//            map.removeOverlay(lineOverLays[i]);
//        }
//        lineOverLays=[];
//    }

    // add std color lines    
    color=lineColor;
    for (i = 0; i < pointNodes.length; i++) {
        legID = parseInt(pointNodes[i].getAttribute("LPTLegID"));
        point = new GLatLng(parseFloat(pointNodes[i].getAttribute("LPTLat")),parseFloat(pointNodes[i].getAttribute("LPTLong")));        
        if ((legID!=lastLegID && points.length>0) || i==pointNodes.length-1){
            if (i==pointNodes.length-1) points.push(point);
            
            polyShape = new GPolyline(points,color,lineWeight,opacity);
            map.addOverlay(polyShape);
            if (currentLegID==lastLegID) polyShape.hide();
            stdLines.push(polyShape);

            points=[];
        }
        points.push(point);
        lastLegID=legID;
    }
    
    //add highlight colour lines
    color=currentLineColor;
    points=[];
    for (i = 0; i < pointNodes.length; i++) {
        legID = parseInt(pointNodes[i].getAttribute("LPTLegID"));
        point = new GLatLng(parseFloat(pointNodes[i].getAttribute("LPTLat")),parseFloat(pointNodes[i].getAttribute("LPTLong")));        
        if ((legID!=lastLegID && points.length>0) || i==pointNodes.length-1){
            if (i==pointNodes.length-1) points.push(point);
            
            polyShape = new GPolyline(points,color,lineWeight,opacity);
            map.addOverlay(polyShape);
            if (currentLegID!=lastLegID) polyShape.hide();
            currentLines.push(polyShape);
            
            points=[];
        }
        points.push(point);
        lastLegID=legID;
    }    
}

function showLeg(currentLegIndex){
    var lat,lng,bounds,zoom,legTitle,titleWords,usersCompleted;
    var startPoint,endPoint,centrePoint,swPoint,nePoint,descrip,progress;

    map.closeInfoWindow();
    if (startMarker!=null)map.removeOverlay(startMarker);
    if (endMarker!=null)map.removeOverlay(endMarker);

    legTitle=legNodes[currentLegIndex].getAttribute("LEGTitle");
    currentLegID=legNodes[currentLegIndex].getAttribute("LEGLegID");
    titleWords=legTitle.split(" to ");

    lat=parseFloat(legNodes[currentLegIndex].getAttribute("CLCStartLat"));
    lng=parseFloat(legNodes[currentLegIndex].getAttribute("CLCStartLong"));
    startPoint=new GLatLng(lat,lng);
    startMarker=new GMarker(startPoint,{icon:startIcon,title:titleWords[0]});
    map.addOverlay(startMarker);
                
    lat=parseFloat(legNodes[currentLegIndex].getAttribute("CLCEndLat"));
    lng=parseFloat(legNodes[currentLegIndex].getAttribute("CLCEndLong"));
    endPoint=new GLatLng(lat,lng);
    endMarker=new GMarker(endPoint,{icon:endIcon,title:titleWords[1]});
    map.addOverlay(endMarker);

    lat=parseFloat(legNodes[currentLegIndex].getAttribute("CLCMinLat"));
    lng=parseFloat(legNodes[currentLegIndex].getAttribute("CLCMinLong"));
    swPoint=new GLatLng(lat,lng);
    lat=parseFloat(legNodes[currentLegIndex].getAttribute("CLCMaxLat"));
    lng=parseFloat(legNodes[currentLegIndex].getAttribute("CLCMaxLong"));
    nePoint=new GLatLng(lat,lng);

    bounds=new GLatLngBounds(swPoint,nePoint);
    zoom=map.getBoundsZoomLevel(bounds);
    if (zoom<map.getZoom()) map.setZoom(zoom);

    lat=parseFloat(legNodes[currentLegIndex].getAttribute("CLCCentreLat"));
    lng=parseFloat(legNodes[currentLegIndex].getAttribute("CLCCentreLong"));
    centrePoint=new GLatLng(lat,lng);
    map.panTo(centrePoint);

    document.getElementById("legTitle").innerHTML=titleWords[0]+' to<br/>'+titleWords[1];
    descrip="<br/><ul><li style='color:#ff0000'>"+legNodes[currentLegIndex].getAttribute("LEGStartTime") + "</li>";
    descrip+="<li>"+legNodes[currentLegIndex].getAttribute("LEGDuration") + "mins - ";
    descrip+=legNodes[currentLegIndex].getAttribute("LEGMiles") + " miles</li>";
    descrip+="<li>"+legNodes[currentLegIndex].getAttribute("LEGAscent") + "m ascent</li>";
//    descrip+=legNodes[currentLegIndex].getAttribute("LEGDescent") + "m descent</li>";
//    descrip+="<li>"+legNodes[currentLegIndex].getAttribute("CLCRunnerCount") + " runners</li></ul>";
    
    document.getElementById("legInfo").innerHTML=descrip;
    drawTable(currentLegIndex);
    //loadPoints();
    if (stdLines.length>0){
        stdLines[previousLegIndex].show();
        stdLines[currentLegIndex].hide();
        
        currentLines[previousLegIndex].hide();
        currentLines[currentLegIndex].show();
        
    }
    previousLegIndex=currentLegIndex;    
}

function drawTable(currentLegIndex){
    var i,tbl,imgs="",legTitle;
    var link,legID,legNo,caption;
    var routeStats;

    tbl="<table class='legsTable'><tr>";
    //            routeStats=routeNodes[0].getAttribute("LEGMiles") + " miles&nbsp;";
    //            routeStats+=routeNodes[0].getAttribute("LEGAscent") + "m up&nbsp;";
    //            routeStats+=routeNodes[0].getAttribute("LEGDescent") + "m down<br/>";
    //  routeStats+=usersCompleting + " people completing";
    //document.getElementById("routeInfo").innerHTML=routeStats;
    //            document.getElementById("routeTitle").innerHTML=routeNodes[0].getAttribute("title");
    for (i=0;i<legNodes.length;i++){
        tbl+="";
      //  legNo=legNodes[i].getAttribute("LEGLegNo");
        caption=legNodes[i].getAttribute("LEGCaption");
        legID=legNodes[i].getAttribute("LEGLegID");
        legTitle= legNodes[i].getAttribute("LEGTitle");
        link="<a href='javascript:showLeg(" + i + ");' title='" +legTitle + "'>"
        if (currentLegIndex==i){
            tbl+="<td class='currentLeg'>" + caption+"</td>";
            imgs+="<img src='altcharts/leg" + legID +".png' class='gradImgCurrent' title='" + legTitle + "'>";
        }else {
            tbl+="<td class='otherLeg'>"+link + caption + "</a></td>";
            imgs+=link + "<img src='altcharts/leg" + legID +".png' class='gradImg'></a>";
        }
        
    }
    tbl+="</table></tr>"

    document.getElementById("legsTable").innerHTML=tbl;
    document.getElementById("gradImages").innerHTML=imgs;
}