/*---------------------------------------------------------------------------------------------------------------------------
	Author: 	Gabriel Svennerberg.
	Created:	2008-09-27
	Email: 		gabriel@svennerberg.com
	Web:		svennerberg.com
	
	This is a demo to show a way to use microformats and javascript to extract information. 
	Please note that code is not suitable for production. In a live environment more validation
	of data is neccesary.
	
	This demo was inspired by Jeremy Keith's adactio austin http://austin.adactio.com/ and 
	the article "Get To Grips with Slippy Maps" by Andrew Turner published on 24ways.org
	
	Modified by John Chapman for Redbridge site October 2009
	
	to do
	default to current month
	zooming map should refilter map (ie not show all data)
	street view enabled?
------------------------------------------------------------------------------------------------------------------------------*/

var map;
var mgr;
var markers = [];
var d1 = new Date();
$(document).ready(function() {
	$('#events .Description, #events .geo, #events .vcard, #events .dtstartISO').hide();
	initMap();
//set slider caption to this month	
	filterEventList(d1.getMonth());
	filterMap(d1.getMonth());
	$('#selected_month').html(monthName(d1.getMonth));
});



function initMap() {
var d = new Date();
	
	if (!GBrowserIsCompatible()) { return; }
	if (!document.getElementById("events")) { return; }
	
	$('#events').addClass('javascriptEnabled');	
	$('#events').before('<div id="map-container"><div id="map"></div></div>');
	
	filterEventList(d.getMonth());  //month 1-12
	
	$('#selected_month').html(monthName(d.getMonth()));   //month 1-12

	$('#month_select').show();
	
//maxmonth=7-(d.getMonth());  //start at 5 for Feb to 1 in June
	
	$('#date_slider').slider({
		handle: '.handle',
		steps: 6,
		min: 1,
		max: 6,
		startValue: 1,
		slide: function(e, ui) {
		//add on 10 months then mod 12
			// Changing the label to the selected monthname	
			$('#selected_month').html(monthName(ui.value));
//			newui = (d.getMonth()); //1-12
			newui = (ui.value+1);
//			if (newui==0)
//				{newui=12};
			$('#selected_month').html(monthName(newui));
			// filtering event list
			filterEventList(newui);
			
			// filtering markers on map
			filterMap(newui);
		},
		change: function(e, ui) {
			
		}
	});
		

	var map = new GMap(document.getElementById('map'));
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
//	map.setCenter(new GLatLng(60.780619, 18.347168), 5);
	map.setCenter(new GLatLng(51.596481,  0.009785), 9);
	mgr = new MarkerManager(map, {trackMarkers:true});
	

function dateParse2(s) {
//why do we need -1 in 
//input valid date in nn Month (eg "15 September")
//output date
 var parts = s.split(' ',2);

 var MonthList = new Array(12);
var MonthList = ["January", "February", "March", "April","May","June","July","August","September","October","November","December"];

//loop until find month
for (var i=0; i <12; i++) {
if (MonthList[i] ==parts[1])
	break;
};

parts[1]= i;
//if month Nov-Dec then 2009 else 2010
//if (parts[1]>10) 
//{
//	yr=2009 
//}
//else
//{
	yr=2010;
//}
  var d = new Date( yr, parts[1], parts[0]);  //return YYYY MM DD
  return d;
}

	
	// Hämtar alla element uppmärkta med class="vevent" d.v.s. hCalendar formatet
	var events = $('.vevent');
	
	// Loopar igenom alla element för att extrahera data
	for (var i=0; i < events.length; i++) {
			
		// Extrahera koordinater
		
		events[i].latitude =  $(events[i]).find('.latitude').html();
		events[i].longitude =  $(events[i]).find('.longitude').html();
		
		// Hämtar namn och beskrivning av eventet
		events[i].summary =  $(events[i]).find('.summary').html();
		events[i].Description = $(events[i]).find('.Description').html();
		
		// Extraherar start- och slutdatum
		events[i].dtstart =  $(events[i]).find('.dtstart').html();
		//events[i].dtend =  $(events[i]).find('.dtend').html();
		
		events[i].dtstartISO =  $(events[i]).find('.dtstartISO').html();
	//	events[i].dtendISO =  $(events[i]).find('.dtend').attr('title');
		
		// Extarherar kontakt- och adressinformation
		//events[i].locality = $(events[i]).find('.locality').html();
		//events[i].countryName = $(events[i]).find('.country-name').html();
		//events[i].fn = $(events[i]).find('.fn').html();
		//events[i].email = $(events[i]).find('.email').html();
		//events[i].url = $(events[i]).find('.url').attr('href');
		
		
		// Om jag har fått ut koordinater så läggar jag in dem som punkter på kartan
		//If I have the coordinates so do I add them as points on the map 
		if (events[i].latitude && events[i].longitude) {
			
			// Skapar en punkt i Google Maps
			//Creates a point in Google Maps
			var point = new GLatLng(events[i].latitude, events[i].longitude);
			
			// Använder den extraherade informationen för att skapa en "informationsbubbla"
			var html = '<h4>' + events[i].summary + '</h4>'
			html += '<p class="dates">' + events[i].dtstart + '</p>';
			html += '<p>' + events[i].Description + '</p>';
			
			var marker = createMarker(point, html, events[i]);
			marker.dtstart = events[i].dtstart
			marker.dtstartISO = events[i].dtstartISO;
//			marker.dtstart = dateParse2(events[i].dtstart);
			
			
			markers.push(marker);
			
			events[i].marker = marker;
			events[i].html = html;
			$(events[i]).bind('click', function(e) {
				
				highLightItem(this);
				
				var p = new GLatLng(this.latitude, this.longitude); 
				map.centerAndZoom(p);
				this.marker.openInfoWindowHtml(this.html, {
					maxWidth: '300'
				});
			});
			
//			var d = new Date(marker.dtstart.replace(/-/g, '/'));
			//var d = dateParse2(events[i].dtstart); //.replace(/-/g, '/'));	
			var d = (events[i].dtstartISO); //yyyy-mm-dd format
			dateParts = d.split("-");			
//			var d = strtotime(marker.dtstartISO);
			var eventMonth = dateParts[1].replace("\n","");

			mgr.addMarker(marker, 1);
//hide non default months ie if not November
			if(eventMonth != 2) {
				marker.hide();	
			}
		}
	}

	adjustElementHeights();
	$(window).resize(function() {
		adjustElementHeights();
	});
}
// Funktion för att skapa en punkt i kartan
// function to create a point in the map
function createMarker(point, html, obj) {
	var marker = new GMarker(point);
	GEvent.addListener(marker, "click", function() {
		marker.openInfoWindowHtml(html, {
			maxWidth: '300'
		});
		highLightItem(obj);
		
	});
	return marker;
}

