var bgColor;
var fontFamily1="Trebuchet MS";
var fontFamily2="Monotype Corsiva";
var textSise;
var headerSize;
var linkSize;
var linkColor="#FFFFFF";
var currentPage;
var bodyDiv;
var docMenu= new Array();
var currentSubMenu;
var leftPos;
var topDistance;
var margin;
var tempImage;
var w3c = new Array();
var loading;
var roomsPages = true;

function linkImageClick(){ // from Functions file, probably replaced with our xPicture(); xImage still to be enhanced
//its open the new window when click
        if(typeof(this.link)=="undefined"){
                alert("Page not yet available at this time you may check later");
                return
        }
        if(typeof(win)=="undefined"){
                win=window.open("");
        }
        else{
                if(win.closed){
                        win=window.open("");
                }
        }
        win.location=this.link;
        win.focus();
}

function init() {
	document.body.style.padding="0";
	document.body.style.margin="0";
	document.body.style.border="0";
	//alert("Inside The init finction");
	showBasic();

}

function resizeBasic(){
var windowWidth, windowHeight, i;
	
	windowWidth=getWindowWidth()
	windowHeight=getWindowHeight();
	currentSubLink.style.zIndex=0;
	myMargin=Math.round(windowWidth/150);
//debugger;
	//get the windowHeight for mozilla 
	if(!browserSnipper()){
	
		windowHeight=window.innerHeight;
	}
	
	if(!scaleObject(windowWidth*.9, windowHeight*.9, bgImage)){
		// we scale our background image
		return false;
	}
	else{
		//position the image
		bgImage.style.left=Math.round((windowWidth - bgImage.offsetWidth)/2) + "px";	
		bgImage.style.top=Math.round((windowHeight - bgImage.offsetHeight)/2) + "px";
		bgImage.style.visibility="visible";	
		//show the image coz i hide it first
		//showObject(bgImage);
	}

	
		
	// now the offset width of our bgImage will serve as our body
	width=bgImage.offsetWidth;
	linkSize=Math.round(bgImage.offsetWidth/40) + "px";
	
	//scale the logo
	if(!scaleToWidth(logo, width*.4)){
		return false;
	}
	else{
		//position the logo
		logo.style.left=Math.round(bgImage.offsetLeft + Math.round(width/100)) + "px";
		logo.style.top=Math.round(bgImage.offsetTop + Math.round(width/100)) + "px";
		showObject(logo);//show the logo
	}
	
	//set the top position and the left which is use for the menu only 
	topPos=Math.round(bgImage.offsetTop + Math.round(width/3.5));
	leftPos=logo.offsetLeft + "px";
	i=0;
		
	
	while(i<docMenu.length){
		//position our menu 
		docMenu[i].style.fontSize=linkSize;
		docMenu[i].style.left=leftPos;
		docMenu[i].style.top=topPos + "px";
		docMenu[i].style.width=Math.round(logo.offsetWidth/3) + "px";
		docMenu[i].style.backgroundImage="url(empty.gif)";		
		topPos=docMenu[i].offsetTop + docMenu[i].offsetHeight + Math.round(width/100);
		//docMenu[i].style.visibility="hidden";
	i++;
	}
	
	topPos=Math.round(bgImage.offsetTop + Math.round(width/3.5));	
	//for the resizing of the submenu
	//subMenuDiv.style.top=Math.round(myTable.offsetTop + myTable.rows[2].cells[0].offsetTop) + "px";
	subMenuDiv.style.top=Math.round(docMenu[2].offsetTop) + "px";
	subMenuDiv.style.left=Math.round(docMenu[2].offsetLeft + docMenu[2].offsetWidth - myMargin*7) + "px";
	if (screen.width == 1152) {
	subMenuDiv.style.left=Math.round(docMenu[2].offsetLeft + docMenu[2].offsetWidth - myMargin*7) + "px";
	} else if (screen.width == 1024) {
	subMenuDiv.style.left=Math.round(docMenu[2].offsetLeft + docMenu[2].offsetWidth - myMargin*6.7) + "px";
	}
	subMenuDiv.style.width=Math.round(bgImage.offsetWidth*0.2) + "px";
	linkSize=Math.round(bgImage.offsetWidth/50) + "px";
	myTable6.style.width=Math.round(subMenuDiv.offsetWidth + 3) + "px";
	myTable6.style.fontSize=linkSize;
	
	subMenuDiv.style.height=Math.round(myTable6.offsetHeight - myMargin*2) + "px";
	
	//Promo div
	promoDiv.style.top=Math.round(bgImage.offsetTop + Math.round(width/1.51)) + "px";
	//promoDiv.style.top=topPos;
	promoDiv.style.left=Math.round(bgImage.offsetLeft + Math.round(width/1.24)) + "px";
	promoDiv.style.height=Math.round(docMenu[5].offsetHeight*3.2) + "px";
	promoDiv.style.width=Math.round(logo.offsetWidth/2.2) + "px";
	
	
	//Promo text
	//promoTxt.style.fontSize=Math.round(bgImage.offsetWidth/70) + "px";]
	promoPic.style.height=promoDiv.offsetHeight + "px";
	promoPic.style.width=promoDiv.offsetWidth + "px";
	promoPic.style.border="1px solid #fff";
	
	//now initialize all posible variable will be use later
	leftPos=Math.round(bgImage.offsetWidth/3.3)+ "px";
	topDistance=Math.round(bgImage.offsetHeight/4.5) + "px";
	textSize=Math.round(bgImage.offsetWidth/60) + "px";
	headerSize=Math.round(bgImage.offsetWidth/40) + "px";
	margin=Math.round(bgImage.offsetWidth/50);
	//resize the our page 
	currentPage.resize();

	
	if(currentSubLink.check){
		//for text loading we have to include this so that
		//the user will know the page is currently loading 
		// else it  looks like an empty page
		
		loading.style.fontSize=headerSize;
		loading.style.width=logo.offsetWidth + "px";
		loading.style.left=Math.round(logo.offsetLeft + logo.offsetWidth) + "px";
		loading.style.top=Math.round(bgImage.offsetTop + (bgImage.offsetHeight/2)) + "px";
		loading.style.visibility="visible";
		//we have to check is the sublink is present 
		currentSubLink.resize()
		if(!currentSubLink.resize()){
		
			return false
		}
	}
	
	
	if(!currentPage.resize()){
		//now check if our sub page is resize
		return false;
	}

	//scaling the w3c logo and add 
	if(!scaleToWidth(w3c[1].pictures, width*.07)){
	
		return false;
	}
	else{
		w3c[1].pictures.style.left=logo.offsetLeft + "px";
		w3c[1].pictures.style.top=Math.round((bgImage.offsetHeight + bgImage.offsetTop) - w3c[1].pictures.offsetHeight) - Math.round(width/100) + "px"; 
		w3c[1].pictures.style.visibility="visible";
	}
	if(!scaleToWidth(w3c[0].pictures, width*.07)){
	
		return false;
	}
	else{
		w3c[0].pictures.style.left=logo.offsetLeft + "px";
		w3c[0].pictures.style.top=Math.round(w3c[1].pictures.offsetTop  - w3c[0].pictures.offsetHeight) - Math.round(width/100) + "px";
		w3c[0].pictures.style.visibility="visible";
	}
	//end scaling 
	//set hidde cause we know that all is already load 
	loading.style.visibility="hidden";
	
return true;
}



