﻿var ClientID = "947"
var PreviousPopUp = ""
$(document).ready(function () {

    $("#emailbutton").live("click", function () {
        OpenEmailPopup();
    });

    $("#btnGetRoads").button({
        icons: {
            primary: "ui-icon-search"
        }
    });

    $("#btnGetRoads").live("click", function () {
        var roadname = document.getElementById("roadname").value;
        if (roadname == null || roadname == '') {
        }
        else {
            getroads();
        }
    });

    $("#btnGetRoads2").button({
        icons: {
            primary: "ui-icon-search"
        }
    });

    $("#btnGetRoads2").live("click", function () {
        var roadname = document.getElementById("roadname2").value;
        if (roadname == null || roadname == '') {
        }
        else {
            getroads2();
        }
    });

    $("#btnRestart").button({
        icons: {
            primary: "ui-icon-search"
        }
    });

    $("#btnRestart").live("click", function () {
        restart();
    });

    $("#btnGetRoute").button({
        icons: {
            primary: "ui-icon-search"
        }
    });

    $("#btnGetRoute").live("click", function () {
        getroute();
    });

    $(function () {
        var icons = {
            header: "ui-icon-circle-arrow-e",
            headerSelected: "ui-icon-circle-arrow-s"
        };
        var iconsSubItems = {
            header: "ui-icon-calculator",
            headerSelected: "ui-icon-circle-arrow-s"
        };
//        $("#accordion").accordion({
//            header: "h8",
//            autoHeight: false,
//            collapsible: true,
//            icons: icons
//        });

//        $("#accordionSubItems").accordion({
//            header: "h9",
//            clearStyle: true,
//            autoHeight: false,
//            collapsible: true,
//            icons: iconsSubItems
//        });
//       
    });
});

var trackList = new Array()
function CreateTrackingList() {
    
//    for (i = 0; i < SLColours.length; ++i)
//        SLColours[i] = new Array(2);
//    trackList[0][0] = "0";
//    trackList[0][1] = "0";
}

function zoomto(tx, ty) {
    myMap.Jump(tx, ty, 0.005)
    myMap.Update();
}

function TrackingCheck(asset, sender) {
    var arLen = trackList.length;
    var alreadytracked = false;
    var removeitemIndex = 0;
    for ( var i=0, len=arLen; i<len; ++i ){
        if (trackList[i].toString() == asset.toString()) {
            alreadytracked = true;
            removeitemIndex = i;
        }
    }
    if (alreadytracked) {
        RemoveFromTracking(removeitemIndex, sender);
    }
    else {
        AddToTracking(asset, sender);
    }
}

function AddToTracking(asset, sender) {
    trackList[trackList.length] = asset.toString();
    sender.innerHTML = "Stop Tracking";
    sender.style.color = "Red";
    $("#tpg" + asset.toString() + "").show();
    if (trackingOff) {
        GetLatestPositioning();
    }
//    queryGPSData();
}

function RemoveFromTracking(assetIndex, sender) {
    $("#tpg" + trackList[assetIndex].toString() + "").hide();
    removeByIndex(trackList, assetIndex);
    sender.innerHTML = "Track Cyclist";
    sender.style.color = "Yellow";
    var arLen = trackList.length;
    if (arLen == 0) {
        clearInterval(doInterval);
        trackingOff = true;
    }
//    queryGPSData();
}

function removeByIndex(arr, index) {
    arr.splice(index, 1);
}

var assetList = "all";
var trackID = "";
var trackInterval = 20;
var trackingOff = true;
function GetLatestRevGeocode(x, y, trackID) {
    var X_COORD = x;
    var Y_COORD = y;
    var URL = "http://www.streetmaps.co.za/api/rev_geocode/?key=LOQPUAYXGTCWXJHGYBFDRCSPHCKWBTBH&x=" + X_COORD + "&y=" + Y_COORD + "&fmt=js&musthavelabel=1&jscb=RevGeoLocation" + trackID;

    //this function is in our streetmaps 
    callObj = new JSONscriptRequest(URL);
    callObj.Go(false);
}

function RevGeoLocationjk1(data) {
    RevGeoLocation(data, "track1");
}

function RevGeoLocationjk2(data) {
    RevGeoLocation(data, "jk2");
}

function RevGeoLocationjk3(data) {
    RevGeoLocation(data, "jk3");
}

function RevGeoLocation(data, _trackID) {
    var dirResults = data;
    var html = "";
//    var coords = dirResults.xy.split(",");
    html = "<br/><table width=100% cellpadding=0 cellspacing=0 border=0>";
    if (dirResults.road != '') {
        html = html + "<tr><td><font color=black>Road: </font></td><td>" + dirResults.road + "</td></tr>";
    }
    if (dirResults.extrainfo != '') {
        html = html + "<tr><td><font color=black>Info: </font></td><td>" + dirResults.extrainfo + "</td></tr>";
    }
    if (dirResults.suburb != '')
    {
        html = html + "<tr><td><font color=black>Suburb: </font></td><td>" + dirResults.suburb + "</td></tr>";
    }
    if (dirResults.city != '')
    {
        html = html + "<tr><td><font color=black>City: </font></td><td>" + dirResults.city + "</td></tr>";
    }
    if (dirResults.province != '') {
        html = html + "<tr><td><font color=black>Province: </font></td><td>" + dirResults.province + "</td></tr>";
    }
    html = html + "<tr><td><font color=black>Latitude: </font></td><td>" + dirResults.requesty + "</td></tr>";
    html = html + "<tr><td><font color=black>Longitude: </font></td><td>" + dirResults.requestx + "</td></tr>";
    html = html + "<tr><td><font size=2>[ <A href='#' onclick='JumpToCar(" + dirResults.requestx + " , " + dirResults.requesty + ")' style='color:black'>Zoom To</A>]</font>";
    html = html + "</table><br/>";
    if (_trackID == 'track1') {

        document.getElementById("track1").innerHTML = html;
    }
    else if (_trackID == 'jk2') {
        document.getElementById("jk2").innerHTML = html;
    }
    else {
        document.getElementById("jk3").innerHTML = html;
    }
}

function JumpToCar(x, y) {
    myMap.Jump(x, y, 0.01);
    myMap.Update()
}

function CheckGPSFeeds() {
//    var URL = "http://localhost:54836/GetGPSFeeds_NetStar.aspx";
    var URL = "http://947.mapservice.co.za/GetGPSFeeds_NetStar.aspx";
    $.ajax({
        url: URL,
        type: 'POST',
        dataType: "script",
        error: function () {
        },
        success: function (data) {
        }
    });
}

var currentProgress = (100/trackInterval) * 2;
var doIntervalPRogress;
function UpdateTrackingProgress() {
    currentProgress = currentProgress + (100 / trackInterval);
    var arLen = trackList.length;
    for (var i = 0, len = arLen; i < len; ++i) {
        $("#tpg" + trackList[i].toString() + "").progressbar({ value: currentProgress });
    }
//    $("#trackprogressbar1").progressbar({ value: currentProgress });
}

function queryGPSData() {
    trackingOff = false;
    currentProgress = (100 / trackInterval) * 2;
    clearInterval(doIntervalPRogress);
    doIntervalPRogress = setInterval(UpdateTrackingProgress, 1000);
    CheckGPSFeeds();
    var arLen = trackList.length;
    var assets = "";
    for (var i = 0, len = arLen; i < len; ++i) {
        if (i == 0) {
            assets = assets + "'" + trackList[i] + "'";
        }
        else {
            assets = assets + ", " + "'" + trackList[i] + "'";
        }
    }
    var URL = "http://947.mapservice.co.za/json_tracking_get.asp?key=LOQPUAYXGTCWXJHGYBFDRCSPHCKWBTBH&prj=947&assets=" + assets + "&jscb=trackingResults";

    //this function is in our streetmaps 
    callObj = new JSONscriptRequest(URL);
    callObj.Go(false);
}

