$(document).ready(function() {
	// Store variables
	var $content = $("#content");
	var $slideshow = $("#slideshow");
	var $slideshowItems = $slideshow.children("li");
	var $nav = $("#slideshow-nav");
	var $navItems = $nav.children("li");
	var $slideshowInfos = $("#slideshow-info").children("li");
	
	// Add -last- class to last paragraph of info
	$slideshowInfos.children("div").find("p:last-child").addClass("last-para");
	
	var preloadImages = [];
	
	$slideshowItems.children("img").each(function() {
		var src = $(this).attr("src");
		preloadImages.push(src);
	});
	
	// Set up cycle
	$slideshow.cycle({
		fx: 'scrollLeft',
		timeout: 5000,
		speed: 200,
		before: function(){
			$(this).parent().find('li.current').removeClass();	     
		},
		after: function(){
			$(this).addClass('current');
		}
	});
	
	$slideshowItems.hoverIntent(function() {
		var $this = $(this);
		
		// Show info for the current slide
		var $currentInfo = $slideshowInfos.filter("'." + $this.data("category") + "'");
		$slideshowInfos.not($currentInfo).hide();
		$currentInfo.show();
	}, function() {
		
	});
	
	$content.hoverIntent(function() {
		
		// Pause the slideshow
		$slideshow.cycle("pause");
		
		// Get the current slideshow item and it's associated navigation item
		var $currentItem = $slideshowItems.filter(".current");
		$currentItem.children("img").not(".over").fadeOut();
		var currentSection = $currentItem.data("category");
		var $activeNavItem = $navItems.filter("'." + currentSection + "'");
		
		// Set active class on the current nav item
		$navItems.not($activeNavItem).removeClass("active");
		$activeNavItem.addClass("active");
		
		// Size down the slideshow and show the navigation
		$slideshow.animate({
			height: 354
		}, 200);
		$nav.animate({
			height: 58
		}, 200);
		
	}, function() {
		
		// Fade in the over(large) image, restore the slideshow to full height, hide the nav and resume cycle
		$slideshowItems.filter(".current").children("img").not(".over").fadeIn(function() {
			$slideshow.animate({
				height: 394
			}, 200, function() {
				$slideshow.cycle("resume");
			});
			$nav.animate({
				height: 8
			}, 200);
		});
		
		// Hide infos
		$slideshowInfos.delay(500).hide();
		
		// Restore all images to default
		$slideshowItems.children("img").not(".over").show();
	});
	
	$navItems.hoverIntent(function() {
		var $this = $(this);
		
		// Handle hover state
		$this.addClass("active");
		$navItems.not($this).removeClass("active");
		
		// Change slide
		var showSlide = $this.children("a").attr("href").replace("#","");
		var $showSlide = $slideshowItems.filter("[data-category='" + showSlide +"']").eq(0);
		$showSlide.children("img").not(".over").hide();
		var showSlideIndex = $slideshowItems.index($showSlide);
		$slideshow.cycle(showSlideIndex);
		
		var $currentInfo = $slideshowInfos.filter("'." + showSlide + "'");
		$slideshowInfos.not($currentInfo).hide();
		$currentInfo.show();
		
	}, function() {
		
	});
	
	$navItems.click(function(e) {
		e.preventDefault();
	});
	
	function preload(images, success) {
		var promises = [];
		for (i = 0; i < images.length; i++) {
			(function(url, promise) {
				var img = new Image();
				img = new Image();
				img.onload = function() {
				  promise.resolve();
				};
				img.src = url;
			})(images[i], promises[i] = $.Deferred());
		}
		
		$.when.apply($, promises).done(function() {
			success();
		});
	}
});