/* 

file: functions.js
author: Sean Jones @ equator
date created: 20.04.11

 */

$(document).ready(function() {

	introContentSetup();
	offersImageRotator(100, 100, 123, 123, 163, 163);
	setupAnyExpandableHeaders();

});

$(window).load(function() {
	document.getElementsByTagName("html")[0].className = "javascript loaded";

});

function setupAnyExpandableHeaders() {
	$(".expandableHeader").next().toggle();
	$(".expandableHeader").next().width(
			$(".expandableHeader").next().parent().width()
					- ($(".expandableHeader").next().outerWidth() - $(
							".expandableHeader").next().width()));
	$(".expandableHeader").click(function() {
		$(this).next().slideToggle('slow');
		$(this).toggleClass("expanded");
	});
	
var hash = location.hash;

if(hash)
	{
var expandableHeader = $(hash).parents().find(".expandableHeader").click();
	}
}

function introContentSetup() {
	var introToVillageHotelsDiv = $(".introToVillageHotels");
	introToVillageHotelsDiv.find(".content").hide();
	introToVillageHotelsDiv.find(".content .pageCentred").hide();

	var header = introToVillageHotelsDiv.find("h5.header");
	var linkButton = header.prev();

	header.click(function() {
		$(this).toggleClass("show");
		$(this).prev().toggleClass("expanded");
		$(this).next().slideToggle('slow');
	});

	linkButton.click(function() {
		$(this).toggleClass("expanded");
		$(this).next().toggleClass("show");
		$(this).next().next().slideToggle('slow');
	});

}

function SelectAllText(elementId, defaultValue) {
	var element = document.getElementById(elementId);

	if (element.value == defaultValue) {
		element.focus();
		element.select();
	}
}

function roomClick() {
	$(".roomsSelectContainer").show();
	roomChange();
}

function roomChange() {
	$(".numRoomsNumAdults .errorMsg").hide();
	var roomAmount = $("#ddRooms").val();
	if (roomAmount == 6) {
		$("#room5Row").hide();
		$("#room4Row").hide();
		$("#room3Row").hide();
		$("#room2Row").hide();
		$("#room1Row").hide();
		var roomsErrorMsg = $(".errorMsg.rooms");
		var propertyCode = $("#PropertyCode");
		if (propertyCode.val() != '') {
			roomsErrorMsg.find("a").attr('href',
					roomsErrorMsg.find("a").attr('href') + "?hotel=" + propertyCode.val());
		}
		roomsErrorMsg.show();
	}

	if (roomAmount == 5) {
		$("#room5Row").show();
		$("#room4Row").show();
		$("#room3Row").show();
		$("#room2Row").show();
		$("#room1Row").show();
	} else if (roomAmount == 4) {
		$("#room5Row").hide();
		$("#room4Row").show();
		$("#room3Row").show();
		$("#room2Row").show();
		$("#room1Row").show();
	} else if (roomAmount == 3) {
		$("#room5Row").hide();
		$("#room4Row").hide();
		$("#room3Row").show();
		$("#room2Row").show();
		$("#room1Row").show();
	} else if (roomAmount == 2) {
		$("#room5Row").hide();
		$("#room4Row").hide();
		$("#room3Row").hide();
		$("#room2Row").show();
		$("#room1Row").show();
	} else if (roomAmount == 1) {
		$("#room5Row").hide();
		$("#room4Row").hide();
		$("#room3Row").hide();
		$("#room2Row").hide();
		$("#room1Row").show();
	} else if (roomAmount == 0) {
		$("#room5Row").hide();
		$("#room4Row").hide();
		$("#room3Row").hide();
		$("#room2Row").hide();
		$("#room1Row").hide();
	}

}

/*
 * This is the javascript for the carousel gallery. What basically happens when
 * the next button is clicked: 1. Make the middle image smaller so that it is
 * the same size as the others, 2. Move the last image before the first image at
 * close to the same time as moving the carousel div (because it will need to be
 * moved as an image is getting moved from the back to front) 3. Animate the
 * moving of the carousel div 4. Make middle image larger
 * 
 * What basically happens when the previous button is clicked: 1. Make the
 * middle image smaller so that it is the same size as the others, 2. Animate
 * the moving of the carousel div 3. Move the first image after the last image
 * at close to the same time as moving the carousel div (because it will need to
 * be moved as an image is getting moved from the front to back) 4. Make middle
 * image larger
 * 
 * NOTE: The difference between the two is that steps 2 and 3 are switched and
 * also that the image gets pulled from opposite ends (as the carousel is going
 * different ways) NOTE: I am using the jquery animate for all changes and
 * shifts that way nothing gets out of sync and starts trying to overlap (as one
 * animate call must wait until the previous has finished).
 */