var doInterval;
function GetLatestPositioning() {
    if (true) {
//        clearInterval(doIntervalPRogress);
        //        doIntervalPRogress = setInterval(UpdateTrackingProgress, 1000);
        queryGPSData();
        doInterval = setInterval(queryGPSData, 20000);
//        var URL = "http://947.mapservice.co.za/json_tracking_get.asp?key=LOQPUAYXGTCWXJHGYBFDRCSPHCKWBTBH&prj=947&assets=all&jscb=trackingResults";

//        //this function is in our streetmaps 
//        callObj = new JSONscriptRequest(URL);
//        callObj.Go(false);
    }
}

function trackingResults(data) {
    var NoRevGeoCode = true;    
    var dirResults = data.results;
    var noresults = dirResults.noresults;

//    if (dirResults.data.length < 3) {

//        return false;

//    }
    assetID = dirResults.data[0].AssetID;
    assetName = dirResults.data[0].AssetName;
    timeStamp = dirResults.data[0].TimeStamp;
    gisLat = dirResults.data[0].x;
    gisLong = dirResults.data[0].y;
    gisAlt = dirResults.data[0].z;
    speed = dirResults.data[0].speed;

    layerTrackAssets.RemoveAllPoints();
    for (var i = 0; i < dirResults.data.length; ++i) {
        trackID = dirResults.data[i].AssetID;
//        alert(trackID);
//        alert(document.getElementById("track" + trackID + "desc").innerHTML);
//        GetLatestRevGeocode(dirResults.data[i].x, dirResults.data[i].y, trackID)
////        if (dirResults.data[i].AssetName == '0') {
        ////            trackID = "0";
//        switch (trackID)
//        {
//            case 5005654:
//                imgSource = "http://947.mapservice.co.za/Images/Charities/madcharity.jpg";
//                break;
//            case 5004660:
//                imgSource = "http://947.mapservice.co.za/Images/Charities/philile.png";
//                break;
//            case 5004324:
//                imgSource = "http://947.mapservice.co.za/Images/Charities/pinkchicks.png";
//                break;
//            case 5004993:
//                imgSource = "http://947.mapservice.co.za/Images/Charities/reachforadreamnedbank.png";
//                break;
//            case 5005159:
//                imgSource = "http://947.mapservice.co.za/Images/Charities/rainbowandsmiles.jpg";
//                break;
//            case 5000449:
//                imgSource = "http://947.mapservice.co.za/Images/Charities/smilefoundation.png";
//                break;
//            case 5001622:
//                imgSource = "http://947.mapservice.co.za/Images/Charities/starfish.png";
//                break;
//            case 5005815:
//                imgSource = "http://947.mapservice.co.za/Images/Charities/thecows.png";
//                break;
//            default:
//                break;
//        }
//        var trackedHTML = document.getElementById("track" + trackID + "desc").innerHTML;
//        var rider = trackedHTML.split(":");
//var bubblehtml = "    <table>";
//    bubblehtml += "     <tr>";
//    bubblehtml += "<td colspan='2'>";
//    bubblehtml += "<img src='" + imgSource + "'/>";
//    bubblehtml += "</td>";
//    bubblehtml += "</tr>";
//    bubblehtml += "<tr>";
//    bubblehtml += "<td>";
//    bubblehtml += "Charity:";
//    bubblehtml += "</td>";
//    bubblehtml += "<td>" + dirResults.data[i].AssetName;
//    bubblehtml += "</td>";
//    bubblehtml += "</tr>";
//    bubblehtml += "<tr>";
//    bubblehtml += "<td>";
//    bubblehtml += "Rider:";
//    bubblehtml += "</td>";
//    bubblehtml += "<td>" + rider[1].tostring();
//    bubblehtml += "</td>";
//    bubblehtml += "</tr>";
//    bubblehtml += "</table>";
        t = layerTrackAssets.AddPoint(dirResults.data[i].x, dirResults.data[i].y, document.getElementById("track" + trackID + "desc").innerHTML);
//            p = layerTrackAssetsHist.AddPoint(dirResults.data[i].x, dirResults.data[i].y, 'id');
        t.SetTooltip(document.getElementById("track" + trackID + "desc").innerHTML);
            t.SetIcon("http://947.mapservice.co.za/Images/Cyclist.png");
//            p.SetIcon("http://947.mapservice.co.za/Images/footprint_black.png");
////        }
////        else if (dirResults.data[i].AssetName == 'Jumping Kids 2') {
////            trackID = "1";
////            t = layerTrackAssets.AddPoint(dirResults.data[i].x, dirResults.data[i].y, dirResults.data[i].AssetName + ": Jeep Vehicle 1", 'id');
//////            p = layerTrackAssetsHist.AddPoint(dirResults.data[i].x, dirResults.data[i].y, 'id');
////            t.SetTooltip(dirResults.data[i].AssetName + ": Jeep Vehicle 1");
////            t.SetIcon("http://947.mapservice.co.za/Images/Cyclist.png");
//////            p.SetIcon("http://jumpingkids.mapit.co.za/Images/Golf/footprint_red.png");
////        }
////        else {
////            trackID = "2";
////            t = layerTrackAssets.AddPoint(dirResults.data[i].x, dirResults.data[i].y, dirResults.data[i].AssetName + ": Jeep Vehivle 2", 'id');
//////            p = layerTrackAssetsHist.AddPoint(dirResults.data[i].x, dirResults.data[i].y, 'id');
////            t.SetTooltip(dirResults.data[i].AssetName + ": Jeep Vehicle 2");
////            t.SetIcon("http://947.mapservice.co.za/Images/Cyclist.png");
//////            p.SetIcon("http://jumpingkids.mapit.co.za/Images/Golf/footprint_green.png");
////        }
        if (NoRevGeoCode) {
            var TrackingSource = "NetStar";
            var html = "";
            //    var coords = dirResults.xy.split(",");
            if (TrackingSource == "NetStar") {
                html = "<table width=100% cellpadding=0 cellspacing=0 border=0>";
                html = html + "<tr><td valign='top'><font color=black>Address: </font></td><td>" + dirResults.data[i].address + "</td></tr>";
                html = html + "<tr><td><font color=black>Speed: </font></td><td>" + dirResults.data[i].speed + "</td></tr>";
                html = html + "<tr><td><font color=black>Heading: </font></td><td>" + dirResults.data[i].heading + "</td></tr>";
                html = html + "<tr><td><font color=black>Latitude: </font></td><td>" + dirResults.data[i].y + "</td></tr>";
                html = html + "<tr><td><font color=black>Longitude: </font></td><td>" + dirResults.data[i].x + "</td></tr>";
                html = html + "<tr><td><font size=1>[ <A id='zoomto" + trackID + "' href='#' onclick='JumpToCar(" + dirResults.data[i].x + " , " + dirResults.data[i].y + ")' style='color:black'>Zoom To</A>]</font></td></tr>";
                html = html + "</table><br/>";
                document.getElementById("track" + trackID).innerHTML = html;
            }
        }
        else {
            var URL = "http://www.streetmaps.co.za/api/rev_geocode/?key=LOQPUAYXGTCWXJHGYBFDRCSPHCKWBTBH&x=" + dirResults.data[i].x + "&y=" + dirResults.data[i].y + "&fmt=js&musthavelabel=1&jscb=RevGeoLocation" + trackID;
        }
//        $.ajax({
//            url: URL,
//            dataType: 'jsonP',
//            type: 'post',
//            error: function (xhr, ajaxOptions, thrownError) {
//            alert(xhr.statusText);
//            },
//            success: function () {
//            alert("booja");
//            // document.getElementById(trackID).innerHTML = "changed";
//            }
        //            });
//        $.ajax({
//            url: URL,
//            dataType: 'jsonP',
//            type: 'GET'
//        });

        t.SetIconSize(32, 37);
        t.SetIconAnchor("center", "bottom");
        t.SetLabelAnchor("iconcenter", "iconcenter");
        t.SetClickBehaviour("toggle_all_label");
        t.SetStyle("icon");
//        p.SetIconSize(24, 30);
//        p.SetIconAnchor("center", "center");
//        p.SetStyle("icon");
    }
    myMap.Update();
}

