// JavaScript Document
jQuery.noConflict()
jQuery(document).ready(function()
{
	var cityToolTip = [];
	var cityName = [];
	var cityId = [];
	var cityLeft = [];
	var cityTop = [];
	var cityAddress = [];
	var cityTel = [];
	var cityURL = [];
	
	var noOfPlots;
	var currentPlotId;
	var defaultMapLocationId;
	
	var $toolTip = jQuery('#mapToolTip');
	
	jQuery.ajax({
		url: WEB_ADDRESS+"js/locationSettings.xml",
		dataType: "xml",
		success: parseXml,
		error:function (xhr, ajaxOptions, thrownError){
                    alert(xhr.status);
                    alert(thrownError);
                }
	});
    
  	function parseXml(xml)
	{

		jQuery(xml).find("mapLocation").each(function()
		{
			cityToolTip.push(jQuery(this).find('cityToolTip').text());
			cityName.push(jQuery(this).find('cityName').text());
			cityId.push(jQuery(this).find('cityId').text());
			cityLeft.push(jQuery(this).find('cityLeft').text());
			cityTop.push(jQuery(this).find('cityTop').text());
			cityAddress.push(jQuery(this).find('cityAddress').text());
			cityTel.push(jQuery(this).find('cityTel').text());
			cityURL.push(jQuery(this).find('cityURL').text());
			
			if(jQuery(this).attr("default") == "true"){
				defaultMapLocationId = jQuery(this).find('cityId').text();
				
				var address = [];
				address = cityAddress[defaultMapLocationId].split(',');
			
				var mapDefaultText = "<div id='locationDescriptionSub'><h3>"+ cityName[defaultMapLocationId] +"</h3> "+ address[0] +" <br /> "+ address[1] +"<br /> " + cityTel[defaultMapLocationId] +"<br />  <a href='"+ cityURL[defaultMapLocationId] +"'>More Details</a></div>";
				jQuery('#locationDescriptionSub').remove();
				jQuery('#locationDescription').append(mapDefaultText);
				
				jQuery('#locationDescriptionSub').animate({opacity: 0},0);
				jQuery('#locationDescriptionSub').animate({opacity: 1},300);
			}
			

		});
		
		
		
		noOfPlots = jQuery(xml).find("mapLocation").length;
		for(var i=0; i < noOfPlots; i++){
			var mapLocationPlot = "<div class='mapPlot' style='top:"+cityTop[i]+"px; left:"+cityLeft[i]+"px;'><a href='"+ cityURL[i] +"' class='mapPlotButton' id ='"+cityId[i]+"'> <img src='images/UI11/mapPlot.png' border=0 /> </a></div>";
			jQuery('#mapPlots').append(mapLocationPlot);
			
			
		}
		
		
		$toolTip.animate({opacity: 0},0);
		jQuery('.mapPlotButton').hover(function(event){
			var currentPlotIdHover = jQuery(this).attr('id').toString();
			
			var toolTipCountry = cityToolTip[currentPlotIdHover];
			$toolTip.text(toolTipCountry);
			
			var toolTipTop = jQuery(this).parent().position().top - 25;
			var toolTipLeft = jQuery(this).parent().position().left - $toolTip.width() + $toolTip.width() + 10;
			
			$toolTip.css({
				top:toolTipTop,
				left:toolTipLeft
			}).animate({
				opacity: 1				
			},100);
			
		}, function(){
			$toolTip.animate({
				opacity: 0
			},100,function(){
				$toolTip.css({top:0,left:0})	
			});
		});
		
		
		jQuery('.mapPlotButton').click(function(event){
			currentPlotId = jQuery(this).attr('id').toString();
			
			var address = [];
			address = cityAddress[currentPlotId].split(',');
			
			var mapDescriptionText = "<div id='locationDescriptionSub'><h3>"+ cityName[currentPlotId] +"</h3> "+ address[0] +" <br /> "+ address[1] +"<br /> " + cityTel[currentPlotId] +"<br />  <a href='"+ cityURL[currentPlotId] +"'>More Details</a></div>";
			
			
			jQuery('#locationDescriptionSub').animate({
				opacity: 0
			}, 300, function() {
				// Animation complete.
				
				jQuery('#locationDescriptionSub').remove();
				jQuery('#locationDescription').append(mapDescriptionText);
				
				jQuery('#locationDescriptionSub').animate({opacity: 0},0);
				jQuery('#locationDescriptionSub').animate({opacity: 1},300);
			});
						
			
			//console.log(jQuery('#locationDescriptionSub'));
			//jQuery('#locationDescription').append(mapDescriptionText);
		});

	}
});