$(document).ready(function() {
	
	// add escape key function
   	$(document).keyup(function(event){
	    if (event.keyCode == 27) {
	        $('.descr').hide();
			$('.main').hide();
			$('.thumb').fadeIn();
			$('.nav-button').fadeOut();  
			$('.main').removeClass('current'); 
	    }
	});
	
	// if image is clicked, go back to tiles
	$('.descr').click(function() {
		$('.descr').hide();
		$('.main').hide();
		$('.thumb').fadeIn();
		$('.nav-button').fadeOut();
		$('.main').removeClass('current'); 
	});
	
	$('.site-name').click(function() {
		$('.descr').hide();
		$('.main').hide();
		$('.thumb').fadeIn();
		$('.nav-button').fadeOut();  
		$('.main').removeClass('current');
		return false;
	});
	
	// add desired behavior to site name on homepage
	$('.descr, .thumb').css('cursor', 'pointer');

	
	// add index to every main image to help control nav behavior
	$('.main').each(function(index) {
		$(this).attr("id", index);
	});
	
	//add user prompts
	$('.descr').append("<div class='prompt'>click to home</div>")
	Cufon.replace('.prompt');
	        
	// initial activation from any thumbnail
	$(".thumb").click(function() {
		$('.thumb').hide();  
		
		// get nav and hover working
			$(this).siblings('.main').fadeIn().addClass('current').bind("mouseenter",function() {
			$(this).siblings('.descr').fadeIn().bind("mouseleave", function() {
				$(this).fadeOut();
			});     
		});
		
		// display the appropriate nav controls
		var pos = $('.current').attr('id');
		//alert(pos);
		if (pos == 0) {
			$('#next').fadeIn(); 
		} else if (pos == 15) {
			$('#prev').fadeIn();
		} else {
			$('.nav-button').fadeIn();
		}
	});                 
	
	// running nav next
	$('#next').click(function() {
		var pos = $('.current').attr('id');
		//alert(pos);
		var next = parseInt(pos) + 1;
		//alert(next);
		if (pos < 14) {
			$('#next').show();
			$('#prev').show();
			$('.current').removeClass('current').fadeOut();
			$('.main#' + next).fadeIn().addClass('current').bind("mouseenter",function() {
				$(this).siblings('.descr').fadeIn().bind("mouseleave", function() {
					$(this).fadeOut();
				});
			});      
		} else if (pos == 14) {
			 $('#next').hide();
				$('.current').removeClass('current').fadeOut();
				$('.main#' + next).fadeIn().addClass('current').bind("mouseenter",function() {
					$(this).siblings('.descr').fadeIn().bind("mouseleave", function() {
						$(this).fadeOut();
					});
				});
		}
		return false;
	});              
	
	// running nav prev
	$('#prev').click(function() {
		var pos = $('.current').attr('id');
		//alert(pos);
		var prev = parseInt(pos) - 1;
		//alert(next);
		if (pos > 1 ) {
			$('#prev').show();
			$('#next').show();
			$('.current').removeClass('current').fadeOut();
			$('.main#' + prev).fadeIn().addClass('current').bind("mouseenter",function() {
				$(this).siblings('.descr').fadeIn().bind("mouseleave", function() {
					$(this).fadeOut();
				});
			});      
		} else if (pos == 1) {
			 $('#prev').hide();
				$('.current').removeClass('current').fadeOut();
				$('.main#' + prev).fadeIn().addClass('current').bind("mouseenter",function() {
					$(this).siblings('.descr').fadeIn().bind("mouseleave", function() {
						$(this).fadeOut();
					});
				});
		}
		return false;
	});
});