/*
 * NOTE: This script assumes that the searchscript.js and the jquery.js are loaded also.
 */

/*
 * Recursively finds the top position of an element.
 */
function findOffsetTop(el) {
    var offset = 0;
    if(el) {
        offset = el.offsetTop;
        if(el.offsetParent) {
            offset = offset + findOffsetTop(el.offsetParent);
        }
    }
    
    return offset;
}

/*
 * Recursively finds the left position of an element.
 */
function findOffsetLeft(el) {
    var offset = 0;
    if(el) {
        offset = el.offsetLeft;
        if(el.offsetParent) {
            offset = offset + findOffsetLeft(el.offsetParent);
        }
    }
    
    return offset;
}

var curElement;
var imElement;
//mode is either zoom or pan
var mode = "pan";

/*
 * The slider steps are from 0 to 16, 
 * with 0 being at the bottom, and 16 at the top.
 */
var sliderSteps = 17;
var sliderMin = 22;
var sliderMax = 150;
var sliderStepSize = 8;
var currentSliderStep = 8;

/*
 * We can drag and drop the image to pan, so we store the
 * current x and y coordinates of the drag so 
 * we can use them to update the image after the drop.
 * We can simply reuse these vars for zoom.
 */
var panX;
var panY;
var startLeft;
var startTop;

/*
 * The mode should be set to either pan or zoom
 * (could be expanded to more options later on)
 */
function setMapMode(m) {
    if(m == "pan" || m == "zoom") {
        mode = m;
    }
    var panelt = document.getElementById("panicon");
    var zoomelt = document.getElementById("zoomicon");
    //var imageelt = document.getElementById("mapimage");
    if(mode == "pan") {
        panelt.style.background = "red";
        zoomelt.style.background = "none";
    //imageelt.style.pointer = "move";
    }
    else if(mode == "zoom") {
        panelt.style.background = "none";
        zoomelt.style.background = "red";
    }
}

function findNearestSliderStep(val) {
    var min = sliderMin;
    var step = 0;
    
    step = sliderSteps - ((val - min)/sliderStepSize);
    step = Math.floor(step - 1);
    return step;
}
  
/*
 * Tracks the mouse movement, and moves the image accordingly.
 */
function doMouseMove(e) {
    
    e = e || window.event;
    
    var newtop = 0;
    var newleft = 0;
    //Left button is 0 in Firefox but 1 in Internet Explorer
    if ((e.button == 1 || e.button == 0) && (curElement!=null)) {
        newtop = e.clientY - (findOffsetTop(curElement) - curElement.offsetTop) - (curElement.offsetHeight/2);
        
        moveScrollBar(newtop);
        
        e.returnValue = false;
        e.cancelBubble = true;
    }
    else if ((e.button == 1 || e.button == 0) && (imElement!=null)) {
        panX = e.clientX;
        panY = e.clientY;
        newtop = panY - (findOffsetTop(imElement) - imElement.offsetTop) + (startTop - startY);
        newleft = panX - (findOffsetLeft(imElement) - imElement.offsetLeft) - (startX - startLeft);

        if(mode == "pan") {
            
            imElement.style.top = newtop + "px";
            imElement.style.left = newleft + "px";
        }
        else if(mode == "zoom") {
            var rubber = document.getElementById("maprubber");
            //Vi må sette top og left på maprubber, samt høyde og bredde
            var tp,lt,ht,wt;
            var dx = panX - startX;
            var dy = panY - startY;
            rubber.style.visibility = "visible";
            if(dx >= 0) {
                lt = startX - startLeft;
                wt = dx;
            }
            else {
                lt = startX - startLeft + dx;
                wt = -dx;
            }
            if(dy >= 0) {
                tp = startY - startTop;
                ht = dy;
            }
            else {
                tp = startY - startTop + dy;
                ht = -dy;
            }
            tp = tp-2; //because of css borders
            lt = lt-2; //because of css borders
            rubber.style.top = tp + "px";
            rubber.style.left = lt + "px";
            rubber.style.height = ht + "px";
            rubber.style.width = wt + "px";
        }
        
        e.returnValue = false;
        e.cancelBubble = true;
    }
}

/*
 * Moves the scrollbar up one step.
 */
function moveScrollbarUp() {
    var step = currentSliderStep + 1;
    var newtop = sliderMax - (sliderStepSize*step);
    //    alert("moveScrollbarUp; step = " + step + ", newtop = " + newtop);
    moveScrollBar(newtop);
}

/*
 * Moves the scrollbar down one step.
 */
function moveScrollbarDown() {
    var step = currentSliderStep - 1;
    var newtop = sliderMax - (sliderStepSize*step);
    //    alert("moveScrollbarDown; step = " + step + ", newtop = " + newtop);
    moveScrollBar(newtop);
}

/*
 * Moves the scrollbar when the user clicks on the slider.
 */
