/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */


/**
 * creates a query to the server for the choosen timeline
 */
function getSelectedTimeline(id) {
    jQuery.ajax({
        type: "POST",
        url: "drawmap.map",
        data: {
            toktnummer : jQuery("#toktnummer").val(),
            platform: jQuery("#platform").val(),
            fradato: timearray[id],
            tildato: timearray[id],
            lengdenord: jQuery("#lengdenord").val(),
            lengdesor: jQuery("#lengdesor").val(),
            breddeeast: jQuery("#breddeeast").val(),
            breddevest: jQuery("#breddevest").val()
        },
        success:
        function (XMLHttpRequest, status) {
            updatetheMapTimeline(XMLHttpRequest);
        }
    });
}

/**
 * datesort
 */
function datesort(a, b) {
    var da = new Date(a);
    var db = new Date(b);
    if(da.getMilliseconds() > db.getMilliseconds()){
        return 1;
    }else if(da.getMilliseconds() < db.getMilliseconds()){
        return -1;
    }else{
        return 0;
    }
}

/**
 * initiates the timeline slider
 */
function initTimeLine() {
    // makes the data be in the right form and sorted the right way.
    var temparray = new Array();
    for(var i = 0; i < timearray.length; i++){
        temparray.push(timearray[i].firstChild.nodeValue);
    }
    timearray = temparray;

    timearray.sort(datesort);

    temparray = new Array();
    for(i = 0; i < timearray.length; i++){
        if(temparray.length > 0){
            if(temparray[temparray.length-1] != timearray[i]){
                temparray.push(timearray[i]);
            }
        }else{
            temparray.push(timearray[i]);
        }
    }

    timearray = temparray;
    // destroy the old slider
    jQuery("#timelinecontainer").slider("destroy");
    // create a new slider
    jQuery("#timelinecontainer").slider({
        handle: '#sliderhandle',
        min: 0,
        max: timearray.length,
        change: function(e,ui){
            getSelectedTimeline(ui.value);
        },
        slide: function(e,ui){
            mypos = jQuery('#timelinecontainer a').position().left + 2;
            jQuery("#timelinehover").html(timearray[ui.value]);
            jQuery("#timelinehover").css({
                left: mypos
            });
        },
        start: function(e,ui){
            jQuery('#timelinehover').fadeIn('fast');

        },
        stop: function(e,ui){
            jQuery('#timelinehover').fadeOut('fast');

        }
    });

    // We need to remove the click methods or there will be more then one after a while
    jQuery("#tlnext").unbind('click');
    jQuery("#tlprevious").unbind('click');
    // create the click methods for next/previous
    jQuery("#tlnext").click(function(){
        var thisValue = jQuery("#timelinecontainer").slider('value');
        jQuery("#timelinecontainer").slider('value',thisValue+1);
    });
    jQuery("#tlprevious").click(function(){
        var thisValue = jQuery("#timelinecontainer").slider('value');
        jQuery("#timelinecontainer").slider('value',thisValue-1);
    });
    jQuery("#tlouterContainer").show();
}

function updatetheMapTimeline(req){
    jQuery("#popup").css("display","none");
    var xmlDoc = req;
    var file = xmlDoc.getElementsByTagName("fil");

    // get the url for the file we use now
    publicFile = "./dynamicgml/points"+file[0].firstChild.nodeValue+".xml";
    // register an event to be run when the layer has finished loading
    // we need to remove this afterwards it has been run, otherwise it will
    // allways be run every time we reload or change the layer
    pointlayer.events.register("loadend", pointlayer,  function(){
        OpenLayers.loadURL(publicFile,"",null,populateArrayLineLayer);
        var ele = document.getElementById("loading");
        ele.style.zIndex = "0";
    });
    // new in OL 2.7, loads a new url into the layer, using this instead of
    // removing the old layer and creating a new one as that didn't function
    // any longer in OL 2.7
    pointlayer.setUrl(publicFile);

}

/**
 * Comment
 */
function populateArrayLineLayer(req) {
    var xml = req.responseXML;
    var features = pointlayer.features;
    var positions = xml.getElementsByTagName("xsi:description");
    var plat = xml.getElementsByTagName("xsi:name");
    var time = xml.getElementsByTagName("xsi:time");
    var id = xml.getElementsByTagName("xsi:id");

    stationsliderarray = new Array();
    objects = new Array();
    // goes through all the features and puts them into the object array and
    // the stationsliderarray.
    // these are used in the hovering and sliding functions
    for(var te = 0; te < positions.length; te++){
        var object = [positions[te].firstChild.nodeValue, plat[te].firstChild.nodeValue, time[te].firstChild.nodeValue, id[te].firstChild.nodeValue];
        objects[features[te].id] = object;
        object.push(features[te].id);
        stationsliderarray[id[te].firstChild.nodeValue] = object;
    }

    // adding a click feature to the map for this layer
    /*    clickfeature = new OpenLayers.Control.CustomSelectFeature(pointlayer, {
        onSelect: updateStationsFeature,
        onHover:  onFeatureSelect
    });
    map.addControl(clickfeature);
    clickfeature.activate();
*/
    var hoverfeature = new OpenLayers.Control.SelectFeature(pointlayer,{
        hover: true,
        highlightOnly: true,
        renderIntent: 'select',
        eventListeners: {
            featurehighlighted: onFeatureSelect
        }
    });
    map.addControl(hoverfeature);
    var clickfeature = new OpenLayers.Control.SelectFeature(pointlayer,{
        renderIntent: 'sliderselect',
        onSelect: updateStationsFeature,
        clickout: true
    });
    map.addControl(clickfeature);
    hoverfeature.activate();
    clickfeature.activate();

    // removes the loadend event so that it wount be run again
    pointlayer.events.remove("loadend");

    // initiates the lower slider. 
    initGraphBySlider();
}