// this is a wrapper function for jQuery, you're basically telling jQuery, "do this stuff when the page loads"
$(document).ready(function(){
	
	// add a hover event to each link
	$("#brand-one").hover()



	$('.brand-link').hover(
		function() {
			// get the id of the link that was hovered
			var linkId = $(this).attr('id');
			
			// create jQuery object of the new brand image div and store in variable
			var $brandImg = $('.' + linkId);

			// by testing this band's image's z-index, we can determine if it is currently on top, and "abort!"
			// if ($brandImg.css('z-index') == 10) return;

			// make sure new image is faded out.
			$brandImg.fadeTo(0, 0);
			// put it on top of the stack of images
			$brandImg.css('z-index', 10);
			// fade in - stop() stops all previous animations before adding the new one
			$brandImg.stop().fadeTo(500, 1, function() {
				// this is a callback function that fires after the fade is finished

				// we just want to change all the other images z-index so the test up above doesn't think they're currently on top
				// this jquery selector excludes the current image by selecting img[class!="linkId"]
				// for that reason, your class attib on each image must only contain that one class name, 
				// that is identical to the brand's link "id" attrib
				$('#brand-image-box img[class!="' + linkId + '"]').css('z-index', -1);
			});
		},
		function() {
			// this function happens when a brand link is exited by the mouse.
			// get the id of the link that was hovered
			var linkId = $(this).attr('id');
			
			// create jQuery object of the new brand image div and store in variable
			var $brandImg = $('.' + linkId);

			// put the default image almost at the top
			$('.default-image').css('z-index', 9);
			
			// fade out brand image
			$brandImg.stop().fadeTo(500, 0);
			
		}
	);

});