var activateEmailFunction = false;
var currentDirData = "";

function createPopup() {
    currentDirData = document.getElementById("route_data");
    var dialog = $("#popupEmail").dialog({
        modal: true,
        height: '280',
        width: '350',
        title: 'Email Directions',
        buttons: { "Return to Directions": function () { $(this).dialog("close"); } }
    });
    var emailFrm = "<iframe src='http://controls.mapit.co.za/sitebuilder/Emailer.aspx?currentX=" + fromRoadX + "&currentY=" + fromRoadY + "&x=" + toRoadX + "&y=" + toRoadY + "&framecolor=navy&bannerpath=" + "http://www.mapit.co.za/images/mapit-directions-header.png" + "' id='emailframe' frameBorder='0' scrolling='no' width='315px' height='175px'></iframe>";
    $("#popupEmail").html(emailFrm);
}

function closeMailPopup() {
    $("#popupEmail").dialog("close");
}

function OpenEmailPopup() {
    createPopup();
    //    $("#popupEmail").html("http://storelocator.mapservice.co.za/Emailer.aspx");
    $("#popupEmail").dialog("open");
}

function printDiv() {
    var divToPrint = document.getElementById("route_data").innerHTML;

    newWin = window.open("");
    newWin.document.write(document.getElementById("route_data").innerHTML);
    newWin.print();
//    newWin.close();
}

function getroads() {
    //get the road name off the page
    var roadname = document.getElementById("roadname").value;

    //call the URL with all your data
    var URL = "http://www.mapservice.co.za/api/search?key=LOQPUAYXGTCWXJHGYBFDRCSPHCKWBTBH&fmt=js&jscb=searchresults&s1=" + roadname

    //this function is in our streetmaps 
    callObj = new JSONscriptRequest(URL);
    callObj.Go(false);
}


function searchresults(data) {
    //data returned is is object 
    var dirResults = data.results;
    //alert(dirResults.match.length)
    //must find at least one result then position map
    var html = "<table border=0 ><tr><td></td>"
    for (var i = 0; i < dirResults.match.length; ++i) {
        var match = dirResults.match[i].match;
        var type = dirResults.match[i].type;
        var desc = dirResults.match[i].desc;
        var hnumber = dirResults.match[i].number;
        var mySplitResult = desc.split(",");
        //                "<tr><Td>" + match + "</td><td>" + type + "</td><td onclick='getweather(" + dirResults.match[i].x + "," + dirResults.match[i].y + ")'><a href='#get'>" + desc + "</a></td>";
        html += "<tr><td style='FONT-SIZE: 11px;COLOR: #000000' class=beigetext onclick='selectFromRoad(" + dirResults.match[i].x + "," + dirResults.match[i].y + ")'><a href='#get'>" + hnumber + desc + "</a></td>";
        // alert(map_x)


    }
    html += "</table>";
    document.getElementById("road_data").innerHTML = html;
}

function getroads2() {
    //get the road name off the page
    var roadname = document.getElementById("roadname2").value;

    //call the URL with all your data
    var URL = "http://www.mapservice.co.za/api/search?key=LOQPUAYXGTCWXJHGYBFDRCSPHCKWBTBH&fmt=js&jscb=searchresults2&s1=" + roadname

    //this function is in our streetmaps 
    callObj = new JSONscriptRequest(URL);
    callObj.Go(false);
}


function searchresults2(data) {
    //data returned is is object 
    var dirResults = data.results;
    //alert(dirResults.match.length)
    //must find at least one result then position map
    var html = "<table border=0 ><tr><td></td>"
    for (var i = 0; i < dirResults.match.length; ++i) {
        var match = dirResults.match[i].match;
        var type = dirResults.match[i].type;
        var desc = dirResults.match[i].desc;
        var hnumber = dirResults.match[i].number;
        var mySplitResult = desc.split(",");
        //                "<tr><Td>" + match + "</td><td>" + type + "</td><td onclick='getweather(" + dirResults.match[i].x + "," + dirResults.match[i].y + ")'><a href='#get'>" + desc + "</a></td>";
        html += "<tr><td style='FONT-SIZE: 11px;COLOR: #000000' class=beigetext onclick='selectToRoad(" + dirResults.match[i].x + "," + dirResults.match[i].y + ")'><a href='#get'>"+ hnumber + desc + "</a></td>";
        // alert(map_x)


    }
    html += "</table>";
    document.getElementById("road2_data").innerHTML = html;
}
var VMileMarker = true;
var fromRoad = "";
var toRoad = "";
var fromRoadX = "";
var fromRoadY = "";
var toRoadX = "";
var toRoadY = "";
var desc0 = "";
function selectFromRoad(x, y) {
    currentX = x;
    currentY = y;
    t = layerFromPoints.AddPoint(x, y, 'Start', 'id');
    t.SetIcon("http://947.mapservice.co.za/Images/start_icon.png");
    t.SetIconSize(64, 32);
    t.SetTooltip('Start');
    t.SetIconAnchor("left", "bottom");
    t.SetLabelAnchor("iconcenter", "iconcenter");
    t.SetClickBehaviour("toggle_all_label");
    t.SetStyle("icon");
    myMap.Jump(x, y, 0.01);
    myMap.Update()
    fromRoad = desc0;
    fromRoadX = currentX;
    fromRoadY = currentY;
    RouteNext();
}

function selectToRoad(x, y) {
    currentX = x
    currentY = y
    t = layerToPoints.AddPoint(x, y, 'Destination', 'id');
    t.SetIcon("http://947.mapservice.co.za/Images/end-icon.png");
    t.SetIconSize(43, 32);
    t.SetTooltip('Destination');
    t.SetIconAnchor("left", "bottom");
    t.SetLabelAnchor("iconcenter", "iconcenter");
    t.SetClickBehaviour("toggle_all_label");
    t.SetStyle("icon");
    myMap.Jump(x, y, 0.01);
    myMap.Update()
    toRoad = desc0;
    toRoadX = currentX;
    toRoadY = currentY;
    RouteNext2();
}

