var pageTitle = new Array();
pageTitle["index"]="index.php";
pageTitle["accommodation"]="accommodation.php";
pageTitle["dining"]="dining.php";
pageTitle["cooking_classes"]="cooking_classes.php";
pageTitle["interiors_grounds"]="interiors_grounds.php";
pageTitle["self_catering"]="self_catering.php";
pageTitle["special_offers"]="special_offers.php";
pageTitle["prices"]="prices.php";
pageTitle["contact"]="contact.php";
pageTitle["map"]="direction.php";

function swapImage(imgName, replaceImgSrc)
{
	document.images[imgName].src = replaceImgSrc;
  
}

function showEnlargedImage(titleObject,contentObject,title,description,src,width,height) {
    
	titleObject.innerHTML='<span>'+title+'</span> '+
						  '<a href="'+pageTitle[titleIndex]+'"> Back </a>';
	contentObject.innerHTML='<img id="enlargedImage" width="'+width+'"px height="'+height+'"px src="'+src+'" alt=""/>'+
					 		'<div id="imageProgressBar"> Loading Enlarged Image... </div>'+
					 		'<div id="description" style="width:'+width+'px"> <p>'+description+'</p> </div>';
	
    imageProgress = document.getElementById('imageProgressBar'); 
    enlargedImage = document.getElementById('enlargedImage');
    enlargedImage.onload=function() {imageProgress.style.display='none';}
}


//-----*    Events     *-----//
$(document).ready(function(){

	$.each(imagesArrary, function(index,value) {	
	
		var currentImage=$('#'+value.id);
		
		currentImage.live({
  			click: function() {
				titleObj=document.getElementById("title");
				contentObj=document.getElementById("contentContainer");
				
				showEnlargedImage(titleObj,contentObj,value.title,value.description,value.src_onClick,value.width,value.height);
				
  			},
  			mouseover: function() {
  				swapImage(value.name, value.src_onMouseOver);
  			},
  			mouseout: function() {
  				swapImage(value.name, value.src);
  			}
		});

	});		

});