var map = null;

$('document').ready(function(){

    $('#mapControls').find('input[type="checkbox"]').attr('checked',true);

    // INITIALIZE MAP:
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        // Zoom to location:
        map.setCenter(new GLatLng(52.20, 5.51), 7);
        // Add map types:
        map.addMapType(G_PHYSICAL_MAP);
        map.setMapType(G_PHYSICAL_MAP);
        // Add UI controls:
        var customUI = map.getDefaultUI();
        customUI.controls.scalecontrol = false;
        map.setUI(customUI);
        map.enableContinuousZoom();
        //map.addControl(new GLargeMapControl3D());
        //map.addControl(new GMapTypeControl());
    }

    // ----------------------------
    // ----- BOOOSTING EVENTS -----
    // ----------------------------

    // ICON:
    var eventIcon = new GIcon();
    eventIcon.image = "/images/map/markers/event.png";
    eventIcon.shadow = "/images/map/markers/eventShadow.png";
    eventIcon.iconSize = new GSize(20, 26);
    eventIcon.shadowSize = new GSize(30, 27);
    eventIcon.iconAnchor = new GPoint(10, 25);
    eventIcon.infoWindowAnchor = new GPoint(10, 0);
    eventIcon.infoShadowAnchor = new GPoint(23, 13);

    // MARKERS:
    var eventMarkers = [];
    jQuery.each(Events, function(i) {
        var event = Events[i];
        // MARKER:
        // create a marker for this event:
        var point = new GLatLng(event.latitude, event.longitude);
        var marker = new GMarker(point, {icon:eventIcon});
        map.addOverlay(marker);
        // store marker id for future reference:
        eventMarkers[i] = marker;
        marker.id = event.id;
        marker.html = "<strong>" + event.title + "</strong>"
                  + "<br />(<a href='event/show?id=" + event.id + "'>bekijk activiteit</a>)"
                  + "<div style='width:320px; height:200px; overflow-y:scroll; margin-top:5px; padding:3px; text-align:justify;'>"
                  + "<img src='/uploads/event/s/" + event.image + "' style='float:left; margin-right:3px;' />"
                  + event.abstract
                  + "<br /><a href='event/show?id=" + event.id + "'>lees meer...</a>"
                  + "</div>";
        // EVENTS:
        GEvent.addListener(marker, "click", function(){
            marker.openInfoWindow(marker.html);
            map.panTo(marker.getLatLng());
        });
    });

    // MAP OVERLAY CONTROLS:
    $('#controlEvents').click(function(){
        if ($(this).is(':checked')){
            // show markers:
            for (var i = 0; i < eventMarkers.length; i++) {
                var marker = eventMarkers[i];
                marker.show();
            }
            //console.log("turn events on");
        } else{
            // hide markers:
            for (var i = 0; i < eventMarkers.length; i++) {
                var marker = eventMarkers[i];
                marker.hide();
            }
            //console.log("turn events off");
        }
    });

    
    // -----------------------------    
    // ----- BOOOSTING MEMBERS -----
    // -----------------------------
    //
    // ICON:
    var memberIcon = new GIcon();
    memberIcon.image = "/images/map/markers/member.png";
    memberIcon.shadow = "/images/map/markers/memberShadow.png";
    memberIcon.iconSize = new GSize(20, 26);
    memberIcon.shadowSize = new GSize(30, 27);
    memberIcon.iconAnchor = new GPoint(10, 25);
    memberIcon.infoWindowAnchor = new GPoint(10, 0);
    memberIcon.infoShadowAnchor = new GPoint(23, 13);

    // MARKERS:
    var memberMarkers = [];
    jQuery.each(Members, function(i) {
        var member = Members[i];
        // MARKER:
        // create a marker for this member:
        var point = new GLatLng(member.latitude, member.longitude);
        var marker = new GMarker(point, {icon:memberIcon});
        map.addOverlay(marker);
        // store marker id for future reference:
        memberMarkers[i] = marker;
        marker.id = member.id;
        marker.html = "<strong>" + member.name + "</strong>"
                  + " (<a href='organisation/show?id=" + member.id + "'>bekijk volledig profiel</a>)"
                  + "<div style='width:320px; height:200px; overflow-y:scroll; margin-top:5px; padding:3px; text-align:justify;'>"                  
                  + "<img src='/uploads/organisation/s/" + member.image + "' style='float:left; margin-right:3px;' />"
                  + member.description + "</div>";
        // EVENTS:
        GEvent.addListener(marker, "click", function(){
            marker.openInfoWindow(marker.html);
            map.panTo(marker.getLatLng());
        });
    });
    
    // MAP OVERLAY CONTROLS:
    $('#controlMembers').click(function(){
        if ($(this).is(':checked')){
            // show markers:
            for (var i = 0; i < memberMarkers.length; i++) {
                var marker = memberMarkers[i];
                marker.show();
            }
            //console.log("turn members on");
        } else{
            // hide markers:
            for (var i = 0; i < memberMarkers.length; i++) {
                var marker = memberMarkers[i];
                marker.hide();
            }
            //console.log("turn members off");
        }
    });


    // ------------------------------
    // ----- BOOOSTING PROJECTS -----
    // ------------------------------

    // ICON:
    var projectIcon = new GIcon();
    projectIcon.image = "/images/map/markers/project.png";
    projectIcon.shadow = "/images/map/markers/projectShadow.png";
    projectIcon.iconSize = new GSize(20, 26);
    projectIcon.shadowSize = new GSize(30, 27);
    projectIcon.iconAnchor = new GPoint(10, 25);
    projectIcon.infoWindowAnchor = new GPoint(10, 0);
    projectIcon.infoShadowAnchor = new GPoint(23, 13);

    // MARKERS:
    var projectMarkers = [];
    jQuery.each(Projects, function(i) {
        var project = Projects[i];
        // MARKER:
        // create a marker for this project:
        var point = new GLatLng(project.latitude, project.longitude);
        var marker = new GMarker(point, {icon:projectIcon});
        map.addOverlay(marker);
        // store marker id for future reference:
        projectMarkers[i] = marker;
        marker.id = project.id;
        marker.html = "<strong>" + project.name + "</strong>"
                  + "<br />(<a href='projects/show?id=" + project.id + "'>bekijk project</a>)"
                  + "<div style='width:320px; height:200px; overflow-y:scroll; margin-top:5px; padding:3px; text-align:justify;'>"
                  + "<img src='/uploads/project/s/" + project.image1 + "' style='float:left; margin-right:3px;' />"
                  + project.body
                  + "<br /><a href='projects/show?id=" + project.id + "'>lees meer...</a>"
                  + "</div>";
        // EVENTS:
        GEvent.addListener(marker, "click", function(){
            marker.openInfoWindow(marker.html);
            map.panTo(marker.getLatLng());
        });
    });

    // MAP OVERLAY CONTROLS:
    $('#controlProjects').click(function(){
        if ($(this).is(':checked')){
            // show markers:
            for (var i = 0; i < projectMarkers.length; i++) {
                var marker = projectMarkers[i];
                marker.show();
            }
            //console.log("turn projects on");
        } else{
            // hide markers:
            for (var i = 0; i < projectMarkers.length; i++) {
                var marker = projectMarkers[i];
                marker.hide();
            }
            //console.log("turn projects off");
        }
    });

    if(typeof(ProjId) != "undefined"){
        //console.log("project id = " + ProjId);
        jQuery.each(projectMarkers, function(i){
            marker = projectMarkers[i];
            if(marker.id == ProjId){
               marker.openInfoWindow(marker.html);
                map.panTo(marker.getLatLng());
            }
        });
    } else if(typeof(OrgId) != "undefined"){
        //console.log("organisation id = " + OrgId);
        jQuery.each(memberMarkers, function(i){
            marker = memberMarkers[i];
            if(marker.id == OrgId){
               marker.openInfoWindow(marker.html);
                map.panTo(marker.getLatLng());
            }
        });
    } else if(typeof(EventId) != "undefined"){
        //console.log("organisation id = " + EventId);
        jQuery.each(eventMarkers, function(i){
            marker = eventMarkers[i];
            if(marker.id == EventId){
               marker.openInfoWindow(marker.html);
                map.panTo(marker.getLatLng());
            }
        });
    }
})