function moveScrollbarOnSliderClick(y) {
    var element = document.getElementById("scrollbar");
    
    var newtop = y - (findOffsetTop(element) - element.offsetTop) - (element.offsetHeight/2);
    //    alert("moveScrollbarOnSliderClick; newtop = " + newtop);
    moveScrollBar(newtop);
}

/*
 * Moves the scrollbar to the nearest step from the given value newtop.
 */
function moveScrollBar(newtop) {
    //    alert("moveScrollBar; newtop = " + newtop + ", sliderMax = " + sliderMax + ", slidermin = " + sliderMin);
    var element = document.getElementById("scrollbar");
    
    if (newtop < sliderMin) {
        newtop = sliderMin; 
        currentSliderStep = sliderSteps - 1;
    }
    else if (newtop > sliderMax) { 
        newtop = sliderMax; 
        currentSliderStep = 0;
    }
    else {
        currentSliderStep = findNearestSliderStep(newtop);
        newtop = sliderMax - (sliderStepSize*currentSliderStep);
    }
        
    element.style.top = newtop + "px";
}

function moveSliderToStep(z) {
    var element = document.getElementById("scrollbar");
    currentSliderStep = z;
    newtop = sliderMax - (sliderStepSize*currentSliderStep);
    //    alert("moveSliderToStep; z="+z+", newtop = " + newtop);
    element.style.top = newtop + "px";
}

function panURL(hor, ver) {
    var url = "mapimage.php?";
    if(hor != 0) {
        url += "ph=" + hor;
    }
    if(ver != 0) {
        if(hor != null) {
            url += "&";
        }
        url += "pv=" + ver;
    }
    return url;
}

function onImageLoad() {
    var im = document.getElementById("mapimage");
    if(im.complete) {
        im.style.top = 0 + "px";
        im.style.left = 0 + "px";
    }
    else {
        setTimeout("onImageLoad()", 10);
    }
}

function pan(hor, ver) {
    
    var im = document.getElementById("mapimage");
    
    var url = panURL(hor, ver);
    url += "&ui=" + new Date().getTime();
    im.onload = onImageLoad;
    im.src = url;
}

/*
 * Function to pan one step left.
 */
function panLeft() {
    pan(-0.25, 0);
}

/*
 * Function to pan one step up.
 */
function panUp() {
    pan(0, 0.25);
}

/*
 * Function to pan one step right.
 */
function panRight() {
    pan(0.25, 0);
}

/*
 * Function to pan one step down.
 */
function panDown() {
    pan(0, -0.25);
}

function zoom() {
    var url = "mapimage.php?z=" + currentSliderStep;
    url += "&op=zoom";
    url += "&ui=" + new Date().getTime();
    document.getElementById("mapimage").src = url;
}

function zoomsq(top,left,height,width) {
    var url = "mapimage.php?";
    url += "top="+top;
    url += "&left="+left;
    url += "&height="+height;
    url += "&width="+width;
    url += "&op=zoom";
    url += "&ui=" + new Date().getTime();
    document.getElementById("mapimage").onload = mapLoaded;
    document.getElementById("mapimage").src = url;
}

function mapLoaded() {
    if(mode == "zoom") {
        var url = "mapinfo.php?";
        url += "par=z";
        var callback = gotMapinfo;
        sendXMLHttpRequest(url, callback);
    }
}

function gotMapinfo() {
    if(xmlHttp.readyState == 4) {
        var response = xmlHttp.responseText;
        //alert(response);
        moveSliderToStep(response);
    }
}

/*
 * x is center x coordinate (lon)
 * y is center y coordinate (lat)
 * z is the zoom level, as given by the steps of the slider
 */
function centerMapWithSymbol(x,y,z) {
    var im = document.getElementById("mapimage");
    var url = "mapimage.php?cx="+x+"&cy="+y+"&sym=10071321"+"&z="+z;
    url += "&ui=" + new Date().getTime();
    im.src = url;
    moveSliderToStep(z);
}

/*
 * sx is start x (lon)
 * sy is start y (lat)
 * ex is an array of destination x (lon)
 * ey is an array of destination y (lat)
 */
function routeMap(sx,sy,ex,ey) {
    //alert("routeMap("+sx +", " + sy + ", " + ex + ", " + ey + ")");
    var im = document.getElementById("mapimage");
    var url = "mapimage.php?mode=route&sx="+sx+"&sy="+sy;//+"&ex="+ex+"&ey="+ey;
    var i;
    for(i = 0; i < ex.length;i++) {
        url += "&ex"+(i+1)+"="+ex[i]+"&ey"+(i+1)+"="+ey[i];
    }
    url += "&ui=" + new Date().getTime();
    //alert("routeMap, URL: " + url);
    im.src = url;
    // A temporary and random value
    // TODO: find a good zoomlevel based on start and end points,
    // so that the complete route is visible in the map.
    moveSliderToStep(5);
}

/*
 * Activates the mouse tracking if the element under the mouse is an
 * IMG element, and sets that element as curElement.
 */
