var projectsMap;
var projectMap;
var infoWindow;
var mapClicked;

$(document).ready(function () {

    var elm = document.getElementById("mainMap");
    if (elm != null) {
        loadProjectsMap(elm);
    }
    elm = document.getElementById('projectMap');
    if (elm != null) {
        loadProjectMap(elm);
    }

});

function loadProjectsMap(elm) {
    var coordinates = $('meta[name=projectslatlng]').attr("content");
    var zooming = $('meta[name=projectszoom]').attr("content");
    if(zooming==null || zooming==''){zooming='10';}
    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.TERRAIN,
        scrollwheel:false
    };
        projectsMap = new google.maps.Map(elm, myOptions);
        createMarkers();
    google.maps.event.addListener(projectsMap, 'click', function () { activateScrollwheel(); });
    google.maps.event.addListener(projectsMap, 'dragstart', function () { activateScrollwheel(); });
}

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


function createMarkers() {
    $.ajaxSetup({ error: ajaxError });
    var url = '/locations.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/red-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: projectsMap,
        icon: image,
        title: item.Name,
        zIndex: item.Id
    });
    google.maps.event.addListener(marker, 'click', function () { createInfoWindow(this); });
}

function markerClick(projectId) {
    document.location = '/' + projectId + '.aspx';
}

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

function renderInfoWindow(data) {
    infoWindow.setContent('<div class="infobox"><a href="' + data.Link + '"><h3>' + data.Name + '</h3></a><p>' + data.Description + '</p><a href="' + data.Link + '">Meer informatie over dit project</a></div>');
    infoWindow.open(projectsMap);
}

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

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


function loadProjectMap(elm) {
    var mapInfo = $('meta[name=projectMapInfo]').attr("content").split('|');
    var zooming = '10';
    if(mapInfo.length > 1){
        zooming=mapInfo[1];
    }
    var coordinates = mapInfo[0];
    if (coordinates != null && coordinates != '') {
        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.TERRAIN
        };
            var map = new google.maps.Map(elm, myOptions);
            var image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png';
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                icon: image
            });
 

    }

}