// TM Design - 2008

var mapbox_images = 0;

function changeMapBoxImage(num) {
	for ( var i = 1; i <= mapbox_images; i++ )
		document.getElementById('im_' + i).style.display="none";
	if ( num > 0 )
		document.getElementById('im_' + num).style.display="block";
}

function loadLocationData(xmlFile) {
	new Ajax.Request(xmlFile, {
		method: 'get',
		onSuccess: 
			function(transport){
				var leHtml = "";
				var lesImages = "";
				var docXML = transport.responseXML;
				var xmlObj = docXML.documentElement;
				leHtml = "<h1>" + xmlObj.getAttribute('title').replace('**','<br/>') + "</h1>";
				leHtml += "<ul>";
				for ( var i = 0; i < xmlObj.childNodes.length; i++ ) {
					if ( xmlObj.childNodes[i].tagName == 'locations') {
						var locations = xmlObj.childNodes[i];
						leHtml += processLocations(locations);
						lesImages += processLocationsImg(locations);
					}	
				}
				leHtml += "</ul>";
				// adding the fillerDiv
				leHtml += '<div id="filler" style="width: 100%; height: 110px; background: url(' + xmlObj.getAttribute('img') + ') 0 0 no-repeat;">';
				leHtml += lesImages;
				leHtml += '</div>';
				$('mapbox').innerHTML = leHtml;
			},
		onFailure: 
			function(){ 
				alert('Something went wrong...') 
			}
	});
}

function processLocationsImg(locations) {
	var res = "";
	var num = 1;
	mapbox_images = 0;
	for ( var i = 0; i < locations.childNodes.length; i++ ) {
		if ( locations.childNodes[i].tagName == 'location' ) {
			var location = locations.childNodes[i];
			res += '<img id="im_' + num + '" src="' + location.getAttribute('img') + '" style="display: none;"/>';
			mapbox_images++;
			num++;
		}	
	}
	return res;
}

function processLocations(locations) {
	var res = "";
	var num = 1;
	for ( var i = 0; i < locations.childNodes.length; i++ ) {
		if ( locations.childNodes[i].tagName == 'location' ) {
			res += processLocation( locations.childNodes[i], num);
			num++;
		}	
	}
	return res;
}

function processLocation(location, num) {
	var content = location.textContent;
	if ( content == undefined )
		content = location.text;
	var res = '<li><a href="' + location.getAttribute('link') + '" onmouseover="javascript:changeMapBoxImage(' + num + ');" onmouseout="changeMapBoxImage(0);">' + location.getAttribute('name') + '<br/>' + content.replace('**','<br/>') + '</a></li>';
	return res;
}