﻿/*Primarily for use in conjuction with the publisites script/googlemappopup.js
to create a menu for the user to toggle views on the googlemap
*/

//The map itself...
var map = null;
//check if map is loaded
var isMapLoaded = false;
// marker list
var markerList = [];

//Function to display the map
function showSkiGoogleMapPopup() {
    var isMapLoaded = false;
    Shadowbox.open({
        player: 'html',
        content: '',
        options: {
            onFinish: function (item) {
                // this event fires off twice and not sure why. Firefox does not like this and decides to blow up. 
                // It may also be blowing up due to the fact it is loading up the google map twice.
                if (!isMapLoaded) {
                    initializeSkiGmap();
                    isMapLoaded = true;
                }
            }
        },
        height: parseInt(($(document).height() / 100) * 70),
        width: parseInt(($(document).width() / 100) * 70)
    });
}

function initializeSkiGmap() {
    // get the content id of shadowbox div
    var shadowboxId = '';
    if (typeof (Shadowbox.contentId) == 'function')
        shadowboxId = Shadowbox.contentId();
    else
        shadowboxId = 'sb-content';

    // default center location when map loads
    var latlng = new google.maps.LatLng(53.635784, 6.943359);
    // initial loading options for google maps
    var options = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.TERRAIN,
        scaleControl: true
    };

    // load the map up!
    map = new google.maps.Map(document.getElementById(shadowboxId), options);

    // place the markers (function is loaded from GoogleMapPopup.cs)
    placeMarkers(map);

    // create a new info window
    var infoWindow = new google.maps.InfoWindow({
        content: 'Content...'
    });

    // create a new viewpoint bound
    var bounds = new google.maps.LatLngBounds();

    // add click event handler to markers
    $.each(markerList, function (index, marker) {
        // show the info window when the marker is clicked
        google.maps.event.addListener(marker, 'click', function () {
            infoWindow.setContent(this.html);
            infoWindow.open(map, this);
        });
        // add to bounds
        bounds.extend(marker.position);
    });

//    //Fit these bounds to the map
//    map.fitBounds(bounds);

    //close the infoWindow if the map is clicked
    google.maps.event.addListener(map, 'click', function () {
        infoWindow.close();
    });

    //add the menu control
    var menu = document.createElement('div');
    menu.className = 'greyBorder';
    menu.style.backgroundColor = 'white';
    menu.style.padding = '10px';
    menu.innerHTML = gMapMenu;
    menu.index = 1;
    // This will push the new menu div to the controls of the map
    map.controls[google.maps.ControlPosition.RIGHT_CENTER].push(menu);
}

function ToggleMarkers(control) {    
    var value = control.value;      
    if (control.checked == false) {
        for (var i = 0; i < markerList.length; i++) {
            if (markerList[i].type == value) {
                markerList[i].setMap(null);
            }
        }
    }
    else { // show the marker again
        for (var i = 0; i < markerList.length; i++) {
            if (markerList[i].type == value) {
                markerList[i].setMap(map);
            }
        }
    }
}

