var highlightcolor = "#a61a08";
var defaultcolor = "#000000";
var counter = 0;

window.addEvent('domready', function () {
	$$('.bookingField').each(function (item) {
		item.addEvent("focus", function () { if (this.value == this.defaultValue) this.set('value', ''); });
		item.addEvent("blur", function () { if (this.value == '') this.set('value', this.defaultValue); });
		return false;
	});
	$$('.textfield').each(function (item) {
		item.addEvent("focus", function () { if (this.value == this.defaultValue) this.set('value', ''); });
		item.addEvent("blur", function () { if (this.value == '') this.set('value', this.defaultValue); });
		return false;
	});
	if (document.getElementById("linkBookmark")) {
		addBookmark();
	}
	if (document.getElementById("homepageBanner")) {
		$$("#footerImagesTable a#gallerythumb0").morph({ 'border-color': highlightcolor });
	}
	if (document.getElementById("homepageBanner")) {
		preloadImgs(plA);
	}
	if ($(document.body).getElement('.exploreHeader')) {
		startBanner();
	}
	if (document.getElementById("roomHeaderRight")) {
		$(document.body).getElement("#roomHeaderRight .roomImage a").addEvent("click", function (event) {
			$(document.body).getElement("a.gallerythumb0").fireEvent("click");
		});
	};
	if ($(document.body).getElement('a.mainContentImage')) {
		$(document.body).getElement("a.mainContentImage").addEvent("click", function (event) {
			$(document.body).getElement("#lightboxImages a:first-child").fireEvent("click");
		});
	};
	if (document.getElementById("panRight")) {
		var scroll = new Fx.Scroll($("lightboxOuter"), { duration: 1000, wait: false });
		var currentScroll = 0;
		$("panRight").addEvent("click", function (event) {
			event = new Event(event).stop();
			if (currentScroll < ($('lightboxImages').getWidth() - 415)) {
				currentScroll = currentScroll + 415;
			}
			else {
				currentScroll = $('lightboxImages').getWidth() - 415;
			};
			scroll.start(currentScroll, 0);
			return false;
		});
		$("panLeft").addEvent("click", function (event) {
			event = new Event(event).stop();
			if (currentScroll > 415) {
				currentScroll = currentScroll - 415;
			} else {
				currentScroll = 0;
			}
			scroll.start(currentScroll, 0);
			return false;
		});
	}
});

function preloadImgs(preloadArray) {
	var i = 0;
	// load images from the preload array
	var loader = new Asset.images(preloadArray, {
		onComplete: function () {
			// once all images are loaded, clear out the div and replace it with the
			// new images with the right ids, and add the right thumbnail location
			$('homepageBanner').erase('html');
			preloadArray.each(function (im) {
				new Element('img', {
					src: "" + im + "",
					id: "galleryimg" + counter
				}).inject($('homepageBanner'));
				counter++;
			});
			// create the new array of images and hide everything except the
			// first one, which will always be galleryimg0
			var layers = $$('#homepageBanner img');
			layers.fade('hide');
			$$("#homepageBanner img#galleryimg0").fade('show');
			// start the gallery rotation proper
			var galleryrotate = setInterval(function () {
				// find the thumbnail to be dimmed and dim it
				var tobedimmed = layers[i].id.replace("galleryimg", "gallerythumb");
				$(tobedimmed).morph({ 'border-color': defaultcolor });
				// fade the current layer out
				layers[i].fade('out');
				// move to the next layer, and if there isn't one, reset to 0
				i = (i == layers.length - 1) ? 0 : i + 1;
				// find the thumbnail to be highlighted, and do it
				var tobehighlighted = layers[i].id.replace("galleryimg", "gallerythumb");
				$(tobehighlighted).morph({ 'border-color': highlightcolor });
				// fade in the next layer
				layers[i].fade('in');
			}, 5000);
			// re-add the mouseover / mouseout events to the thumbnails in case
			// they've been cleared in the next step
			$('footerImagesTable').getElements('a').addEvents({
				'mouseover': function () {
					this.morph({ 'border-color': highlightcolor });
				},
				'mouseout': function () {
					this.morph({ 'border-color': defaultcolor });
				},
				// add the events for click, which removes the mouseout events for this link, hides
				// all big images, and fades in the one which matches the clicked thumbnail
				'click': function (listID) {
					$$("#homepageBanner img").fade('out');
					var searchid = this.id.replace("gallerythumb", "galleryimg");
					$$("#homepageBanner img#" + searchid).fade('in');
					$('footerImagesTable').getElements('a').morph({ 'border-color': defaultcolor });
					$('footerImagesTable').getElements('a').addEvent('mouseout', function () { this.morph({ 'border-color': defaultcolor }) });
					this.removeEvents('mouseout');
					this.morph({ 'border-color': highlightcolor });
					// and stops the rotation altogether
					clearInterval(galleryrotate);
					// and then returns false so the user doesn't get bumped to the top of the screen
					return false;
				}
			});
		}
	});
}


