(function($){
	//Scroll to the top (rather then jump)
	$('a[href=#container]').click(function(){
	    $('html, body').animate({scrollTop:0}, 'slow');
	    return false;
	});
	//Make placeholder work on all browers
	var initPlaceholder = function() {  
    	$('input[placeholder]').placehold();  
    };  
    if(!Modernizr.input.placeholder){  
		$(document).ready(initPlaceholder);  
	};  
	//Homepage Top Slideshow
	initSlideShowTop();
	//Bottom Top Slideshow
	initSlideShowBottom();
	//Product Options
	productOptions();
	
	//Image Swap
	productImages();
	
	//Checkout Page
	checkout();
	
	//basket
	basket();
	
})(window.jQuery);

function initSlideShowTop() {
	//if element exist we're on the right page
	if (document.getElementById("slideshow")) {
	//Check how many items there are
	var num = 0;
	//Current Slide
	var current = 1;
	$('#slidesContainer ul li').each(function(i){
		/* Loop through all the slides and store their accumulative widths in totWidth */
		num ++;
	});
	//Set width
	var amount = num*1000;
	$('#slidesContainer').css('width', amount+'px');
	//If only one item in the slideshow then remove the button
	//Should be rare so there plugged into the HTML
	if (num == 1) {
		$('#btn-right').css('display','none');
		$('#btn-left').css('display','none');
		return false;
	}
	
	//Create dots
	$dots = $('<ul class="dots"></ul>')
	$('#featured').append($dots);
	for (var i = 0; i < (num); i++) {
		$lis = $('<li><a href="#" title=""></a></il>')
		$('#featured ul.dots').append($lis);
	}
	
	$('#featured ul.dots li:first-child').addClass("selected");
	
	$('#featured .dots li a').click(function(e){
		$('#featured .dots li').removeClass("selected");
		$(this).parent().addClass("selected");
		var button = $(this).parent().index();
		var scrollAmount = button * 980;
		scrolltwo(scrollAmount);
		e.preventDefault();
	});
	
	
	$('#btn-right').click(function(e) {
		var liSelected = $('#featured .dots').find('li.selected').index();
		liSelected ++;
	
		if(liSelected == num) {
			var scrollAmount = 0;
			liSelected = 0;
			updateButtonsTwo(liSelected);
		} else {
			updateButtonsTwo(liSelected);
			var scrollAmount = liSelected * 980;
		}
		scrolltwo(scrollAmount);
		e.preventDefault();
	});
	
	$('#btn-left').click(function(e) {
 		var liSelected = $('#featured .dots').find('li.selected').index();
		//How far it can go right
		if(liSelected == 0) {
			var maxX = (num-1);
			maxX -1
			updateButtonsTwo(maxX);
			var scrollAmount = maxX * 992;
		} else {
			liSelected --;
			updateButtonsTwo(liSelected);
			var scrollAmount = liSelected * 992;
		}
		scrolltwo(scrollAmount);
		e.preventDefault();
		});
	
	
	}
}

function initSlideShowBottom() {
	var totWidth=0;
	var num = 0;
	var slidesPerPanel = 3;

	$('#slidesContainer2 .treatment').each(function(i){
		/* Loop through all the slides and store their accumulative widths in totWidth */
		num ++;
	});
	
	totWidth = (num * 430) * slidesPerPanel;
	
	//Create list
	$dots = $('<ul class="dots"></ul>')
	$('.treatments').append($dots);
	for (var i = 0; i < (num/3); i++) {
		$lis = $('<li><a href="#" title=""></a></il>')
		$('.treatments ul.dots').append($lis);
	}
	
	$('.treatments ul.dots li:first-child').addClass("selected");
	
	//Set width
	$('#slidesContainer2').width(totWidth);
	
	
	$('.treatments .dots li a').click(function(e){
		$('.treatments .dots li').removeClass("selected");
		$(this).parent().addClass("selected");
		var button = $(this).parent().index();
		var scrollAmount = button * 992;
		scroll(scrollAmount);
		e.preventDefault();
	});
	
	$('#btn-right2').click(function(e) {
		var liSelected = $('.treatments .dots').find('li.selected').index();
		liSelected ++;
		
		//How far it can go right
		var maxX = Math.ceil(num/slidesPerPanel);
		if(liSelected == maxX) {
			var scrollAmount = 0;
			liSelected = 0;
			updateButtons(liSelected);
		} else {
			updateButtons(liSelected);
			var scrollAmount = liSelected * 992;
		}
		scroll(scrollAmount);
		e.preventDefault();
	});
	
	$('#btn-left2').click(function(e) {
 		var liSelected = $('.treatments .dots').find('li.selected').index();
		//How far it can go right
		if(liSelected == 0) {
			var maxX = Math.ceil(num/slidesPerPanel);
			maxX --;
			updateButtons(maxX);
			var scrollAmount = maxX * 992;
		} else {
			liSelected --;
			updateButtons(liSelected);
			var scrollAmount = liSelected * 992;
		}
		scroll(scrollAmount);
		e.preventDefault();
		});
}

