$(document).ready(function(){
	
	// Set "Back to Top" arrow and side arrows to be hidden initially
	$('#logo, #logo p, .arrow').css('opacity', 0);
	
	//Prevent clicking on Product Information Brochure from doing anything (for now)
	$('.contentFooter a').click(function(){
		return false;
	});
	
	// Initialise in-Field labels
	$("label").inFieldLabels(); 
	
	// Main nav buttons on right-hand side
	$('#information').hover(
			function(){
				if ($(this).find('img.arrow').attr('class')!="arrow arrowshow")
				{$(this)
					.animate(
							{left: -3, backgroundColor: '#85BADD'},
							{duration: 'fast', easing: 'swing'});
				};
			},
			
			function(){
				if ($(this).find('img.arrow').attr('class')!="arrow arrowshow")
				{$(this)
					.animate(
						{ left: 0, backgroundColor: '#4DA4DD'},
						{duration: 'fast', easing: 'swing'}
						);
				};
			});
	
	$('#casestudies').hover(
			function(){
				if ($(this).find('img.arrow').attr('class')!="arrow arrowshow")
				{$(this)
					.animate(
							{left: -3, backgroundColor: '#85BADD'},
							{duration: 'fast', easing: 'swing'});
				};
			},
			
			function(){
				if ($(this).find('img.arrow').attr('class')!="arrow arrowshow")
				{$(this)
					.animate(
						{ left: 0 , backgroundColor: '#83D7F1'},
						{duration: 'fast', easing: 'swing'}
						);
				};
			});
	
	$('#information').click(function(){
			if ($(this).find('img.arrow').attr('class')!="arrow arrowshow")
				{$('.arrow.arrowshow')
					.animate({left: 0, opacity: 0}, {duration: 'fast', easing: 'swing'})
					.removeClass("arrowshow");
				
				if ($(this).find('img.arrow').length)
					{$(this)
						.animate(
							{ left: 0, backgroundColor: '#4DA4DD'},
							{duration: 'fast',
							easing: 'swing'
							})
						.find('img.arrow')
						.animate({left: -20, opacity: 1}, {duration: 'fast', easing: 'swing'})
						.addClass("arrowshow");
					}
			}
				
				else{
				return false;
				}
		});
	
	$('#casestudies').click(function(){
		if ($(this).find('img.arrow').attr('class')!="arrow arrowshow")
			{$('.arrow.arrowshow')
				.animate({left: 0, opacity: 0}, {duration: 'fast', easing: 'swing'})
				.removeClass("arrowshow");
			
			if ($(this).find('img.arrow').length)
				{$(this)
					.animate(
						{ left: 0, backgroundColor: '#83D7F1'},
						{duration: 'fast',
						easing: 'swing'
						})
					.find('img.arrow')
					.animate({left: -20, opacity: 1}, {duration: 'fast', easing: 'swing'})
					.addClass("arrowshow");
				}
		}
			
			else{
			return false;
			}
	});
	
	$('#logo').click(function(){
		$('.arrow.arrowshow')
		.animate({left: 0, opacity: 0}, {duration: 'fast', easing: 'swing'})
		.removeClass("arrowshow");
	});
	
});