var _directionsReset = "";
function restart() {
    layerFromPoints.RemoveAllPoints();
    layerToPoints.RemoveAllPoints();
    var CurrentHTML = "";
    CurrentHTML += "    <form method='get' id='newsletterform' action='javascript:void(0)'>";
    CurrentHTML += "    <h6><b>Enter your start Location</b></h7>";
    CurrentHTML += "    <input type='text' onfocus='this.value=\"\";this.style.color=\"#000000\"' value='West Street, Sandton' id='roadname' style='color:#C0C0C0;width:95%;'/>";
    CurrentHTML += "    <span class='art-button-wrapper'>";
    CurrentHTML += "	    <span class='l'> </span>";
    CurrentHTML += "	    <span class='r'> </span>";
    CurrentHTML += "	    <button id='btnGetRoads'>Find</button>";
    CurrentHTML += "    </span>";
    CurrentHTML += "    <div id='road_div'>";
    CurrentHTML += "        <span id='road_data'></span>";
    CurrentHTML += "    </div>";
    CurrentHTML += "    </form>";
    _directionsReset = "";
    _directionsReset += "                                <div class='art-Footer-inner'>";
    _directionsReset += "                                    <div class='art-Footer-text'>";
    _directionsReset += "                                          <div>";
    _directionsReset += "                                                <a href='http://www.mapit.co.za/business/index.html'>";
    _directionsReset += "                                                    <img src='images/banner_PYBOTM.gif' alt='an image' style='padding-left:10px;padding-right:10px;display:inline'/>";
    _directionsReset += "                                                </a>";
    _directionsReset += "                                                <a href='http://www.marketscope.co.za'>";
    _directionsReset += "                                                    <img src='images/marketscope.gif' alt='an image' style='display:inline'/>";
    _directionsReset += "                                                </a>";
    _directionsReset += "                                                <a href='http://www.mapit.co.za/action/mapping.html'>";
    _directionsReset += "                                                    <img src='images/banner_webmapping.png' alt='an image' style='display:inline' />";
    _directionsReset += "                                                </a>";
    _directionsReset += "                                                <br/>";
    _directionsReset += "                                          </div>";
    _directionsReset += "                                          <br/>";
    _directionsReset += "                                          Copyright &copy; 2009 ---. All Rights Reserved.";
    _directionsReset += "                                    </div>";
    _directionsReset += "                                </div>";
    _directionsReset += "                                <div id='footerSec1' class='art-Footer-background'></div>";
    //    CurrentHTML += "    <input class='art-button' type='submit' onclick='getroute()' name='search' value='Get Directions'/>";
//    CurrentHTML += "    <input class='art-button' type='submit' onclick='restart()' name='search' value='Restart'/>";
    document.getElementById("routing").innerHTML = CurrentHTML;
    //    document.getElementById('route_data').innerHTML = "";
//// only removed until space is made
////    document.getElementById('footersec').innerHTML = _directionsReset;
////    document.getElementById('footersec').style.height = "auto";
}



function restart2() {
    layerFromPoints.RemoveAllPoints();
    layerToPoints.RemoveAllPoints();
    var CurrentHTML = "";
    CurrentHTML += "    <form method='get' id='newsletterform' action='javascript:void(0)'>";
    CurrentHTML += "    <h6><b>Enter your start Location</b></h7>";
    CurrentHTML += "    <input type='text' onfocus='this.value=\"\";this.style.color=\"#000000\"' value='West Street, Sandton' id='roadname' style='color:#C0C0C0;width:95%;'/>";
    CurrentHTML += "    <span class='art-button-wrapper'>";
    CurrentHTML += "	    <span class='l'> </span>";
    CurrentHTML += "	    <span class='r'> </span>";
    CurrentHTML += "	    <button id='btnGetRoads'>Find</button>";
    CurrentHTML += "    </span>";
    CurrentHTML += "    <div id='road_div'>";
    CurrentHTML += "        <span id='road_data'></span>";
    CurrentHTML += "    </div>";
    CurrentHTML += "    </form>";
    _directionsReset = "";
//    _directionsReset += "                                <div class='art-Footer-inner'>";
//    _directionsReset += "                                    <div class='art-Footer-text'>";
//    _directionsReset += "                                          <div>";
//    _directionsReset += "                                                <a href='http://www.mapit.co.za/business/index.html'>";
//    _directionsReset += "                                                    <img src='images/banner_PYBOTM.gif' alt='an image' style='padding-left:10px;padding-right:10px;display:inline'/>";
//    _directionsReset += "                                                </a>";
//    _directionsReset += "                                                <a href='http://www.marketscope.co.za'>";
//    _directionsReset += "                                                    <img src='images/marketscope.gif' alt='an image' style='display:inline'/>";
//    _directionsReset += "                                                </a>";
//    _directionsReset += "                                                <a href='http://www.mapit.co.za/action/mapping.html'>";
//    _directionsReset += "                                                    <img src='images/banner_webmapping.png' alt='an image' style='display:inline' />";
//    _directionsReset += "                                                </a>";
//    _directionsReset += "                                                <br/>";
//    _directionsReset += "                                          </div>";
//    _directionsReset += "                                          <br/>";
//    _directionsReset += "                                          Copyright &copy; 2009 ---. All Rights Reserved.";
//    _directionsReset += "                                    </div>";
//    _directionsReset += "                                </div>";
//    _directionsReset += "                                <div id='footerSec1' class='art-Footer-background'></div>";
    //    CurrentHTML += "    <input class='art-button' type='submit' onclick='getroute()' name='search' value='Get Directions'/>";
    //    CurrentHTML += "    <input class='art-button' type='submit' onclick='restart()' name='search' value='Restart'/>";
    document.getElementById("routing").innerHTML = CurrentHTML;
    //    document.getElementById('route_data').innerHTML = "";
    document.getElementById('footersec').innerHTML = _directionsReset;
    document.getElementById('footersec').style.height = "auto";
}

function RouteNext() {
    var CurrentHTML = "";
    CurrentHTML += "    <form method='get' id='newsletterform' action='javascript:void(0)'>";
    CurrentHTML += "    <h6><b>Your Start Location :</b></h6>";
    CurrentHTML += "    <img src='images/start_icon.png' alt='an image'>";
    CurrentHTML += "    <span>" + fromRoad + "</span>";
    CurrentHTML += "    <h6><b>Enter your Destination</b></h6>";
    CurrentHTML += "    <input type='text' onfocus='this.value=\"\";this.style.color=\"#000000\"' value='West Street, Sandton' id='roadname2' style='color:	#C0C0C0;width:95%;' />";
    CurrentHTML += "    <span class='art-button-wrapper'>";
    CurrentHTML += "	    <span class='l'> </span>";
    CurrentHTML += "	    <span class='r'> </span>";
    CurrentHTML += "	    <button id='btnGetRoads2'>Find</button>";
    CurrentHTML += "    </span>";
    CurrentHTML += "    <span id='road2_data'></span>";
    CurrentHTML += "    </form>";
    CurrentHTML += "    <span class='art-button-wrapper'>";
    CurrentHTML += "	    <span class='l'> </span>";
    CurrentHTML += "	    <span class='r'> </span>";
    CurrentHTML += "        <button id='btnRestart'>Restart</button>";
    CurrentHTML += "    </span>";
    document.getElementById("routing").innerHTML = CurrentHTML;
    $("#btnGetRoads2").button({
        icons: {
            primary: "ui-icon-search"
        }
    });

    $("#btnGetRoads2").live("click", function () {
        var roadname = document.getElementById("roadname2").value;
        if (roadname == null || roadname == '') {
        }
        else {
            getroads2();
        }
    });

    $("#btnRestart").button({
        icons: {
            primary: "ui-icon-search"
        }
    });

    $("#btnRestart").live("click", function () {
        restart();
    });
}

function getroute() {
//    var roadname = document.getElementById("roadname").value;

    //call the URL with all your data
//    myMap.routeLayer.routePath = "/maptile/rw2/";
    //    myMap.Update()
    var requestPoints = "" + fromRoadX + "," + fromRoadY + "," + toRoadX + "," + toRoadY;
    var apiKey = "LOQPUAYXGTCWXJHGYBFDRCSPHCKWBTBH";
//    var URL = "http://www.mapservice.co.za/ajax_route.aspx?key=LOQPUAYXGTCWXJHGYBFDRCSPHCKWBTBH&raw=1&sv=1&td=1&pointtype=xy&points=" + fromRoadX + "," + fromRoadY + "," + toRoadX + "," + toRoadY + "&network=3&tsp=0&fmt=js&jscb=routeresults"
    var URL = "http://www.streetmaps.co.za/api/directions"
  
//    var URL = "http://www.mapservice.co.za/ajax_route.asp?key=LOQPUAYXGTCWXJHGYBFDRCSPHCKWBTBHx1=currentX&y1=currentY&x2=x&y2"

    $.ajax({
        url: URL,
        data: {
            pointtype: "xy",
            key: apiKey,
            fmt: "js",
            jscb: "routeResultsHandler",
            coords: "full",
            points: requestPoints,
            network: 3
        },
        dataType: "jsonp",
        cache: false,
        crossDomain: true,
        error: function (jqXHR, textStatus, errorThrown) {
            //   alert("readyState: " + jqXHR.readyState + "\nstatus: " + jqXHR.status);
            //   alert("responseText: " + jqXHR.responseText);
        },
        success: function (data) {
        }
    });
    myMap.Update()
}


