//put the data into this after we load asycn
var elevationData = null;
var bolLoadedElevations = false;
var pin = null;   //holds the pin

//used for the timer stuff
var playPosition = 0;
var timerID = null;
var timerRunning = false;
var delay = 250;    //1000 is 1 second

if (URLparams != "") {

    //build the URL - URLparams has been built in the calling page
    var request = new JsonRequest("elevationchart", "/webservice/elevationchart.ashx?" + URLparams);
    //add the callback
    request.doRequest("OnGetElevationRequestComplete");
}

function OnGetElevationRequestComplete(result) {

    //stick this somewhere where we can call it
    elevationData = result;

    //attach an event to the image now we have loaded the data
    $addHandler(imgProfile, "mousemove", elevationGraphOnMouseOver);
    $addHandler($get("pointdata"), "mousemove", elevationGraphOnMouseOver);

    bolLoadedElevations = true;
}

//pass the event to the parent
function elevationGraphOnMouseOutPointData(e) {
    //debugger;

}

//hide the things
function elevationGraphOnMouseOut(e) {

    $get("pointdata").style.display = 'none';
    $get("marker").style.display = 'none';

}

//catch an event and call the function which does the work
function elevationGraphOnMouseOver(e) {

    $get("pointdata").style.display = '';

    //stop the timer
    PausePlay();

    var elementBounds = Sys.UI.DomElement.getBounds(imgProfile);

    var xPosition = e.clientX - elementBounds.x;


    //now find the nearest data by looping until we hit one >= to what we want
    for (i = 0; i < elevationData.length; i++) {

        //now find if we are there yet
        if (elevationData[i].x >= xPosition) {

            //so play resumes from where we are mousing
            playPosition = i;

            PlotCaption(elevationData[i]);

             if (HasMap == true)
                { 
                //now draw on the map
                var myPoint = new GLatLng(elevationData[i].lat, elevationData[i].lon);
                
                //check if the point is in view
                if (IsInView(myPoint) == false)
                    gmap.panTo(myPoint)

                if (pin != undefined)
                    pin.setPoint(myPoint);
                else
                    pin = AddPin(elevationData[i].lat, elevationData[i].lon, 'Current point', '', '', 'orangeblob.png', 99999);

                }

            break;

        }

    }


}


function OnTimeout(result) {

    if (gTestMode == true)
        alert("Error:\n\n" + result.get_message() + "\n" + result.get_stackTrace());
    else
       alert("Sorry, but something has gone wrong.\nIf you continue to experience problems please get in touch.");
}


//********************************************************
// is the supplied point visible? GMAP version
//********************************************************

//is the supplied point visible? GMAP version
function IsInView(point) {

    var bolInView = false;

    var MapCoords = gmap.getBounds();

    //contain is much easier in gmap
    if (MapCoords.contains(point)) {
        bolInView = true;
    }

    return bolInView;

}


//********************************************************
// timer stuff - Gmap version - only change is the point stuff
//********************************************************


//click on the play button
function onclickPlayButton() {

    //TODO toggle mode
    if (timerRunning == true)
        PausePlay();
    else
        StartPlay();

}

function StartPlay() {

    //stop if we haven't got a map
    if (HasMap == false)
        return;

    //do the marker
    PlotPoint(playPosition);

    //start the timer
    timerID = self.setTimeout("TimerTick()", delay);

    //store if we are running the timer
    timerRunning = true;

    //swap the image to pause
    $get("imgplaycontrol").src = "/icons/control_pause.png";

}

function PausePlay() {
    //stop if we haven't got a map
    if (HasMap == false)
        return;

    //stop the timer
    TimerStop();

    //swap the image to play
    $get("imgplaycontrol").src = "/icons/control_play.png";

}

function RewindPlay() {
    //reset the marker
    playPosition = 0;

    //stop the timer
    TimerStop();

    //hide the marker
    HideMarker();

    //swap the image to play
    $get("imgplaycontrol").src = "/icons/control_play.png";
}

function TimerTick() {

    //store if we are running the timer - should be done already
    timerRunning = true;

    //redo the timer
    timerID = self.setTimeout("TimerTick()", delay)

    //advance the marker
    playPosition++;

    //update the display
    PlotPoint(playPosition);

    //set the timer again
}

function TimerStop() {
    //stop the timer etc
    clearTimeout(timerID);
    timerRunning = false;

}

function HideMarker() {

    //hide the info and marker
    var PointDescription = $get("pointdata");
    var marker = $get("marker");
    var pointer = $get("pointer");

    //now find the nearest data by looping until we hit one >= to what we want
    PointDescription.style.display = 'none';
    marker.style.display = 'none';

}


//plots our point
function PlotPoint(counter) {

    if (bolLoadedElevations == false)
        return;

    //check if we have reached the end - and if so reset the counter
    if (counter >= elevationData.length) {
        RewindPlay();
        return;
    }

    var elementBounds = Sys.UI.DomElement.getBounds(imgProfile);

    //var xPosition = e.clientX - elementBounds.x;
    var xPosition = elementBounds.x;

    PlotCaption(elevationData[counter]);

    if (HasMap == true)
        { 
        //now draw on the map
        var myPoint = new GLatLng(elevationData[counter].lat, elevationData[counter].lon);
        
        //check if the point is in view
        if (IsInView(myPoint) == false)
            gmap.panTo(myPoint);

        if (pin != undefined)
            pin.setPoint(myPoint);
        else
            pin = AddPin(elevationData[counter].lat, elevationData[counter].lon, 'Current point', '', '', 'orangeblob.png', 99999);

        }
                
}




    //plots a point
    function PlotCaption(itemToPlot) {


        var PointDescriptionInner = $get("pointdatainner");
        var PointDescription = $get("pointdata");
        var marker = $get("marker");
        var pointer = $get("pointer");

        PointDescription.style.display = '';
        marker.style.display = '';

        //we have found it so extract the data
        PointDescriptionInner.innerHTML = "";

        if (itemToPlot.GroundElev != null) {
            PointDescriptionInner.innerHTML += "<div class='labelvalue'><div class='label'>Altitude</div><div class='value'>" + itemToPlot.Elev + "</div></div>";
            PointDescriptionInner.innerHTML += "<div class='labelvalue'><div class='label'>Ground Elev</div><div class='value'>" + itemToPlot.GroundElev + "</div></div>";
        }
        else
            PointDescriptionInner.innerHTML += "<div class='labelvalue'><div class='label'>Altitude</div><div class='value'>" + itemToPlot.Elev + "</div></div>";

        PointDescriptionInner.innerHTML += "<div class='labelvalue'><div class='label'>Distance</div><div class='value'>" + itemToPlot.Dist + "</div></div>";
        if (itemToPlot.Time != null) {
            PointDescriptionInner.innerHTML += "<div class='labelvalue'><div class='label'>Time</div><div class='value'>" + itemToPlot.Time + " GMT</div></div>";
        }

        marker.style.top = itemToPlot.y + "px";
        marker.style.left = itemToPlot.x + "px";

        PointDescription.style.left = (itemToPlot.x + 10) + "px";
        PointDescription.style.top = (itemToPlot.y - 15) + "px";

    }