/** 
 * @projectDescription	Accessible Map with Polygons
 * @author 	Matt Hobbs matt.hobbs@harvestdigital.com
 * @version 	0.1 
 */

/** @id mapObject
* @classDescription The overall map object
*/
//If user has JS, add this class to the html.
document.documentElement.className += "hasJS";
	
var mapObject = {
	/** @id insertMapTag
	* @classDescription Inserts the map html into mapcontainer if they have JS.
	*/
	insertMapTag:function(){
		var mapHTML = "<img src='images/mapGIF.gif' alt='' usemap='#mapGIF.gif'/>"+
						"<div class='rhomeIntroText'><h2>Finding a Car Supermarket in Your Area</h2>"+
						"Simply click on your location on the map above to see a list of car supermarkets in your region, complete with full contact details and links to their websites where you can find out more about them.</div>"+
						"<map name='mapGIF.gif' id='mapArea'>"+
							"<area id='polyScotland' title='Scotland' shape='poly' coords='220,180,243,158,238,153,243,146,233,138,214,139,234,131,231,121,253,86,299,58,307,29,305,21,256,23,228,45,222,44,230,35,184,36,144,40,137,54,128,73,129,90,149,127,144,143,144,153,162,166,168,163,180,138,185,145,179,150,187,160,175,175,192,195,220,179' href='' target='' alt='' />"+
							"<area id='polyNorthWest' title='North West' shape='poly' coords='234,262,247,252,248,229,235,216,235,210,239,210,239,186,235,186,234,169,205,199,178,214,218,232,214,235,219,242,211,250,221,264,234,263' href='' target='' alt='' />"+
							"<area id='polyNorthEast' title='North East' shape='poly' coords='270,198,239,198,241,183,236,182,237,169,246,159,241,152,246,146,256,158,255,166,267,179,269,198' href='' target='' alt='' />"+
							"<area id='polyYorkshire' title='Yorkshire' shape='poly' coords='275,250,260,250,252,241,246,240,250,228,237,214,240,200,281,201,301,234,292,234,280,232,289,236,274,250' href='' target='' alt='' />"+
							"<area id='polyWales' title='Wales' shape='poly' coords='229,318,218,326,206,326,202,317,189,317,190,308,178,317,168,316,168,303,181,295,194,287,193,266,185,266,181,251,190,243,197,251,209,251,219,264,220,293,230,305,229,317' href='' target='' alt='' />"+
							"<area id='polyWestMidlands' title='West Midlands' shape='poly' coords='249,292,245,289,220,289,220,265,233,265,245,254,246,265,256,275,249,292' href='' target='' alt='' />"+
							"<area id='polyEastMidlands' title='East Midlands' shape='poly' coords='281,291,270,303,259,302,250,291,257,274,245,258,249,241,257,250,273,252,274,259,283,261,280,290' href='' target='' alt='' />"+
							"<area id='polyEastEngland' title='East of England' shape='poly' coords='321,311,304,300,296,299,289,291,282,292,284,261,276,258,278,249,290,237,304,253,301,272,308,262,331,263,339,273,339,288,337,295,321,310' href='' target='' alt='' />"+
							"<area id='polySouthWest' title='South West' shape='poly' coords='240,358,214,356,211,368,205,376,198,375,189,365,178,366,165,382,134,384,152,373,159,372,183,350,182,343,189,343,195,333,221,332,222,329,246,346,239,357' href='' target='' alt='' />"+
							"<area id='polySouth' title='South' shape='poly' coords='274,351,282,332,270,319,270,305,258,303,248,292,221,290,230,304,229,318,223,328,246,345,240,358,233,397,254,398,274,350' href='' target='' alt='' />"+
							"<area id='polyNIreland' title='Northern Ireland' shape='poly' coords='145,218,98,217,96,192,83,193,88,175,93,166,112,165,143,166,163,195,163,206,145,217' href='' target='' alt='' />"+
							"<area id='polyLondon' title='London' shape='poly' coords='306,329,291,330,284,322,284,317,306,317,306,328' href='' target='' alt='' />"+
							"<area id='polySouthEast' title='South East' shape='poly' coords='277,351,296,349,305,353,324,340,331,331,332,324,312,321,321,312,302,301,283,293,272,305,273,318,283,330,277,351' href='' target='' alt='' />"+
						"</map>";
		document.getElementById('mapContainer').innerHTML += mapHTML;
		mapObject.mapHovers();//call the hover function
	},
	/** @id mapHovers
	* @classDescription Grabs the info off the dd and recreates a div.
	*/
	mapHovers:function(){
		var mapContainer = document.getElementById("mapContainer");
		var mapAreas = document.getElementById('mapArea').getElementsByTagName('area');//Array of the area tags
		for(var x=0;x<mapAreas.length;x++){//loop through area tags and apply mouseover function
			mapAreas[x].onmouseover = function(){
				var selectedID = this.id +"DD";//take the id of the area and add DD to the end
				var selectedDDHTML = document.getElementById(selectedID).innerHTML;//grab the innerHTML of the dd from above
				var selectedDTID = this.id +"DT";//take the id of the area and add DT to the end
				
				// Modified by neil-mc. Original code broke when we started generating hyperlink
				// using JSP fragment which inserted some spaces. 
				var dtHref = document.getElementById(selectedDTID).getElementsByTagName("a")[0].href;
				this.href = dtHref;//apply the above href to the selected area href
				
				//Create a new div
				var newDiv = document.createElement("div");
				newDiv.className = selectedID + " hoverDiv";//add 2 classes to the new div
				newDiv.innerHTML = selectedDDHTML;//insert the above innerHTML
				mapContainer.appendChild(newDiv);//stick the div to the container
				mapObject.removeDiv(newDiv,mapAreas, mapContainer);//run this function for the mouseout function
			}
		}
	},
	/** @id removeDiv
	* @classDescription Removes the div that was created above from the container
	*/
	removeDiv: function(newDiv,mapAreas, mapContainer){//arguments sent because of scope
		for (var x = 0; x < mapAreas.length; x++) {
			mapAreas[x].onmouseout = function(){//loop through areas and add a mouseout
				mapContainer.removeChild(newDiv);//remove the div from the container
			}
		}
	}
}
/** @id codeOnloadEvent 
* @classDescription Queue up functions to load on page load 
*/
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}
addLoadEvent(mapObject.insertMapTag);