// JavaScript Document
/*
Create our object to hold all functions and vars
---------------------------------------------------------*/
var objMapping = {};
/*
---------------------------------------------------------*/
/**
 * The map object, null until script loads in.
 * @type {GMap2}
 */
objMapping.map = null;  

/**
 * The id of the map
 * @type {int}
 */
objMapping.mapmapId = null;
/**
 * The height of the map
 * @type {int}
 */
objMapping.mapmapHeight = null;

/**
 * The width of the map
 * @type {int}
 */
objMapping.mapmapWidth = null;

/**
 * The xml object containing the marker data
 * @type {xml}
 */
objMapping.mapxmlFeed = null;  

/**
 * The bounds of the markers once loaded in.
 * @type {GLatLngBounds}
 */
objMapping.mapbounds = null;

/**
 * The marker with currently opened info window.
 * @type {Array}
 */
objMapping.markers = new Array();
objMapping.real_markers = new Array();


/**
 * The marker with currently opened info window.
 * @type {GMarker}
 */
objMapping.currentMarker = null;

/**
 * The dom element that the map is loaded into
 * @type {Element}
 */
objMapping.mapmapDiv = null;

/**
 * The dom element that everything is a child of.
 * @type {Element}
 */
objMapping.mapcontainerDiv = null;

/**
 * The url of the feed to populate the map.
 * @type {string}
 */
objMapping.mapfeedUrl=  null;

objMapping.allowedBounds = null;

objMapping.zoomMin="";
objMapping.zoomMax="";

objMapping.mapMoving=false;

objMapping.shadow=objSite.site_url+"images/site_images/icon_shadow.png";
objMapping.trans=objSite.site_url+"images/site_images/trans.png";

objMapping.geocoder =null;

objMapping.mgr=null;


objMapping.addFormData='<form id="googleform"><h5>Enter Book details:</h5><hr /><label for="contentsearch1">Title:</label><input id="contentsearch1" onkeyup="objSite.lookup(this.value,objSite.query_titles,\'books\',\'prompt\',1);" type="text" value="" /><div class="suggestionsBox" id="prompts1"  style="display: none;"> <div class="suggestionList" id="autoSuggestionsList1"></div></div><label for="contentsearch2">Author:</label><input id="contentsearch2" onkeyup="objSite.lookup(this.value,objSite.query_people,\'people\',\'prompt\',2);" type="text" value="" /><div class="suggestionsBox" id="prompts2"  style="display: none;"> <div class="suggestionList" id="autoSuggestionsList2"></div></div><label for="contentsearch3">Publisher:</label><input id="contentsearch3" onkeyup="objSite.lookup(this.value,objSite.query_organisations,\'organisation\',\'prompt\',3);" type="text" value="" /><div class="suggestionsBox" id="prompts3"  style="display: none;"> <div class="suggestionList" id="autoSuggestionsList3"></div></div><label for="comments">Comments:</label><textarea id="comments"></textarea><div id="error"></div><label for="name">Your name:</label><input id="name" type="text" value="" /><input id="btnAddBook"type="button" value="submit" /></form>';


/*
@description	load the google map script use google load to avoid load issue with ie
@param	url		url of the feed
@param	id		id of the map
@param	width	width of map
@param	height	height of map
*/
objMapping.loadScript=function (url,id,width,height,neLimit,swLimit,zoomMin,zoomMax){
 	
	objMapping.mapId=id;
	objMapping.zoomMin=14;
	objMapping.zoomMax=zoomMax;
	objMapping.neLimit=neLimit;
	objMapping.swLimit=swLimit;
	objMapping.mapHeight=height;	
	objMapping.mapWidth=width;
	objMapping.feedUrl=url;
	
	 google.load("maps", "2.x");  
	  google.setOnLoadCallback(objMapping.setup); 	
	
}


/*
@description	setup the application by loading the xml feed

@param	url		url of the xml feed
*/
objMapping.setup=function (){	
	// load xml file		
	$.ajax({
			 type: "GET",
			 url: objMapping.feedUrl,
			 dataType: "xml",
			 success: objMapping.createMarkers				 
		 }); 		
}
/*
@description	load the map and apply the settings
*/	

