var locationDiv;
var locationContent= new Array();
var locationMenus = new Array();
var locationMenuDiv
var timer;
var pos = new Array();
var indx;
function swapImage(){
var tempSrc, tempTop;


	tempSrc=locationContent.picture[0].src;
	locationContent.picture[0].src=locationContent.picture[1].src		
	locationContent.picture[1].src=tempSrc;

	/*tempTop=locationContent.picture[0].offsetTop;
	locationContent.picture[0].style.top=locationContent.picture[1].offsetTop + "px";
	locationContent.picture[1].style.top=tempTop + "px";
	
	if(typeof(pos[indx])!="undefined"){
		if(locationContent.picture[1].offsetTop>locationContent.picture[0].offsetTop){	
			
			indx=1;
		}
		else{
			indx=0;
		}
			locationContent.header[0].style.left= pos[indx] + "px";
	}*/
	
	
	timer=window.setTimeout("swapImage()", 5000);
	
	

}
function locationPage(index){
var i;

	locationDiv=createDiv()
	document.body.appendChild(locationDiv);

	//for the garden
	i=0;
	locationContent[i]= new Object();
	locationContent[i].image= new Array();
	locationContent[i].header= new Array();
	locationContent[i].content= new Array();
	
	locationContent[i].image[0]="garden1.jpg";
	locationContent[i].image[1]="garden2.jpg"
	locationContent[i].image[2]="Map.jpg"
	
	locationContent[i].header[0]="Garden";
	locationContent[i].content[0]="Location Map"
	i++;
	//end garden
	
	//for the Nigth shot 
	locationContent[i]= new Object();
	locationContent[i].image= new Array();
	locationContent[i].header= new Array();
	locationContent[i].content= new Array();
	
	locationContent[i].image[0]="night1.jpg";
	locationContent[i].image[1]="night2.jpg"
	locationContent[i].image[2]="Map.jpg"

	locationContent[i].header[0]="Night Shot";
	locationContent[i].content[0]="Location Map"
	i++;
	//end night shot 
	//for the pool
	locationContent[i]= new Object();
	locationContent[i].image= new Array();
	locationContent[i].header= new Array();
	locationContent[i].content= new Array();
	
	locationContent[i].image[0]="pool1.jpg";
	locationContent[i].image[1]="pool2.jpg"
	locationContent[i].image[2]="Map.jpg"
		
	locationContent[i].header[0]="Pool";
	locationContent[i].content[0]="Location Map"
	i++;
	//end pool 
	
	//create the page by the given index 
	locationContent=subFacilitesPage(locationContent[index]);
	
	//for the picture 
	for(i=0;i<locationContent.picture.length;i++){
	
		locationDiv.appendChild(locationContent.picture[i])
		
		
	}
	
	

	window.clearInterval(timer);
	swapImage();
	//for the header
	for(i=0;i<locationContent.header.length;i++){
	
		locationDiv.appendChild(locationContent.header[i])
	}
	//for the text
	for(i=0;i<locationContent.content.length;i++){
	
		locationDiv.appendChild(locationContent.content[i])
	}
	
	locationDiv.resize=resizeLocationPage;
	
	return locationDiv;
}

