// --------------------------------------------------------------------
// PRELOAD FIRST BG IMAGE AND NAV HOVER IMAGES http://jquery-howto.blogspot.com/2009/02/preload-images-with-jquery.html
// --------------------------------------------------------------------

//var image1 = $('<img />').attr('src', 'images/0069_2_bg.jpg'); // surely this can be taken care of elsewhere ? eg by the HTML loading before the document ready fires, and or by preloading included in the cycling script ? anyway, each page uses a different initial bg image so no point in always preloading 0069_2

var image1 = $('<img />').attr('src', 'images/personalchefcapetown.gif');
var image2 = $('<img />').attr('src', 'images/services.gif');
var image3 = $('<img />').attr('src', 'images/blog.gif');
var image4 = $('<img />').attr('src', 'images/menus.gif');
var image5 = $('<img />').attr('src', 'images/photos.gif');
var image6 = $('<img />').attr('src', 'images/contact.gif');

// --------------------------------------------------------------------

$(document).ready(function(){

// --------------------------------------------------------------------
// ON LOAD
// NB fadeIn WILL display a DIV which was display:none, but animate WON'T
// --------------------------------------------------------------------

// PREP NAV HOVERS
	// set nav button opacities to 0 (buttons must be transparent until hover)
$("#nav1,#nav2,#nav3,#nav4,#nav5,#nav6").animate({opacity: 0}, 0, function(){

// DISPLAY BGSLIDE+NAV
	// fadein bgslide+nav (which was display:none)
		$("#bgslide,#nav").fadeIn(0);

// DISPLAY FOREGROUND
	// fadein foreground (which was display:none) but nav hovers will still be invisible due to opacity 0
			$("#foreground").fadeIn(2000);

// START BGSLIDE SLIDESHOW
	// ideally it needs to preload #1, fadein #1, preload #2, xfade#1>#2, preload #3, xfade#2>#3, etc
	// then start background slideshow, using cycle lite from http://malsup.com/jquery/cycle
				$("#bgslide").cycle({timeout:10000, speed:3000});
		// instead I could try CrossSlide http://www.gruppo4.com/~tobia/cross-slide.shtml which is pretty similar
		// or I could try ASlideshow http://slideshow.hohli.com but it's a sledgehammer

});


// PREP THE fadelink CLASS SO IT HOVERS PROPERLY
$('.fadelink').css('color','white');
// PREP THE fadelinkblack CLASS SO IT HOVERS PROPERLY
$('.fadelinkblack').css('color','black');

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


// MOUSEOVER FADING OF REGULAR HYPERLINKS
      $('.fadelink').hover( 
        function () {
          $(this).animate({color:'#FCB514'}, {queue:false,duration:200});
        }, function () { 
          $(this).animate({color:'#FFFFFF'}, {queue:false,duration:600});
        }); 
      $('.fadelinkblack').hover( 
        function () {
          $(this).animate({color:'#FCB514'}, {queue:false,duration:200});
        }, function () { 
          $(this).animate({color:'#000000'}, {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




// MOUSEOVER FADING-IN/OUT OF NAV APART FROM nav2
$("#nav1,#nav3,#nav4,#nav5,#nav6").hover( 
        function () {
			$("#mysubmenu").fadeOut(600); // ensure submenu is hidden when any other button is shown
			$(this).stop().animate({opacity: 1}, 200);
        }, function () { 
			$(this).stop().animate({opacity: 0}, 600);
        }); 


// MY mysubmenu FUNCTIONALITY

$("#nav2").hover(
	function() {
			$(this).stop().animate({opacity: 1}, 200);
			$("#mysubmenu").fadeIn(200); // show mysubmenu when hovering nav2
	}, function() {
			$(this).stop().animate({opacity: 0}, 600);
});
$("#mysubmenu").hover(
	function() {
			$("#nav2").stop().animate({opacity: 1}, 0); // show nav2 when hovering mysubmenu
	}, function() {
			$(this).fadeOut(600);
			$("#nav2").stop().animate({opacity: 0}, 600);
});



// hover behaviour for Send button

$("#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***
// --------------------------------------------------------------------



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