/*---------------------------------------------------------------------------------------------------------------------------
	Author: 	Gabriel Svennerberg.
	Created:	2008-04-14
	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
------------------------------------------------------------------------------------------------------------------------------*/
DOMAssistant.DOMReady(initMap);

function initMap() {
	if (!GBrowserIsCompatible()) { return; }
	if (!document.getElementById("events")) { return; }
	
	$(window).addEvent("resize", adjustElementHeights);
	
	// Hiding some information in the list
	$('#events').elmsByClass('description').each(function() {
		$(this).addClass('hidden');
	});
	$('#events').elmsByClass('vcard').each(function() {
		$(this).addClass('hidden');
	});
	
	var eventsdiv = $$('events');
	$(eventsdiv).addClass('javascriptEnabled');

	var mapcontainer = document.createElement('div');
	mapcontainer.setAttribute('id', 'map-container');
	eventsdiv.parentNode.insertBefore(mapcontainer,eventsdiv);
	
	var mapdiv = document.createElement('div');
	mapdiv.setAttribute("id","map");
	mapcontainer.appendChild(mapdiv);

	var map = new GMap(mapdiv);
	map.addControl(new GLargeMapControl());
	map.addControl(new GMapTypeControl());
	map.centerAndZoom(new GPoint(18.347168,60.780619), 12);

	adjustElementHeights();
	
	// Funktion to create a marker
	function createMarker(point, html, obj) {
		var marker = new GMarker(point);
		GEvent.addListener(marker, "click", function() {
			marker.openInfoWindowHtml(html, {
				maxWidth: '300'
			});
			marker.title = 'djfklj';
			highlightItem(obj);
			
		});
		return marker;
	}
	
	// Getting all elements with the class="vevent"
	var events = $('.vevent');
	
	// Loop through all event elements to extract data about each event
	for (var i=0; i < events.length; i++) {
			
		// Extracting the coordinates
		events[i].latitude =  $(events[i]).elmsByClass('latitude')[0].innerHTML;
		events[i].longitude =  $(events[i]).elmsByClass('longitude')[0].innerHTML;
		
		// Getting name and description of the event
		events[i].summary =  $(events[i]).elmsByClass('summary')[0].innerHTML;
		events[i].description = $(events[i]).elmsByClass('description')[0].innerHTML;
		
		// Extracting start- and end date
		events[i].dtstart =  $(events[i]).elmsByClass('dtstart')[0].innerHTML;
		events[i].dtend =  $(events[i]).elmsByClass('dtend')[0].innerHTML;
		
		// Extracting contact- and adressinformation
		events[i].locality = $(events[i]).elmsByClass('locality')[0].innerHTML;
		events[i].countryName = $(events[i]).elmsByClass('country-name')[0].innerHTML;
		events[i].fn = $(events[i]).elmsByClass('fn')[0].innerHTML;
		events[i].email = $(events[i]).elmsByClass('email')[0].innerHTML;
		events[i].url = $(events[i]).elmsByClass('url')[0].href;
		
		// If the event was marked up with coordinates I put it on the map
		if (events[i].latitude && events[i].longitude) {
			
			
			// Creating a point in Google map
			var point = new GPoint(events[i].longitude, events[i].latitude);
			
			// Using the extracted information to create an "Info bubble"
			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>';
			
			//creating and adding a marker in Google Maps
			var marker = createMarker(point, html, events[i]);
			map.addOverlay(marker);
			
			events[i].marker = marker;
			events[i].html = html;

			events[i].onclick = function(){	
				highlightItem(this);
				
				var p = new GPoint(this.longitude, this.latitude); 
				map.centerAndZoom(p);
				this.marker.openInfoWindowHtml(this.html, {
					maxWidth: '300'
				});
			};

		}
	}
	
	// Function for highlighting selected object in the list
	function highlightItem(listitem) {
		var events = eventsdiv.getElementsByTagName("li");
		for (var i=0; i<events.length; i++) {
			if (events[i] == listitem) {
				$(events[i]).addClass('selected');
			} else {
				$(events[i]).removeClass('selected');
			}
		}
	}
	
	// Function for adjustingn the height of the list and the map according to the available browser size.
	function adjustElementHeights() {
		var height = 640;
		
		if (window.innerWidth) {
			height = window.innerHeight;
			height = height - 140 + 'px';
	 	} else if (document.documentElement && document.documentElement.clientWidth && document.documentElement.clientWidth != 0) {
			height = document.documentElement.clientHeight;
			height = height - 150 + 'px';
		} else if (document.getElementsByTagName('body')[0].clientHeight) {
			height = document.getElementsByTagName('body')[0].clientHeight;
			height = height - 150 + 'px';
		}
		
		if(height) {
			$$('map').style.height = height;
			$$('events').style.height = height;
		}
	}

}