var eventMarkerIcon = new GIcon();
eventMarkerIcon.image = '/etc/medialib/internet/data/interactive_map_community/images/events_marker.Par.0001.Image.download.png';
eventMarkerIcon.shadow = '/etc/medialib/internet/data/interactive_map_community/images/shadown.Par.0001.Image.download.png'
eventMarkerIcon.iconSize = new GSize(45, 65);
eventMarkerIcon.iconAnchor = new GPoint(20,57);
eventMarkerIcon.infoWindowAnchor = new GPoint(37, 6);

var pastEventMarkerIcon = new GIcon(eventMarkerIcon, '/etc/medialib/internet/data/interactive_map_community/images/events_past.Par.0001.Image.download.png');

var tourStopMarkerIcon = new GIcon(eventMarkerIcon, '/etc/medialib/internet/data/interactive_map_community/images/outreach_marker.Par.0001.Image.download.png');
var pastTourStopMarkerIcon = new GIcon(eventMarkerIcon, '/etc/medialib/internet/data/interactive_map_community/images/outreach_past.Par.0001.Image.download.png');
var newsMarkerIcon = new GIcon(eventMarkerIcon, '/etc/medialib/internet/data/interactive_map_community/images/news_marker.Par.0001.Image.download.png');

var blogMarkerIcon = new GIcon(eventMarkerIcon, '/etc/medialib/internet/data/interactive_map_community/images/on_the_road_marker.Par.0001.Image.download.png');

var clusterIcon = new GIcon();
clusterIcon.image = '/etc/medialib/internet/data/interactive_map_community/images/cluster.Par.0001.Image.download.png';
clusterIcon.shadow = '/etc/medialib/internet/data/interactive_map_community/images/cluster_shadow.Par.0001.Image.download.png';
clusterIcon.iconSize = new GSize(45, 45);
clusterIcon.iconAnchor = new GPoint(21,21);
clusterIcon.infoWindowAnchor = new GPoint(37, 4);

HydroCommunityOutreachProgram.controlCarIcon='/etc/medialib/internet/data/interactive_map_community/images/controlCar.Par.0001.Image.download.gif';
HydroCommunityOutreachProgram.sidebarDividerIcon='/etc/medialib/internet/data/interactive_map_community/images/bchcopSidebarDivider.Par.0001.Image.download.gif';




// ================================================
// ==== Don't edit anything below this line!!! ====
// ================================================


// added because WSM doesn't allow the body tag to be modified
if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", initialize, false );
else if ( typeof window.attachEvent != "undefined" ) {
    window.attachEvent( "onload", initialize );
}
else {
    if ( window.onload != null ) {
        var oldOnload = window.onload;
        window.onload = function ( e ) {
            oldOnload( e );
            initialize();
        };
    }
    else
        window.onload = initialize;
}






//window.onload = initialize;
window.onunload = GUnload;

var map;
var clusterManager;
//var now = new Date(2009,4,14);
var now = new Date();
var monthNames=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];


function createTourstopMarker(tsData) {
	var emi;
	
	if (tsData.isEvent){
		emi = eventMarkerIcon;
		if (tsData.inPast)
			emi = pastEventMarkerIcon;	
	}else{
		emi = tourStopMarkerIcon;
		if (tsData.inPast)
			emi = pastTourStopMarkerIcon;
	}
	
	var markerOptions = { icon:emi };
	var point = new GLatLng(tsData.markerLat, tsData.markerLng);
	var marker = new GMarker(point, markerOptions);
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(formatTourstopBubbleContent(tsData),{maxWidth:300});
	});
	return marker;
}


function createNewsMarker(tsData) {

	var emi;
	if ((typeof tsData.recordType == 'undefined') || tsData.recordType == 1){
		emi = newsMarkerIcon;
	}else{
		emi = blogMarkerIcon;
	}
	
	var markerOptions = { icon:emi };
	var point = new GLatLng(tsData.markerLat, tsData.markerLng);
	var marker = new GMarker(point, markerOptions);
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(formatNewsBubbleContent(tsData),{maxWidth:300});
	});
	return marker;
}