objMapping.loadMap=function () {	
	if (GBrowserIsCompatible()) {		
		objMapping.containerDiv = document.getElementById('container');		
  		objMapping.mapDiv = document.getElementById('map');
		objMapping.map = new google.maps.Map2(objMapping.mapDiv, {size: new google.maps.Size(objMapping.mapWidth,objMapping.mapHeight) });
		objMapping.geocoder = new google.maps.ClientGeocoder();
		objMapping.limitMapView();		
		if(objMapping.markers.length!=0){					objMapping.map.setCenter(objMapping.bounds.getCenter(),objMapping.zoomMin);
		}	
		else{					
			objMapping.map.setCenter(new google.maps.LatLng(0, 0));
		}		
		//add controls
		objMapping.map.addControl(new google.maps.SmallMapControl());
        objMapping.map.addControl(new google.maps.HierarchicalMapTypeControl());		
		objMapping.map.enableScrollWheelZoom();	
		objMapping.addMarkers();
		objMapping.setupAddMarker();
		objMapping.setupSearchPanel();	
					
	}	
}
/*
@description	restrict the map view to specified coordinates
*/	


objMapping.limitMapView=function () {	

			 var mt = objMapping.map.getMapTypes();
			 // Overwrite the getMinimumResolution() and getMaximumResolution() methods
			 for (var i=0; i< mt.length; i++) {		 
				
				mt[i].getMinimumResolution = function() {return objMapping.zoomMin;}
				 mt[i].getMaximumResolution = function() {return objMapping.zoomMax;}
			 }
}		  


/*
@description	create the markers to the map

@param	xml		xml object contain marker data
*/
objMapping.createMarkers =function (xml){		

	// for each marker
	objMapping.bounds = new google.maps.LatLngBounds();	
	$(xml).find('marker').each(function(){					
		var title =$(this).find('title').text();		
		var lat = $(this).find('lat').text();	
		var lng = $(this).find('lng').text();
		var image = $(this).find('image').text();
		var comment = $(this).find('comment').text();
		var author = $(this).find('author').text();
		var publisher = $(this).find('publisher').text();
		var name = $(this).find('name').text();
		var point = new google.maps.LatLng(lat,lng);	
		if(author==undefined){
			author="";
		}
		if(publisher==undefined){
			publisher="";
		}	
		
		var infoHtml=objMapping.getInfoHtml(title,author,publisher,name,image,comment,true);
		objMapping.bounds.extend(point);	
		var marker =new Object();
		marker.point=point;
		marker.title=title;
		marker.html=infoHtml;
		marker.image=image;
		marker.author=author;
		marker.publisher=publisher;
		marker.name=name;
		objMapping.markers.push(marker);	
			
	});			
	objMapping.loadMap();
}
/*
@description	add the markers to the map

*/
objMapping.addMarkers =function (){	

	for(var c=0;c < objMapping.markers.length;c++){				
		var marker = objMapping.createMarker(objMapping.markers[c]);			
		//objMapping.map.addOverlay(marker);	
		objMapping.real_markers.push(marker);
		
	}	
	//control how may markers are shown by using marker manager and constrating zoom
	
  objMapping.mgr = new google.maps.MarkerManager(objMapping.map);
  objMapping.mgr.addMarkers(objMapping.real_markers, objMapping.zoomMin);   
  objMapping.mgr.refresh();
 
}
/*
@description	creates a marker on the map
	@returns the marker

@param	marker	object containing the markers properties

*/
objMapping.createMarker=function (marker) {	

	//set the marker for the icon	
	 var markerIcon = new google.maps.Icon(G_DEFAULT_ICON);
	markerIcon.image = marker.image; 
	markerIcon.iconSize=new google.maps.Size(36,54);
	markerIcon.shadow = objMapping.shadow; 
	markerIcon.shadowSize=new google.maps.Size(64,55);
		//	markerIcon.transparent=objMapping.trans; 
	markerIcon.printImage= marker.image; 
	markerIcon.printShadow=objMapping.shadow;
	markerIcon.imageMap=[0,0,36,0,36,54,0,54];
	markerOptions = {title:marker.title,icon:markerIcon  };	
	
	
	var newMarker = new google.maps.Marker(marker.point,markerOptions);
	//newMarker.setImage(marker.image);	
	google.maps.Event.addListener(newMarker, "click", function() {
		newMarker.openInfoWindowHtml(marker.html);
		objMapping.currentMarker=newMarker;
	});
	
	return newMarker;
}

