var map = null;
var mapLat = 50.0;
var mapLong = -116;
var mapZoom = 8;
var coordinates = null;
var mapOverview = null;
var i = 0; // each counter in marker array
var j = 0; // total marker count

var baseIcon = new GIcon();
baseIcon.iconSize = new GSize(32, 37);
baseIcon.iconAnchor = new GPoint(16, 32);
baseIcon.infoWindowAnchor = new GPoint(16, 0);


var skiIconNormal = "http://lakerealestate.ca/_Images/Icons/waterskiing.png";
var skiIconDim = "http://lakerealestate.ca/_Images/Icons/waterskiing5.png";
var canoeIconNormal = "http://lakerealestate.ca/_Images/Icons/canoe.png";
var canoeIconDim = "http://lakerealestate.ca/_Images/Icons/canoe5.png";
var skiIcon = new GIcon(baseIcon, skiIconDim, null, null);
var canoeIcon = new GIcon(baseIcon, canoeIconDim, null, null);


var markers = [];
var markerClicks = [];
var markerOvers = [];
var markerOuts = [];
var currentMarker = null;
var currentImgID = null;
var lastImgID = null;
var currentMapList = null;

var skiLakes = [];
skiLakes[0] = new Array(new GMarker(new GLatLng(50.23623, -115.8549), { icon: skiIcon, title: "Columbia Lake, Double Click Icon to Zoom In" }), "Columbia Lake", "Go to: &nbsp <a href='http://lakerealestate.ca/RDEK/Columbia-Lake/index.htm' target='_blank'>Columbia Lake Details Page! </a>", 12);
skiLakes[1] = new Array(new GMarker(new GLatLng(49.29199, -115.2946), { icon: skiIcon, title: "Koocanusa Lake , Double Click Icon to Zoom In" }), "Lake Koocanusa", "Go to: &nbsp <a href='http://lakerealestate.ca/RDEK/Kocanusa-Lake/index.htm' target='_blank'>Koocanusa Lake Details Page! </a>", 12);
skiLakes[2] = new Array(new GMarker(new GLatLng(49.36359, -115.8654), { icon: skiIcon, title: "Monroe Lake, Double Click Icon to Zoom In" }), "Monroe Lake", "Go to: &nbsp <a href='http://lakerealestate.ca/RDEK/Monroe-Lake/index.htm' target='_blank'>Monroe Lake Details Page! </a>", 15);
skiLakes[3] = new Array(new GMarker(new GLatLng(49.28931, -115.8395), { icon: skiIcon, title: "Moyie Lake, Double Click Icon to Zoom In" }), "Moyie Lake", "Go to: &nbsp <a href='http://lakerealestate.ca/RDEK/Moyie-Lake/index.htm' target='_blank'>Moyie Lake Details Page! </a>", 12);
skiLakes[4] = new Array(new GMarker(new GLatLng(49.39902, -115.2567), { icon: skiIcon, title: "Rosen Lake, Double Click Icon to Zoom In" }), "Rosen Lake", "Go to: &nbsp <a href='http://lakerealestate.ca/RDEK/Rosen-Lake/index.htm' target='_blank'>Rosen Lake Details Page! </a>", 15);
skiLakes[5] = new Array(new GMarker(new GLatLng(49.60793, -116.1930), { icon: skiIcon, title: "St Marys Lake, Double Click Icon to Zoom In" }), "St Marys Lake", "Go to: &nbsp <a href='http://lakerealestate.ca/RDEK/St Marys-Lake/index.htm' target='_blank'>St Marys Lake Details Page! </a>", 14);
skiLakes[6] = new Array(new GMarker(new GLatLng(49.41282, -115.3231), { icon: skiIcon, title: "Tie Lake, Double Click Icon to Zoom In" }), "Tie Lake", "Go to: &nbsp <a href='http://lakerealestate.ca/RDEK/Tie-Lake/index.htm' target='_blank'>Tie Lake Details Page! </a>", 15);
skiLakes[7] = new Array(new GMarker(new GLatLng(49.77888, -115.7349), { icon: skiIcon, title: "Wasa Lake, Double Click Icon to Zoom In" }), "Wasa Lake", "Go to: &nbsp <a href='http://lakerealestate.ca/RDEK/Wasa-Lake/index.htm' target='_blank'>Wasa Lake Details Page! </a>", 15);
skiLakes[8] = new Array(new GMarker(new GLatLng(50.47739, -116.0105), { icon: skiIcon, title: "Windermere Lake, Double Click Icon to Zoom In" }), "Windermere Lake", "Go to: &nbsp <a href='http://lakerealestate.ca/RDEK/Windermere-Lake/index.htm' target='_blank'>Windermere Lake Details Page! </a>", 12);