function showBasic(){
//alert("Inside the showBasic");
var menu= new Array(),i, img= new Array();	
	// create basic div element 
	
	//document.body.style.border="2px solid yellow";
	
	bodyDiv=document.createElement("div");
	bodyDiv.style.position="absolute";
	bodyDiv.style.zIndex=0;
	document.body.appendChild(bodyDiv);
			
	//our background image
//	bgImage= new Image();
//	bgImage.src="bgImage.jpg";
	bgImage = xImage("bgImage.jpg");
	bgImage.style.position="absolute";
	bgImage.style.visibility="hidden";
	//bgImage.style.border="1px solid red";
	bodyDiv.appendChild(bgImage);
		
	//our second image the blue one 
//	x=new Image();
//	x.src="bgImageBlur.jpg";
	x = xImage("bgImageBlur.jpg");
	
//	logo=new Image();
//	logo.src="logo.gif";
	logo = xImage("logo.gif");
	logo.style.position="absolute";
	logo.style.visibility="hidden";
	bodyDiv.appendChild(logo);
	
	// our mean menu	
	menu[0]="Home";
	menu[1]="Facilities";
	menu[2]="Rooms";
	menu[3]="Services";
	menu[4]="Location";
	menu[5]="Contact";
	
	docMenu=basicMenu(menu);
	
	//append our menu to our div element
	for(i=0;i<docMenu.length;i++){
	
		bodyDiv.appendChild(docMenu[i]);
		docMenu[i].onclick=linkClick;
						
	}
		docMenu[2].onclick = null;
		docMenu[2].onmouseover=roomOver;
		docMenu[2].onmouseout=roomOut;	

	//for the submenu details of the menu rooms
	subMenuDiv = createDiv("absolute");
	subMenuDiv.style.backgroundColor="#306FA2";
	subMenuDiv.onmouseover=roomOver1;
	subMenuDiv.onmouseout=roomOut;
	subMenuDiv.style.zIndex=10;
	subMenuDiv.style.visibility="hidden";
	document.body.appendChild(subMenuDiv);
	
	arrTxt3 = new Array("Cottage Type Rate", "Hotel Type Rate");
	var idArr3 = new Array("Rooms","Rooms1");
	
	rows=10;
	columns=2;	
	myTable6=createBlankTable(rows, columns);
	myTable6.style.position="absolute";
	myTable6.style.fontFamily=fontFamily2;
	myTable6.style.color=linkColor;
	subMenuDiv.appendChild(myTable6);
		
	for(var t=0; t<arrTxt3.length; t++) {
		myTable6.rows[t].cells[0].innerHTML =arrTxt3[t];
		myTable6.rows[t].cells[0].id = idArr3[t];
		myTable6.rows[t].cells[0].onclick=linkClick1;
		myTable6.rows[t].cells[0].style.textAlign="center";
		myTable6.rows[t].cells[0].onmouseover=changeToHand;
	}
	
	//For the Promo
	promoDiv = createDiv("absolute");
	//promoDiv.style.backgroundColor="green";
	promoDiv.style.zIndex=10;
	document.body.appendChild(promoDiv);
	
	//Promo text
	//promoTxt = createP("Promo Rates 20% discount on Room Accomodations!");
	//promoTxt.style.fontFamily = fontFamily1;
	//promoDiv.appendChild(promoTxt);
	
	//promo gif
	promoPic =new Image();
	promoPic.src="promo4.gif";
	promoPic.style.zIndex=50;
	promoPic.style.position="absolute";
	promoDiv.appendChild(promoPic);
	
	//the loading text	
	loading=displayText("Please wait Loading...");
	loading.style.visibility="hidden";
	bodyDiv.appendChild(loading);
	
	//we load all the thumbs for the menu
	img[0]="deluxeThumb.jpg";
	img[1]="familyThumb.jpg";
	img[2]="executiveThumb.jpg";
	img[3]="SuperiorThumb.jpg";
	img[4]="ambassadorThumb.jpg";
	img[5]="functionThumb.jpg";
	img[6]="touristBus.jpg";
	img[7]="carRental.jpg";
	img[8]="nightshot.jpg";
	img[9]="poolThumb.jpg";
	img[10]="gardenThumb.jpg";
	img[11]="souvenirThumb.jpg"
	img[12]="amenitiesThumb.jpg"
	img[13]="restaurantThumb.jpg"
	img[14]="standardThumb.jpg";	
	
	loadImages(img);
	
	i=0;
	
	w3c[i]= new Object();
	w3c[i].link="http://www.designs.activediscovery.net";
	w3c[i].path="logoActiveD.jpg";
	i++
	
	address="http://validator.w3.org/check?uri="+window.location;
	w3c[i]= new Object();
	w3c[i].link=address;
	w3c[i].path="http://www.w3.org/Icons/valid-xhtml10.png";
//	w3c[i].path="valid-xhtml10.png";
	i++;
	
	w3c=linkImage(w3c);
	
	for(i=0;i<w3c.length;i++){
	
		bodyDiv.appendChild(w3c[i].pictures);
		w3c[i].pictures.onmouseover=changeToHand;
		w3c[i].pictures.style.zIndex=50;//just to make sure our mouseover will work in mozilla
		w3c[i].pictures.style.border="1px solid #ffffff";
		w3c[i].pictures.style.visibility="hidden";
	}
	
//	w3c[1].pictures.onclick=validate;
	
	//since we dont have sub link we only create a div
	currentSubLink=createDiv();
	currentSubLink.check=false;
	document.body.appendChild(currentSubLink);
	
	currentPage=createPage("Home");	
	bodyDiv.appendChild(currentPage);	
	
	resizeFunc()
	//window.onresize=resizeFunc;	
}

