$(document).ready(function() {
	
	// Animate clouds...
	// Run the animation function on load
	if ($.browser.msie && $.browser.version <= 8 ){
	} else {
		animCloudsStart();
	};
	
	// Cloud anims for when page loads
	function animCloudsStart() {
		$(".cloud").queue(function() {
			$("#cloud-one").css({ 'background' : 'transparent url(/static/img/cloudone-bg.png) 50% 0% no-repeat' });
			$("#cloud-two").css({ 'background' : 'transparent url(/static/img/cloudtwo-bg.png) 10% 0% no-repeat' });
			$("#cloud-three").css({ 'background' : 'transparent url(/static/img/cloudthree-bg.png) 40% 0% no-repeat' });
			$("#cloud-four").css({ 'background' : 'transparent url(/static/img/cloudone-bg.png) 39% 0% no-repeat' });
			$("#cloud-five").css({ 'background' : 'transparent url(/static/img/cloudtwo-bg.png) 80% 0% no-repeat' });
			$("#cloud-six").css({ 'background' : 'transparent url(/static/img/cloudtwo-bg.png) 94% 0% no-repeat' });
			$("#cloud-seven").css({ 'background' : 'transparent url(/static/img/cloudthree-bg.png) 93% 0% no-repeat' });
			$(this).dequeue();
		});
		$(".cloud").queue(function() {
			$("#cloud-one").animate({backgroundPosition: '-10% 0%'},{duration: 150000}, {easing: 'none'});
			$("#cloud-two").animate({backgroundPosition: '-10% 0%'},{duration: 140000}, {easing: 'none'});
			$("#cloud-three").animate({backgroundPosition: '-10% 0%'},{duration: 120000}, {easing: 'none'});
			$("#cloud-four").animate({backgroundPosition: '-10% 0%'},{duration: 140000}, {easing: 'none'});
			$("#cloud-five").animate({backgroundPosition: '-5% 0%'},{duration: 100000}, {easing: 'none'});
			$("#cloud-six").animate({backgroundPosition: '-10% 0%'},{duration: 150000}, {easing: 'none'});
			$("#cloud-seven").animate({backgroundPosition: '-20% 0%'},{duration: 99000}, {easing: 'none'});
			$(this).dequeue();
		});
	}
	
	// Navigation, scrolls page to desired element
	$("#navigation .scroll, .find-out-more").click(function() {
		var elemStart = $(this).attr("href").indexOf("#");
		var elem = $(this).attr("href").slice(elemStart);
		$.scrollTo( elem, 900, {offset: {top:-29}, easing:'easeInOutQuint'} );
		return false;
	});
	
	// Switcher..
	if ($("#how-it-works-switcher").length == 1) {
		// Bind switcher to carousel using callback
		function switcher(carousel) {
			$('.tabs a').click(function() {
				$('.tabs a').removeClass("active").addClass("default");
				$(this).removeClass("default").addClass("active");
				var currId = $(this).attr("id");
				var currState = currId.slice(0, -4)+'-state';
				var currClass = $("#switcher-overlay").attr("class");
				$("#switcher-overlay").removeClass(currClass).addClass(currState);
				var nItem = $('.number', this).html();
				carousel.scroll(jQuery.jcarousel.intval(nItem));
				return false;
			});
		};
		// Initiate the carousel with options
		$("#how-it-works-content").jcarousel({
			vertical: true,
			animation: 550,
			easing: "easeInOutQuint",
			scroll: 1,
			initCallback: switcher,
			buttonNextHTML: null,
			buttonPrevHTML: null
		});
	};
	
	// Fade in crop message on hover
	$(".logo").hover(
		function() {
			$('img', this).stop().animate({
				opacity: 0
			});
			$('span', this).stop().show().animate({
				opacity: 1
			});
		},
		function() {
			$('img', this).stop().animate({
				opacity: 1
			});
			$('span', this).stop().show().animate({
				opacity: 0
			});
		}
	);
	
	// Rotate picture frames on hover
	if ($.browser.msie && $.browser.version <= 7 ){
	} else {
		$(".extension.default").hover(
			function() {
				$(this).stop().animate({
					rotate: 3,
					scale: [1.02, 1.02]
				});
			},
			function() {
				$(this).stop().animate({
					rotate: 0,
					scale: [1, 1]
				});
			}
		);
	};
	
	// When picture frames are clicked, do nothing for now...
	if ($.browser.msie && $.browser.version <= 7 ){
	} else {
		$(".extension.default").click(function() {
			return false;
		});
	};
	
	// Change help text on form on focus
	if ($.browser.msie && $.browser.version <= 8 ){
		if (("#sign-up-form").length) {
			var defaultTxt = $("#gnome-advisor span").text();

			$("#first-name").focusin(function() {
				$("#advice-text").hide().fadeIn(450).text('Pleased to meet you, I\'m Gerry. What\'s your name?');
			});

			$("#last-name").focusin(function() {
				$("#advice-text").hide().fadeIn(450).text('If you tell us your last name I can make sure we contact the right person.');
			});

			$("#organisation").focusin(function() {
				$("#advice-text").hide().fadeIn(450).text('What organisation would you like your webseed for?');
			});

			$("#email-address").focusin(function() {
				$("#advice-text").hide().fadeIn(450).text('Make sure you type your e-mail address correctly so I can get back to you.');
			});

			$("#comments").focusin(function() {
				$("#advice-text").hide().fadeIn(450).text('Tell me about what you\'d love your new website to do for your organisation or ask us a question.');
			});
		};
	} else {
		if (("#sign-up-form").length) {
			var defaultTxt = $("#gnome-advisor span").text();
			$("#gnome-advisor").addClass("anim").append('<span id="gnome-pointer"></span><span id="pointing-gnome"></span>');
			
			$("#first-name").focusin(function() {
				$("#advice-text").hide().fadeIn(450).text('Pleased to meet you, I\'m Gerry. What\'s your name?');
				$("#gnome-pointer").animate({ rotate: -20, origin: [130, 118] });
			});
	
			$("#last-name").focusin(function() {
				$("#advice-text").hide().fadeIn(450).text('If you tell us your last name I can make sure we contact the right person.');
				$("#gnome-pointer").animate({ rotate: -10, origin: [130, 118] });
			});
	
			$("#organisation").focusin(function() {
				$("#advice-text").hide().fadeIn(450).text('What organisation would you like your webseed for?');
				$("#gnome-pointer").animate({ rotate: -14, origin: [130, 118] });
			});
	
			$("#email-address").focusin(function() {
				$("#advice-text").hide().fadeIn(450).text('Make sure you type your e-mail address correctly so I can get back to you.');
				$("#gnome-pointer").animate({ rotate: -34, origin: [130, 118] });
			});
	
			$("#comments").focusin(function() {
				$("#advice-text").hide().fadeIn(450).text('Tell me about what you\'d love your new website to do for your organisation or ask us a question.');
				$("#gnome-pointer").animate({ rotate: -74, origin: [150, 114] });
			});
		};
	};
	
});