function isEventInPast(event){
    
	if (existsAndNotEmpty(event.expiryDate)){
		if (new Date(event.expiryDate) < now)
			return true;
		return false;
	}
		
	
	if (typeof event.dateFrom == 'undefined')
		return false; // event doesn't have from date
   
	if (typeof event.dateTo == 'undefined')
		compDate = new Date(event.dateFrom);
	else
		compDate = new Date(event.dateTo);
	
	return compDate < now;
}


function formatNewsBubbleContent(storyData){
	
	var content = "<table> <tr> <td>"
	
	if (existsAndNotEmpty(storyData.image))	
		content += '<img src="' + storyData.image +'" /></td><td>';
			
	content += '<div class="bchcopBubbleTitle">' + storyData.title + '</div>';

	if (existsAndNotEmpty(storyData.description)){
		content += '<hr> <div class="bchcopBubbleDesc">' + storyData.description + '</div>';
	}

	content += formatBubbleLink(storyData.detailsLinkTarget, storyData.detailsLinkText);
		
					
	content += "</td></tr></table>"
	return content;
}


function formatTourstopBubbleContent(tsData){
	
	var content = "<table> <tr> <td>"
	if (existsAndNotEmpty(tsData.image))	
		content += '<img class="bchcopgreyborderimage" src="' + tsData.image +'" /></td><td>';
		
	content += '<div class="bchcopBubbleDate">' + formatTourstopDate(tsData) + '</div>';		
	content += '<div class="bchcopBubbleTitle">' + tsData.title + '</div>';
	content += '<div class="bchcopBubbleLocation">' + (tsData.locationLineA?tsData.locationLineA:"") + '<br/>' + (tsData.locationLineB?tsData.locationLineB:"") + '</div>';
	
	content += formatBubbleLink(tsData.eventDetailsLinkTarget, tsData.eventDetailsLinkText);
		
	if (existsAndNotEmpty(tsData.description)){
		content += '<div class="bchcopDotted"> &nbsp; </div> <div class="bchcopBubbleDesc">' + tsData.description + '</div>';
		content += formatBubbleLink(tsData.eventOtherLinkTarget, tsData.eventOtherLinkText);
	}
				
	content += "</td></tr></table>"
	return content;
}


function formatBubbleLink(target, text){
	var content ='';
	
	if (existsAndNotEmpty(target)){
		content += '<a href="' + target + '" class="bchcopBubbleLink">';
		if (existsAndNotEmpty(text))
			content += text;
		else
			content += "Read more...";
		content	+= '</a>';
	}
	return content;
}



function clusterClickHandler(args){
	
	var numTourstops=0
	var numPastTourstops=0
	var numEvents=0;
	var numPastEvents=0;
	var numStories=0;
	for (var i=0; i<args.clusteredMarkers.length; i++){
		if (args.clusteredMarkers[i].getIcon() == eventMarkerIcon)
			numEvents++;
		if (args.clusteredMarkers[i].getIcon() == pastEventMarkerIcon)
			numPastEvents++;
		if (args.clusteredMarkers[i].getIcon() == tourStopMarkerIcon)
			numTourstops++;
		if (args.clusteredMarkers[i].getIcon() == pastTourStopMarkerIcon)
			numPastTourstops++;
		if (args.clusteredMarkers[i].getIcon() == newsMarkerIcon)
			numStories++;
		
	}
	
	var content='';
	if (numTourstops > 0)
		content += numTourstops + " Tour Stop(s) <br/>";
	if (numPastTourstops > 0)
		content += numPastTourstops + " Past Tour Stop(s)<br/>";
	if (numEvents > 0)
		content += numEvents + " Event(s) <br/>";
	if (numPastEvents > 0)
		content += numPastEvents + " Past Event(s) <br/>";
	if (numStories > 0)
		content += numStories + " News & Stories";
	
	var bubbleContent = new Element('p');
	var el = new Element('div',{'class':'bchcopBubbleTitle'});
	var link = new Element('a',{href:"#"}).update('Click here  to zoom into: ');
	link.observe('click', function(){GEvent.trigger(args.clusterMarker, 'dblclick')});
	el.insert(link);
	
	bubbleContent.insert(el);
	bubbleContent.insert(content);
	
	args.clusterMarker.openInfoWindow( bubbleContent);
}


function existsAndNotEmpty(str){
	return typeof str != 'undefined' && !str.empty();
}