//for the rooms mouse over sub menu
function roomOver(evt) {	
subMenuDiv.style.visibility="visible";	
}

function roomOut(evt) {
subMenuDiv.style.visibility="hidden";
myTable6.style.zIndex=10;			
}

function roomOver1(evt) {		
subMenuDiv.style.visibility="visible";		
}

function validate(){
	
	navigate("http://validator.w3.org/check?uri="+window.location);
}

function backWhite(){
var i;

	for(i=0;i<docMenu.length;i++){
	
		docMenu[i].style.color=linkColor;
	
	}
}
function linkClick(){
		//fires when the user click the link it will remove the currentpage 
		//and create a new page depends what user click 
		if(this.id=="Rooms") { 
				//alert("Heyyyyyyy");
				roomsPages=true;
													
		} else {
				roomsPages=false; 
		}
		bodyDiv.removeChild(currentPage);
		currentPage=createPage(this.id);
		bodyDiv.appendChild(currentPage);
			
		
		//resize again to make sure 
		//thats it look nice and proper 
		backWhite();
		this.style.color="#CFCFCF";
		resizeFunc();
return;
}

function linkClick1(){
		//fires when the user click the link it will remove the currentpage 
		//and create a new page depends what user click 
		if(this.id=="Rooms") { 
				//alert("Heyyyyyyy");
				roomsPages=true;
													
		} else {
				roomsPages=false; 
		}
		bodyDiv.removeChild(currentPage);
		currentPage=createPage(this.id);
		bodyDiv.appendChild(currentPage);
			
		//resize again to make sure 
		//thats it look nice and proper 
		backWhite();
		docMenu[2].style.color="#CFCFCF";
		//this.style.color="#CFCFCF";
		resizeFunc();
return;
}

