//preload images and slideshow function
//note, image size should be 784 x 588 px. Portrait will be 441 by 588 on left, with reflection on right, 4px gap, 339 x 588
//home page shots first, preload the rest after the page has loaded.

homePics = new Array();
hammockPics = new Array();
woodburnerPics = new Array();
locationPics = new Array();
roomPics = new Array();

	//homepage pics
	homePics[0] = new Image();
	homePics[0].src = "assets/house_door.jpg";
	homePics[0].alt = "Welcome to escondrijo";
	homePics[1] = new Image();
	homePics[1].src = "assets/house_mainTerrace.jpg";
	homePics[1].alt = "escondrijo main terrace";
	homePics[2] = new Image();
	homePics[2].src = "assets/house_mist.jpg";
	homePics[2].alt = "Misty morning view from terrace";
	homePics[3] = new Image();
	homePics[3].src = "assets/house_patio1.jpg";
	homePics[3].alt = "escondrijo patio";
	homePics[4] = new Image();
	homePics[4].src = "assets/house_staircase.jpg";
	homePics[4].alt = "The old staircase";
	homePics[5] = new Image();
	homePics[5].src = "assets/house_balconera.jpg";
	homePics[5].alt = "A traditional balcony";
	homePics[6] = new Image();
	homePics[6].src = "assets/house_entrada.jpg";
	homePics[6].alt = "Entrance with handpainted tiles";
	homePics[7] = new Image();
	homePics[7].src = "assets/house_arco.jpg";
	homePics[7].alt = "The house straddles el arco de Xauen";
	homePics[8] = new Image();
	homePics[8].src = "assets/house_insideTerrace.jpg";
	homePics[8].alt = "Main staircase";	

function preloadRest(){
	//hammock room pics
	hammockPics[0] = new Image();
	hammockPics[0].src = "assets/hammock_bed.jpg";
	hammockPics[0].alt = "Mezzanine leading to terrace";
	hammockPics[1] = new Image();
	hammockPics[1].src = "assets/hammock_hammock.jpg";
	hammockPics[1].alt = "The cosy hammock chair";
	hammockPics[2] = new Image();
	hammockPics[2].src = "assets/hammock_coffeeTable.jpg";
	hammockPics[2].alt = "Sofa bed and facilities for snacks";
	hammockPics[3] = new Image();
	hammockPics[3].src = "assets/hammock_terrace1.jpg";
	hammockPics[3].alt = "Hammock room private terrace";
	hammockPics[4] = new Image();
	hammockPics[4].src = "assets/hammock_terrace2.jpg";
	hammockPics[4].alt = "Hammock room private terrace";
	hammockPics[5] = new Image();
	hammockPics[5].src = "assets/hammock_bathroom.jpg";
	hammockPics[5].alt = "Hammock bathroom";
	//woodburner room pics
	woodburnerPics[0] = new Image();
	woodburnerPics[0].src = "assets/woodburner_bedroom.jpg";
	woodburnerPics[0].alt = "Woodburner bedroom";
	woodburnerPics[1] = new Image();
	woodburnerPics[1].src = "assets/woodburner_salon.jpg";
	woodburnerPics[1].alt = "Woodburner sofa area";
	woodburnerPics[2] = new Image();
	woodburnerPics[2].src = "assets/woodburner_toTerrace.jpg";
	woodburnerPics[2].alt = "Step out onto private terrace";
	woodburnerPics[3] = new Image();
	woodburnerPics[3].src = "assets/woodburner_terrace1.jpg";
	woodburnerPics[3].alt = "Woodburner large private terrace";
	//location pics
	locationPics[0] = new Image();
	locationPics[0].src = "assets/location_vejer.jpg";
	locationPics[0].alt = "Vejer de la Frontera, Costa de la Luz";
	locationPics[1] = new Image();
	locationPics[1].src = "assets/location_plaza.jpg";
	locationPics[1].alt = "The Plaza de España in Vejer";
	locationPics[2] = new Image();
	locationPics[2].src = "assets/location_military.jpg";
	locationPics[2].alt = "Unspoilt coastline of Costa de la Luz";
	locationPics[3] = new Image();
	locationPics[3].src = "assets/location_molino.jpg";
	locationPics[3].alt = "Parapenting near old windmill";
	locationPics[4] = new Image();
	locationPics[4].src = "assets/location_kitesurf.jpg";
	locationPics[4].alt = "Kitesurfing in Tarifa";
	locationPics[5] = new Image();
	locationPics[5].src = "assets/location_trafalgar.jpg";
	locationPics[5].alt = "Lighthouse at site of Battle of Trafalgar";
	//set rooms pics
	roomPics[0] = hammockPics[0];
	roomPics[0].alt = "Hammock room";
	roomPics[1] = woodburnerPics[0];
}
//global var declarations
var thisPic;
var imgCt;
var currentPics;
var pictureProgress
pictureProgress = false;
var inProgress
inProgress = false;
var overlayFlag = null;