function DrawRoute(pathpoints) {
    var leftX = 360;
    var rightX = -360;
    var topY = -180;
    var bottomY = 180;
    myMap.RemoveLayer("vlRouting");
    var pathElements = pathpoints.split(",");
    var p = [];
    for (var i = 0; i < pathElements.length; ++i) {
        pathElement = pathElements[i].split("|");
        p.push(pathElement[0], pathElement[1]);
        if (pathElement[0] < leftX) {
            leftX = pathElement[0];
        }
        if (pathElement[0] > rightX) {
            rightX = pathElement[0];
        }
        if (pathElement[1] > topY) {
            topY = pathElement[1];
        }
        if (pathElement[1] < bottomY) {
            bottomY = pathElement[1];
        }
    }
    var pathElement = pathElements[0].split("|");
    //PATH
    //    p = ["M", pathElement[0], pathElement[1], "L"].concat(p);
    //    newRoute = vlRouting.path(p);
    //LINE
    //    p = ["M", pathElement[0], pathElement[1], "L"].concat(p);
    vlRouting = myMap.AddLayer("vector", 497, "vlRouting");
    vlRouting.set("stroke", "#00FF00");
    vlRouting.set("stroke-width", 3);
    vlRouting.line([].concat(p));
    myMap.Update();
    myMap.ZoomBounds(leftX, topY, rightX, bottomY);
}

function decodeLine(encoded) {
    encoded = encoded.replace(/\\\\/g, "\\");
    var len = encoded.length;
    var index = 0;
    var array = [];
    var lat = 0;
    var lng = 0;

    while (index < len) {
        var b;
        var shift = 0;
        var result = 0;
        do {
            b = encoded.charCodeAt(index++) - 63;
            result |= (b & 0x1f) << shift;
            shift += 5;
        } while (b >= 0x20);
        var dlat = ((result & 1) ? ~(result >> 1) : (result >> 1));
        lat += dlat;

        shift = 0;
        result = 0;
        do {
            b = encoded.charCodeAt(index++) - 63;
            result |= (b & 0x1f) << shift;
            shift += 5;
        } while (b >= 0x20);
        var dlng = ((result & 1) ? ~(result >> 1) : (result >> 1));
        lng += dlng;

        array.push(lng * 1e-5);
        array.push(lat * 1e-5);

    }

    return array;
}

function routeResultsHandler(data) {
    var pathPoints = "";
    var dirRouteResults = data.results;
    var noresults = dirRouteResults.noresults;
    if (data.results.error != null) {
        alert(data.results.error.message);
    }
    var html = "<table style='border-collapse:separate;width:100%;background-color: Transparent'>";
    html += "<tr><td colspan='5'></td></tr>";
    html += "<tr>";
    html += "<td style'padding-left:60px'><b> Step </b></td>";
    html += "<td style'padding-left:60px'><b> Direction details </b></td>";
    html += "<td style'padding-left:100px'><b> Step Distance </b></td>";
    html += "<td style'padding-left:100px'><b> Total Distance </b></td>";
    html += "<td style'padding-left:100px'><b> Speed </b></td>";
    html += "</tr>";
        
    for (var i = 0; i < dirRouteResults.route.length; ++i) {
        var stepno = dirRouteResults.route[i].step;
        var routedata = dirRouteResults.route[i].data;
        var routecoords= dirRouteResults.route[i].coords;
        var routedatadetail = routedata.split("|");
        for (var j = 0; j < routecoords.length; ++j) {
            pathPoints += routecoords[j].x + "|" + routecoords[j].y + ",";
        }
        if (i == 0) {
            html += "<tr>";
            html += "<td style='FONT-SIZE: 11px;text-align:left'>" + stepno + "</td>";
            html += "<td style='FONT-SIZE: 11px;text-align:left'> Start at " + routedatadetail[0] + " " + routedatadetail[1] + "</td>";
            html += "<td style='FONT-SIZE: 11px;text-align:left'> Travel for " + routedatadetail[2] + "</td>";
            html += "<td style='FONT-SIZE: 11px;text-align:left'>" + formatNumbers(routedatadetail[3].replace('m','')/1000,2) + " km</td>";
            html += "<td style='FONT-SIZE: 11px;text-align:left'>" + Math.floor(routedatadetail[6]) + " km/h</td>";
            html += "</tr>";
        }
        else {
            html += "<tr>";
            html += "<td style='FONT-SIZE: 11px;text-align:left'>" + stepno + "</td>";
            html += "<td style='FONT-SIZE: 11px;text-align:left'>" + routedatadetail[0] + " " + routedatadetail[1] + "</td>";
            html += "<td style='FONT-SIZE: 11px;text-align:left'> Travel for " + routedatadetail[2] + "</td>";
            html += "<td style='FONT-SIZE: 11px;text-align:left'>" + formatNumbers(routedatadetail[3].replace('m', '') / 1000, 2) + " km</td>";
            html += "<td style='FONT-SIZE: 11px;text-align:left'>" + Math.floor(routedatadetail[6]) + " km/h</td>";
            html += "</tr>";
        }
    }
    pathPoints = pathPoints.substr(0, pathPoints.length - 1);
    html += "<tr>";
    html += "<td style='FONT-SIZE: 11px;text-align:left'>" + (i + 1) + "</td>";
    html += "<td style='FONT-SIZE: 11px;text-align:left'> Destination reached</td>";
    html += "<td style='FONT-SIZE: 11px;text-align:left'></td>";
    html += "<td style='FONT-SIZE: 11px;text-align:left'></td>";
    html += "<td style='FONT-SIZE: 11px;text-align:left'></td>";
    html += "</tr>";
    html += "</table>";
    document.getElementById('footersec').innerHTML = _directions;
    document.getElementById("route_data").innerHTML = html;
    currentDirData = html;
    DrawRoute(pathPoints);
}


function formatNumbers(expr, decplaces) {
    // raise incoming value by power of 10 times the
    // number of decimal places; round to an integer; convert to string
    var str = "" + Math.round(eval(expr) * Math.pow(10, decplaces))
    // pad small value strings with zeros to the left of rounded number
    while (str.length <= decplaces) {
        str = "0" + str
    }
    // establish location of decimal point
    var decpoint = str.length - decplaces
    // assemble final result from: (a) the string up to the position of
    // the decimal point; (b) the decimal point; and (c) the balance
    // of the string. Return finished product.
    return str.substring(0, decpoint) + "." + str.substring(decpoint, str.length);
}

var _directions = "";
_directions = "";
_directions += "                                <div class='art-Footer-inner-directions'>";
//_directions += "                                          <img onclick='printDiv()' src='images/print_blue.png' alt='Print Directions' style='float:right;width:30px;height:30px;vertical-align:middle;padding-right:10px;top:0px;left: 0px;z-index:7'>";
//_directions += "                                          <img id='emailbutton' src='../images/email_blue.png' alt='Email Directions' style='float:right;width:30px;height:30px;vertical-align:middle;padding-right:5px;top:0px;left: 0px;z-index: 7'>";
_directions += "                                          <div onclick='printDiv()'  style='float:right;width:30px;height:30px;vertical-align:middle;padding-right:10px;top:0px;left: 0px;z-index:7;cursor: pointer'>[Print]</div>";
_directions += "                                          <div id='emailbutton' style='float:right;width:30px;height:30px;vertical-align:middle;padding-right:5px;top:0px;left: 0px;z-index: 7;cursor: pointer'>[Email]</div>";