var canoeLakes = [];
canoeLakes[0] = new Array(new GMarker(new GLatLng(49.23352, -115.2243), { icon: canoeIcon, title: "Baynes Lake, Double Click Icon to Zoom In" }), "Baynes Lake", "Go to: &nbsp <a href='http://lakerealestate.ca/RDEK/Baynes-Lake/index.htm' target='_blank'>Baynes Lake Details Page! </a>", 15);
canoeLakes[1] = new Array(new GMarker(new GLatLng(49.82602, -115.6213), { icon: canoeIcon, title: "Lazy Lake, Double Click Icon to Zoom In" }), "Lazy Lake", "Go to: &nbsp <a href='http://lakerealestate.ca/RDEK/Lazy-Lake/index.htm' target='_blank'>Lazy Lake Details Page! </a>", 15);

var skiType = [skiLakes, skiIconNormal, skiIconDim];
var canoeType = [canoeLakes, canoeIconNormal, canoeIconDim];

/*
$(document).ready(function ()
{
    map = new GMap2(document.getElementById("mapCanvas"),
	  {googleBarOptions:{onSearchCompleteCallback:doSearchCompleteCallback}});
view-source:http://econym.org.uk/gmap/example_baroptions1.htm
*/
function initMap () {
    map = new GMap2(document.getElementById("mapCanvas"));
    coordinates = new GLatLng(mapLat, mapLong);
    map.setCenter(coordinates, mapZoom);
    map.addMapType(G_PHYSICAL_MAP);
    map.setMapType(G_PHYSICAL_MAP);
    map.removeMapType(G_SATELLITE_MAP);
    map.addControl(new GMapTypeControl(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10, 10)));
    map.addControl(new GLargeMapControl3D(), new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10, 40)));
    map.addControl(new GScaleControl(), new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(100, 200)));
    map.enableRotation();
    map.enableContinuousZoom();
    //    map.enableGoogleBar();
    map.enableScrollWheelZoom();
    map._lastCenter = map.getCenter();

    GEvent.addListener(map, "moveend", function () { map._lastCenter = map.getCenter(); });
    GEvent.addListener(map, "resize", function () { map.setCenter(map._lastCenter);});
    GEvent.addListener(map, "zoomend", function (oldZoom, newZoom) { resetZoom(oldZoom, newZoom) });

    mapOverview = new GOverviewMapControl(new GSize(210, 180));
    map.addControl(mapOverview);
    GEvent.addListener(map, 'maptypechanged', function () { mapOverview.setMapType(G_NORMAL_MAP); });
    mapOverview.setMapType(G_NORMAL_MAP);

//    swapRoseOut();

    //setMarkers(skiLakes, skiIconNormal, skiIconDim);
    // }); End if using document.ready
};