// execute your scripts when the DOM is ready.
function offersImageRotator(smallestImageWidth, smallestImageHeight,
		smallImageWidth, smallImageHeight, largeImageWidth, largeImageHeight) {
	// We make that center image larger
	makeCenterImageLarger(smallImageWidth, smallImageHeight, largeImageWidth,
			largeImageHeight);

	// The on click event of the next button
	$(".footerOffers .right").click(
			function() {
				makeCenterImageSmaller(smallImageWidth, smallImageHeight);
				makeSmallestImageLarger(smallImageWidth, smallImageHeight);
				var items = $(".footerOffers .items");
				$(items).animate(
						{
							left : '-=' + smallImageWidth
						},
						0,
						function() {
							// get the last list item and put it before the
							// first list item (that's how the carousel effect
							// is made)
							$(items).find('a:last').insertBefore(
									$(items).find('a:first'));
						});

				$(items).animate({
					left : '+=' + smallImageWidth
				}, 200);

				resetClassNames(true);
				makeCenterImageLarger(smallImageWidth, smallImageHeight,
						largeImageWidth, largeImageHeight);
				makeSmallestImageSmaller(smallestImageWidth,
						smallestImageHeight, smallImageHeight);
			});

	// The on click event of the prev button
	$(".footerOffers .left").click(
			function() {

				var items = $(".footerOffers .items");

				
							makeCenterImageSmaller(smallImageWidth, smallImageHeight);
							makeSmallestImageLarger(smallImageWidth, smallImageHeight);
				
					
				
				$(items).animate({
					left : '-=' + smallImageWidth
				}, 200);

				$(items).animate(
						{
							left : '+=' + smallImageWidth
						},
						0,
						function() {
							// get the first list item and put it after the last
							// list item (that's how the carousel effect is
							// made)
							$(items).find('a:first').insertAfter(
									$(items).find('a:last'));
						});

				resetClassNames(false);
				makeCenterImageLarger(smallImageWidth, smallImageHeight,
						largeImageWidth, largeImageHeight);
				makeSmallestImageSmaller(smallestImageWidth,
						smallestImageHeight, smallImageHeight);
			});

	$(".footerOffers .first").addClass("smallest");
	$(".footerOffers .fifth").addClass("smallest");
	makeCenterImageLarger(smallImageWidth, smallImageHeight,
			largeImageWidth, largeImageHeight);
	makeSmallestImageSmaller(smallestImageWidth,
			smallestImageHeight, smallImageHeight);
}

// Move the middle class name the correct way
function resetClassNames(isGoingForward) {
	
	var middleItem = $(".footerOffers .middle");
	var firstItem = $(".footerOffers .first");
	var fifthItem = $(".footerOffers .fifth");

	var middleItemParent = $(middleItem).parent();
	var middleItemParentNextImage = $(middleItemParent).next().find('img');
	var middleItemParentPrevImage = $(middleItemParent).prev().find('img');
	
	var firstItemParentNextImage = $(middleItemParent).prev().find('img');
	var firstItemParentPrevImage = $(middleItemParent).prev().prev().prev().find('img');
	var fifthItemParentNextImage = $(middleItemParent).next().next().next().find('img');
	var fifthItemParentPrevImage = $(middleItemParent).next().find('img');
	
	if (isGoingForward) {
	
		$(middleItemParentPrevImage).addClass("middle");
		$(firstItemParentPrevImage).addClass("first").addClass(
				"smallest");

		$(fifthItemParentPrevImage).addClass("fifth").addClass(
				"smallest");

	} else {
		$(middleItemParentNextImage).addClass("middle");
		$(firstItemParentNextImage).addClass("first").addClass(
				"smallest");
		$(fifthItemParentNextImage).addClass("fifth").addClass("smallest");

	}


				// get the first list item and put it after the last
				// list item (that's how the carousel effect is
				// made)
				$(middleItem).removeClass("middle");
				$(firstItem).removeClass("first").removeClass("smallest");
				$(fifthItem).removeClass("fifth").removeClass("smallest");


	
	

}

function makeCenterImageLarger(smallImageWidth, smallImageHeight,
		largeImageWidth, largeImageHeight) {

	$(".footerOffers img.middle").animate({
		marginTop : '-' + (largeImageHeight - smallImageHeight) / 2 + 'px',
		marginLeft : '-' + (largeImageWidth - smallImageWidth) / 2 + 'px',
		marginRight : '-' + (largeImageWidth - smallImageWidth) / 2 + 'px',
		width : largeImageWidth + 'px', /* Set new width */
		height : largeImageHeight + 'px' /* Set new height */
	}, 200);
}