function loadTourData(map){
	var markerArray = new Array();
	for (var i = 0; i < HydroCommunityOutreachProgram.tourStopsAndEvents.length; i++) {
		
		if (isEventInPast(HydroCommunityOutreachProgram.tourStopsAndEvents[i]))
			HydroCommunityOutreachProgram.tourStopsAndEvents[i].inPast=true;
		
		var marker = createTourstopMarker(HydroCommunityOutreachProgram.tourStopsAndEvents[i]);
		HydroCommunityOutreachProgram.tourStopsAndEvents[i].marker=marker;
		markerArray.push(marker);
	}
	
	
	for (var i = 0; i < HydroCommunityOutreachProgram.storys.length; i++){
		if (isEventInPast(HydroCommunityOutreachProgram.storys[i])){
			HydroCommunityOutreachProgram.storys[i].inPast=true;
		}else{
			var marker = createNewsMarker(HydroCommunityOutreachProgram.storys[i]);
			HydroCommunityOutreachProgram.storys[i].marker=marker;
			markerArray.push(marker);
		}
	}
	
	return markerArray;
}


function sidebarClickHandler(e){
	//"this" here is bound to the data element
	map.setCenter(this.marker.getLatLng(),  map.getCurrentMapType().getMaximumResolution());
	GEvent.trigger(this.marker, 'click');
}

function sbDateFormat (dte){
	return monthNames[dte.getMonth()] + ' ' + dte.getDate();
}


function formatTourstopDate(tourStopData){
	
	var dateString='';
	
	if (typeof tourStopData.dateFrom != 'undefined'){
		var fdate = new Date(tourStopData.dateFrom);
		dateString += sbDateFormat(fdate);
		
		if (typeof tourStopData.dateTo != 'undefined'){
			var tdate = new Date(tourStopData.dateTo);
			dateString += ' - ' + sbDateFormat(tdate);
		}
	}
	
	return dateString;
}



function storyAndNewsFormator(storyData){

	var style;
	if ((typeof storyData.recordType == 'undefined') || storyData.recordType == 1){
		style = 'bchcopSideBarStoryElement';
	}else{
		style = 'bchcopSideBarBlogElement';
	}
		
	var container = new Element('div', {'class': style}).observe('click', sidebarClickHandler.bind(storyData));
	container.insert(new Element('div', {'class': 'bchcopSideBarEventTitle'}).update(storyData.title));
	container.insert(new Element('div', {'class': 'bchcopSideBarEventLoc'}).update(storyData.sbAbstract));
	
	return new Element('span').insert(container).insert(new Element('div', {'class': 'bchcopSideBarEventDivider'}).update('<img width="137" height="1" src=' + HydroCommunityOutreachProgram.sidebarDividerIcon + ' alt="Not found" />'));
}

function tourStopsAndEventsFormator(tourStopData){
	var style;
	
	if (tourStopData.isEvent == true)
		style = 'bchcopSideBarEventElement';
	else 
		style = 'bchcopSideBarTourStopElement';
	var container = new Element('div', {'class': style}).observe('click', sidebarClickHandler.bind(tourStopData));
	container.insert(new Element('div', {'class': 'bchcopSideBarEventDate'}).update(formatTourstopDate(tourStopData)));
	container.insert(new Element('div', {'class': 'bchcopSideBarEventTitle'}).update(tourStopData.title));
	if ( existsAndNotEmpty(tourStopData.locationLineB))
		container.insert(new Element('div', {'class': 'bchcopSideBarEventLoc'}).update(tourStopData.locationLineB ));
	else	
		container.insert(new Element('div', {'class': 'bchcopSideBarEventLoc'}).update(tourStopData.locationLineA));
	
			
	return new Element('span').insert(container).insert(new Element('div', {'class': 'bchcopSideBarEventDivider'}).update('<img width="137" height="1" src=' + HydroCommunityOutreachProgram.sidebarDividerIcon + ' alt="Not found" />'));
}



