﻿// the map 
var map = null;

var kmlUrl = "http://www.staatsbosbeheer-jv.nl/resources/kml/kml_nederland.kml.xml";
//var kmlUrl = "http://www.ipfier9.nl/kml/kml_nederland.kml";
//var kmlUrl = "http://localhost/sbb_jaarverslag/resources/kml/kml_nederland.kml";

var latNL = 52.56132539134846;
var lonNL = 5.347595214843748;

// this is the location of the Netherlands
var mapNL = new VELatLong(latNL, lonNL);

var pinPoint = null;
var pinPixel = null;

var shape_zoomA = null;
var shape_zoomB = null;
var shape_zoomC = null;

var mapStartPanPoint = null;

//boundaries
// boundary most left longitude = 3.8012695312500133
// boundary most right longitude = 6.811523437500015
// boundary most top latitude = 53.383328367571536
// boundary most bottom latitude = 50.77815527465924
var boundLeftLong = 3.8012695312500133;
var boundRightLong = 6.822753906249992;
var boundTopLat = 53.383328367571536;
var boundBottomLat = 50.77815527465924;
// these are the boundaries of the netherlands
var mapBoundTL = new VELatLong(boundTopLat, boundLeftLong);
var mapBoundBR = new VELatLong(boundBottomLat, boundRightLong);
// if we are outside the given boundaries these values are being used
// to return to the netherlands boundaries
var newCenterLat = null;
var newCenterLong = null;
var newMapPoint = null;
// for the pushpin
// var pinPoint = null;
// var pinPixel = null;          
// restrict the zoom
var mapMaxZoom = 10;
var mapMinZoom = 7;
var shapeLayer = new VEShapeLayer();

var shapeSpec = new VEShapeSourceSpecification(VEDataType.ImportXML, kmlUrl, shapeLayer);
var outlineShape;

function isIe6() {
    if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { //test for MSIE x.x;
        var ieversion = new Number(RegExp.$1) // capture x.x portion and store as a number
        if (ieversion <= 6) return true;
    }
    return false;
}

function GetMap() {
    if (isIe6()) {        
        return;
    }

    map = new VEMap('myMap');
    // Attach an event handler for a mousedown event.
    map.AttachEvent("onmousedown", DisableMap);
    //map.AttachEvent("onmousewheel", DisableMap);
    map.AttachEvent("onmousewheel", mapMouseWheel);
    map.AttachEvent("onmouseover", ShapeHandler);
    map.AttachEvent("onchangeview", EventViewChange);  
    //map.AttachEvent("ondoubleclick", DisableMap);

    /*
    map.AttachEvent("onclick", LabelClick);
    map.AttachEvent("onchangeview", map_changeview); 
    map.AttachEvent("onendpan", map_endpan); //end panning or moving the map
    */
    // LoadMap ()
    map.LoadMap(mapNL, mapMinZoom, VEMapStyle.Aerial, false, VEMapMode.Mode2D, false, 0);
    
    //showminimap
    //map.ShowMiniMap(100, 300);

    map.ClearInfoBoxStyles();

    AddShapes();

    map.ImportShapeLayerData(shapeSpec, onOutlineLoad);
}

function onOutlineLoad(shape) {
    outlineShape = shape;    
    hideIcons();
}


//View Change Event handler
function EventViewChange() {
    setTimeout('r()', 2500);

}

function r() {
    // Pan de map opnieuw. Voorkomt dat de outline van Nederland op de verkeerde positie komt te liggen
    var lat = map.GetCenter().Latitude;
    var lon = map.GetCenter().Longitude;
    var zoom = map.GetZoomLevel();
    //map.PanToLatLong(map.GetCenter());


    var newMP = new VELatLong(lat, lon);
    map.SetCenter(newMP);    

}

function ShapeHandler(e) {
    if (e.elementID != null) {
        // event occured on shape;
        var id = e.elementID;
        // Attach fancybox handler aan link in hover element
        // IE issue: hover element is niet gelijk geladen, vertraging noodzakelijk.
        setTimeout("initFancyBox()", 100);
        //initFancyBox();        
    }    
}