function scroll(x) {
	$('#slidesContainer2').stop().animate({marginLeft:-x+'px'},450);
}

function scrolltwo(x) {
	$('#slidesContainer').stop().animate({left:-x+'px'},450);
}

function updateButtons(nth) {
	$('.treatments .dots li').removeClass("selected");
	$('.treatments .dots li:eq('+nth+')').addClass("selected");
}

function updateButtonsTwo(nth) {
	$('#featured .dots li').removeClass("selected");
	$('#featured .dots li:eq('+nth+')').addClass("selected");
}

function productOptions() {
	//if element exist we're on the right page
	if (!document.getElementById("productOptions")) return false;
	
	$('#productOptions').change(function() {
		$("select option:selected").each(function () {
        	//console.log($(''this).id());
        	var price = $('input[name$="option_'+ $(this).val() + '"]').val();
        	$('.amount').text(price);
        	$(".price span").effect("highlight", {}, 1500);
        });
	});
}

function productImages() {
	if (!document.getElementById("gallery")) return false;
	if (!document.getElementById("secondImage")) return false;
	//First Image
	$('#firstImage').click(function() {
		var x =  $(this).attr("href");
		$("#mainProduct").fadeOut('slow', function() {
			$('#secondImage').removeClass("selected");
			$("#firstImage").addClass("selected");
      		$("#mainProduct").attr("src" , x);
			$("#mainProduct").fadeIn();
      });
		
		return false;
	});
	//Second Image
	$('#secondImage').click(function() {
		var x =  $(this).attr("href");
		$("#mainProduct").fadeOut('slow', function() {
			$('#firstImage').removeClass("selected");
			$("#secondImage").addClass("selected");
			$("#mainProduct").attr("src" ,x);
			$("#mainProduct").fadeIn();
		});
		return false;
	});
	
}

function checkout() {
	if (!document.getElementById("formData")) return false;
	$('#copy').click(function() {
		var billing = new Array;
		$("#left input").each(function () {
			billing.push($(this).val());
		});
		var i =0;
		$("#right input").each(function () {
			$(this).val(billing[i]);
			i++;
		});
		$("#card_holder").focus();
		return false;
	});
	
	
	
	jQuery.validator.addMethod('phoneUK', function(phone_number, element) {
	  return this.optional(element) || phone_number.length > 9 &&
	  phone_number.match(/^(\(?(0|\+44)[1-9]{1}\d{1,4}?\)?\s?\d{3,4}\s?\d{3,4})$/);
	  }, 'Please specify a valid phone number'
	);
	
	jQuery.validator.addMethod('mobileUK', function(phone_number, element) {
	  return this.optional(element) || phone_number.length > 9 &&
	  phone_number.match(/^((0|\+44)7(5|6|7|8|9){1}\d{2}\s?\d{6})$/)
	  }, 'Please specify a valid mobile number'
	);
	
	$("#issue_number").css('display', 'none');
    $("#issue_number").prev().css('display', 'none');
	$("#CV2").prev().css('width', '140px');
	
	$('<input>').attr({
		type: 'hidden',
		id: 'ajax',
		name: 'ajax',
		value: 'true'
		}).appendTo("#formData");
	
	$("#formData").validate({
		submitHandler: function(form) {
			$("button#process").addClass("processing");
			$("button#process").removeClass("default");
			
			$.post("?", $("#formData").serialize(),
			function(data) {
				var obj = jQuery.parseJSON(data);
				//var content;
				//var p = content.html(data) 
				//3DSecureStatus
				if (obj.result === "3DS") {
					//console.log(obj.params.Status);
					createForm(obj);
				} else if (obj.result === "OK") {
					paymentComplete(obj.url);
				} else if (obj.result === "ERROR") {
					//Update button
					$("button#process").addClass("default");
					$("button#process").removeClass("processing");
					
					if(obj.errors) {
						//$("cardDetails").
						var errorCard = $('<div>').attr({id: 'errorCard'}).appendTo("#cardDetails")
						
						//get errors
						for (var key in obj.errors) {
							//console.log("Key: " + key);
							//console.log("Value: " + obj.errors[key]);
							
							//$('<p>').attr({'class': 'error'}).text(obj.errors[key]).appendTo(errorCard);
							
							var temp = obj.errors[key];
							
							var newParagraph = $('<p>').attr({'class':'error'}).text(temp.toString());
							
							$('#errorCard').empty();
							$('#errorCard').append(newParagraph);
							
						}//end for for
					}
				}
			}
		);//post

		},
		
		 invalidHandler: function(form, validator) {
		 	$("button#process").addClass("default");
			$("button#process").removeClass("processing");
		 }
		
	});
	
	$("#card_number").rules("add", {required: true, minlength: 16, creditcard: true});
	$("#email").rules("add", {required: true, email: true});
	$("#bill_phone").rules("add", {required: true,phoneUK: true});
	$("#issue_number").rules("add", {required: false, minlength: 1, digits: true});
	$("#CV2").rules("add", {required: true,minlength: 3,digits: true});
	$("#expiry_date").rules("add", {required: true,minlength: 4,digits: true});
	$("#issue_number").rules("remove");
	$("#start_date").rules("remove");

	$("#bill_address2").rules("remove");
	$("#ship_address2").rules("remove");
	
	 $("#card_type").change(function () {
        if ($(this).val() != "MAESTRO") {
        	$("#issue_number").css('display', 'none');
        	$("#issue_number").prev().css('display', 'none');
        	

        	$("#CV2").prev().css('width', '140px');
        } else {
        	$("#issue_number").css('display', 'block');
        	$("#issue_number").prev().css('display', 'block');
        	$("#CV2").prev().css('width', '90px');
        }
     });
	$("#security").hide();
	$('#showSecurity').click(function() {
		$("#security").fadeIn();
		return false;
	});
}