function initialize() {
	$('tourstopOnlyTab').hide();
	
	now.setHours(0);
	now.setMinutes(0);
	now.setSeconds(0);
	now.setMilliseconds(0);
	
	map = new GMap2(document.getElementById("hydromap"));
	map.setUIToDefault();
	map.addControl(new TourstopsOnlyControl());
	

	map.setCenter(new GLatLng(49.26780455063753, -123.07022094726562), 11);
	
	var markerArray = loadTourData(map);
	
	clusterManager = new ClusterMarker(map, {markers: markerArray, clusterMarkerIcon: clusterIcon});  
	clusterManager.clusterMarkerClick = clusterClickHandler;
	clusterManager.fitMapToMarkers();
	
	// filter out elements that occur in the past
	var sideBarTourstopEvents = new Array();
	var sideBarTourstopOnly = new Array();
	for (var i = 0; i < HydroCommunityOutreachProgram.tourStopsAndEvents.length; i++) 
		if (!HydroCommunityOutreachProgram.tourStopsAndEvents[i].inPast){
			sideBarTourstopEvents.push(HydroCommunityOutreachProgram.tourStopsAndEvents[i]);
			if (!HydroCommunityOutreachProgram.tourStopsAndEvents[i].isEvent)
				sideBarTourstopOnly.push(HydroCommunityOutreachProgram.tourStopsAndEvents[i]);
		}
	
		
	var sideBarNews = new Array();
	for (var i = 0; i < HydroCommunityOutreachProgram.storys.length; i++){
		if (!HydroCommunityOutreachProgram.storys[i].inPast)
			sideBarNews.push(HydroCommunityOutreachProgram.storys[i]);
	}
	
	var tourDatasideBar = new HydroCommunityOutreachSidebar('bchcopTourEventList', 'bchcopTourEventPaginationControl', sideBarTourstopEvents, tourStopsAndEventsFormator, map);
	var tourstopOnlyDatasideBar = new HydroCommunityOutreachSidebar('bchcopTourstopOnlyList', 'bchcopTourstopOnlyPaginationControl', sideBarTourstopOnly, tourStopsAndEventsFormator, map);
	var storyDatasideBar = new HydroCommunityOutreachSidebar('bchcopStoryList', 'bchcopStoryPaginationControl', sideBarNews, storyAndNewsFormator, map);
		
}



//============== The custom control ======================

function tourstopControlClickHandler(doHide){
	
	var markerArray = new Array();
	
	for (var i = 0; i < HydroCommunityOutreachProgram.tourStopsAndEvents.length; i++) 
		if (! (HydroCommunityOutreachProgram.tourStopsAndEvents[i].isEvent && doHide))
			markerArray.push(HydroCommunityOutreachProgram.tourStopsAndEvents[i].marker)
		
	
	for (var i = 0; i < HydroCommunityOutreachProgram.storys.length; i++)
		if (HydroCommunityOutreachProgram.storys[i].marker)
			markerArray.push(HydroCommunityOutreachProgram.storys[i].marker);
		
	
	clusterManager.removeMarkers();
	clusterManager.addMarkers(markerArray); 
	clusterManager.refresh(true);
	
	if (doHide){
		$('tourstopAndEventsTab').hide();
		$('tourstopOnlyTab').show();	
	}else{
		$('tourstopAndEventsTab').show();
		$('tourstopOnlyTab').hide();
	}
	
	
}

function TourstopsOnlyControl() {
}

// To "subclass" the GControl, we set the prototype object to
// an instance of the GControl object
TourstopsOnlyControl.prototype = new GControl();

// "Contructor"
TourstopsOnlyControl.prototype.initialize = function(map) {

	var container = new Element('div', {style:'border-style: solid; border-color: black; border-width: 1px;background-color: white; text-align: center; cursor: pointer;'});
	var innerButton = new Element('div', {style:'padding: 0 1em 0 1em; border-style: solid; border-color: white rgb(176, 176, 176) rgb(176, 176, 176) white; border-width: 1px; font-size: 12px; font-weight: normal;'});
	this.on=false;
	
	innerButton.observe('click', function(){
		this.on = !this.on;
		if (this.on){
			innerButton.setStyle({
				borderColor:'rgb(52, 86, 132) rgb(108, 157, 223) rgb(108, 157, 223) rgb(52, 86, 132)', 
				fontWeight: 'bold'});
		}else{
			innerButton.setStyle({
				borderColor:'white rgb(176, 176, 176) rgb(176, 176, 176) white', 
				fontWeight: 'normal'});
		}
		tourstopControlClickHandler(this.on);
	});
	innerButton.insert('Show only Tourstops');
	
	container.insert(innerButton);
	map.getContainer().appendChild(container);
	return container;
}

TourstopsOnlyControl.prototype.getDefaultPosition = function() {
	return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(100, 7));
}