function mapMouseWheel(evt) {    
    if (map.GetZoomLevel() >= mapMaxZoom && evt.mouseWheelChange > 0) {    
        return true;
    }
    return false;
}


function hideIcons() {    
    for (var i = 0; i < shapeLayer.GetShapeCount(); i++) {
        var shape = shapeLayer.GetShapeByIndex(i);        
        shape.SetCustomIcon("http://upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif");
    }
}


function LabelClick(e) {
  if (e.elementID != null) {
   
  }
}

//for custom pan controls only we do not have the cross pan options
function SmoothPan(percentX, percentY) {
    var oldCenter = map.GetCenter();
    var topLeft = map.GetMapView().TopLeftLatLong;
    var offsetY = percentY * 2 * Math.abs(topLeft.Latitude - oldCenter.Latitude);
    var offsetX = percentX * 2 * Math.abs(topLeft.Longitude - oldCenter.Longitude);

    var newLat = (oldCenter.Latitude + offsetY);
    var newLong = (oldCenter.Longitude + offsetX);
    if (newLat > 90) newLat = 90;
    if (newLat < -90) newLat = -90;
    if (newLong > 180) newLong = 180;
    if (newLong < -180) newLong = -180;

    var newCenter = new VELatLong(newLat, newLong);
    map.PanToLatLong(newCenter);
}

// When the mouse is used, the DisableMap function will
// get called. Returning true will disable the mousedown
// event, which disables panning.
function DisableMap() {
    return true;
}
// when the map is changed in any way. panning,zooming this function is called
// we can restrict the map boudnaries in here.
function map_changeview(e) {
    var center = map.GetCenter();
    info = "Map center Latitude:" + center.Latitude + "<br/>";
    info += "Map center Longitude:" + center.Longitude + "<br/>";

    info += "boundLeftLong: 3.8012695312500133 <br/>";
    info += "boundRightLong: 6.811523437500015 <br/>";
    info += "boundTopLat: 53.383328367571536 <br/>";
    info += "boundBottomLat: 50.77815527465924  <br/>";

    document.getElementById('MapInfo').innerHTML = info;
}
// this function is called when the panning is ended
// we will check what the Longitude and Latitude is of the center of the map
// when they exceed the boundaries given we will navigate back to the correct boundaries.
function map_endpan(e) {
    //if (newCenterLat != null || newCenterLong != null) {
   /* var center = map.GetCenter();

    newCenterLat = 0;
    newCenterLong = 0;

    if (center.Longitude <= mapBoundTL.Longitude) {
        newCenterLong = mapBoundTL.Longitude;
    } else if (center.Longitude >= mapBoundBR.Longitude) {
        newCenterLong = mapBoundBR.Longitude;
    } else {
        newCenterLong = center.Longitude;
    }

    if (center.Latitude >= mapBoundTL.Latitude) {
        newCenterLat = mapBoundTL.Latitude;
    } else if (center.Latitude <= mapBoundBR.Latitude) {
        newCenterLat = mapBoundBR.Latitude;
    } else {
        newCenterLat = center.Latitude;
    }

    newMapPoint = new VELatLong(newCenterLat, newCenterLong);
    map.SetCenter(newMapPoint);*/
    alert('endpan');
}
// custom map zoom
function mapZoomIn() {
    //document.getElementById('MapInfo').innerHTML += "map zoomlevel" + map.GetZoomLevel() + "maxzoom = " + mapMaxZoom + "<br/>";
    if (map.GetZoomLevel() != mapMaxZoom) {
        map.ZoomIn();
    }
}
function mapZoomOut() {
    //document.getElementById('MapInfo').innerHTML += "map zoomlevel" + map.GetZoomLevel() + "minzoom = " + mapMinZoom + "<br/>";
    if (map.GetZoomLevel() != mapMinZoom) {
        map.ZoomOut();
    }
}

// getInfo
function getInfo() {
    var center = map.GetCenter();

    info = "Zoom level:\t" + map.GetZoomLevel() + "<br/>";
    info += "Latitude:\t" + center.Latitude + "<br/>";
    info += "Longitude:\t" + center.Longitude + "<br/>";

    document.getElementById('MapInfo').innerHTML += info;
}

