/*
 * PHOTO VIEWER
 * Dominic Kelly
 * www.bloommedia.co.uk
 */
 
$(document).ready(function(){

		// set the default category and product on page load
				
		$catagory = $("#transparent-box").children()[0].id; // get id of the first ul of products			
			
		$product = $("#firstProduct").children()[0].innerHTML; // get id of the first ul of products
						
		$('#photo-viewer').css("background-image", "url(images/brett/redesign/photo-viewer/" + $catagory + "-" + $product.toLowerCase() + ".jpg)"); 

		// add click event to horizontal menu to toggle to buttons
		
        $("#cat-nav-bar ul li a").click(function(){
					
			// first, remove all selected classes
			
			$("#cat-nav-bar").find("a").removeClass('nav-selected');
			
			// now, add the selected class to the button clicked
			
			$(this).addClass('nav-selected'); // add selected class 
			
			// hide the vertical menu associated with the current category
			
			$("#photo-viewer").find("#" + $catagory).hide();
			
			// category has changed, remember it for later. also, strip any spaces using a reg ex and convert to lowercase
			
			$catagory = $(this).text().replace(/ /g,'').toLowerCase();
			
			// also remove commas

			$catagory = $catagory.replace(/\,/g,'').toLowerCase();				

			//show the vertical menu associated with the new category 			
			
			$("#photo-viewer").find("#" + $catagory).fadeIn('fast');
						
			// replace ampersand with ‘and’
			
			//$product = $product.replace(/\&/g,'and');	
			
			$product = $(".transparent-box ul#"+ $catagory +" li:first").text().replace(/ /g,'').replace(/\&/g,'and').toLowerCase();
						
			$('#photo-viewer').css("background-image", "url(images/brett/redesign/photo-viewer/" + $catagory + "-" + $product.toLowerCase() + ".jpg)"); 
									
			return false;
			
        });	

		// add hover event to vertical menu to switch the photos.
		
		// ‘handler has no properties’ error shows if you’re setting up a hover event and don’t pass one of the arguments.
		
		// if you don’t have code to fire when the cursor leaves an element, you must pass an empty function or you’ll get this error.
		
		$(".transparent-box ul li a").hover(function() {
		
			changePhotos($(this)); // pass anchor object
			
			}, function() {
			
			// nothing to see here.
			
		});

		function changePhotos(obj){
		
			// remember which catagory is currently selected. also, strip any spaces using a reg ex
			
			$product = obj.text().replace(/ /g,'').toLowerCase();

			// replace ampersand with ‘and’
			
			$product = $product.replace(/\&/g,'and');				
					
			// change background image. the filename convention is category + product .jpg		
			
			$('#photo-viewer').css("background-image", "url(images/brett/redesign/photo-viewer/" + $catagory.toLowerCase() + "-" + $product.toLowerCase() + ".jpg)");
		
		}		
			
});