//DISJOINTED ROLLOVERS USING BUTTON NAVIGATION AND IMAGES FADING IN AND OUT

$(document).ready(function()
{
//disjointed rollover function starting point
$("div#headerButtons div").hover(function(){								  
	//make a variable and assign the hovered id to it
	var elid = $(this).attr('id');
	//hide the image currently there
	$("div#headerImages div").hide();
	//fade in the image with the same id as the selected buttom
	$("div#headerImages div#" + elid + "").fadeIn("slow");
	

	},
	
	
	function () {
	// hover requires 2 functions - only need one today
	}
	
	
	);

}

);








//// variation 
//
//    $(document).ready(function(){
//
//        // Hide all large images except the first one
//        $('div#headerImages div').hide().filter(':first').show();
//
//        // Select all thumb links
//        $('div#headerButtons div').hover(function(event) {
//
//                // Hide all large images except for the one with the same hash as our thumb link
//                $('div#headerImages div').hide().filter(this.hash).show();
//            },
//            function () {} // Because the hover method has a mouseout state we need to define too
//        );
//    });