/*
@description	create events to add a new marker
*/	
objMapping.setupAddMarker=function (){		
		// add double click event
		objMapping.map.disableDoubleClickZoom();
		google.maps.Event.addDomListener( objMapping.map, "dblclick", function(o,p){			
			objMapping.map.disableDragging();			
			m = new google.maps.Marker(p,{draggable:true});
			objMapping.currentMarker=m;
			this.addOverlay( m );		
			m.openInfoWindowHtml(objMapping.addFormData);	
			// add event for sumbitting form
			objMapping.setupFormActions();
			l = google.maps.Event.addListener( m, "infowindowclose", function() {
				objMapping.map.removeOverlay( m );
				objMapping.map.enableDragging();
			});
		});	
}

/*
@description	creates the html for the info box
@returns		string

@param	title		title of the marker	
@param	image		url of the image
@param	author		author of the book
@param	publisher	publisher of the book
@param	name		name of the submitter
@param	comments	comments of the marker
@param	includeHolder	boolean value whether to include the holderform
*/
objMapping.getInfoHtml=function (title,author,publisher,name,image,comments,includeHolder) {
	var infoHtml='<h5>'+title+'</h5>';	
	if(author!=""){
		infoHtml+='<h5 class="minor">By '+ author+'</h5>';
	}
	if(publisher!=""){
		infoHtml+='<h5 class="minor">Published by '+ publisher+'</h5>';
	}
	infoHtml+='</h5><hr />';
	infoHtml+='<img width="80px"src="'+image+'"/><p class="comments">'+comments+'<br /><br />Submitted by '+name+'</p>';
	if(includeHolder){
		 infoHtml='<div id="googleform">'+infoHtml+"</div>";
	}
	return infoHtml;
}
/*
@description	create event for when the form is submitted
*/	
objMapping.setupFormActions=function (){
	$("#btnAddBook").click(objMapping.formActions);
	$("#googleform").submit(objMapping.formActions);
}
objMapping.formActions=function(){
		
	if(objMapping.checkField("contentsearch1") && objMapping.checkField("name")&& objMapping.checkField("comments")){
		objMapping.submitForm();
	}
	else{
		$("#error_add").html("<p>Please complete title,name and comments fields!</p>");
	}
	return false;
}


/*
@description	create field has content
@param	id		id of element
*/	
objMapping.checkField=function (id){
	var value=$("#"+id).attr("value");	
	if(value==undefined){
		return false;	
	}
	else{
		return true;	
	}	
}
/*
@description	sumbit form to the server
*/
objMapping.submitForm=function (){
	
	objMapping.currentMarker.disableDragging();
	// get vars to submit
	var point=objMapping.currentMarker.getLatLng();	
	var lat=point.lat();
	var lng=point.lng();
	var title=$('#contentsearch1').attr("value");
	var author=$('#contentsearch2').attr("value");
	var publisher=$('#contentsearch3').attr("value");
	var name=$('#name').attr("value");
	var comments=$('#comments').attr("value");
	var URL=objSite.site_url+"ajax/addMapMarker";
	
	// submit form
	$.ajax({
		type: "POST",
		url: URL,
		data: 'title='+title+'&comments='+comments+'&name='+name+'&author='+author+'&publisher='+publisher+'&lat='+lat+'&lng='+lng+'&mapId='+objMapping.mapId,
		success:objMapping.formResponse
	});		
	// show loading
	var data = "<div class='loading'></div>";
	$("#googleform").html(data);	
}
/*
@description	deals with the response from the server
@param 	data	response from server
*/
objMapping.formResponse=function (data){
	
		//spilt string into array
		data=data.split("***");	
		var html=objMapping.getInfoHtml(data[0],data[1],data[2],data[3],data[4],data[5],false);
		
		
		//clear listner that clears marker
		google.maps.Event.clearListeners(objMapping.currentMarker,  "infowindowclose");	
		// set new close window event
		 google.maps.Event.addListener(objMapping.currentMarker, "infowindowclose", function() {				
				objMapping.map.enableDragging();			
		});
	
		//set click event
		var marker=objMapping.currentMarker;
		var html=objMapping.getInfoHtml(data[0],data[1],data[2],data[3],data[4],data[5],true);			
		google.maps.Event.addListener(marker, "click", function() {
			
			marker.openInfoWindowHtml(html);
			objMapping.currentMarker=marker;
		});
		

		$("#googleform").html(html);

}