_directions += "                                          <div id='popupEmail'></div>";
_directions += "                                          <div style='clear:both'></div>";
_directions += "                                     <div class='paneldirections' style=' z-index: 8' id='pdirpanel0' runat='server'>";
_directions += "                                           <div id='route_div'>";
_directions += "                                                 <span style='text-align:left' id='route_data'></span>";
_directions += "                                           </div>";
_directions += "                                     </div>";
_directions += "                                </div>";

function RouteNext2() {
    var CurrentHTML = "";
    CurrentHTML += "    <form method='get' id='newsletterform' action='javascript:void(0)'>";
    CurrentHTML += "    <h6><b>Your Start Location :</b></h6>";
    CurrentHTML += "    <img src='images/start_icon.png' alt='an image'>";
    CurrentHTML += "    <span>" + fromRoad + "</span>";
    CurrentHTML += "    <h6><b>Your End Location :</b></h6>";
    CurrentHTML += "    <img src='images/end-icon.png' alt='an image'>";
    CurrentHTML += "    <span>" + toRoad + "</span>";
    CurrentHTML += "    </form>";
    CurrentHTML += "    <span class='art-button-wrapper'>";
    CurrentHTML += "	    <span class='l'> </span>";
    CurrentHTML += "	    <span class='r'> </span>";
    CurrentHTML += "        <button id='btnGetRoute'>Get Directions</button>";
    CurrentHTML += "    </span>";
    CurrentHTML += "    <span class='art-button-wrapper'>";
    CurrentHTML += "	    <span class='l'> </span>";
    CurrentHTML += "	    <span class='r'> </span>";
    CurrentHTML += "        <button id='btnRestart'>Restart</button>";
    CurrentHTML += "    </span>";
    CurrentHTML += "  <div id='footersec'> </div>"
    document.getElementById("routing").innerHTML = CurrentHTML;
    $("#btnGetRoute").button({
        icons: {
            primary: "ui-icon-search"
        }
    });

    $("#btnGetRoute").live("click", function () {
        getroute();
    });

    $("#btnRestart").button({
        icons: {
            primary: "ui-icon-search"
        }
    });

    $("#btnRestart").live("click", function () {
        restart();
    });
}

function populate15Aug() {
    var CurrentHTML = document.getElementById("Aug15").innerHTML;
    if (CurrentHTML.length < 35) {
        var html = "<table border=0 ><tr><td></td>";
        html += "<tr><td style='FONT-SIZE: 11px;COLOR: #333333' onclick='JumpToSideBarItem( 18.324351 , -32.094146, \"idd1\")'><a href='#get'>Xamarin Golf Course - Lamberts Bay</a></td>";
        html += "</table>";
        myMap.Jump(18.324351, -32.094146, 10.24);
        myMap.Update();
    }
    else {
        html = "<div style='height: 1px'></div>";
    }
    document.getElementById("Aug15").innerHTML = html;
}



function toggleRouting() {
    var CurrentHTML = document.getElementById("routing").innerHTML;
    if (CurrentHTML.length == 0) {
        restart();
    }
    else {
        html = "";
        document.getElementById("routing").innerHTML = html;
    }
}

function toggleRouting2() {
    var CurrentHTML = document.getElementById("routing").innerHTML;
    if (CurrentHTML.length == 0) {
        restart2();
    }
    else {
        html = "";
        document.getElementById("routing").innerHTML = html;
    }
}

var currentX
var currentY

function openSWF() {
    window.open("http://947.mapservice.co.za/Videos/Cosmo_City.swf", "_blank", "width=500,height=500");
}


function JumpToSideBarItem(x, y, idd) {

    if (PreviousPopUp != "")
    {
    var layer = myMap.GetLayer("layerDynamicPoints");
    var pt = layer.FindPoint(PreviousPopUp);
    pt.SetStyle("icon");
}

    var layerN = myMap.GetLayer("layerDynamicPoints");
    var nt = layerN.FindPoint(idd);
    nt.SetStyle("label");
    PreviousPopUp = idd;
    myMap.Jump(x, y, 0.01);
        myMap.Update()
   

}


//$("tr.storeitems").mouseover(function () {
//    var itemid = this.id;
//    // alert(this.id);
//    var tid = itemid.replace("ida", "");
//    tid = tid.replace("id", "");
//    var layer = myMap.GetLayer("layerPoints");
//    var pt = layer.FindPoint(itemid.replace("a", ""));
//    // pt.SetIcon("http://www.streetmaps.co.za/icons/43.png");
//    if (tid < 10) {
//        pt.SetIcon("http://storelocator.mapservice.co.za/Images/MapIcons/" + sel_icontype + "_" + sel_iconcolour + "_0" + tid + "_" + sel_iconsize + ".png");

//    }
//    else {
//        if (tid >= 10) {
//            pt.SetIcon("http://storelocator.mapservice.co.za/Images/MapIcons/" + sel_icontype + "_" + sel_iconcolour + "_" + tid + "_" + sel_iconsize + ".png");
//        }
//    }
//    //alert(myPoints[tid]) //= dirResults.data[i].x + "|" + dirResults.data[i].y
//    var temparray = myPoints[tid].split("|");
//    myMap.Jump(temparray[0], temparray[1], 0.05);
//    myMap.Update();
//}).mouseout(function () {
//    var itemid = this.id;
//    var tid = itemid.replace("ida", "");
//    tid = tid.replace("id", "");
//    var layer = myMap.GetLayer("layerPoints");
//    var pt = layer.FindPoint(itemid.replace("a", ""));
//    // pt.SetIcon("http://www.streetmaps.co.za/icons/43.png");
//    if (tid < 10) {
//        pt.SetIcon("http://storelocator.mapservice.co.za/Images/MapIcons/" + icontype + "_" + iconcolour + "_0" + tid + "_" + iconsize + ".png");
//    }
//    else {
//        if (tid >= 10) {
//            pt.SetIcon("http://storelocator.mapservice.co.za/Images/MapIcons/" + icontype + "_" + iconcolour + "_" + tid + "_" + iconsize + ".png");
//        }
//    }
//    myMap.Update();
//});

function addToFavorite() {
    var title, url;
    title = document.title;
    url = location.href;

    if (window.sidebar) { // Mozilla Firefox Bookmark
        window.sidebar.addPanel(title, url, "");
    } else if (document.all) { // IE Favorite
        window.external.AddFavorite(url, title);
    }
    else if (window.opera && window.print) { // Opera Hotlist
        return true;
    }
    else {
        alert('Browser not Supported');
    }
}

function OpenPdfProfile() {

}

