/**
 * ScrollGalleryV
 *
 * @version 1.0
 * @requires jQuery 1.3
 * @author Nathan Walasek
 * @website http://www.walasekdesign.com
 *
 **************************
 * USAGE: Default Options *
 **************************
 
$(window).load(function() {
	$('.scroll_gallery').scrollGalleryV();
});

 *************************
 * USAGE: Custom Options *
 *************************
 
$(window).load(function() {
	$('.scroll_gallery').scrollGalleryV({
		height: '100%',			(px/%)		overall height of gallery
		padding: 10,			(px)		padding around each gallery item
		delay: 2000,			(ms)		delay between each animation
		speed: 1000,			(ms)		speed of animation effect
		enlargeItem: 1,			(int)		which item to enlarge
		titleSize: 12,			(px)		font size of title
		subtitleSize: 10		(px)		font size of subtitle
	});
});

**/

(function($){  
	$.fn.scrollGalleryV = function(options) {

		//default options
		var defaults = {
			height: '100%',
			padding: 10,
			delay: 2000,
			speed: 1000,
			enlargeItem: 1,
			titleSize: 12,
			subtitleSize: 10
		};

		//load custom options
		var options = $.extend(defaults, options);
		
		//set up item variables
		var gallery = this;
		var items = this.children('li');
		var enlarge = options.enlargeItem-1;

		//set text styles
		$(gallery).find('strong').css({
			'display': 'block',
			'font-size': options.titleSize
		});
		$(gallery).find('em').css({
			'display': 'block',
			'font-size': options.subtitleSize
		});
		
		//find widest image, set all boxes to same width
		var max_width = 0;
		items.each(function(index, box) {  
			//image width
			var img_width = $(box).find('img').width();
			if(img_width > max_width) {
				max_width = img_width;	
			}
		});
		var box_width = max_width + 2*options.padding;
		items.css({
			'width': box_width,
			'padding': options.padding+'px 0',
			'display': 'block',
			'text-align': 'center'
		});
		
		//find tallest box, set wrapper to tallest height
		var max_height = 0;
		items.each(function(index, box) {  
			//box height (including text)
			var img_height = $(box).height();
			if(img_height > max_height) {
				max_height = img_height;	
			}
		});
		items.css('height', max_height);
		
		var box_height = max_height + 2*options.padding;
		
		//pre-size images, set styles
		items.each(function(index, box) {
			var box_img = $(box).find('img');
			box_img.removeAttr('width');
			box_img.removeAttr('height');
			if(index == enlarge) {
				//leave starting image full-size
				box_img.animate({ height: '-=0' }, 0).css({
					'margin': '0 auto',
					'display': 'block'
				});
			} else {
				//reduce all other image sizes
				box_img.animate({ height: '-=20' }, 0).css({
					'margin': '0 auto',
					'display': 'block'
				});
			}
		});

		//wrap gallery, set gallery width
		var gallery_wrap = $('<div class="scroll_gallery_wrapper" />').css({
			'width': box_width,
			'height': options.height,
			'overflow': 'hidden'
		});
		gallery.wrap(gallery_wrap);
		gallery.css('height', (items.length*(max_height + 2*options.padding)));
		
		//perform the animation
		var moveItem = 0;
		var animItem = enlarge;
		var nextItem = options.enlargeItem;
		var slideIt = function() {
			$(items[animItem]).find('img').animate({ height: '-=20' }, options.speed);
			$(items[nextItem]).find('img').animate({ height: '+=20' }, options.speed);
			
			$(items[moveItem]).animate({ marginTop: -box_height }, options.speed, function() {
				//detach current item
				var move_this = $(items[moveItem]).detach();
				//reset margin/width
				var move_this_img = move_this.find('img');
				//append to end of gallery
				move_this.appendTo(gallery).css('marginTop', 0);
				
				//find next item
				if(moveItem + 1 < items.length) {
					moveItem++;
				} else {
					moveItem = 0;
				}
				if(animItem + 1 < items.length) {
					animItem++;
				} else {
					animItem = 0;
				}
				if(nextItem + 1 < items.length) {
					nextItem++;
				} else {
					nextItem = 0;
				}
			});
		}

		var startAnimation = function() {
			animationV = window.setInterval(slideIt, options.delay+options.speed);
		}
		var stopAnimation = function() {
			clearInterval(animationV);
		}
		
		$(gallery).hover(
			function() {
				//mouseover
				stopAnimation();
			},
			function() {
				//mouseout
				startAnimation();
			}
		);
		//start animation on page load
		startAnimation();
	}
})(jQuery);