// Scrollable
$(document).ready(function(){
	// Set main vertical scroller
	var api = $("#main").scrollable({vertical: true, keyboard: false}).navigator('#main_navi');
	
	// Set 'up' arrow to fade in/out depending on which scrollable is visible
	api.data("scrollable").onSeek(function(){
		var newscrollable = this.getIndex();
		
		if (newscrollable == 1 || newscrollable == 2){
			$("#logo").css('cursor', 'pointer').animate({opacity: 1}, "slow");
			};
		
		if (newscrollable == 0){
			$("#logo").css('cursor', 'default').animate({opacity: 0}, "slow");
			$('#mainLogo').animate({left: 0});
			};
		});
	
	api.data("scrollable").onBeforeSeek(function(){
		var currentscrollable = this.getIndex();
		
		if (currentscrollable == 0){
			$('#mainLogo').animate({left: -350});
			};
		});

	// horizontal scrollable for case studies section. Is circular and has its own unique navigator instance:
	var horizontal = $("#csScroll").scrollable({
		circular: true,
		next: ".fwd", 
		prev: ".back"			
	}).navigator(".navi");

	// Function for sliding bars in case studies section (also sets keyboard focus with .focus()):
	horizontal.eq(0).data("scrollable").focus().onSeek(function(){
		var newpanel = this.getIndex();
		
		if (newpanel == 1){
			$('#design').animate({width: "50%"}, {duration: 'slow', easing: 'swing'});
			$('#code').animate({width: "30%"}, {duration: 'slow', easing: 'swing'});
			$('#seo').animate({width: "5%"}, {duration: 'slow', easing: 'swing'});
			$("#middle")
				.fadeOut("fast", function(){
					$(this)	.find("h5").html("Bec's Party Cakes")
							.end()
							.find("a").html("www.becspartycakes.com.au")
							.attr({
								href: 'http://www.becspartycakes.com.au',
								title: "Visit Bec's Party Cakes"
								});
					})
				.fadeIn("fast");
			$("#bottom .right #info")
				.fadeOut("fast", function(){
					$(this).html("<p>Bec's Party Cakes is another small family business. They wanted a bright, colourful site that would reflect the product and be easy to navigate, while showcasing their range of party cakes in an attractive way.</p>");
					})
				.fadeIn("fast");
			// Set total hours
			$('#totalHours')
				.fadeOut("fast", function(){
					$(this).html("6");
					})
				.fadeIn("fast");				
			};
		
		if (newpanel == 2){
			$('#design').animate({width: "40%"}, {duration: 'slow', easing: 'swing'});
			$('#code').animate({width: "80%"}, {duration: 'slow', easing: 'swing'});
			$('#seo').animate({width: "10%"}, {duration: 'slow', easing: 'swing'});
			$("#middle")
				.fadeOut("fast", function(){
					$(this)	.find("h5").html("Chase, Burke and Harvey")
							.end()
							.find("a").html("www.cbhsurvey.com.au")
							.attr({
								href: "http://www.cbhsurvey.com.au",
								title: "Visit the Chase, Burke and Harvey website"
								});
					})
				.fadeIn("fast");
			$("#bottom .right #info")
				.fadeOut("fast", function(){
					$(this).html("<p>Chase Burke and Harvey is a surveying firm that needed an overhaul of their existing website. Using their colours and branding, we rewrote the site from the ground up to be more aesthetically appealing and improve the navigation system.</p>");
					})
				.fadeIn("fast");
			// Set total hours
			$('#totalHours')
				.fadeOut("fast", function(){
					$(this).html("16");
					})
				.fadeIn("fast");
			};
		if (newpanel == 0){
			$('#design').animate({width: "60%"}, {duration: 'slow', easing: 'swing'});
			$('#code').animate({width: "50%"}, {duration: 'slow', easing: 'swing'});
			$('#seo').animate({width: "5%"}, {duration: 'slow', easing: 'swing'});
			$("#middle")
				.fadeOut("fast", function(){
					$(this)	.find("h5").html("UMSUM Chocolates")
							.end()
							.find("a").html("www.umsum.com.au")
							.attr({
								href: "http://www.umsum.com.au",
								title: "Visit UMSUM Chocolates"
								});
					})
				.fadeIn("fast");
			$("#bottom .right #info")
				.fadeOut("fast", function(){
					$(this).html("<p>UMSUM Chocolates makes some of the most amazing chocolates you will ever taste. The only problem was, being a small family run business they had no way to get the message out.</p><p>Using existing logos, styles and photos, we created a warm, inviting website from the ground up, at a price they could afford.</p>");
					})
				.fadeIn("fast");
			// Set total hours
			$('#totalHours')
				.fadeOut("fast", function(){
					$(this).html("10");
					})
				.fadeIn("fast");
			};		
		});

// End scrollable	
});


// Make "back to top" appear next to up arrow, after <delay>ms
$(document).ready(function() {

	var fadelogo,
		delay = 200;

	$('#logo')
	.mouseenter(function(){
		fadelogo = setTimeout(function(){
			$('#logo p').animate({opacity: 1});
				}, delay);
			})
	
	.mouseleave(function(){	
		clearTimeout(fadelogo);
		$('#logo p').animate({opacity: 0}, 200);
			});
});