// get point from mouseclick on map
function PixelClick(e) {
    var x = e.mapX;
    var y = e.mapY;
    pixel = new VEPixel(x, y);
    var LL = map.PixelToLatLong(pixel);
    document.getElementById('MapInfo').innerHTML = "Pixel X: " + x + " | Pixel Y: " + y + "<br /> LatLong: " + LL;
}

function AddShapes() {
    //Create VEShape objects, assign parameters, and add to the map.
    //for positioning on the map
    map.ClearInfoBoxStyles();
    $.each(map_labels, function(index, value) {
        var link_id = "a_" + index;
        var btn_image;
        if (value.isMovie)
            btn_image = "btn_bekijk_film.png";
        else if (value.isAnimation)
            btn_image = "btn_bekijk_animatie.png";
        else if (value.isSlideshow)
            btn_image = "btn_bekijk_diashow.png";
        else
            btn_image = "btn_lees_artikel.png";

        var description = '<div class="label-hover">' +
            '<div class="number">' + value.number + '</div>' +
            '<div class="image"><img src="' + value.photo + '" /></div>' +
            '<div class="text">' + value.text + '</div>' +
            '<a id="' + link_id + '" href="' + value.url + '" class="iframe"><img src="images/' + btn_image + '" alt="" /></a>' +
            '</div>' +
            '<script type="text/javascript">initFancyBox()</script>'
        
        var shape = new VELatLong(value.lat, value.lon);

        shape_zoomA = new VEShape(VEShapeType.Pushpin, shape);
        //shape_zoomA.SetTitle(value.title);
        shape_zoomA.SetDescription(description);
        shape_zoomA.SetCustomIcon(
                   "<span class='label-icon' style='font-family:Arial; font-size:x-small;" +
                   "color:Black; background-color:transparent;z-index: 200'>" +
                   "<img src='images/map_dot.png'/></span>");
        shape_zoomA.SetMinZoomLevel(7);
        shape_zoomA.SetMaxZoomLevel(8);
        map.AddShape(shape_zoomA);


        shape_zoomB = new VEShape(VEShapeType.Pushpin, shape);
        //shape_zoomB.SetTitle(value.title);
        shape_zoomB.SetDescription(description);
        shape_zoomB.SetCustomIcon(
                   "<span class='label-icon' style='font-family:Arial; font-size:x-small;" +
                   "color:Black; background-color:transparent;z-index: 1400'>" +
                   "<img src='images/label_map_small.png'/></span>");
        shape_zoomB.SetMinZoomLevel(9);
        shape_zoomB.SetMaxZoomLevel(9);
        map.AddShape(shape_zoomB);


        shape_zoomC = new VEShape(VEShapeType.Pushpin, shape);
        //shape_zoomC.SetTitle(value.title);
        shape_zoomC.SetDescription(description);
        shape_zoomC.SetCustomIcon(
                   "<span class='label-icon' style='font-family:Arial; font-size:x-small;" +
                   "color:Black; background-color:transparent'>" +
                   "<img src='" + value.labelImage + "'/></span>");

        shape_zoomC.SetMinZoomLevel(10);
        shape_zoomC.SetMaxZoomLevel(10);
        map.AddShape(shape_zoomC);
    });



}

function AddPin() {
    // Add a new pushpin to the center of the map.
    pinPoint = map.GetCenter();
    pinPixel = map.LatLongToPixel(pinPoint);
    map.AddPushpin(pinPoint);

}
window.onresize = function(event) {
    //alert(GetHeight());
    //alert(GetHeight());
    //map.SetCenter(mapNL);
    map.Resize();
    //map.SetCenter(mapNL);
    //placeNaviagtionBar();
}

function placeNaviagtionBar() {
    //min breedte = 990
    //min hoogte=567
    /*var minWidth = 990;

        var newLeft = 0;
        
    if (document.body.clientWidth <= minWidth) {
    document.getElementById("navBar").style.left = '0px';
    } else {
    newLeft = (document.body.clientWidth - minWidth) / 2;
    document.getElementById("navBar").style.left = '' + newLeft + 'px';
    }*/
}

function GetHeight() {
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );
}