//return p element
function basicMenu(textArray){
var i, menuArray=new Array;	
	//our basic menu 
	for(i=0;i<textArray.length;i++){
		
		menuArray[i]=displayText(textArray[i]);
		menuArray[i].style.fontFamily=fontFamily2;
		menuArray[i].style.color=linkColor;
		menuArray[i].id=textArray[i];		
		menuArray[i].onclick=linkClick;
		menuArray[i].style.textDecoration="underline";
		menuArray[i].onmouseover=changeToHand;
		menuArray[i].style.zIndex=i+3;
		clearMargins(menuArray[i]);
	}	
	
	return menuArray;
}



//just create basic div and return 
function createDiv(){
var div;
	
	div=document.createElement("div");
	div.style.position="absolute"
	
return div;
}

//this function will create a page 
function createPage(page){
var tempPage;
	switch (page){
		case "Home":{
				//remove the subLink
				//since that our home page don't have sub link we create a 
				// div element only 
				document.body.removeChild(currentSubLink)
				currentSubLink=createDiv()
				//initialise to false to prevent reading to currentSubink resize
				//coz now it is not a function
				currentSubLink.check=false;
				document.body.appendChild(currentSubLink);
				
				//now create a home page
				tempPage=homePage()
				bgImage.src="bgImage.jpg"
				tempPage.resize();
		break;
		}
		
		case "Facilities":{
				//remove the currentSubLink 
				//we append it into the body coz the onclick mozilla event dosen't work 
				// i try to append into the body now its work i son't know why i try to solve later
				document.body.removeChild(currentSubLink);
				//create our facilities menu 
				currentSubLink=facilitiesMenu();
				document.body.appendChild(currentSubLink);
				//initialize the check to true  it means our resize now in now a function 
				currentSubLink.check=true;
				
				//create the page first the default is teh amenities
				tempPage=amenitiesPage(0);
				tempPage.resize()
				//bgImage source 
				bgImage.src="bgImageBlur.jpg"
				resizeFunc();
				
				
		break;
		}
		
		case "Rooms":{
				//debugger;
				//the same explaination with the Facilities
				tempPage=roomsPage(0);
				tempPage.resize();
				
				document.body.removeChild(currentSubLink);
				currentSubLink=roomsMenu();
				currentSubLink.check=true;
				document.body.appendChild(currentSubLink);
				bgImage.src="bgImageBlur.jpg"
				resizeFunc();
		break;	
		}
		
		case "Rooms1":{
				//the same explaination with the Facilities
				tempPage=roomsPage(0);
				tempPage.resize();
				
				document.body.removeChild(currentSubLink);
				currentSubLink=roomsMenu();
				currentSubLink.check=true;
				document.body.appendChild(currentSubLink);
				bgImage.src="bgImageBlur.jpg"
				resizeFunc();
		break;	
		}
		
		case "Services":{
			//the same explaination with the Facilities
				tempPage=servicesPage(0);
				tempPage.resize();
				
				document.body.removeChild(currentSubLink);
				currentSubLink=servicesMenu();
				currentSubLink.check=true;
				document.body.appendChild(currentSubLink);
				bgImage.src="bgImageBlur.jpg"
				resizeFunc();
		break;
		}
		
		case "Location":{
				//the same explaination with the Facilities
				document.body.removeChild(currentSubLink)
				currentSubLink=locationMenu();
				document.body.appendChild(currentSubLink);
				bgImage.src="bgImageBlur.jpg"
				
				tempPage=locationPage(0);
				currentSubLink.check=true;
				resizeFunc();
		break;	
		}
	
		case "Contact":{
				//the same explaination with the Facilities
				document.body.removeChild(currentSubLink);
				currentSubLink=createDiv();
				document.body.appendChild(currentSubLink);
				bgImage.src="bgImageBlur.jpg"				
				tempPage=contactPage();
				resizeFunc();
				currentSubLink.check=false;
		break;		
		}
	
	
	
	}

return tempPage;
}