function makeCenterImageSmaller(imageWidth, imageHeight) {
	$(".footerOffers img.middle").animate({
		marginTop : '0px',
		marginLeft : '0px',
		marginRight : '0px',
		width : imageWidth + 'px', /* Set new width */
		height : imageHeight + 'px' /* Set new height */
	}, 200);
}

function makeSmallestImageLarger(smallImageWidth, smallImageHeight) {

	$(".footerOffers img.smallest").animate({
		marginTop : '0px',
		width : smallImageWidth + 'px', /* Set new width */
		height : smallImageHeight + 'px' /* Set new height */
	}, 200);
}

function makeSmallestImageSmaller(imageWidth, imageHeight, mediumImageHeight) {
	$(".footerOffers img.smallest").animate({

		marginTop : (mediumImageHeight - imageHeight) / 2 + 'px',
		width : imageWidth + 'px', /* Set new width */
		height : imageHeight + 'px' /* Set new height */
	}, 200);
}

/*******************************************************************************
 * jQuery.matchColumns - make bottoms of column match four object parameters at
 * the moment children : (optional, string) children are the nodes within the
 * container that the height is to be added to position : (optional, string -
 * default bottom) position is where you where you want the extra height to be
 * added restart : (optional, integer) if you want to reset the height at the
 * start of each row, give the column number style : (optional,string
 * [padding,margin] ) which style attribute the height is to be added to
 * imageWait : (optional, boolean) Waits until all of the images in the columns
 * are loaded before performing the function
 */

(function(jQuery) {
	jQuery.fn.simplifiedMatchColumns = function(obj) {

		if (!obj)
			obj = {};

		if (!this.length)
			return;

		var columns = this;

		var children = obj.children || null;
		var position = obj.position || "bottom";
		var restart = obj.restart || null;
		var style = obj.style || "margin";

		function setColumns() {
			
			var lowest = 0;
			var lowList = [];
			columns
					.each(
							function(i) {
								if (restart && i % restart == 0) {
									lowList[lowList.length] = 0;
									lowest = 0;
									if (jQuery.browser.msie) // if rows are
									// floated and
									// not cleared
									// there are
									// problems in
									// IE. Don't
									// know which
									// browser is
									// rendering
									// correctly but
									// assume it is
									// not IE. This
									// is only a
									// problem if
									// the bottom is
									// being found,
									// not the
									// height.
									{
										jQuery(this)
												.before(
														'<div class="REMOVED_AFTER_FOUND_BOTTOM" style="clear:both;font-size:0;height:0;width:100%;"/>');
									}
								}

								var bottom = this.offsetHeight;
								this.currentBottom = bottom;
								if (bottom > lowest) {
									lowest = bottom;
								}
								if (restart) {
									lowList[lowList.length - 1] = lowest;
								}
								
							})
					.css("height", "auto")
					.siblings(".REMOVED_AFTER_FOUND_BOTTOM")
					.remove()
					.end()
					.each(
							function(i) {
								if (lowList.length) {
									lowest = lowList[Math.ceil((i + 1)
											/ (restart)) - 1];
								}
								var el = this;
								var diff = lowest - this.currentBottom;
								var endHeight = this.offsetHeight + diff;
								if (diff > 0) {
									if (children) {
										var tries = 0;
										jQuery(el)
												.find(children)
												.each(
														function() {
															while (el.offsetHeight < endHeight
																	&& tries < 6) // if
															// it
															// can't
															// get
															// it
															// in 4
															// tries
															// then
															// something
															// if
															// wrong
															{
																var exist = jQuery(
																		this)
																		.css(
																				style
																						+ "-"
																						+ position)
																		.replace(
																				/px/,
																				"") * 1;
																if (isNaN(exist))
																	exist = 0;
																jQuery(this)
																		.css(
																				style
																						+ "-"
																						+ position,
																				endHeight
																						- el.offsetHeight
																						+ exist);
																tries++;

															}
														});
									} else {
										if (position != 'both') {
											jQuery(this)
													.css(
															"padding-"
																	+ position,
															diff
																	+ jQuery(
																			this)
																			.css(
																					"padding-"
																							+ position)
																			.replace(
																					"px",
																					"")
																	* 1);
										} else {
											var eachForTopBottom = (diff
													+ jQuery(this).css(
															"padding-top")
															.replace("px", "")
													* 1 + jQuery(this).css(
													"padding-bottom").replace(
													"px", "") * 1) / 2;
											jQuery(this).css("padding-top",
													eachForTopBottom);
											jQuery(this).css("padding-bottom",
													eachForTopBottom);

										}
									}
								}
							});
		}
		; // end function setColumns

		if (obj.imageWait) {
			var totalToLoad = 0;

			function finishedLoad() {
				totalToLoad--;
				if (!totalToLoad)
					setColumns();
			}

			columns.find("img").each(function(i) {
				if (!this.complete) {
					// IE doesn't return complete for failed images so check to
					// see if it currently loading
					if (jQuery.browser.msie && this.readyState != "loading")
						return;
					totalToLoad++;
					this.onload = finishedLoad;
				}
			});
			if (!totalToLoad)
				setColumns();
		} else {
			setColumns();
		}

	};
})(jQuery);



