/**
 * Switches header posters with animation.
 * 
 * Input for scrollable area:
 * <container class="poster-scroller" style="height:px">
 * 	<img src="any.jph" />
 * </container>
 * 
 * Input for buttons (this is a bit wierd):
 * <container class="poster-preview"> <-- this will get poster-active class on klick
 *	<a href="fullimage.jpg" class="poster-link"></a>
 * </container>
 * 
 * Specially for Colonnade
 */
(function($) {
	var activeClass = "poster-active";
	
	/**
	 *  default image
	 */
	var img;
	
	/**
	 *  poster stripe. contains list of images
	 */
	var posterStripe;

	/**
	 * cached height of poster container
	 */
	var height;
	
	/**
	 * This one adds image and scrolls div
	 */
	function nextImage(src, title) {
		var img = $('<img src="' + src + '" alt="' + title + '"/>');
				
		posterStripe.append(img);
		// setup scroll type here
		posterStripe.animate({
			top:	'-='+height+'px'
		}, 'slow');
	}
	
	/**
	 * Scroller
	 */
	$(document).ready(function () {
		// find a container and image
		var posterContainer = $('.poster-scroller');
		height = posterContainer.height();
		img = $('img', posterContainer);
		
		// fix poster container height and cache it	
		posterContainer.css('overflow', 'hidden');
		posterContainer.height(height);
		
		// create scrollable container and move image to it
		posterStripe = $('<div></div>');
		posterStripe.height(height * 2);
		posterStripe.css('position', 'relative');
		
		posterStripe.append(img);posterStripe.css('top', 0);
		posterContainer.append(posterStripe);
		
		
		// bind clicks
		$('.poster-preview').click(function(event) {
			var a = $('a.poster-link', this);
			
			// toggle active class
			$('.poster-preview').removeClass(activeClass);
			$(this).addClass(activeClass);
			
			// switch image
			nextImage(a.attr('href'),a.attr('title'));
			
			event.stopPropagation();
			return false;
		})
	});
	
})($);