/*---------------------------------------------------------------------------------------------------------------------------
	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
------------------------------------------------------------------------------------------------------------------------------*/

var map;
var mgr;
var markers = [];

$(document).ready(function() {
	$('#events .description, #events .geo, #events .vcard').hide();
	initMap();
	
});

function initMap() {
	
	if (!GBrowserIsCompatible()) { return; }
	if (!document.getElementById("events")) { return; }
	
	$('#events').addClass('javascriptEnabled');	
	$('#events').before('<div id="map-container"><div id="map"></div></div>');
	
	filterEventList(8);
	
	$('#selected_month').html(monthName(8));

	$('#month_select').show();
	$('#date_slider').slider({
		handle: '.handle',
		steps: 3,
		min: 5,
		max: 8,
		startValue: 8,
		slide: function(e, ui) {
			// Changing the label to the selected monthname
			$('#selected_month').html(monthName(ui.value));
			
			// filtering event list
			filterEventList(ui.value);
			
			// filtering markers on map
			filterMap(ui.value);
		},
		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);
	
	mgr = new MarkerManager(map, {trackMarkers:true});
	
	
	// 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('.dtstart').attr('title');
		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 (events[i].latitude && events[i].longitude) {
			
			// Skapar en punkt i 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 + ' &mdash; ' + events[i].dtend + '</p>';
			html += '<p>' + events[i].locality + ', ' + events[i].countryName + '</p>';
			html += '<p>' + events[i].description + '</p>';
			html += '<p><a href="mailto:' + events[i].email + '">' + events[i].fn + '</a><br />';
			html += '<a href="' + events[i].url + '">' + events[i].url + '</a></p>';
			
			var marker = createMarker(point, html, events[i]);
			marker.dtstart = events[i].dtstartISO;
			
			
			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 eventMonth = d.getMonth() + 1;

			mgr.addMarker(marker, 1);
			if(eventMonth != 8) {
				marker.hide();	
			}
		}
	}

	adjustElementHeights();
	$(window).resize(function() {
		adjustElementHeights();
	});
}
// Funktion för att skapa en punkt i kartan
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() {
		dtstart = $(this).attr('title').replace(/-/g, '/');
		var d = new Date(dtstart);
		var eventMonth = d.getMonth() + 1;
		
		if(month === eventMonth) {
			$(this).parents('li.vevent').parents('li').show();
		} else {
			$(this).parents('li.vevent').parents('li').hide();
		}
	});
}
	
function filterMap(month) {
	/*
	mgr.clearMarkers();
	
	for(var i = 0; i < markers.length; i++) {
		var marker = markers[i];
		
		var d = new Date(marker.dtstart.replace(/-/g, '/'));
		var eventMonth = d.getMonth() + 1;
		if(eventMonth != month) {
			mgr.removeMarker(markers[i]);	
		}
		else {
			mgr.addMarker(markers[i], 1);
		}
	}
	*/
	for (var i = 0; i < markers.length; i++) {
		var marker = markers[i];
		var d = new Date(marker.dtstart.replace(/-/g, '/'));
		var eventMonth = d.getMonth() + 1;
		if(eventMonth != month) {
			markers[i].hide();	
		}
		else {
			markers[i].show();
		}
	}
	
}

// Returns the monthname
function monthName(month) {
	var name = '';
	switch (month) {
		case 1: name = 'Januari'; break;
		case 2: name = 'Februari'; break;
		case 3: name = 'Mars'; break;
		case 4: name = 'April'; break;
		case 5: name = 'Maj'; break;
		case 6: name = 'Juni'; break;
		case 7: name = 'Juli'; break;
		case 8: name = 'Augusti'; break;
		case 9: name = 'September'; break;
		case 10: name = 'Oktober'; 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);
	$('#month_select').width($('#map').width());
}