var boal=false
function resizeLocationPage(){
var topPos; leftPos,i;
	//to our div it is required other wise we see the text one word pre line :)
	locationDiv.style.width=bgImage.offsetWidth + "px";
	locationDiv.style.height=bgImage.offsetHeight + "px";
	locationDiv.style.top=bgImage.offsetTop + "px";
	locationDiv.style.left=bgImage.offsetLeft + "px";

	i=0;
	while(i<locationContent.picture.length){
	//scale our object 	
		if(!scaleToWidth(locationContent.picture[i], locationDiv.offsetWidth*.4)){
		
			return false;
		}		
	i++;
	}
	//position for the picture 
	locationContent.picture[0].style.left=Math.abs(bgImage.offsetWidth - locationContent.picture[0].offsetWidth) - margin + "px";
	locationContent.picture[0].style.top=Math.round(bgImage.offsetHeight/5) + "px";
	locationContent.picture[0].style.zIndex=3//set the index 
	locationContent.picture[0].style.visibility="visible";
	
	locationContent.picture[1].style.left=leftPos;
	locationContent.picture[1].style.top=Math.round(locationContent.picture[0].offsetTop + locationContent.picture[0].offsetHeight) - margin + "px";
	locationContent.picture[1].style.zIndex=2
	locationContent.picture[1].style.visibility="visible";
	
	
	locationContent.header[0].style.fontSize=headerSize;
	locationContent.header[0].style.left=Math.round(bgImage.offsetWidth/2.5) + "px";
	locationContent.header[0].style.top=Math.round(bgImage.offsetHeight/2.3) + "px"
	locationContent.header[0].style.visibility="visible";
	
	pos[0]=locationContent.header[0].offsetLeft;
	pos[1]=locationContent.picture[1].offsetLeft + locationContent.picture[1].offsetWidth + logo.offsetHeight; 

	//just to make sure if we include the map in every page to our design	
	if(typeof(locationContent.picture[2])=="object"){
		if(!scaleToWidth(locationContent.picture[2], bgImage.offsetWidth*.13)){
	
			return false;
		}
		else{
		//position the map
			locationContent.picture[2].style.left=(locationContent.picture[2].offsetWidth*.9) + "px";
			locationContent.picture[2].style.top=Math.round(bgImage.offsetHeight/1.45) + "px";
			locationContent.picture[2].style.visibility="visible";
			locationContent.picture[2].onclick=eventListener;
			locationContent.picture[2].onmouseover=changeCursor;
		}
		//is  the text under the map
		locationContent.content[0].style.fontSize=textSize;
		locationContent.content[0].style.color=linkColor;
		locationContent.content[0].style.left=Math.round((locationContent.picture[2].offsetWidth - locationContent.content[0].offsetWidth)/2) + locationContent.picture[2].offsetLeft + "px"; 
		locationContent.content[0].style.top=Math.round(locationContent.picture[2].offsetTop + locationContent.picture[2].offsetHeight) + "px";
		locationContent.content[0].style.visibility="visible";
	}
	
	
return true;
}
//for the map menu 
function locationMenu(){
	locationMenuDiv=createDiv();
	document.body.appendChild(locationMenuDiv);
	
	//for garden link 	
	i=0;
	locationMenus[i]= new Object();
	locationMenus[i].path="gardenThumb.jpg";
	locationMenus[i].caption="Garden"
	i++;
	//end garden 
	//for the Night shot menu 
	locationMenus[i]= new Object();
	locationMenus[i].path="nightshotThumb.jpg";
	locationMenus[i].caption="Night Shot"
	i++;
	//end night shot 
	//for the pool 
	locationMenus[i]= new Object();
	locationMenus[i].path="poolThumb.jpg";
	locationMenus[i].caption="Pool"
	i++;
	// end pool 
	
	//create the menu 
	locationMenus=subMenu(locationMenus);
	
	for(i=0;i<locationMenus.length;i++){
		//append into our div 
		locationMenuDiv.appendChild(locationMenus[i].picture);
		locationMenuDiv.appendChild(locationMenus[i].caption);
		
	}
	
	locationMenuDiv.resize=resizeLocationMenu;
	return locationMenuDiv;

}

//this funtion is responsible for resizing our menu 
function resizeLocationMenu(){

var topPos, xWidth, leftPos, i;
	
	xWidth=bgImage.offsetWidth;

	topPos=bgImage.offsetTop + Math.round(bgImage.offsetHeight/3.5);//4.5
	leftPos= bgImage.offsetLeft + (bgImage.offsetWidth/6) ;
	i=0;
	//scale our menu to one 
	while(i<locationMenus.length){
		if(!scaleToWidth(locationMenus[i].picture, xWidth*.1)){
			return false;
		}
	i++;
	}
	
	
	i=0;

	while(i<locationMenus.length){
		//position the picture 	
		locationMenus[i].picture.style.top=topPos +"px";
		locationMenus[i].picture.style.left=leftPos + "px";
		//initialize the group and the index
		locationMenus[i].picture.group="Location";
		//setting the index so that we will what page to be create later 
		//when the onclick event fires
		locationMenus[i].picture.index=i;
		locationMenus[i].picture.onclick=subMenuClick;
		showObject(locationMenus[i].picture);
		
		//for the text 
		locationMenus[i].caption.style.fontSize=Math.round(bgImage.offsetWidth/70) + "px";
		locationMenus[i].caption.style.left=leftPos + "px";
		locationMenus[i].caption.style.top=locationMenus[i].picture.offsetTop + locationMenus[i].picture.offsetHeight + "px"
		locationMenus[i].caption.style.width=locationMenus[i].picture.offsetWidth + "px";
		locationMenus[i].caption.group="Location";
		locationMenus[i].caption.index=i;
		locationMenus[i].caption.onclick=subMenuClick;
		
		showObject(locationMenus[i].caption);//show the object 
		
		topPos=locationMenus[i].caption.offsetTop  + locationMenus[i].caption.offsetHeight + Math.round(xWidth/100);
		
	i++
	}

return true;

}