var officesMap;
var infoWindow;
var mapClicked;

$(document).ready(function () {
    var elm = document.getElementById("officesMap");
    if (elm != null) {
        loadOfficesMap(elm);
    }
});

function loadOfficesMap(elm) {
    var coordinates = '52.059246,5.712891';
    var zooming = '8';
    var lat = coordinates.split(',')[0];
    var lng = coordinates.split(',')[1];
    var latlng = new google.maps.LatLng(lat, lng);
    var myOptions = {
        zoom: parseInt(zooming),
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false,
        mapTypeControl: false
    };
    officesMap = new google.maps.Map(elm, myOptions);
    createMarkers();
    google.maps.event.addListener(officesMap, 'click', function () { activateScrollwheel(); });
    google.maps.event.addListener(officesMap, 'dragstart', function () { activateScrollwheel(); });
}

function activateScrollwheel() {
    var myOptions = {
        scrollwheel: true
    };
    officesMap.setOptions(myOptions);
    google.maps.event.removeListener(officesMap, 'click');
    google.maps.event.removeListener(officesMap, 'dragstart');
    map = true;
}


function createMarkers() {
    $.ajaxSetup({ error: ajaxError });
    var url = '/handlers/offices.ashx';
    $.getJSON(url, function (data) { renderMarkers(data); });
}

function renderMarkers(data) {
    $.each(data.Coordinates, function (i, item) { setMarker(i, item); });
}

function setMarker(i, item) {
    var image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/orange-dot.png';
    var markerImage = new google.maps.MarkerImage({
        url: image,
        scaledSize: 16
    });
    var mapInfo = item.Coordinates.split('|');
    var lat = mapInfo[0].split(',')[0];
    var lng = mapInfo[0].split(',')[1];
    var latlng = new google.maps.LatLng(lat, lng);
    var marker = new google.maps.Marker({
        position: latlng,
        map: officesMap,
        icon: image,
        title: item.Name,
        zIndex: item.Id
    });
    google.maps.event.addListener(marker, 'click', function () { createInfoWindow(this); });
}

function createInfoWindow(marker) {
    if (infoWindow != null) { infoWindow.close(); }
    infoWindow = new google.maps.InfoWindow({
        disableAutoPan: false,
        position: marker.position
    });
    $.ajaxSetup({ error: ajaxError });
    var url = '/handlers/officeinfo.ashx?office=' + marker.zIndex.toString();
    $.getJSON(url, function (data) { renderInfoWindow(data); });
}

function renderInfoWindow(data) {
    infoWindow.setContent('<div class="googleBox"><h3>' + data.Name + '</h3>' + data.Description + '<a onclick="window.open(this.href);return false;" href="' + data.Link + '">Ga naar routeplanner</a></div>');
    infoWindow.open(officesMap);
}

function hideInfoWindow() {
    infoWindow.close();
}

function ajaxError() {
    alert('error');
}