objMapping.setupSearchPanel=function(){
	
	$('#map_tools_panel').show();
	$('#map_tools_toggle').click(function(){
		$('#quicklinks').height('auto');
		$('#map_tools').slideToggle('slow');
	});
	
	objMapping.setupPostcodeSearch();
	objMapping.setupQuickLinks();
}

/*
@description	create event for when the postcode form is submitted
*/	
objMapping.setupPostcodeSearch=function (){	
	$('#get_postcode').click(objMapping.getPostcode);
}

/*
@description	retrieves the postoode from form and requests point
@param	form	form element contain input
*/	
objMapping.getPostcode=function() {

 var postcode= $('#postcode').attr("value")+",England"; 
  objMapping.geocoder.getLatLng(
		postcode,function(point) {
		  if (!point) {
			alert(postcode + " not found");
			}
			else {		  
			 objMapping.map.setCenter(point, objMapping.zoomMin);
		   }
		}  
  );
   return false;
}

/*
@description	add quick links to view books
*/	
objMapping.setupQuickLinks=function(){
	$('li', '#markers').each( function () { 
		// get id and parts fo coordinates
		var id=this.id
		var parts= id.split('/');	
		var lat=parts[0];
		var lng=parts[1];
		var index=parts[2];	
		var point = new google.maps.LatLng(lat,lng);		
		// clcik event
		$(this).click(function(){	
			var marker=objMapping.real_markers[index];	
			var html=objMapping.markers[index].html
			objMapping.map.setCenter(point, objMapping.zoomMin);
			//used to ensure markers are loaded before opening 					
			$('#map_tools').slideToggle('slow',function(){	
				marker.openInfoWindowHtml(html);
				objMapping.currentMarker=marker;	
			});	
		});	
		
	  });

}

 






/**
 * loads the map in static mode.
 *	@param	xml	xml object containing markers

function loadStaticMap(xml) {
  containerDiv = document.getElementById('container');
  xmlFeed=xml;
  mapDiv = document.getElementById('map');
  
   mapDiv.onclick = function (e) {
    clickedX = (window.event && window.event.offsetX) || e.clientX;
    clickedY = (window.event && window.event.offsetY) || e.clientY;
    loadDynamicMap(); 
  };
  
  mapDiv.style.cursor = 'pointer';
  var urlString = ['http://maps.google.com/staticmap?markers='];
  var markerString = [];
  // for each marker 
 $(xml).find('marker').each(function(){	
   		 markerString.push($(this).find('lat').text() + ',' + $(this).find('lng').text() + ',red');
		

  }) 
  urlString.push(markerString.join('|'));
  urlString.push('&size=500x300');
  urlString.push('&key=ABQIAAAAgQBGG6g6ff_wRIhwQYjDHRQlhAR02mfba7pTbjTDhmTFfZXyzxRjqbqRTtDLyr9ZxEz2QCxWgpwi9Q');
  // add the image to the map div
  $(mapDiv).append('<img src="'+urlString.join('')+'"/>');

}
*/