// check browser
var isIE = (navigator.userAgent.indexOf('MSIE') > -1) ? true : false;

// path to xml file with dog schools
var url = location.href;

// character position from which to look for the slash for the root directory
var fromChar = 0;

// set the char position from which to search for the root path
if (url.match(/show/)) fromChar = 27; // frolic's folder on show.scim.de
else if (url.match(/webdev\/dev\/sascha/)) fromChar = 42; // frolic's folder in dev/sascha folder on webdev
else if (url.match(/webdev\/frolic/)) fromChar = 14; // frolic's folder on webdev
else fromChar = 7; // live domain frolic.de

// define the base url
var baseURL = url.substring(0, url.indexOf('/', fromChar)); 

var xmlFile = baseURL + '/xml/hundeschulen.xml';

// xml object to save the data from the xml file in
var xmlObj;

// last clicked object
var previous;

function overlay(which,action)
{
	// open overlay
	if(action == 'open')
	{
		// get the name of the place (placed in href)
		var oHref = $(which).attr('href');
		
		// always show overlay over circle areas belonging to the rect areas
		// doesn't work in ie < 8
		//which = $('area[href="'+oHref+'"][shape="circle"]');
		
				
		// calculate the overlay position bottom
		// use which.getAttribute() instead of $(which).attr() since IE < 8 don't fetch 
		// the value of coords-Attribute otherwise
		var oBottom = parseInt($('map#m_schulenkarte').css('height').replace('px','')) - parseInt(which.getAttribute('coords').split(',')[1]);
		oBottom = (isIE) ? oBottom + 140: oBottom;
		oBottom = oBottom.toString() + 'px' ;
		
		
		
		// calculate the overlay position left
		var oLeft = parseInt(which.getAttribute('coords').split(',')[0]) - 15; // etwas nach links wg. pfeil verschieben
		oLeft = oLeft.toString() + 'px';
		
		// fetch the xml object from the xml file
		var $xml = $(xmlObj);
		
		// define template strings with template variables
		var oHtmlTemplateName = '<span style="color:#d62515;">%%NAME%%</span><br />';
		var oHtmlTemplateOrt = '%%ORT%%<br />';
		var oHtmlTemplateTelefon = 'Telefon: %%TELEFON%%<br />';
		var oHtmlTemplateEmail = 'Email: %%EMAIL%%<br /><br />';
		
		// define the output html string
		var oHtml = '';
		
		// fetch values from the xml object
		for(var i = 0; i < $xml.find('schule').length; i++)
		{
			var xmlName = $xml.find('schule')[i].attributes[0].nodeValue;
			var xmlOrt = $xml.find('schule')[i].attributes[1].nodeValue;
			var xmlTelefon = $xml.find('schule')[i].attributes[2].nodeValue;
			var xmlEmail = $xml.find('schule')[i].attributes[3].nodeValue;
			var xmlHref = $xml.find('schule')[i].attributes[4].nodeValue;
			
			// check which hrefs in the xml match the given href string
			if(oHref == xmlHref) 
			{
				// put the output string together
				oHtml += oHtmlTemplateName.replace('%%NAME%%',xmlName);
				oHtml += oHtmlTemplateOrt.replace('%%ORT%%',xmlOrt);
				oHtml += oHtmlTemplateTelefon.replace('%%TELEFON%%',((xmlTelefon == 0) ? '--' : xmlTelefon));
				oHtml += oHtmlTemplateEmail.replace('%%EMAIL%%',((xmlEmail == 0) ? '--' : xmlEmail));
			}
		}
		
		// hide previous overlay
		if(typeof previous != 'undefined') 
		{
			$('#overlay').hide('fast');
		}
		
		// timeout for opening next overlay
		setTimeout(function(){
			$('#overlay-content').html(oHtml);
			$('#overlay').css('bottom',oBottom).css('left',oLeft).show('fast') // oBottom
			}, 200);
		
		// save the current object as the previous for the next call
		previous = which;
	}
	
	// close overlay by clicking the close link
	else
	{
		$('#overlay').hide('fast');
	}
}

function getKeyCode(event)
{
	var _event = event || window.event;
	return _event.keyCode;
}


$(document).ready(function(){
	// check clicks on the area elements
	$('area').click(function(){
		overlay(this,'open');
	});
	
	// hide overlay if escape-key is pressed
	document.onkeydown = function(ev){
		if(getKeyCode(ev) == 27)
		{
			overlay(this,'hide');
		}
	};
	
	// perform the ajax request for fetching the xml object from the given file
	$.ajax({
		url:xmlFile,
		success:function(data){
			xmlObj = data;
		},
		dataType:'xml'
	});
});