var sevicesDiv;
var servicesContent = new Array();
var serviceMenu = new Array();
var serviceMenuDiv;
var servicesObject
function servicesPage(index){
var i;
	servicesDiv=createDiv();
	document.body.appendChild(servicesDiv);
	
	
	i=0;
	//for the tourist bus 
	servicesContent[i]=new Object();
	servicesContent[i].image= new Array();
	servicesContent[i].header= new Array();
	//we declare the content as an array even if we don't have text coz
	//it is required to tour function else we get an error 
	servicesContent[i].content = new Array();
	
	servicesContent[i].image[0]="touristBusBig.jpg";
	servicesContent[i].header[0]="Tourist Bus"
	i++
	//end 
	
	//for teh car rental 
	servicesContent[i]=new Object();
	servicesContent[i].image= new Array();
	servicesContent[i].header= new Array();
	servicesContent[i].content = new Array();
	
	servicesContent[i].image[0]="carRentalBig.jpg";
	servicesContent[i].header[0]="Car Rental"
	i++
	//end 
		
	//create our page 
	
	servicesObject=subFacilitesPage(servicesContent[index]);
	
	
	//for the picture 
	for(i=0;i<servicesObject.picture.length;i++){
	
		servicesDiv.appendChild(servicesObject.picture[i])
	}
	//for the header
	for(i=0;i<servicesObject.header.length;i++){
	
		servicesDiv.appendChild(servicesObject.header[i])
	}
	//for the text
	for(i=0;i<servicesObject.content.length;i++){
	
		servicesDiv.appendChild(servicesObject.content[i])
	}
	
	servicesDiv.resize=resizeServicesPage;
	return servicesDiv;
}

function resizeServicesPage(){
var width, topPos;

	width=bgImage.offsetWidth;
	//required 
	servicesDiv.style.width=bgImage.offsetWidth + "px";
	servicesDiv.style.height=bgImage.offsetHeight + "px";
	servicesDiv.style.top=bgImage.offsetTop + "px";
	servicesDiv.style.left=bgImage.offsetLeft + "px";
	//amenDiv.style.backgroundColor="#CFCFCF";
	
	if(!scaleToWidth(servicesObject.picture[0], width *.4)){
	
		return false;
	}
	else{

		servicesObject.picture[0].style.left=leftPos;
		servicesObject.picture[0].style.top=topDistance;
		servicesObject.picture[0].style.visibility="visible";
	
	}
	//for our header	
	servicesObject.header[0].style.fontSize=headerSize;
	servicesObject.header[0].style.left=leftPos;
	servicesObject.header[0].style.top=servicesObject.picture[0].offsetTop + servicesObject.picture[0].offsetHeight + margin +"px";
	servicesObject.header[0].style.visibility="visible";
	
	topPos=servicesObject.header[0].offsetTop + servicesObject.header[0].offsetHeight + margin;
	
	//for the text content 
	
	i=0;
	while(i<servicesObject.content.length){
		//position the rest of the text;
		servicesObject.content[i].style.fontSize=textSize;
		servicesObject.content[i].style.left=leftPos;
		servicesObject.content[i].style.top= topPos + "px";
		servicesObject.content[i].style.visibility="visible";
		topPos=servicesObject.content[i].offsetTop + servicesObject.content[i].offsetHeight - Math.round(bgImage.offsetWidth/200);
		
	i++
	}
	
return true;
}


function servicesMenu(){
var i;
	
	//for the menu div 
	serviceMenuDiv=createDiv();
	document.body.appendChild(serviceMenuDiv);
		
	//for the tourist menu
	i=0;
	serviceMenu[i]= new Object();
	serviceMenu[i].path="touristBus.jpg";
	serviceMenu[i].caption="Tourist Bus"
	i++;
	//for the car rental 
	serviceMenu[i]= new Object();
	serviceMenu[i].path="carRental.jpg";
	serviceMenu[i].caption="Car Rental"
	i++;
	
	//create the menu
	serviceMenu=subMenu(serviceMenu);
	
	for(i=0;i<serviceMenu.length;i++){
		//append into div 
		serviceMenuDiv.appendChild(serviceMenu[i].picture);
		serviceMenuDiv.appendChild(serviceMenu[i].caption);
		
	}
	
	serviceMenuDiv.resize=resizeServicesMenu;
	return serviceMenuDiv;
}

function resizeServicesMenu(){
	var topPos, xWidth, leftPos, i;
	
	xWidth=bgImage.offsetWidth;
	//initialize the position of the menu 
	topPos=bgImage.offsetTop + Math.round(bgImage.offsetHeight/3.5);//4.5
	leftPos= bgImage.offsetLeft + (bgImage.offsetWidth/6) ;
	i=0;
	while(i<serviceMenu.length){
		if(!scaleToWidth(serviceMenu[i].picture, xWidth*.1)){
			return false;
		}
	i++;
	}
	
	
	i=0;
	while(i<serviceMenu.length){
	//for the picture first coz our text in under the picture			
		serviceMenu[i].picture.style.top=topPos +"px";
		serviceMenu[i].picture.style.left=leftPos + "px";
		serviceMenu[i].picture.group="Services";
		serviceMenu[i].picture.index=i;
		serviceMenu[i].picture.onclick=subMenuClick;
		showObject(serviceMenu[i].picture);
		//for teh text
		serviceMenu[i].caption.style.fontSize=Math.round(bgImage.offsetWidth/70) + "px";
		serviceMenu[i].caption.style.left=leftPos + "px";
		serviceMenu[i].caption.style.top=serviceMenu[i].picture.offsetTop + serviceMenu[i].picture.offsetHeight + "px"
		serviceMenu[i].caption.style.width=serviceMenu[i].picture.offsetWidth + "px";
		serviceMenu[i].caption.group="Services";
		serviceMenu[i].caption.index=i;
		serviceMenu[i].caption.onclick=subMenuClick;
		showObject(serviceMenu[i].caption);
		//initialize the top position 
		topPos=serviceMenu[i].caption.offsetTop  + serviceMenu[i].caption.offsetHeight + Math.round(xWidth/100);
		
	i++
	}

return true;
}