// Animate contact form colours
$(document).ready(function() {
	$('#contactFlash').click(function(){
		$('#maincontactbox')
			.stop(true, false)
			.animate({borderColor: '#555555'}, 90)
			.delay(100)
			.animate({borderColor: '#6CBFE3'}, 90)
			.delay(100)
			.animate({borderColor: '#555555'}, 150)
			.delay(700)
			.animate({borderColor: '#6CBFE3'}, 1200);
	})
});

	// Make sure case studies is set to left -520px (having a strange bug where the image displayed is not always the first one on page load)
$(document).ready(function() {
	$('#csScroll .items').css('left', '-520px');
});

/*******************************
Client-side email validation;
allows for fancy error messages
(see contactform.php for server-side validation,
which is still important in case javascript is switched off)
*******************************/

$(document).ready(function(){
	/******* Set up the variables ********/
	var messageBox = $('#contactError');
	var t = null;

	/******* Set up the functions ********/
	//This function is used to validate the email address
	function validateEmail(email) 
		{ 
		var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/ 
		return email.match(re);
		};
	
	//Set up function for filling the error message box with appropriate text, sliding it out, then back again after 'delay' seconds
	function errorMessage(msg){
		//set the delay (in seconds) before error message box hides again
		delay = 10500; 
		if (t) clearTimeout(t); //clear the timer if already running
		newMsg = msg + "<div id='closeError'><a href='#'>X</a></div>"
		
		messageBox	.animate({left: "0px"}, "fast")
					.queue(function(){
						messageBox.html(newMsg).animate({left: "-220px"}, "fast");
						t = setTimeout(hideError, delay);
						messageBox.dequeue();
					});
		};
		
	//Hides the error message box
	function hideError(){
		messageBox.animate({left: "0px"}, "fast");
	};

	/********* Set up the user interactions ***********/
	$('#submit').click(function(event){
		var customerEmail = "";
		customerName = $('#customer_name').val();
		customerPhone = $('#customer_phone').val();
		customerMsg = $('#customer_message').val();
		
		// If 'email' is not blank, perform a validation check on the entered address using the above function and set the result to the variable 'customerEmail'
		if ($('#customer_email').val() != ""){customerEmail = validateEmail($('#customer_email').val()); };
		
		//Perform various checks when form is submitted
		if (customerEmail == "" && customerName == ""){ // both name and email blank
			event.preventDefault();
			message = "<p>You need to enter your name and a valid email address to continue.</p>";
			errorMessage(message);
		}
		else if (customerEmail == null && (customerName == "" || customerName != "")){ // invalid email entered
			event.preventDefault();
			message = "<p>Uh oh... something looks fishy with your email address! Please enter a valid email address and try again.</p>";
			errorMessage(message);
		}
		else if (customerEmail == "" && customerName != ""){ //name entered but blank email
			event.preventDefault();
			message = "<p>Looks like you forgot to tell us your email address. Please enter a valid email address and try again.</p><p>(We will only use your email address to reply to this query - we won't send you junk mail!).</p>";
			errorMessage(message);
		}
		else if (customerName == "" && (customerEmail != null || customerEmail != "")){ //email is okay but name not entered
			event.preventDefault();
			message = "<p>Please tell us your name and try again.</p>";
			errorMessage(message);
		}
		// If name and email okay...
		else {
			//...perform a check on the phone number to make sure it's either left blank, or valid (ie at least 8 digits)...
			if (customerPhone == "" || customerPhone.length >= 8){
				//...and if okay check there is a message
				if (customerMsg == ""){
					event.preventDefault();
					message = "<p>Please enter a message and try again.</p>";
					errorMessage(message);
					}
				// If all okay proceed with submitting the form (will perform server-side validation using 'contactform.php' but all checks should be okay from here)
				else{
					return true;
					}
				}
			else{
				event.preventDefault();
				message = "<p>Oops - looks like something is wrong with that phone number. Please enter a valid phone number before continuing.</p><p>(Hint: You can leave it blank if you prefer).</p>";
				errorMessage(message);
				};
			
			
			
			}
		});
	
	//Make the close button work
	$('#closeError a').live('click', function(event){
		event.preventDefault();
		if (t) clearTimeout(t);
		hideError();
	})

});