function roomPreloadImgs(preloadArray) {
	var i = 0;
	// load images from the preload array
	var loader = new Asset.images(preloadArray, {
		onComplete: function () {
			// once all images are loaded, clear out the div and replace it with the
			// new images with the right ids, and add the right thumbnail location
			$('roomHeaderRight').erase('html');
			preloadArray.each(function (im) {
				new Element('img', {
					src: "" + im + "",
					id: "galleryimg" + counter
				}).inject($('roomHeaderRight'));
				counter++;
			});
			// create the new array of images and hide everything except the
			// first one, which will always be galleryimg0
			var layers = $$('#roomHeaderRight img');
			layers.fade('hide');
			$$("#roomHeaderRight img#galleryimg0").fade('show');
			// start the gallery rotation proper
			var galleryrotate = setInterval(function () {
				// find the thumbnail to be dimmed and dim it
				var tobedimmed = layers[i].id.replace("galleryimg", "gallerythumb");
				$$("a." + tobedimmed).morph({ 'border-color': '#FFF' });
				// fade the current layer out
				layers[i].fade('out');
				// move to the next layer, and if there isn't one, reset to 0
				i = (i == layers.length - 1) ? 0 : i + 1;
				// find the thumbnail to be highlighted, and do it
				var tobehighlighted = layers[i].id.replace("galleryimg", "gallerythumb");
				$$("a." + tobehighlighted).morph({ 'border-color': highlightcolor });
				// fade in the next layer
				layers[i].fade('in');
			}, 5000);
			// re-add the mouseover / mouseout events to the thumbnails in case
			// they've been cleared in the next step
			$('roomHeaderLeft').getElements('.extraImages a').addEvents({
				'mouseover': function () {
					this.morph({ 'border-color': highlightcolor });
				},
				'mouseout': function () {
					this.morph({ 'border-color': '#FFF' });
				},
				// add the events for click, which removes the mouseout events for this link, hides
				// all big images, and fades in the one which matches the clicked thumbnail
				'click': function (listID) {
					$$("#roomHeaderRight img").fade('out');
					var searchid = this.className.replace("gallerythumb", "galleryimg");
					$$("#roomHeaderRight img#" + searchid).fade('in');
					$('roomHeaderLeft').getElements('.extraImages a').morph({ 'border-color': '#FFF' });
					$('roomHeaderLeft').getElements('.extraImages a').addEvent('mouseout', function () { this.morph({ 'border-color': '#FFF' }) });
					this.removeEvents('mouseout');
					this.morph({ 'border-color': highlightcolor });
					// and stops the rotation altogether
					clearInterval(galleryrotate);
					// and then returns false so the user doesn't get bumped to the top of the screen
					return false;
				}
			});
		}
	});
}

function startBanner() {
	var showDuration = 3000;
	var container = $(document.body).getElement('.pageRotator');
	var images = container.getChildren();
	var currentIndex = 0;
	var interval;
	images.each(function (img, i) {
		if (i > 0) {
			img.set('opacity', 0);
		}
	});
	/* worker */
	var show = function () {
		images[currentIndex].set('tween', { duration: '1000' }).fade('out');
		images[currentIndex = currentIndex < images.length - 1 ? currentIndex + 1 : 0].set('tween', { duration: '1000' }).fade('in');
	};
	/* start once the page is finished loading */
	window.addEvent('load', function () {
		interval = show.delay(4000);
	});
}

function fixUnevenHeights() {
	if ($(document.body).getElementById('contentRight')) {
		var leftSideHeight = $('contentLeft').offsetHeight;
		var rightSideHeight = $('contentRight').offsetHeight;
		if (rightSideHeight > leftSideHeight) {
			$('contentLeft').setStyle('height', rightSideHeight);
		} else {
			$('contentRight').setStyle('height', leftSideHeight - 320 - 150);
		}
	};
}