/**
 * jQuery.vanillaSlide
 * Copyright (c) 2009 Christopher Pietsch - cpietsch(at)gmail(dot)com | http://chrispie.com
 * Dual licensed under MIT and GPL.
 * Date: 5/19/2009
 *
 */


;(function($){
	var settings;
	
	
	$.fn.vanillaSlider = function(callerSettings){
		settings = $.extend({
			duration: 1000,
			interval: 4000,
			easing: 'easeInOutExpo',
			preloadImg:'images/ani.gif',
			preloadFade:1000		
		}, callerSettings || {});
		
		
		var $box=this,
			$slider=$('.slider', $box),
			$container=$slider.children('ul').eq(0),
			width=$container.find('img').eq(0).width(),
			height=$container.find('img').eq(0).height(),
			size=settings.images.length;
			
			
		(function(proceed) {
			
			$slider.css({
				position:'relative',
				overflow:'hidden',
				width: width,
				height: height
			})
			
			$container.css({
				margin:0,
				padding:0,
				listStyleType:'none',
				width:(size+2)*width
			})
			
			$spinner = $('<img src="'+settings.preloadImg+'">').prependTo($slider).css({
				position:'absolute',
				zIndex:'100',
				padding:'10px',
				margin:'10px',
				background:'#FFF',
				opacity:0.6
			})

			var n_loaded = 0;
			function loop(i, img) {
				// for (i = 0; i < plan.length; i++) but with independent var i, img (for the closures)
				img.onload = function(e) {
					n_loaded++;
					if (n_loaded == settings.images.length)
						proceed();
				}
				img.src = settings.images[i].src;
				if (i + 1 < settings.images.length)
					loop(i + 1, new Image());
			}
			loop(0, new Image());

		})(function() {  // then proceed

			for (var i = 0; i < settings.images.length; ++i) {
				$('<li><a href="'+settings.images[i].href+'" title="'+settings.images[i].title+'"><img src="'+settings.images[i].src+'" alt="'+settings.images[i].alt+'"></li>').appendTo($container)
			}
			
			
			var	$panels=$container.children('li').css({
				position:'relative',
				'float':'left'
			}).eq(0).clone().appendTo($container).find('img').attr('src','images/Cafe_Wacker_Frk_2end.jpg').end().end();
			
			//$panels.eq(0).clone().appendTo($container);
			

		
			$spinner.fadeOut(settings.preloadFade).remove();
			
			var scrollOptions = {
					maxItems:size+2,
					items:'li',
					//offset:-230, //when scrolling to photo, stop 230 before reaching it (from the left)
					//start:0, //as we are centering it, start at the 2nd
					constant:false,
					duration:settings.duration,
					interval:settings.interval,
					prev:'img.prev',
					next:'img.next',
					step:1,
					axis:'x',
					force:true,
					//stop:true,
					//lock:false,
					cycle:true, //don't pull back once you reach the end
					easing:settings.easing, //use this easing equation for a funny effect
					jump: true //click on the images to scroll to them
				}
			$slider.serialScroll(scrollOptions);
			

				})	
	}
	
	
	
})(jQuery);