function highLightItem(obj) {
	$('#events li').removeClass('selected');
	$(obj).addClass('selected');
	$('#events').scrollTo(obj);
}

function filterEventList(month) {
	$('#events .dtstart').each(function() {
//	$('#events .dtstartISO').each(function() {
		dtstart = $(this).attr('title').replace('\n', '');
		dtstartISO = $(this).attr('title').replace('\n', '');
		var d = dtstart.split("-");
		var eventMonth = d[1];
		
		if(month == eventMonth) {
			$(this).parents('li.vevent').parents('li').show();
		} else {
			$(this).parents('li.vevent').parents('li').hide();
		}
	});
}
	
function filterMap(month) {
	for (var i = 0; i < markers.length; i++) {
		var marker = markers[i];
//		var d = new Date(marker.dtstartISO.replace('/n', ''));
		var d = (marker.dtstartISO).split("-");	
		var eventMonth = d[1].replace("\n","");
		if(eventMonth != month) {
			markers[i].hide();	
		}
		else {
			markers[i].show();
		}
	}
	
}

// Returns the monthname
function monthName(month) {
	var name = '';
	switch (month) {
		case 1: name = 'January'; break;
		case 2: name = 'February'; break;
		case 3: name = 'March'; break;
		case 4: name = 'April'; break;
		case 5: name = 'May'; break;
		case 6: name = 'June'; break;
		case 7: name = 'July'; break;
		case 8: name = 'August'; break;
		case 9: name = 'September'; break;
		case 10: name = 'October'; break;
		case 11 : name = 'November'; break;
		case 12: name = 'December'; break;
		default: name = '';
	}
	return name;
}

// Function for adjustingn the height of the list and the map according to the available browser size.
function adjustElementHeights() {
	var height = $(window).height();
	var sliderHeight = $('#month_select').height();
	var eventHeight = height - 150;
	var mapHeight = height - 150 - sliderHeight;

	$('#events').height(eventHeight);
	$('#map').height(mapHeight);
//reduce slider width to a third of map width	
	$('#month_select').width($('#map').width()/3);
}