$(document).ready(function() {
	
	// hide all contentlayer divs except the first one
	$('#content div#detectionLayer.contentLayer').css({'z-index':90}).show();
	$('#content div.contentLayer:gt(1)').hide();
	
	// setup the required css
	$('#content').css({'position':'relative','height':377,'width':484});  /* set width for non-gallery */ 
	$('#content div.contentLayer').css({'position':'absolute','left':0,'top':0,'right':0}); /* set up for show on top */
	$('#initialLayer .contentBlock').css({'cursor':'pointer'}); /* set cursors */
	$('#clickToGallery').css({'width':160,'height':50,'display':'block','position':'absolute','bottom':20,'right':30,'z-index':95});  /* to gallery button */	
	
	// set layer state to false so our first click will open it 
	var layerOpen = false;

	// on hover states for blocks to show content
	$('#detectionLayer .contentBlock:eq(0)').hover(function(){ 
		$('#content .contentLayer:gt(1)').hide();
		$('#content div#whoLayer').show(); 
		layerOpen = true;
	},function(){
		$('#content .contentLayer:gt(1)').hide();
		layerOpen = false;
	});
	$('#detectionLayer .contentBlock:eq(1)').hover(function(){
		$('#content .contentLayer:gt(1)').hide();
		$('#whatLayer').show();
		layerOpen = true;
	},function(){
		$('#content .contentLayer:gt(1)').hide();
		layerOpen = false;
	});
	$('#detectionLayer .contentBlock:eq(2)').hover(function(){
		$('#content .contentLayer:gt(1)').hide();						   
		$('#howLayer').show();
		layerOpen = true;
	},function(){
		$('#content .contentLayer:gt(1)').hide();
		layerOpen = false;
	});
	$('#detectionLayer .contentBlock:eq(3)').hover(function(){
		$('#content .contentLayer:gt(1)').hide();
		$('#takeLayer').show();
		layerOpen = true;
	},function(){
		$('#content .contentLayer:gt(1)').hide();
		layerOpen = false;
	});
	$('#detectionLayer .contentBlock:eq(4)').hover(function(){
		$('#content .contentLayer:gt(1)').hide();
		$('#aLayer').show();
		layerOpen = true;
	},function(){
		$('#content .contentLayer:gt(1)').hide();
		layerOpen = false;
	});
	$('#detectionLayer .contentBlock:eq(5)').hover(function(){
		$('#content .contentLayer:gt(1)').hide();
		$('#lookLayer').show();
		layerOpen = true;
	},function(){
		$('#content .contentLayer:gt(1)').hide();
		layerOpen = false;
	});


	//click state for blocks to show content
	$('#detectionLayer .contentBlock').click(function(){
		if(layerOpen == false)
		{
			$('#content .contentLayer:gt(1)').hide();
			$('#content .contentLayer:eq('+ ( $(this).index() + 2) +')').show();
			layerOpen = true;
		}else{
			$('#content .contentLayer:gt(1)').hide();
			layerOpen = false;
		}		
	});
	
	
	// keep look layer showing when hovering over the gallery button on the look layer
	// it would otherwise disapear as you would have moved off the look layer
	$('#clickToGallery').hover(function(){$('#lookLayer').show();});
	
	// Gallery button hovers
	$('#galleryArrow').hover(function(){$(this).attr('src','assets/images/lookArrowHover.png')},function(){$(this).attr('src','assets/images/lookArrow.png')});
	$('#back').hover(function(){$(this).attr('src','assets/images/backHover.png')},function(){$(this).attr('src','assets/images/back.png')});
	$('#next').hover(function(){$(this).attr('src','assets/images/nextHover.png')},function(){$(this).attr('src','assets/images/next.png')});
	$('#home').hover(function(){$(this).attr('src','assets/images/homeHover.png')},function(){$(this).attr('src','assets/images/home.png')});
	
	
	// click on gallery button
	$('#clickToGallery, #galleryArrow').click(function()
	{
		// setup gallery css
		$('#detectionLayer, #galleryArrow').hide();
		$('#content').css({'width':960}); // set content to required width
		$('#gallery').css({'position':'relative'}).show() // set gallery container ready to hold items
		$('#gallery .item').css({'position':'absolute','top':0,'left':0}).hide(); // set items on top of each other and hide
		$('#gallery .item:eq(0)').show(); // show first gallery item
		$('#next, #back, #home').css({'cursor':'pointer'}).show(); // show controls
		
		previous = false;
		next = true;
		currentImage = 0;
		
		return false;
	}); 
	
	// Gallery Next Button
	$('#next').click(function()
	{
		lastImageIndex = $('#gallery .item:visible').index();
		thisImageIndex = lastImageIndex + 1;
		nextImageIndex = thisImageIndex + 1;
		
		// if we are on the last image in the gallery then the image to show is the first
		if( lastImageIndex  == $('#gallery .item').length -1 )
		{
			thisImageIndex = 0;
		}
		
		$('#gallery .item:eq(' + lastImageIndex + ')').hide();
		$('#gallery .item:eq(' + thisImageIndex + ')').show();
			

		return false;
	});
	
	// gallery back button
	$('#back').click(function()
	{
		lastImageIndex = $('#gallery .item:visible').index();
		thisImageIndex = lastImageIndex - 1;
		nextImageIndex = thisImageIndex - 1;
		
		// if we are on the firsy image in the gallery then the image to show is the last
		if( lastImageIndex  == 0 )
		{
			thisImageIndex = $('#gallery .item').length - 1;
			
		}

		$('#gallery .item:eq(' + lastImageIndex + ')').hide();
		$('#gallery .item:eq(' + thisImageIndex + ')').show();

		return false;
	});

	// gallery Home button
	$('#home').click(function()
	{
		// hide all of the gallery bits
		$('#content').css({'width':484});
		$('#detectionLayer, #galleryArrow').show();
		$('#gallery, #home, #next, #back, #content .contentLayer:gt(1)').hide()
		
	});

});