/*
 * This javascript class contains functions to implement the google map API into uitidee.
 */

var xmlHttp;
var googleMap;

// Function to load the google map.
function loadMap( event )
{
	if( GBrowserIsCompatible() )
	{
		// Evaluate event adress information.
		var event = eval( "(" + getEventInformation( event, 'adressinfo' ) + ")" );
		
		this.googleMap = new GMap2( document.getElementById( "map" ) );
		
		// Map center, type and controls.
		googleMap.setCenter( getLatLng( event ), 12 );
		googleMap.setMapType( G_NORMAL_MAP );
		googleMap.addControl( new GMapTypeControl() ); 
		googleMap.addControl( new GLargeMapControl() );
		
		// The icon that the map loads with as the center uses an arrow image.
		var icon = new GIcon( G_DEFAULT_ICON, "http://maps.google.com/mapfiles/arrow.png" )
		icon.iconSize = new GSize( 39, 34 );
		
		// Place event's marker.
		placeMarker( event, icon );
	}
}

// Function focus the map on a given event and open up it's information window.
function setFocus( event )
{
	event = eval( "(" + getEventInformation( event, "adressinfo" ) + ")" );
	
	openInfoWindow( event );
	googleMap.setCenter( getLatLng( event ) );
}

// Function to return a GLatLng object of a given event.
function getLatLng( event )
{
	return new GLatLng( event[ 'latitude' ] , event[ 'longitude' ] );
}

// Function to create a marker on the map and load it's info window.
function placeMarker( event, icon )
{
	var marker = new GMarker( getLatLng( event ), icon );	
	GEvent.addListener( marker, "click", function() {
		googleMap.openInfoWindowHtml( getLatLng( event ), generateHTMLAdressInfo( event ) );
	});
	googleMap.addOverlay( marker );
}

// Function to draw a circle on a given point with parameters.
// Only works properly if the div containing the GoogleMap is exactly a square.
function drawCircle( event, radius, color, thickness, opacity )
{
	// Get the event variable.
	var center = getLatLng( event );
	
	// The ratio between kilometers and a latitude coordinate.
	var latKmRatio = 0.008098;
	
	radius = radius * latKmRatio;
	
	var circleQuality = 10;
	var M = Math.PI / 180;
	var L = googleMap.getBounds().toSpan();
	
	var circleSquish = L.lng() / L.lat();
	
	var points = [];
	
	for( var i = 0; i < 360; i += circleQuality )
	{
		var P = new GLatLng( 
			Number( center.lat() ) + ( radius * Math.sin( i * M ) ),
		 	Number( center.lng() ) + ( radius * Math.cos( i * M ) ) * circleSquish );
		points.push( P );
	}
	
	points.push( points[0] );

	googleMap.addOverlay( new GPolygon( points, color, thickness, opacity, color, opacity ) );
}

// Function to open an information window.
function openInfoWindow( event )
{
	googleMap.openInfoWindowHtml( getLatLng( event ), generateHTMLAdressInfo( event ) );
}

// Function to return certain event information.
function getEventInformation( event, information )
{
	this.xmlHttp = getXmlHttpObject();
	if( xmlHttp == null )
	{
		alert( "Browser does not support HTTP Request!" );
		return;
	}
	
	var url = "http://www.uitidee.nl/" + event + "/ajax/gm/" + information;
		
	xmlHttp.open( "GET", url, false );
	xmlHttp.send( null );
	return xmlHttp.responseText;
}


