// --------------------------------------------------------------------
// PRELOAD NAV IMAGES http://jquery-howto.blogspot.com/2009/02/preload-images-with-jquery.html
// --------------------------------------------------------------------
var image1 = $('<img />').attr('src', 'images/stephen_hoper_media_design-over.gif'); // WHY IS THIS PRELOADED ?!?!
var image2 = $('<img />').attr('src', 'images/graphic_design-over.gif');
var image3 = $('<img />').attr('src', 'images/web_design-over.gif');
var image4 = $('<img />').attr('src', 'images/music_for_film_and_tv-over.gif');
var image5 = $('<img />').attr('src', 'images/client_testimonials-over.gif');
var image6 = $('<img />').attr('src', 'images/contact_me-over.gif');
var image7 = $('<img />').attr('src', 'images/shmd_bg_2400h.jpg');



// skip to end of animations when Escape key is pressed
$(document).keyup(function(event){
    if (event.keyCode == 27) {
        //alert('escaped! skip to end of animations');
		$("#lm1,#lm2,#lm3,#lm4,#lm5,#lm6,#leftcontent .heading,#leftcontent .bodytext,#rightcontent .heading,#rightcontent .bodytext,#headerstrip,#menutable,#leftcontent,#rightcontent").stop(true,true);
    }
});
// NB this companion code would dispose of 'skip to end of animation when escape key is pressed'
// BUT I DON'T KNOW WHERE TO PUT IT
// LUCKILY IT IS OTIOSE
//							$(document).unbind('keyup');




$(document).ready(function(){
// --------------------------------------------------------------------
// ON LOAD
// --------------------------------------------------------------------

//FACT : fadeIn WILL fade in something which is display:none
//FACT : you can't use animate() to show a display:none item - it will NEVER appear because animate() doesn't remove display:none

// set opacities to 0
$("#lm1,#lm2,#lm3,#lm4,#lm5,#lm6,#leftcontent .heading,#leftcontent .bodytext,#rightcontent .heading,#rightcontent .bodytext").animate({opacity: 0}, 0, function(){

// fadein headerstrip (which was display:none), but all child elements are opacity 0
$("#headerstrip").fadeIn(200, function(){

// animateshow each element of the headerstrip
$("#lm1").animate({opacity: 1}, 100, 'easeInSine', function(){
$("#lm2").animate({opacity: 1}, 100, 'easeInSine', function(){
$("#lm3").animate({opacity: 1}, 100, 'easeInSine', function(){
$("#lm4").animate({opacity: 1}, 100, 'easeInSine', function(){
$("#lm5").animate({opacity: 1}, 100, 'easeInSine', function(){
$("#lm6").animate({opacity: 1}, 100, 'easeInSine', function(){

// fade in grey strip under menu
$("#menutable").animate({backgroundColor:'#DDD'},300, 'easeInSine', function(){

// fadein leftcontent BG (which was display:none)
$("#leftcontent").fadeIn(200, function(){

// fadein rightcontent BG (which was display:none)
$("#rightcontent").fadeIn(200, function(){

// fadein leftcontent CONTENT (which was display:none)
$("#leftcontent .heading").animate({opacity: 1}, 200, 'easeInSine', function(){
$("#leftcontent .bodytext").animate({opacity: 1}, 200, 'easeInSine', function(){

// fadein rightcontent CONTENT (which was display:none)
$("#rightcontent .heading").animate({opacity: 1}, 200, 'easeInSine', function(){
$("#rightcontent .bodytext").animate({opacity: 1}, 200, 'easeInSine', function(){



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


// --------------------------------------------------------------------
// ***NAV FUNCTIONALITY***
// --------------------------------------------------------------------

// MOUSEOVER FADING OF REGULAR HYPERLINKS
      $('.fadelink').hover( 
        function () {
          $(this).stop().animate({color:'#6699FF'}, {queue:false,duration:200});
        }, function () { 
          $(this).stop().animate({color:'#000'}, {queue:false,duration:600});
        }); 
// using info found at http://www.theruntime.com/blogs/thomasswilliams/archive/2008/11/24/jquery-hover-fading-on-mouse-over-and-mouse-out-without.aspx
// plus I added the stop() to stop it from sticking in the hover state
							// *******OR DOES THE queue:false DO THE SAME AS stop() ???**********


// MOUSEOVER FADING OF BG OF MENU IMAGES
$("#lm2,#lm3,#lm4,#lm5,#lm6").hover( 
        function () {
          $(this).stop().animate({backgroundColor:'#69F'}, {queue:false,duration:200});
        }, function () { 
          $(this).stop().animate({backgroundColor:'#DDD'}, {queue:false,duration:600});
        }); 

// MOUSEOVER IMAGE SWAP
$("#lm2").hover( 
        function () {
          $(this).attr('src', 'images/graphic_design-over.gif'); return true;
        }, function () { 
          $(this).attr('src', 'images/graphic_design.gif'); return true;
        }); 
$("#lm3").hover( 
        function () {
          $(this).attr('src', 'images/web_design-over.gif'); return true;
        }, function () { 
          $(this).attr('src', 'images/web_design.gif'); return true;
        }); 
$("#lm4").hover( 
        function () {
          $(this).attr('src', 'images/music_for_film_and_tv-over.gif'); return true;
        }, function () { 
          $(this).attr('src', 'images/music_for_film_and_tv.gif'); return true;
        }); 
$("#lm5").hover( 
        function () {
          $(this).attr('src', 'images/client_testimonials-over.gif'); return true;
        }, function () { 
          $(this).attr('src', 'images/client_testimonials.gif'); return true;
        }); 
$("#lm6").hover( 
        function () {
          $(this).attr('src', 'images/contact_me-over.gif'); return true;
        }, function () { 
          $(this).attr('src', 'images/contact_me.gif'); return true;
        }); 
$("#sendbutton").hover( 
        function () {
          $(this).attr('src', 'images/send_button-over.gif'); return true;
        }, function () { 
          $(this).attr('src', 'images/send_button.gif'); return true;
        }); 

// --------------------------------------------------------------------
// ***OTHER FUNCTIONALITY***
// --------------------------------------------------------------------

// fadeouts on window unload - alert works but animation doesn't, I'll need to do something more Waffle-like
//$(window).unload(
//	function(){
//		alert('bye');
//		$("#container").animate({opacity: 0}, 1000);
//});

// --------------------------------------------------------------------
}); // end JQ document ready