function showObject(obj){
	// to show the obj
	obj.style.visibility="visible";
	
return obj;
}

//to create our sub Menu 
function subMenu(obj){
var subMenuObj= new Array(), subDiv, i;
	
	for(i=0;i<obj.length;i++){
		
		//for the picture 	
		subMenuObj[i]= new 	Object();
		subMenuObj[i].picture= new Image();
		//subMenuObj[i].picture = xImage(obj[i].path);
		subMenuObj[i].picture.id=obj[i].path;
		subMenuObj[i].picture.src=obj[i].path;
		subMenuObj[i].picture.style.position="absolute";
		subMenuObj[i].picture.onmouseover=changeToHand;
		subMenuObj[i].picture.style.visibility="hidden";
		clearMargins(subMenuObj[i].picture);
		subMenuObj[i].picture.style.border="1px solid white";
		
		//for the text 
		subMenuObj[i].caption=document.createElement("span");	
		subMenuObj[i].caption.style.position="absolute";
		subMenuObj[i].caption.style.fontFamily=fontFamily1;
		subMenuObj[i].caption.innerHTML=obj[i].caption;
		subMenuObj[i].caption.style.visibility="hidden";
		subMenuObj[i].caption.onmouseover=changeToHand;
		subMenuObj[i].caption.style.color=linkColor;
		subMenuObj[i].caption.style.textDecoration="underline";
		clearMargins(subMenuObj[i].caption);
	}
	
return subMenuObj;
}

//fires when our sub menu click 
function subMenuClick(){

	//i use the indexing to change the cuurentPage
	// and its depend also by the group
	//like function hall restaurant annd pool is gruop in facilities 
	//and so on...	
	switch (this.group){
		
		case "Facilities":{
				//just change the current page
				bodyDiv.removeChild(currentPage)
				currentPage=amenitiesPage(this.index);
				bodyDiv.appendChild(currentPage);
				
		break;	
		}
		
		case "Rooms":{
				//debugger;
				bodyDiv.removeChild(currentPage)
				currentPage=roomsPage(this.index);
				bodyDiv.appendChild(currentPage);
				//alert("Hooooooo No clear......... "+roomsPages);
				resizeFunc();
				
		break;	
		}
		
		case "Rooms1":{
				bodyDiv.removeChild(currentPage)
				currentPage=rooms1Page(this.index);
				bodyDiv.appendChild(currentPage);
				
		break;	
		}
		
		case "Services":{
				
				bodyDiv.removeChild(currentPage)
				currentPage=servicesPage(this.index);
				bodyDiv.appendChild(currentPage);
				
		break;	
		}
		case "Location":{
				
				bodyDiv.removeChild(currentPage)
				currentPage=locationPage(this.index);
				bodyDiv.appendChild(currentPage);
				
		break;	
		}
	}
	
	
	resizeFunc();
}

function loadImages(obj){
var img;

	for(var i=0; i<obj.length;i++){
		img = new Image();
		img.src=obj[i];	
	}
}
function eventListener(){
}