pixelHeight = Math.floor(getBrowserHeight()/42);
if (pixelHeight < 10) {pixelHeight = 10};
if (pixelHeight > 14) {pixelHeight = 14};

function resetPics(whichPics) {
	if (currentPics != whichPics) {
		currentPics = whichPics;
		thisPic = -1;
		imgCt = currentPics.length - 1;
		chgSlide(1);
	}
}

function chgSlide(direction) {
	if (pictureProgress) return;
	if(document.images) {
		thisPic = thisPic + direction;
		if (thisPic > imgCt) {
			thisPic = 0;
		}
		if (thisPic < 0) {
			thisPic = imgCt;
		}
		if (document.getElementById('picture').src != null)
		tFadeOutPicture = new OpacityTween(document.getElementById('picture'),Tween.regularEaseIn, 100, 0, 0.3);
		tFadeOutPicture.onMotionFinished = function() {
			document.getElementById('picture').src = currentPics[thisPic].src;
			document.getElementById('picture_title').innerHTML = currentPics[thisPic].alt;
			tFadeInPicture = new OpacityTween(document.getElementById('picture'),Tween.regularEaseIn, 0, 100, 1);
			tFadeInPicture.onMotionFinished = function(){
				pictureProgress = false;
			}
			tFadeInPicture.start();
		}
		tFadeOutPicture.start();
		pictureProgress = true;	
	}
}

function chgReview(toClose,next) {
	toCloseParent = toClose.parentNode.parentNode;
	toCloseParent.style.display = 'none';
	document.getElementById('review'+next).style.display = 'block';
}


//for making the overlay box invisible while mouseDowning on the rest of the image
function overlayHide(showHide) {
	var counter = document.getElementsByClassName('overlay_box');	
	for (i = 0; i < counter.length; i++) {
		counter[i].style.visibility=showHide;
	}
}