function doMouseDown(e) {
    if(!e) { 
        e = window.event; 
    }
    var target;
    if(e.target) {
        target = e.target;
    }
    if(e.srcElement) {
        target = e.srcElement;
    }
    if ((e.button == 1 || e.button == 0) && target.nodeName=="IMG") {
        if(target == document.getElementById("scrollbar")) {
            curElement = target;
        }
        else if(target == document.getElementById("mapimage")) {
            imElement = target;
            startX = e.clientX;
            startY = e.clientY;
            startTop = findOffsetTop(imElement);
            startLeft = findOffsetLeft(imElement);
            if(mode == "zoom") {
                var rubber = document.getElementById("maprubber");
                //rubber.style.visibility = "visible";
                rubber.style.height = "0px";
                rubber.style.width = "0px";
                imElement.style.cursor = "crosshair";
            }
            else if (mode == "pan") {
                imElement.style.cursor = "move";
            }
        }
        
        return false;
    }
    
    return true;
}

function doMouseClick(e) {
    e = e || window.event;
    
    var target;
    if(e.target) {
        target = e.target;
    }
    if(e.srcElement) {
        target = e.srcElement;
    }
    
    if((e.button == 1 || e.button == 0) && target.nodeName=="IMG") {
        if(target == document.getElementById("slider")) {
            moveScrollbarOnSliderClick(e.clientY);
            zoom();
        }
        else if(target == document.getElementById("plus")) {
            moveScrollbarUp();
            zoom();
        }
        else if(target == document.getElementById("minus")) {
            moveScrollbarDown();
            zoom();
        }
        else if(target == document.getElementById("leftarrow")) {
            panLeft();
        }
        else if(target == document.getElementById("uparrow")) {
            panUp();
        }
        else if(target == document.getElementById("rightarrow")) {
            panRight();
        }
        else if(target == document.getElementById("downarrow")) {
            panDown();
        }
    }
}

/*
 * Stops the mouse tracking by setting the curElement to null.
 */
function doMouseUp(e) {
    if(!e) { 
        e = window.event; 
    }
    if(curElement) {
        zoom();
    }
    if(imElement) {
        var dx = panX - startX;
        var dy = panY - startY;
        var iw = imElement.offsetWidth;
        var ih = imElement.offsetHeight;
        
        
        if(mode == "pan") {
            pan(-dx/iw, dy/ih);
        }
        else if(mode == "zoom") {
            var tp,lt,ht,wt;
        
            if(dx >= 0) {
                lt = startX - startLeft;
                wt = dx;
            }
            else {
                lt = startX - startLeft + dx;
                wt = -dx;
            }
            if(dy >= 0) {
                tp = startY - startTop;
                ht = dy;
            }
            else {
                tp = startY - startTop + dy;
                ht = -dy;
            }
            var rubber = document.getElementById("maprubber");
            rubber.style.visibility = "hidden";
            //we must have start (x,y) and end (x,y) (or dx and dy)
            zoomsq(tp,lt,ht,wt);
        }
        imElement.style.cursor = "default";
    }
    imElement = null;
    curElement = null;
    return true;
}
// =================
// POI section
// =================
/*
var opacity = 0.4;

function poiSelectAll() {
    var pois = document.getElementsByName("poi[]");
    var i;
    for(i = 0; i < pois.length; i++) {
        pois[i].checked = "checked";
    }
}

function poiSelectNone() {
    var pois = document.getElementsByName("poi[]");
    var i;
    for(i = 0; i < pois.length; i++) {
        pois[i].checked = "";
    }
}

function mfade(value) {

    if(jQuery("div#poi_inner").is(":visible")) {}
    else {
        if(value == 1) {
            jQuery("div#poi").fadeTo("fast",1.0);
        }
        else {
            jQuery("div#poi").fadeTo("fast",opacity);
        }
    }
}

function hidePoiSelect() {
    if(jQuery("div#poi_inner").is(":visible")) {
        jQuery("div#poi_inner").hide();
        jQuery("div#poi").fadeTo("normal",opacity);
        //Also send selections to update map
        poiSubmit();
    }
    else {
        jQuery("div#poi_inner").show("slow");
        jQuery("div#poi").fadeTo("normal",1.0);
    }
}

function poiSubmit() {
    var callback = poiSubmitReady;
    var pois = document.getElementsByName("poi[]");
    var url = "poiupdate.php?ui=" + new Date().getTime();
    var i;
    for(i = 0; i < pois.length; i++) {
        var item = pois.item(i);
        if(item.checked) {
            url += "&poi[]="+item.value;
        }
    }
    alert(url);
    sendXMLHttpRequest(url, callback);
}

function poiSubmitReady() {
    if(xmlHttp.readyState==4) {
        var txt = xmlHttp.responseText;
        var im = document.getElementById("mapimage");
        var url = "mapimage.php?ui=" + new Date().getTime();
        im.src = url;
    
        alert("poiSubmit ready, response: " + txt);
    }
}

jQuery(document).ready(function() {
    jQuery("div#poi_inner").hide();
    jQuery("div#poi").fadeTo("slow",opacity);
});
*/