function showEvents( event, type, distance )
{
	// Clear the map of all overlays.
	googleMap.clearOverlays();
	
	// Clear the results of last search underneath the map.
	document.getElementById("showEvents").innerHTML = "";
	
	// Get events based on given distance and type.
	var aEvents = eval( "(" + getEventInformation( event, "show_events/" + distance + "/" + type ) + ")" );
	
	for( var i = 0; i < aEvents.length; i++ )
	{
		// Store current event.
		currentEvent = aEvents[ i ];
		
		// Place it's marker.
		var icon = new GIcon( G_DEFAULT_ICON );
		placeMarker( currentEvent, icon );
		
		// Show events underneath the map aswell.
		document.getElementById("showEvents").innerHTML += generateHTMLEventList( currentEvent );
	}
	
	// Place the event the visitor is currently at and give this one focus.
	event = eval( "(" + getEventInformation( event, "adressinfo" ) + ")" );
	
	// Place the marker of the original event.
	var icon = new GIcon( G_DEFAULT_ICON, "http://maps.google.com/mapfiles/arrow.png" )
	icon.iconSize = new GSize( 39, 34 );
	placeMarker( event, icon );
	openInfoWindow( event );
	
	googleMap.setCenter( getLatLng( event ) );

	// Adjust the map's zoom level based on the distance.
	switch( distance )
	{
		case "1":
			googleMap.setZoom( 14 ); break;
		case "5":
			googleMap.setZoom( 12 ); break;
		case "10":
			googleMap.setZoom( 11 ); break;
		case "20":
			googleMap.setZoom( 10 ); break;
		case "30":
			googleMap.setZoom( 10 ); break;
		case "50":
			googleMap.setZoom( 9 ); break;
		case "1000":
			googleMap.setZoom( 7 ); break;
	}
}

// Function to create the XMLHttp Object.
function getXmlHttpObject()
{
	var xmlHttp = null;
	
	try
	{
		// Firefox, Opera, Safari
		xmlHttp = new XMLHttpRequest();
	}
	catch( e )
	{
		try
		{
			xmlHttp = new ActiveXObject( "Msxml2.XMLHTTP" );
		}
		catch( e )
		{
			xmlHttp = new ActiveXObject( "Microsoft.XMLHTTP" );
		}
	}
	
	return xmlHttp;
}

// Function to generate the HTML inside information boxes.
function generateHTMLAdressInfo( event )
{
	var sHTML = "<h3>" + event[ "event_name" ] + "</h3>";
	sHTML += "<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\">";
	sHTML += "<tr>";
	
	sHTML += "<td>";
	sHTML += event[ "street" ] + " " + event[ "street_number" ] + "<br>";
	sHTML += event[ "zipcode" ] + " " + event[ "city" ] + "<br>";
	sHTML += event[ "country" ] + "<br>";	
	sHTML += "</td>";
	
	sHTML += "<td width=\"10\">";
	sHTML += "</td>";
	
	sHTML += "<td width=\"63\">";
	sHTML += "<a href=\"http://www.uitidee.nl/" + event[ "nametag" ] + "\" class=\"googlemaps_moreinfo\">";
	sHTML += "<img src=\"/images/icons/icon_meerinfo.png\" border=\"0\">";
	sHTML += "</a>";
	sHTML += "<td>";
	
	sHTML += "</tr>";
	sHTML += "</table>";

	return sHTML;
}

// Function to generate the HTML inside information box of a concurrent in ads.
function generateHTMLConcurrentInfo( advert )
{
	var sHTML = "";
	
	if( advert.length == 0 )
	{
		sHTML += "Geen.";
	}
	else
	{
		for( var i = 0; i < advert.length; i++ )
		{
			sHTML += "<h3>" + advert[i]["event_name"] + "</h3>";
			sHTML += "Adverteert met " + advert[i]["cpc"] + " eurocent binnen een straal van " + advert[i]["range"] + "km.<br>";
			sHTML += "<a href=\"javascript:setFocus( '" + advert[i]["nametag"] + "' )\">Bekijk op map.</a><br>";
			sHTML += "<br>";
		}
	}
	return sHTML;
}

// Function to generate the HTML at the bottom of the map.
function generateHTMLEventList( event )
{
	var sHTML = "<h3>" + event[ "event_name" ] + "</h3> ( " + event[ "distance" ] + "km )";
	sHTML += "<p align=\"right\">";
	sHTML += "<a href=\"http://www.uitidee.nl/" + event["nametag"] + "\">Ga naar pagina van activiteit.</a><br>";
	sHTML += "<a href=\"javascript:setFocus( '" + event["nametag"] + "' )\">Ga naar activiteit op de map</a><br>";
	sHTML += "</p>";
	return sHTML;
}