$(document).ready(function() {
	
	
	// navigation
	$("#nav li a#nav-contact").click(function() {
		
		$("#nav").addClass('contact');
		$("#nav").removeClass('about');
		
		$("#pagecontent #about").fadeOut('fast');
		$("#pagecontent #contact").fadeIn('slow');
	});
	
	$("#nav li a#nav-about").click(function() {
		
		$("#nav").addClass('about');
		$("#nav").removeClass('contact');
		
		$("#pagecontent #contact").fadeOut('fast');
		$("#pagecontent #about").fadeIn('slow');
	});
	

	//////////////////////////////////////////////////////

	// slideshow
		
	$('#shoeslideshow').cycle({ 				
		    fx:     'fade', 
		    speed:   600, 				
		    timeout: 5000, 
			prev:   '#prev', 
		    next:   '#next',
		    pause:   0
		 });
		
	// controller				

	// more complex "slide in/out with fade"
	
	$("#matte").hover(function() {
		$("#matte #controller").animate({
		    height: 'show',
		    opacity: 'show'
		}, '0.4');
			}, function() {
				$("#matte #controller").animate({
				    height: 'hide',
				    opacity: 'hide'
				}, '0.4');
	});
	

	
	/////////////////////////////////////////////////////
	// play/pause functionality and button visual switch

	$("#matte #controller a#pause").click(function() {
		$('#matte #shoeslideshow').cycle('pause');
		$("#matte #controller a#play").show();
		$("#matte #controller a#pause").hide();
	});
	
	$("#matte #controller a#play").click(function() {
		$('#matte #shoeslideshow').cycle('resume');
		$("#matte #controller a#play").hide();
		$("#matte #controller a#pause").show();
	});

	/////////////////////////////////////////////////////


	// next/previous "pause on click"
	
	$('#matte #controller #next').click(function() {
		$('#matte #shoeslideshow').cycle('pause');
		$("#matte #controller a#play").show();
		$("#matte #controller a#pause").hide();
	});

	$('#matte #controller #prev').click(function() {
		$('#matte #shoeslideshow').cycle('pause');
		$("#matte #controller a#play").show();
		$("#matte #controller a#pause").hide();
	});

});