var obj;
function createForm(object) {
	//Make data available to the script
	obj = object;
	//Create an iframe
	$('<iframe id="3DFrame"/>').appendTo("body");
	//delay for a second for DOM access
	setTimeout("submitForm()",1000);
}

jQuery.fn.center = function () {
    this.css("position","absolute");
    this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
    this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
    return this;
}

function gotoPage(obj) {
	console.log(obj);
	if(obj.result == "FAIL") {
		displayError(obj.message);
	} else if(obj.result == "OK") {
		window.location.href = obj.url;
	} else {
		displayError("An error occurred at Sage Pay which meant the transaction could not be completed successfully.");
	}
	//setTimeout("window.location.href = url", 1000);
}

function displayError(message) {
	//remove iframeEl
	$('iframe#3DFrame').remove();
	//Allow user to resubmit
	$("button#process").addClass("default");
	$("button#process").removeClass("processing");
	//Display Message
	var errorCard = $('<div>').attr({'id': 'errorCard'}).appendTo("#cardDetails");
	$('#errorCard').empty()
	//console.log(message);
	var errorM = $('<p>').attr({'class': 'error'}).text(message).appendTo(errorCard);
}

function submitForm() {
	
	$('iframe#3DFrame').css({
		'position' : 'absolute',
		'top' : '0',
		'left' : '0',
		'width' : '430px',
		'height' : '390px'
	});
	
	$('iframe#3DFrame').center();

	//Create Overlay
	var div = $('<div>').attr({
	id: '3DSecureStatus'
	}).appendTo("iframe");
	
	//id="3DSecure" name="form" action="<!--{$form.ACSURL}-->" method="POST"
	var form = $('<form>').attr({
	action: obj.params.ACSURL,
	id: '3DSecure',
	name: 'form',
	method: 'POST'
	}).appendTo("iframe");
	
	var input1 = $('<input>').attr({
	type: "hidden",
	id: '3DSecure',
	name: 'PaReq',
	value: obj.params.PAReq
	}).appendTo("#3DSecure");
	
	var input2 = $('<input>').attr({
	type: "hidden",
	id: 'TermUrl',
	name: 'TermUrl',
	value: obj.params.callback
	}).appendTo("#3DSecure");
	
	var input3 = $('<input>').attr({
	type: "hidden",
	id: 'MD',
	name: 'MD',
	value: obj.params.MD
	}).appendTo("#3DSecure");
	
	$('#3DFrame').contents().find('body').append(div);
	$('#3DFrame').contents().find('body').append(form);
	$('#3DFrame').contents().find('body #3DSecure').append(input1);
	$('#3DFrame').contents().find('body #3DSecure').append(input2);
	$('#3DFrame').contents().find('body #3DSecure').append(input3);
	
	//Jquery errors use old JS
	var iframeEl = document.getElementById('3DFrame');
	if ( iframeEl.contentDocument ) { // DOM
		var form = iframeEl.contentDocument.getElementById('3DSecure');
	} else if ( iframeEl.contentWindow ) { // IE win
		var form = iframeEl.contentWindow.document.getElementById('3DSecure');
	}
	form.submit();
}

function paymentComplete(url) {
	window.location.replace(url);
}


function basket() {
	if (!document.getElementById("shipping")) return false;
	$('#btnBasket').hide();
	
	
	$('select#shipping').change(function() {
		$('#basketForm').submit();
	});
}