function overlayToggle(content){
	if (inProgress) return;
	if (content.style.display == 'block') {
		//'content' already on, Slide out and turn off
		inPxEnd = -25 * parseInt(document.body.style.fontSize);
		inPxStart = Math.round(0.2857 * parseInt(document.body.style.fontSize));
		tSlideOut = new Tween(content.style,'right',Tween.backEaseIn,inPxStart,inPxEnd,0.5,'px');
		tSlideOut.onMotionFinished = function() {
			content.style.display = 'none';
			overlayFlag = null;
			inProgress = false;
			//reset problem vars
			content.style.right = '0.2857em';
			content.style.opacity = 0.75;
			if (content.filters) content.filters.alpha['opacity'] = 75;			
		}
		tSlideOut.start();
		inProgress = true;
	}
	else {
		//'content' not on yet 
		if (overlayFlag != null) {
			//if another one is ON, fadeOut the old and fadeIn 'content'
			tFadeOut = new OpacityTween(overlayFlag,Tween.regularEaseIn, 75, 0, 0.3);
			tFadeOut.onMotionFinished = function() {
				overlayFlag.style.display = 'none';
				content.style.opacity = 0;
				if (content.filters) content.filters.alpha['opacity'] = 0;
				content.style.display = 'block';
				overlayFlag = content;
				tFadeIn = new OpacityTween(overlayFlag,Tween.regularEaseIn, 0, 75, 0.3);
				tFadeIn.onMotionFinished = function() {
					inProgress = false;
					//reset some vars that cause problems
					content.style.right = '0.2857em';
					content.style.opacity = 0.75;
					if(content.filters) content.filters.alpha['opacity'] = 75;
				}
				tFadeIn.start();
			}
			tFadeOut.start();
			inProgress = true;
		}
		else {
			//no other one on, so slide in 'content' to turn on
			content.style.display = 'block';
			overlayFlag = content;

			//reset problem vars
			content.style.opacity = 0.75;
			if(content.filters) content.filters.alpha['opacity'] = 75;
						
			inPxStart = -25 * parseInt(document.body.style.fontSize);
			inPxEnd = Math.round(0.2857 * parseInt(document.body.style.fontSize));
			tSlideIn = new Tween(content.style,'right',Tween.backEaseOut,inPxStart,inPxEnd,0.5,'px');
			tSlideIn.onMotionFinished = function() {
			inProgress = false;
			}
			tSlideIn.start()	
			inProgress = true;
		}
	}
}

re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/
function validateEmail() {
	address = document.getElementById('email');
	address.style.background = "#fff";
	if (address.value != "" && !re.test(address.value)) {
		address.value = "Invalid address entered";
		address.style.background = "#fcc";
		setTimeout("address.focus();",1);
		setTimeout("address.select();",1);
	}
}
function validateEmail2() {
	address = document.getElementById('emailCheck');
	address.style.background = "#fff";
	if (address.value != document.getElementById('email').value) {
		address.value = "Does not match";
		address.style.background = "#fcc";
		setTimeout("address.focus();",1);
		setTimeout("address.select();",1);
	}
}
function getBrowserHeight()
{
	if (window.innerHeight)
	{
		return window.innerHeight;
	}
	else if (document.documentElement && document.documentElement.clientHeight != 0)
	{
		return document.documentElement.clientHeight;
	}
	else if (document.body)
	{
		return document.body.clientHeight;
	}	
	return 0;
};

function resizing() {
	newHeight = Math.floor(getBrowserHeight()/42);
	if (newHeight < 10) {newHeight = 10};
	if (newHeight > 14) {newHeight = 14};
	if (pixelHeight != newHeight) {
		var t = setTimeout("history.go(0)", 1500);
	}
}

onload=function(){
//if the browser doesn't know getElementsByClassName, create function with same name, returns array
//from: http://forums.devshed.com/javascript-development-115/javascript-get-all-elements-of-class-abc-24349.html
if (document.getElementsByClassName == undefined) {
	document.getElementsByClassName = function(className)
	{
		var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
		var allElements = document.getElementsByTagName("*");
		var results = [];
		var element;
		for (var i = 0; (element = allElements[i]) != null; i++) {
			var elementClass = element.className;
			if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
				results.push(element);
		}
		return results;
	}
}
//add here initialise vars. These are setting the overlay_box divs to display none
	var counter = document.getElementsByClassName('overlay_box');	
	for (i = 0; i < counter.length; i++) {
		counter[i].style.display='none';
	}
//even though this is set in the html file it needs to be set by js to be able to read it.
//calculating size of font based on window size
document.body.style.fontSize = pixelHeight + "px";
//set the initial Pics to be home page pics
resetPics(homePics);
//turn on home page text
//document.getElementById('homeClose').style.visibility = 'hidden';
//tFadeInText = new OpacityTween(document.getElementById('content_thehome'),Tween.regularEaseIn, 0, 75, 1);
//tFadeInText.start();
//overlayFlag = document.getElementById('content_thehome');
overlayToggle(document.getElementById('content_thehome'));

//preload remaining images
preloadRest();
}
//END OF ONLOAD