function loadRows() {
    layerDynamicPoints.RemoveAllPoints();

    var stringTemp = "";
    var routingString = "";
    var trackingString = "";
    trackingString += "<h3><a href='#'>Tracking (Live on Race Day) <font align='right' color='by' style='font-weight: normal; font-size: 10px'>by <font color='black' style='font-weight: normal; font-size: 10px'>Altech Netstar</font></font></a></h3>";
    trackingString += "<div>";
    trackingString += "<table width=100% cellpadding=0 cellspacing=0 border=0>";
    trackingString += "<tr style='vertical-align: top'>";
    trackingString += "<td id='track5005159desc' colspan=2 align='left' style='padding-left:10px'>Rainbows and Smiles: Bonita Suckling</td>";
    trackingString += "<td width='80px' align='right' style='padding-right:2px'><font size=1>[ <A href='#' onclick='TrackingCheck(5005159, this)' style='color:Yellow'>Track Cyclist</A>]</font></td>";
    trackingString += "</tr>";

    trackingString += "<tr style='padding-top:15px' >";
    trackingString += "<td align='left' class='gen' style='vertical-align:top;padding-left:10px;padding-top:5px'>";
    trackingString += "<table width=100% cellpadding=0 cellspacing=0 border=0>";
    trackingString += "<tr><td align='left' class='gen' style='vertical-align:top;padding-left:10px;padding-top:5px'><a href='http://www.rainbowsandsmiles.org.za' target='_blank'><img src='images/Charities/rainbowandsmiles.jpg' /></a></td></tr>";
    trackingString += "<tr><td align='left' class='trackprogress' style='vertical-align:top;padding-left:10px;padding-top:5px'><div id='tpg5005159'></div></td></tr>";
    trackingString += "</table>";
    trackingString += "</td>";
    trackingString += "<td slign='right' style='vertical-align:top;padding-left:10px;padding-top:5px' id='track5005159' class='trackitem'>Click <b><font style='color:black'><font style='color:black'>Track Cyclist</font></font></b> to start tracking. <br />";
    trackingString += "</td>";
    trackingString += "</tr>";

    trackingString += "<tr style='vertical-align: top'>";
    trackingString += "<td id='track5004324desc' colspan=2 align='left' style='padding-left:10px'>Pink Chicks: Roby Madden</td>";
    trackingString += "<td width='80px' align='right' style='padding-right:2px'><font size=1>[ <A href='#' onclick='TrackingCheck(5004324, this)' style='color:Yellow'>Track Cyclist</A>]</font></td>";
    trackingString += "</tr>";

    trackingString += "<tr style='padding-top:15px' >";
    trackingString += "<td align='left' class='gen' style='vertical-align:top;padding-left:10px;padding-top:5px'>";
    trackingString += "<table width=100% cellpadding=0 cellspacing=0 border=0>";
    trackingString += "<tr><td align='left' class='gen' style='vertical-align:top;padding-left:10px;padding-top:5px'><a href='http://www.pinkchicks.co.za' target='_blank'><img src='images/Charities/PinkChicks.png' /></a></td></tr>";
    trackingString += "<tr><td align='left' class='trackprogress' style='vertical-align:top;padding-left:10px;padding-top:5px'><div id='tpg5004324'></div></td></tr>";
    trackingString += "</table>";
    trackingString += "</td>";
    trackingString += "<td style='vertical-align:top;padding-left:10px;padding-top:5px' id='track5004324' class='trackitem'>Click <b><font style='color:black'>Track Cyclist</font></b> to start tracking. <br />";
    trackingString += "</td>";
    trackingString += "</tr>";

    trackingString += "<tr style='vertical-align: top'>";
    trackingString += "<td id='track5005654desc' colspan=2 align='left' style='padding-left:10px'>Making a Difference Charity: Ian Martin</td>";
    trackingString += "<td width='80px' align='right' style='padding-right:2px'><font size=1>[ <A href='#' onclick='TrackingCheck(5005654, this)' style='color:Yellow'>Track Cyclist</A>]</font></td>";
    trackingString += "</tr>";

    trackingString += "<tr style='padding-top:15px' >";
    trackingString += "<td align='left' class='gen' style='vertical-align:top;padding-left:10px;padding-top:5px'>";
    trackingString += "<table width=100% cellpadding=0 cellspacing=0 border=0>";
    trackingString += "<tr><td align='left' class='gen' style='vertical-align:top;padding-left:10px;padding-top:5px'><a href='http://www.madcharity.org' target='_blank'><img src='images/Charities/Madcharity.jpg' /></a></td></tr>";
    trackingString += "<tr><td align='left' class='trackprogress' style='vertical-align:top;padding-left:10px;padding-top:5px'><div id='tpg5005654'></div></td></tr>";
    trackingString += "</table>";
    trackingString += "</td>";
    trackingString += "<td style='vertical-align:top;padding-left:10px;padding-top:5px' id='track5005654' class='trackitem'>Click <b><font style='color:black'>Track Cyclist</font></b> to start tracking. <br />";
    trackingString += "</td>";
    trackingString += "</tr>";

    trackingString += "<tr style='vertical-align: top'>";
    trackingString += "<td id='track5004993desc' colspan=2 align='left' style='padding-left:10px'>Reach for a Dream: Louise Davies</td>";
    trackingString += "<td width='80px' align='right' style='padding-right:2px'><font size=1>[ <A href='#' onclick='TrackingCheck(5004993, this)' style='color:Yellow'>Track Cyclist</A>]</font></td>";
    trackingString += "</tr>";

    trackingString += "<tr style='padding-top:15px' >";
    trackingString += "<td align='left' class='gen' style='vertical-align:top;padding-left:10px;padding-top:5px'>";
    trackingString += "<table width=100% cellpadding=0 cellspacing=0 border=0>";
    trackingString += "<tr><td align='left' class='gen' style='vertical-align:top;padding-left:10px;padding-top:5px'><a href='http://www.dreamriders.co.za' target='_blank'><img src='images/Charities/reachforadreamnedbank.png' /></a></td></tr>";
    trackingString += "<tr><td align='left' class='trackprogress' style='vertical-align:top;padding-left:10px;padding-top:5px'><div id='tpg5004993'></div></td></tr>";
    trackingString += "</table>";
    trackingString += "</td>";
    trackingString += "<td style='vertical-align:top;padding-left:10px;padding-top:5px' id='track5004993' class='trackitem'>Click <b><font style='color:black'>Track Cyclist</font></b> to start tracking. <br />";
    trackingString += "</td>";
    trackingString += "</tr>";

    trackingString += "<tr style='vertical-align: top'>";
    trackingString += "<td id='track5004660desc' colspan=2 align='left' style='padding-left:10px'>Philile: Gugu Zulu</td>";
    trackingString += "<td width='80px' align='right' style='padding-right:2px'><font size=1>[ <A href='#' onclick='TrackingCheck(5004660, this)' style='color:Yellow'>Track Cyclist</A>]</font></td>";
    trackingString += "</tr>";

    trackingString += "<tr style='padding-top:15px' >";
    trackingString += "<td align='left' class='gen' style='vertical-align:top;padding-left:10px;padding-top:5px'>";
    trackingString += "<table width=100% cellpadding=0 cellspacing=0 border=0>";
    trackingString += "<tr><td align='left' class='gen' style='vertical-align:top;padding-left:10px;padding-top:5px'><a href='http://http://www.philile.org/get-involved.html' target='_blank'><img src='images/Charities/philile.png' /></a></td></tr>";
    trackingString += "<tr><td align='left' class='trackprogress' style='vertical-align:top;padding-left:10px;padding-top:5px'><div id='tpg5004660'></div></td></tr>";
    trackingString += "</table>";
    trackingString += "</td>";
    trackingString += "<td style='vertical-align:top;padding-left:10px;padding-top:5px' id='track5004660' class='trackitem'>Click <b><font style='color:black'>Track Cyclist</font></b> to start tracking. <br />";
    trackingString += "</td>";
    trackingString += "</tr>";

    trackingString += "<tr style='vertical-align: top'>";
    trackingString += "<td id='track5001622desc' colspan=2 align='left' style='padding-left:10px'>Starfish Charity: Deon Curtis</td>";
    trackingString += "<td width='80px' align='right' style='padding-right:2px'><font size=1>[ <A href='#' onclick='TrackingCheck(5001622, this)' style='color:Yellow'>Track Cyclist</A>]</font></td>";
    trackingString += "</tr>";

    trackingString += "<tr style='padding-top:15px' >";
    trackingString += "<td align='left' class='gen' style='vertical-align:top;padding-left:10px;padding-top:5px'>";
    trackingString += "<table width=100% cellpadding=0 cellspacing=0 border=0>";
    trackingString += "<tr><td align='left' class='gen' style='vertical-align:top;padding-left:10px;padding-top:5px'><a href='http://www.starfishcharity.org' target='_blank'><img src='images/Charities/starfish.png' /></a></td></tr>";
    trackingString += "<tr><td align='left' class='trackprogress' style='vertical-align:top;padding-left:10px;padding-top:5px'><div id='tpg5001622'></div></td></tr>";
    trackingString += "</table>";
    trackingString += "</td>";
    trackingString += "<td style='vertical-align:top;padding-left:10px;padding-top:5px' id='track5001622' class='trackitem'>Click <b><font style='color:black'>Track Cyclist</font></b> to start tracking. <br />";
    trackingString += "</td>";
    trackingString += "</tr>";

    trackingString += "<tr style='vertical-align: top'>";
    trackingString += "<td id='track5005815desc' colspan=2 align='left' style='padding-left:10px'>The Cows: Alberto Riccardi</td>";
    trackingString += "<td width='80px' align='right' style='padding-right:2px'><font size=1>[ <A href='#' onclick='TrackingCheck(5005815, this)' style='color:Yellow'>Track Cyclist</A>]</font></td>";
    trackingString += "</tr>";

    trackingString += "<tr style='padding-top:15px' >";
    trackingString += "<td align='left' class='gen' style='vertical-align:top;padding-left:10px;padding-top:5px'>";
    trackingString += "<table width=100% cellpadding=0 cellspacing=0 border=0>";
    trackingString += "<tr><td align='left' class='gen' style='vertical-align:top;padding-left:10px;padding-top:5px'><a href='http://www.thecows.co.za' target='_blank'><img src='images/Charities/thecows.png' /></a></td></tr>";
    trackingString += "<tr><td align='left' class='trackprogress' style='vertical-align:top;padding-left:10px;padding-top:5px'><div id='tpg5005815'></div></td></tr>";
    trackingString += "</table>";
    trackingString += "</td>";
    trackingString += "<td style='vertical-align:top;padding-left:10px;padding-top:5px' id='track5005815' class='trackitem'>Click <b><font style='color:black'>Track Cyclist</font></b> to start tracking. <br />";
    trackingString += "</td>";
    trackingString += "</tr>";

    trackingString += "<tr style='vertical-align: top'>";
    trackingString += "<td id='track5000449desc' colspan=2 align='left' style='padding-left:10px'>Smile Foundation SA: Erick Kapp</td>";
    trackingString += "<td width='80px' align='right' style='padding-right:2px'><font size=1>[ <A href='#' onclick='TrackingCheck(5000449, this)' style='color:Yellow'>Track Cyclist</A>]</font></td>";
    trackingString += "</tr>";

    trackingString += "<tr style='padding-top:15px' >";
    trackingString += "<td align='left' class='gen' style='vertical-align:top;padding-left:10px;padding-top:5px'>";
    trackingString += "<table width=100% cellpadding=0 cellspacing=0 border=0>";
    trackingString += "<tr><td align='left' class='gen' style='vertical-align:top;padding-left:10px;padding-top:5px'><a href='http://www.smilefoundationsa.org' target='_blank'><img src='images/Charities/SmileFoundation.png' /></a></td></tr>";
    trackingString += "<tr><td align='left' class='trackprogress' style='vertical-align:top;padding-left:10px;padding-top:5px'><div id='tpg5000449'></div></td></tr>";
    trackingString += "</table>";
    trackingString += "</td>";
    trackingString += "<td style='vertical-align:top;padding-left:10px;padding-top:5px' id='track5000449' class='trackitem'>Click <b><font style='color:black'>Track Cyclist</font></b> to start tracking. <br />";
    trackingString += "</td>";
    trackingString += "</tr>";
//    trackingString += "<tr>";
//    trackingString += "<td colspan=2>Jumping Kids 2: Jeep Vehicle 1</td>";
//    trackingString += "</tr>";

//    trackingString += "<tr style='vertical-align:middle' >";
//    trackingString += "<td valign=middle align=center><img src='images/Golf/car_icon_red.png' /></td>";
//    trackingString += "<td id='jk2' class='gen'>Click <font style='color:black'>Track Cyclist</font> to start tracking!<br />";
//    trackingString += "</td>";
//    trackingString += "</tr>";

//    trackingString += "<tr>";
//    trackingString += "<td colspan=2>Jumping Kids 3: Jeep Vehicle 2</td>";
//    trackingString += "</tr>";

//    trackingString += "<tr style='vertical-align:middle' >";
//    trackingString += "<td valign=middle align=center><img src='images/Golf/car_icon_green.png' /></td>";
//    trackingString += "<td id='jk3' class='gen'>Click <font style='color:black'>Track Cyclist</font> to start tracking!<br />";
//    trackingString += "</td>";
//    trackingString += "</tr>";

    trackingString += "</table>";
    trackingString += "</div>";

    routingString += "<h3><a href='#'>Routing</a></h3>";
    routingString += "<div id='routing'>";
    routingString += "<form method='get' id='newsletterform' action='javascript:void(0)'>";
    routingString += "<h6><b>Enter your start Location</b></h6>";
    routingString += "<input type='text' onfocus='this.value='';this.style.color='#000000'' value='West Street, Sandton' id='roadname' style='color:	#C0C0C0;width:95%;' />";
    routingString += "<br />";
    routingString += "<br />";
    routingString += "<button id='btnGetRoads'>Find</button>";
    routingString += "<span id='road_data'></span>";
    routingString += "</form>";
    routingString += "</div>";

   // "http://controls.mapit.co.za/SponsorData.asmx/load_Sponsor_menu",
    $.ajax({
        type: "POST",
        url: "SponsorData.asmx/load_Sponsor_menu",
        data: "{id:" + ClientID + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        error: function (xhr, ajaxOptions, thrownError) {

            document.getElementById("accordion").innerHTML = xhr.responseText;

        },
        success: function (data) {
            var result = data.d.split("|*|");
            document.getElementById("accordion").innerHTML = trackingString + result[0] + routingString;
            mapPoints = result[1].split("|&|");
            var socialMedia = result[2].split("|-|");

            var i = 0;
            for (i = 0; i < mapPoints.length; i++) {
                var mapPointsItems = "";
                mapPointsItems = mapPoints[i].split("|");

                var html = mapPointsItems[5]
                t = layerDynamicPoints.AddPoint(mapPointsItems[1], mapPointsItems[2], html, mapPointsItems[0]);
                t.SetIcon(mapPointsItems[3]);
                t.SetIconSize(mapPointsItems[6], mapPointsItems[7]);

                t.SetTooltip(mapPointsItems[4]);
                t.SetIconAnchor("center", "center");
                t.SetLabelAnchor("iconcenter", "iconcenter");
                t.SetClickBehaviour("toggle_all_label");
                t.SetStyle(mapPointsItems[8]);
                myMap.Update();
                CreateTrackingList();
//                GetLatestPositioning();
            }

            myMap.ZoomBounds(27.924500, -25.909391, 28.094900, -26.212891);
            myMap.Update();

            if (socialMedia[1].length > 0) {
                $("#row_s5").html("");
                var html = "";
                html += "<iframe src='http://947.mapservice.co.za/twitter.htm?username=momentum947' width='100%' height='400px'>";
                html += "  <p>Your browser does not support iframes.</p>";
                html += "</iframe>";
                $("#row_s5").html(html);
                //                $("#row_s5").load("http://947.mapservice.co.za/twitter.htm");
            }
            var icons = {
                header: "ui-icon-circle-arrow-e",
                headerSelected: "ui-icon-circle-arrow-s"
            };
            var iconsSubItems = {
                header: "ui-icon-calculator",
                headerSelected: "ui-icon-circle-arrow-s"
            };
            $("#accordion").accordion({
                header: "h3",
                autoHeight: false,
                collapsible: true,
                active: false,
                icons: icons
            });
            $(".showstaticprofile").click(function () {
                $("#staticprofile").slideToggle();
            });
            $(".hidegraph").click(function () {
                $("#staticprofile").slideToggle();
            });
        }
    });
}