/*******************************************************************************
 * jQuery.matchColumns - make bottoms of column match four object parameters at
 * the moment children : (optional, string) children are the nodes within the
 * container that the height is to be added to position : (optional, string -
 * default bottom) position is where you where you want the extra height to be
 * added restart : (optional, integer) if you want to reset the height at the
 * start of each row, give the column number style : (optional,string
 * [padding,margin] ) which style attribute the height is to be added to
 * imageWait : (optional, boolean) Waits until all of the images in the columns
 * are loaded before performing the function
 */

(function(jQuery) {
	jQuery.fn.matchColumns = function(obj) {

		if (!obj)
			obj = {};

		if (!this.length)
			return;

		var columns = this;

		var children = obj.children || null;
		var position = obj.position || "bottom";
		var restart = obj.restart || null;
		var style = obj.style || "margin";

		function setColumns() {
			var lowest = 0;
			var lowList = [];
			columns
					.each(
							function(i) {
								if (restart && i % restart == 0) {
									lowList[lowList.length] = 0;
									lowest = 0;
									if (jQuery.browser.msie) // if rows are
									// floated and
									// not cleared
									// there are
									// problems in
									// IE. Don't
									// know which
									// browser is
									// rendering
									// correctly but
									// assume it is
									// not IE. This
									// is only a
									// problem if
									// the bottom is
									// being found,
									// not the
									// height.
									{
										jQuery(this)
												.before(
														'<div class="REMOVED_AFTER_FOUND_BOTTOM" style="clear:both;font-size:0;height:0;width:100%;"/>');
									}
								}

								var bottom = jQuery(this).offset().top
										+ this.offsetHeight;
								this.currentBottom = bottom;
								if (bottom > lowest) {
									lowest = bottom;
								}
								if (restart) {
									lowList[lowList.length - 1] = lowest;
								}
								})
					.css("height", "auto")
					.siblings(".REMOVED_AFTER_FOUND_BOTTOM")
					.remove()
					.end()
					.each(
							function(i) {
								if (lowList.length) {
									lowest = lowList[Math.ceil((i + 1)
											/ (restart)) - 1];
								}
								var el = this;
								var diff = lowest - this.currentBottom;
								var endHeight = this.offsetHeight + diff;
								if (diff > 0) {
									if (children) {
										var tries = 0;
										jQuery(el)
												.find(children)
												.each(
														function() {
															while (el.offsetHeight < endHeight
																	&& tries < 6) // if
															// it
															// can't
															// get
															// it
															// in 4
															// tries
															// then
															// something
															// if
															// wrong
															{
																var exist = jQuery(
																		this)
																		.css(
																				style
																						+ "-"
																						+ position)
																		.replace(
																				/px/,
																				"") * 1;
																if (isNaN(exist))
																	exist = 0;
																jQuery(this)
																		.css(
																				style
																						+ "-"
																						+ position,
																				endHeight
																						- el.offsetHeight
																						+ exist);
																tries++;

															}
														});
									} else {
										if (position != 'both') {
											jQuery(this)
													.css(
															"padding-"
																	+ position,
															diff
																	+ jQuery(
																			this)
																			.css(
																					"padding-"
																							+ position)
																			.replace(
																					"px",
																					"")
																	* 1);
										} else {
											var eachForTopBottom = (diff
													+ jQuery(this).css(
															"padding-top")
															.replace("px", "")
													* 1 + jQuery(this).css(
													"padding-bottom").replace(
													"px", "") * 1) / 2;
											jQuery(this).css("padding-top",
													eachForTopBottom);
											jQuery(this).css("padding-bottom",
													eachForTopBottom);

										}
									}
								}
							});
		}
		; // end function setColumns

		if (obj.imageWait) {
			var totalToLoad = 0;

			function finishedLoad() {
				totalToLoad--;
				if (!totalToLoad)
					setColumns();
			}

			columns.find("img").each(function(i) {
				if (!this.complete) {
					// IE doesn't return complete for failed images so check to
					// see if it currently loading
					if (jQuery.browser.msie && this.readyState != "loading")
						return;
					totalToLoad++;
					this.onload = finishedLoad;
				}
			});
			if (!totalToLoad)
				setColumns();
		} else {
			setColumns();
		}

	};
})(jQuery);