// --------------------------------------------------------------------
// PRELOAD NAV IMAGES http://jquery-howto.blogspot.com/2009/02/preload-images-with-jquery.html
// --------------------------------------------------------------------
var image1 = $('<img />').attr('src', 'images/waffle_pr_intrologo1.jpg');
var image2 = $('<img />').attr('src', 'images/waffle_pr_intrologo2.jpg');
var image3 = $('<img />').attr('src', 'images/aboutus-over.jpg');
var image4 = $('<img />').attr('src', 'images/services-over.jpg');
var image5 = $('<img />').attr('src', 'images/ethos-over.jpg');
var image6 = $('<img />').attr('src', 'images/location-over.jpg');
var image7 = $('<img />').attr('src', 'images/team-over.jpg');
var image8 = $('<img />').attr('src', 'images/contact-over.jpg');

$(document).ready(function(){

// --------------------------------------------------------------------
// ON LOAD
// --------------------------------------------------------------------

// intrologoblock items are stacked, with logo1 on top and intronavblock at the bottom

// ***PREP THE PAGE***

var navhoverable=false; // disable labelsrow hover fading
$(".squarespacer").animate({width:0},0); // collapse the nav gaps
$("#square1,#square2,#square3,#square4,#square5,#square6").animate({backgroundColor:"#51304D"},0).animate({width:31},0); // collapse + colour the nav []s

// ***ANIMATE THE ELEMENTS***
// #intrologoblock is display:none in CSS

$("#labelsrow,#intrologo1,#intrologo2,#intronavblock").animate({opacity: 0}, 0, function(){ // opacity of child elements to 0, THEN

$("#intrologoblock").fadeIn(0, function(){ // display the block, but child elements are 0 opacity,  THEN

$("#intrologo1,#intrologo2").animate({opacity: 1}, 300, 'easeInSine', function(){ // fade in logos1+2, THEN

// NB THIS IS THE STAGE THAT THE INTERNAL PAGE GETS TO BEFORE NAV HOVERING

$("#intrologo1").fadeOut(300, function(){ // remove logo1 to show logo2, THEN

$("#intronavblock").stop().animate({opacity: 1}, 0, function(){ // display nav []s (labels still opacity 0) behind logo2, THEN
// NB without the stop() in the above line, the UNLOAD animation is buggy !!!

$("#intrologo2").fadeOut(100); // remove logo2 to show nav []s behind it, AND

$(".squarespacer").animate({width:11},200); // widen [] gaps, AND

$("#square1,#square2,#square3,#square4,#square5,#square6").animate({width:55},200); // widen []s AND

$("#square1,#square2,#square3,#square4,#square5,#square6").animate({backgroundColor:"#654461"},200, function(){ // colour []s THEN

$("#labelsrow").animate({opacity: 1}, 200, function(){ // fade in labels, THEN

navhoverable=true;

});
});
});
});
});
});
});

// --------------------------------------------------------------------
// ***NAV FUNCTIONALITY*** (NO HOVERING OF NAVBLOCK TO DISPLAY LABELS, UNLIKE CONTENT PAGE)
// --------------------------------------------------------------------
// CHANGE [] BGCOLOR + LABEL IMAGE WHEN HOVERING OVER A [] OR ITS LABEL 
$("#square1,#label1").hover(
	function(){
		if (navhoverable==true) {
			$("#square1").stop().animate({backgroundColor:"#51304D"},50);
			$("#label1").attr('src', 'images/aboutus-over.jpg'); return true;
		}
	}, function() {
		if (navhoverable==true) {
			$("#square1").stop().animate({backgroundColor:"#654461"},1000);
			$("#label1").attr('src', 'images/aboutus.jpg'); return true;
		}
});
$("#square2,#label2").hover(
	function(){
		if (navhoverable==true) {
			$("#square2").stop().animate({backgroundColor:"#51304D"},50);
			$("#label2").attr('src', 'images/services-over.jpg'); return true;
		}
	}, function() {
		if (navhoverable==true) {
			$("#square2").stop().animate({backgroundColor:"#654461"},1000);
			$("#label2").attr('src', 'images/services.jpg'); return true;
		}
});
$("#square3,#label3").hover(
	function(){
		if (navhoverable==true) {
			$("#square3").stop().animate({backgroundColor:"#51304D"},50);
			$("#label3").attr('src', 'images/ethos-over.jpg'); return true;
		}
	}, function() {
		if (navhoverable==true) {
			$("#square3").stop().animate({backgroundColor:"#654461"},1000);
			$("#label3").attr('src', 'images/ethos.jpg'); return true;
		}
});
$("#square4,#label4").hover(
	function(){
		if (navhoverable==true) {
			$("#square4").stop().animate({backgroundColor:"#51304D"},50);
			$("#label4").attr('src', 'images/location-over.jpg'); return true;
		}
	}, function() {
		if (navhoverable==true) {
			$("#square4").stop().animate({backgroundColor:"#654461"},1000);
			$("#label4").attr('src', 'images/location.jpg'); return true;
		}
});
$("#square5,#label5").hover(
	function(){
		if (navhoverable==true) {
			$("#square5").stop().animate({backgroundColor:"#51304D"},50);
			$("#label5").attr('src', 'images/team-over.jpg'); return true;
		}
	}, function() {
		if (navhoverable==true) {
			$("#square5").stop().animate({backgroundColor:"#654461"},1000);
			$("#label5").attr('src', 'images/team.jpg'); return true;
		}
});
$("#square6,#label6").hover(
	function(){
		if (navhoverable==true) {
			$("#square6").stop().animate({backgroundColor:"#51304D"},50);
			$("#label6").attr('src', 'images/contact-over.jpg'); return true;
		}
	}, function() {
		if (navhoverable==true) {
			$("#square6").stop().animate({backgroundColor:"#654461"},1000);
			$("#label6").attr('src', 'images/contact.jpg'); return true;
		}
});
// --------------------------------------------------------------------
// ***ON CLICKING THE SQUARES/LABELS*** FADE OUT THE CONTENT/LABELS/SQUARES, THEN GO TO THE CHOSEN PAGE
// NB the addition of the navhoverable flag should mean that labelsrow CAN be faded out here
$("#square1,#label1").click(function(){
		navhoverable=false; // but this seems to be lost !!!
		$("#labelsrow").stop().fadeOut(300,function(){
				$("#square6").stop().animate({opacity: 0}, 100, 'easeOutSine');
				$("#square5").stop().animate({opacity: 0}, 200, 'easeOutSine');
				$("#square4").stop().animate({opacity: 0}, 300, 'easeOutSine');
				$("#square3").stop().animate({opacity: 0}, 400, 'easeOutSine');
				$("#square2").stop().animate({opacity: 0}, 500, 'easeOutSine');
				$("#square1").stop().animate({opacity: 0}, 600, 'easeOutSine',function(){
					window.location.href="aboutus.html";
				});
		});
});
$("#square2,#label2").click(function(){
		navhoverable=false;
		$("#labelsrow").stop().fadeOut(300,function(){
				$("#square6").stop().animate({opacity: 0}, 100, 'easeOutSine');
				$("#square5").stop().animate({opacity: 0}, 200, 'easeOutSine');
				$("#square4").stop().animate({opacity: 0}, 300, 'easeOutSine');
				$("#square3").stop().animate({opacity: 0}, 400, 'easeOutSine');
				$("#square2").stop().animate({opacity: 0}, 500, 'easeOutSine');
				$("#square1").stop().animate({opacity: 0}, 600, 'easeOutSine',function(){
					window.location.href="services.html";
				});
		});
});
$("#square3,#label3").click(function(){
		navhoverable=false;
		$("#labelsrow").stop().fadeOut(300,function(){
				$("#square6").stop().animate({opacity: 0}, 100, 'easeOutSine');
				$("#square5").stop().animate({opacity: 0}, 200, 'easeOutSine');
				$("#square4").stop().animate({opacity: 0}, 300, 'easeOutSine');
				$("#square3").stop().animate({opacity: 0}, 400, 'easeOutSine');
				$("#square2").stop().animate({opacity: 0}, 500, 'easeOutSine');
				$("#square1").stop().animate({opacity: 0}, 600, 'easeOutSine',function(){
					window.location.href="ethos.html";
				});
		});
});
$("#square4,#label4").click(function(){
		navhoverable=false;
		$("#labelsrow").stop().fadeOut(300,function(){
				$("#square6").stop().animate({opacity: 0}, 100, 'easeOutSine');
				$("#square5").stop().animate({opacity: 0}, 200, 'easeOutSine');
				$("#square4").stop().animate({opacity: 0}, 300, 'easeOutSine');
				$("#square3").stop().animate({opacity: 0}, 400, 'easeOutSine');
				$("#square2").stop().animate({opacity: 0}, 500, 'easeOutSine');
				$("#square1").stop().animate({opacity: 0}, 600, 'easeOutSine',function(){
					window.location.href="location.html";
				});
		});
});
$("#square5,#label5").click(function(){
		navhoverable=false;
		$("#labelsrow").stop().fadeOut(300,function(){
				$("#square6").stop().animate({opacity: 0}, 100, 'easeOutSine');
				$("#square5").stop().animate({opacity: 0}, 200, 'easeOutSine');
				$("#square4").stop().animate({opacity: 0}, 300, 'easeOutSine');
				$("#square3").stop().animate({opacity: 0}, 400, 'easeOutSine');
				$("#square2").stop().animate({opacity: 0}, 500, 'easeOutSine');
				$("#square1").stop().animate({opacity: 0}, 600, 'easeOutSine',function(){
					window.location.href="team.html";
				});
		});
});
$("#square6,#label6").click(function(){
		navhoverable=false;
		$("#labelsrow").stop().fadeOut(300,function(){
				$("#square6").stop().animate({opacity: 0}, 100, 'easeOutSine');
				$("#square5").stop().animate({opacity: 0}, 200, 'easeOutSine');
				$("#square4").stop().animate({opacity: 0}, 300, 'easeOutSine');
				$("#square3").stop().animate({opacity: 0}, 400, 'easeOutSine');
				$("#square2").stop().animate({opacity: 0}, 500, 'easeOutSine');
				$("#square1").stop().animate({opacity: 0}, 600, 'easeOutSine',function(){
					window.location.href="contact.html";
				});
		});
});

// --------------------------------------------------------------------
 });