/**
* Init script
* @author Jubile Development
* @date 29-03-2011
* @module init
* @requires jQuery 1.4
*/

$(document).ready(function() {

	
	/* Carousel */
	jQuery.easing.def = 'easeInQuad';
  $('#slides').slides({
  	slideEasing: 'easeInQuad',
  	generateNextPrev: true,
  	preload: true,
	preloadImage: 'wp-content/themes/roer/gfx/loading.gif',
  	pagination: false,
  	play: 5000,
  	slideSpeed: 2000
	});

	$('div#siteContent .roundedBoxRoer').first().addClass('alpha');
	$('div#siteContent .roundedBoxRoer').last().addClass('omega'); 
	$("div#mainNavigation ul li:last-child").addClass("lastChild");
	
	/* Init widgets */
	
	var initWidgets = function() {
			
			var widgets = $('.widgetBox');
			var countNumber = 0;
			var widgetClass;
			
			var checkCount = function() {
				if(countNumber == 2) {
					countNumber = 0;
					widgetClass = 'omega';
				} else if (countNumber == 0){
					countNumber++;
					widgetClass = 'alpha';
				} else {
					countNumber++;
					widgetClass = '2';
				}
				return widgetClass;
			}
			
			for(var i=0, l=widgets.length; i < l ; ++i)  { 
				widgetClass = checkCount();
				$(widgets).eq(i).addClass(widgetClass);
			}
	};
	
	initWidgets();
	
	
	/* Init datapicker */
		
	var pickerOpt = {showOn: 'button',buttonImage: templatePath + '/gfx/datepicker.png',buttonImageOnly: true};
	$("#bookingDate").datepicker(pickerOpt);
	
	
	/* Toggle */
	
	$(".toggle").live("click", function(e) {
		e.preventDefault();
		var target = $(this).attr("data-toggle");
		$("#" + target).slideToggle(375);
		
		if($(this).hasClass("active")) {
			$(this).removeClass("active");
			$(this.parentNode).removeClass("active");
			$("#" + target).removeClass("active");
		} else {
			$(this).addClass("active");
			$(this.parentNode).addClass("active");
			$("#" + target).addClass("active");
		}
		
		if($(this).hasClass("scroll")) {
			var loc = $("#" + target).position().top - 35;
			window.scroll(0,loc);
		}
		
	});
	
	$(".stepNav").live("click", function(e) {
		e.preventDefault();
		var toggleOutTarget = $("#" + $(this).attr("data-current-step"));
		var toggleInTarget  = $("#"+ $(this).attr("data-next-step"));
		
		
		toggleOutTarget.slideToggle(375);
		$("a[data-toggle='" + toggleOutTarget[0].id + "']").removeClass("active");
		$("a[data-toggle='" + toggleOutTarget[0].id + "']").parent().removeClass("active");
		toggleOutTarget.find("a.toggle").removeClass("active");
		toggleOutTarget.removeClass("active");
	
		toggleInTarget.slideToggle(375);
		$("a[data-toggle='" + toggleInTarget[0].id + "']").addClass("active");
		$("a[data-toggle='" + toggleInTarget[0].id + "']").parent().addClass("active");
		toggleInTarget.addClass("active");
		
	});
	
	/* Tooltips */
	
	$("span.tooltip").live("mouseenter", function(e) {
			var target = $(this).attr("data-tooltip");
			$("#" + target).css("display", "block");
	});
	
	$("span.tooltip").live("mouseout", function(e) {
			var target = $(this).attr("data-tooltip");
			$("#" + target).fadeOut();
	});
	
	/* Jumper */
	
	$(".innerJump").live("click",function(e) {
		e.preventDefault();
		var target = $(this.rel);
		if(!target.hasClass("active")) {
				target.slideToggle(100);
		}
	
		var loc = target.position().top;
		window.scroll(0,loc);
	});
	
	var updateBookingRow = function(item,toggle) {
		
		var targetRow = $(item).parent("td").parent("tr");
		var rowPrice = 0.0;
		var itemCheck = $(targetRow).find("input[type='checkbox']");
		var itemQuantity = parseFloat(targetRow.find("select").val());
		var itemQuantityLabel = targetRow.find("div.rowTotal");
		var itemPrice = parseFloat(itemQuantityLabel.attr("data-price"));
		var rawPrice = itemQuantity * itemPrice;

		if($(item).hasClass("active") && !toggle) {
			targetRow.removeClass("active");
			$(item).removeClass("active");
			itemQuantityLabel.html("");
			
			
		} else {
			targetRow.addClass("active");
			$(item).addClass("active");
			rowPrice = formatPrice(Math.round(rawPrice * Math.pow(10,2))/Math.pow(10,2));
			
			itemQuantityLabel.html("&euro;&nbsp;" + rowPrice);
			itemCheck.attr("checked", "checked");
			itemCheck.addClass("active");
			
		}
		
		updateCart();
		
	};
	
	var formatPrice = function(val) {

			var label = val.toString().replace(".", ",");
			tempPriceLabel = label.split(",");
			
			if(tempPriceLabel) {
				if(tempPriceLabel[1]) {
					if(tempPriceLabel[1].length == 1) {
						label += "0";
					}
				} else {
					label += ",00";
				}
			}
			return label;
	};
		
	var updateCart = function() {
		
		var totalPrice = 0.0;
		var activeSelection = $("#reservationForm table tr.active select");
		var activeItems = $("#reservationForm table tr.active input[type='checkbox']");
		var targetRow;
		var priceLabel;
		var prizes = [];
		var prizeCount = 0;
		var rowCount = 0;
		var currentPrize;
		var tempPriceLabel;
		var itemMarkup = "<ul>";
		
		activeSelection.each(function() {
				targetRow = $(this).parent("td").parent("tr");
				currentPrize = parseInt(this.value,10) * parseFloat(targetRow.find("div.rowTotal").attr("data-price"));
				prizes[prizeCount] = formatPrice(currentPrize);
				totalPrice = totalPrice + currentPrize;
				prizeCount++;
		});
		
		
		totalPrice = Math.round(totalPrice*Math.pow(10,2))/Math.pow(10,2);
		
		activeItems.each(function() {
			itemMarkup += "<li>" + this.value + "&nbsp;" + prizes[rowCount].toString() + "</li>";
			rowCount++;
		});
		
		itemMarkup += "</ul>";
		priceLabel = formatPrice(totalPrice);
		
		$("#totalPrice").val(priceLabel)
		$("#reservationCart .totalPrice").html("&euro;&nbsp;" + priceLabel);
		$("#reservationCart .items").html(itemMarkup);
		
		if(activeSelection[0]) {
			$("#reservationCart").fadeIn();
		} else {
			$("#reservationCart").fadeOut();
		}
	};
	
	$("#reservation input[type='checkbox']").live("click", function(e) {
		if(this.id != "accept_terms") {
			updateBookingRow(this);
		}
	});
	
	$("#reservation select").live("change", function(e) {
		if(this.id != "personal_departure") {
			updateBookingRow(this,true);
		}
	});
	
	$("#reservation input[checked='checked']").each(function() {
		updateBookingRow(this);
	});
	
	if(!$("#reservation input[checked='checked']")[0]) {
		$("#reservationCart").css("display","none");
	}
	
	var validatePersonalData = function(feedback) {
		var items = $("#bookingPart6 .required");
		var fieldsetCompleted = $("#personalDataComplete");
		var isComplete = true;
		var invalidFields = [];
		items.each(function() {
				if(!(this.value != "-1" && trim(this.value) != "")) {
					isComplete = false;
					invalidFields[invalidFields.length] = $(this);
				}
		});
		
		fieldsetCompleted.val(isComplete);
		if(feedback) {
			return {valid:isComplete,msg: 'persoonlijke gegevens niet volledig ingevuld', fields:$(invalidFields)};
		}
	};
	
	var validateAcceptTerms = function() {
		if(!$("#accept_terms:checked")[0]) {
			return {valid:false,msg: 'accepteer voorwaarden a.u.b.', fields:$("accept_terms")};
		} else {
			return {valid:true,msg: 'accepteer voorwaarden a.u.b.', fields:$("accept_terms")};
		}
	};
	
	var validateBooking1 = function() {
		// check sloep form for min 1 check
		var errorMsg;
		var dateError = false;
		var sloepError = false;
		var checkedItems = $("#bookingPart1 input[type='checkbox']:checked");
		var items = $("#bookingPart1 input[type='checkbox']");
		var errorItems;
		
		if(!$("#bookingDate").val()) {
			dateError = true;
			errorMsg = 'vul een huurdatum in a.u.b. ';
			errorItems = $("#bookingDate");
		}
		
		if(!checkedItems[0]) {
			errorMsg = 'selecteer een sloep a.u.b.';
			sloepError = true;
			errorItems = items;
		}
		
		if(sloepError || dateError) {
			return {valid:false,msg: errorMsg, fields:errorItems};
		} else {
			return {valid:true,msg: 'ok', fields:null};
		}
		
	};
	
	$("#reservation .required").live("blur",function(e) {
		validatePersonalData();
		if(this.value != -1 &&  trim(this.value) != "") {
			$(this).removeClass("error");
		}
	});
	
	$("#bookingSubmit").live("click", function(e) {
		e.preventDefault();
		var personalDataCheck = validatePersonalData(true);
		var bookingCheck1 = validateBooking1();
		var acceptTermCheck = validateAcceptTerms();

		if(!personalDataCheck.valid) {
			generateErrorMsg(personalDataCheck,"bookingPart6");
		} else if(!acceptTermCheck.valid) {
				generateErrorMsg(acceptTermCheck,"bookingPart6");
		} else if(!bookingCheck1.valid) {
			generateErrorMsg(bookingCheck1,"bookingPart1");
		} else {
			this.form.submit();
		}
		
	});
	
	var generateErrorMsg = function(errorObj,part) {
		
		if(!$("#bookingPart6").hasClass("active")) {
			$("#bookingPart6").slideToggle(250);
			$("a[data-toggle='bookingPart6']").addClass("active");
			$("a[data-toggle='bookingPart6']").parent().addClass("active");
			$("#bookingPart6").addClass("active");
		}
		
		var errorMsg = "<h6>Foutmelding</h6><p>Komt u er niet uit dan kunt u ons altijd bellen via: 033 - 462 44 82</p><p>U heeft het reserveringsformulier niet volledig of onjuist ingevuld:</p><ul>";
		
		$("#bookingPart6 .required").removeClass("error");
		$("#bookingDate").removeClass("error");
		$("#accept_terms").removeClass("error");
		$("#bookingPart1 input[type='checkbox']").removeClass("error");
		
		errorObj.fields.each(function() {
			$(this).addClass("error");
		});
		
		errorMsg += "<li><a class='innerJump' rel='#" + part + "'  href='#" + part + "'>&gt;&gt;&nbsp;" + errorObj.msg + "</a></li>"; 
	
		errorMsg += "</ul>";
		$("#reservationErrorMsg").html(errorMsg);
		$("#reservationErrorMsg").fadeIn();
		
	};
	
	
	
	var trim = function (value) {
 		value = value.replace(/^\s+/,'');
  	value = value.replace(/\s+$/,'');
  	return value;
	};

	
});