$('html').addClass('js');

var Enhance = {};

Enhance.init = function(){
	console.log('Initial enhancements');
	Enhance.slideshow.init();
};
$(Enhance.init);

Enhance.slideshow = {
	
	count: 0,	
	
	/**
	 * Settings
	 */
	settings: {
		minTop: 30,
		minWidth: 535,
		maxWidth: 595,
		minOpacity: 0.3
	},
	
	/**
	 * Initialize
	 */
	init: function(){
		Enhance.slideshow.count = $('#screenshots li').length;
		
		// Click handlers
		$('#screenshots a').click(Enhance.slideshow.advance);
		
		// Set initial positions and widths
		$('#screenshots li').each(function(i, el){
			var count = Enhance.slideshow.count - 1;
			var top = Enhance.slideshow.settings.minTop * (i / count);
			var opacity = Enhance.slideshow.settings.minOpacity + ((1 - Enhance.slideshow.settings.minOpacity) * (i / count));
			var width = Enhance.slideshow.settings.minWidth + ((Enhance.slideshow.settings.maxWidth - Enhance.slideshow.settings.minWidth) * (i / count));
			var left = Math.floor((Enhance.slideshow.settings.maxWidth - width) / 2);
			$(el).css('top', top);
			$(el).css('left', left);
			$(el).css('opacity', opacity);
			$('img', el).width(width);
		});
	},
	
	/**
	 * Advance the "stack" forward
	 */
	advance: function(){
		// First, pop the top item off, then replace it at the bottom of the stack
		var topItem = $('#screenshots li').eq(Enhance.slideshow.count - 1);
		$('img', topItem).animate({
			width: Enhance.slideshow.settings.maxWidth + 100
		});
		topItem.animate({
			top: +50,
			opacity: 0,
			left: -50
		}, 'normal', 'linear', function(){
			$('img', topItem).width(Enhance.slideshow.settings.minWidth);
			topItem.css({opacity: 0, top: 0, left: Math.floor((Enhance.slideshow.settings.maxWidth - Enhance.slideshow.settings.minWidth) / 2)}).prependTo('#screenshots').animate({opacity: Enhance.slideshow.settings.minOpacity}, 'fast');
		});
		
		// Next, advance each other item
		$('#screenshots li').each(function(i, el){
			var count = Enhance.slideshow.count - 1;
			if (i < count) {
				i++; // This 'advances' everything
				// eh.. math.. I should abstract all of this
				var top = Enhance.slideshow.settings.minTop * (i / count);
				var opacity = Enhance.slideshow.settings.minOpacity + ((1 - Enhance.slideshow.settings.minOpacity) * (i / count));
				var width = Enhance.slideshow.settings.minWidth + ((Enhance.slideshow.settings.maxWidth - Enhance.slideshow.settings.minWidth) * (i / count));
				var left = Math.floor((Enhance.slideshow.settings.maxWidth - width) / 2);
				console.log(opacity);
				$('img', el).animate({width: width});
				$(el).animate({top: top, left: left, opacity: opacity});
			}
		});
		
		return false;
	}
		
};