//function setMarkers(lakeArray, lakeIconNormal, lakeIconDim) {
function setMarkers(lakeType) {
	$('#sideBarWrapper').slideUp('slow');
	if (lakeType == 'ski'){
		lakeType = skiType}
	else if(lakeType == 'canoe'){
		lakeType = canoeType};
	
	
    map.setCenter(coordinates, mapZoom);
    map.setMapType(G_PHYSICAL_MAP);
	
	var x = j;  // COOL have to remove events manually from each marker before disposal. Could not get the global remove alls to work.
	for(x in markerClicks){
	GEvent.removeListener(markerClicks[x]);
	}
	var y = j;
	for(y in markerClicks){
	GEvent.removeListener(markerClicks[x]);
	}
	var z = j;
	for(z in markerClicks){
	GEvent.removeListener(markerClicks[x]);
	}
	
	map.clearOverlays();
    markers = lakeType[0];
    $("#mapList").empty();
    $("#message").hide();
	var iconNormal = lakeType[1];
	var iconDim = lakeType[2];
    currentMarker = null;


	$(markers).each(function (i, marker)
	{
	    map.addOverlay(marker[0]);   //JHS not sure why this is [0]? Answer: It is the first item of the sub array.
		
		var markerImgID = "#mtgt_unnamed_" + j;
		j++;

	    var currentMapList = i;
	    var listID = "list" + i;

        markerOvers[i] = GEvent.addListener(marker[0], "mouseover", function (){
			marker[0].setImage(iconNormal);
			$(markerImgID).css({ 'z-index': '20' });
        });
		
		 markerOuts[i] = GEvent.addListener(marker[0], "mouseout", function (){
			if(currentMarker != marker[0]){												 
			marker[0].setImage(iconDim);
			$(markerImgID).css({ 'z-index': '0' });
			}
        });

	   markerClicks[i] = GEvent.addListener(marker[0], "click", function (){
	        if (currentMarker == null)
	        { // First Time User Clicks a Icon.
	            marker[0].setImage(iconNormal);
				$(markerImgID).css({ 'z-index': '10' });
	            setListActive(listID, marker);
	            currentMarker = marker[0];
				lastImgID = markerImgID;
	        }
	        else if (currentMarker == marker[0])
	        {  // Users clicks the same icons and toggles the display;
	            marker[0].setImage(iconDim);
	            $("#message").hide();
	            $(".active").removeClass();
	            currentMarker = null;
				lastImgID = null;
	        }

	        else if (currentMarker !== marker[0]){   
				currentMarker.setImage(iconDim);
				$(lastImgID).css({ 'z-index': '0' });
	            marker[0].setImage(iconNormal);
				$(markerImgID).css({ 'z-index': '10' });
	            setListActive(listID, marker);
	            currentMarker = marker[0];
				lastImgID = markerImgID;
	        }
	    });

	    var targetHref = $(markers[i][2]).attr('href');

	    $("<li />")
				  .attr('id', listID)
				  .html(markers[i][1])
				  .click(function () { GEvent.trigger(marker[0], 'click') })
				  .dblclick(function ()
				  {
				      window.open(targetHref);
				      return false;
				  })
				  .appendTo("#mapList");

	    $("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));
	})
	$('#sideBarWrapper').slideDown('slow');
}

//~~~~~~~~~~~~~~~~~~~END of Set Markers~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~	


function setMessage(marker) {
    var markerOffset = map.fromLatLngToDivPixel(marker[0].getLatLng());
    $("#message")
			.html(marker[2])//Use information from array
			.fadeIn()
			.css({ top: (markerOffset.y + -28), left: (markerOffset.x + 18) });
}

function moveActiveListItem(){
		var listItemPos = $('#mapList li.active').position().top;
		$('#sideBarWrapper').animate({scrollTop:listItemPos});
		}
		
function setListActive(listID, marker) {
	
    $(".active").removeClass(); //Remove all .active classes
    $('#' + listID).addClass('active'); //Find list element equal to index number and set active
    setMessage(marker);
	setTimeout('moveActiveListItem()', 500);
    setTimeout(function(){map.panTo(marker[0].getLatLng())}, 500);
}

//~~~~~~~~~~~~~~~~Reset the Map Type on manual zoom~~~~~~~~~~~~~~~~~~~~~~~~~~~~~	
function resetZoom(oldZoom, newZoom) {
	$('#message').hide();
    if (newZoom <= 11)
    {
        map.setMapType(G_PHYSICAL_MAP);
    }
    else if (newZoom >= 14)
    {
        map.setMapType(G_HYBRID_MAP);
    }
    if (currentMarker)
    {
        setMessage(currentMarker)
    }
}