(function($)
{
	$.fn.onStage = function(options)
    {
		$.fn.onStage.defaults = {
			auto : false, // Autoplay?
			speed : 5000, // Speed in ms
			duration : 1000, // effect duration
			effect: "fade", //e.g. slide, fall, fade
			preview: true,
			controls: true,
			btnNext: ">",
			btnPrev: "<",
			btnPlay: "Play",
			btnPause: "Pause",
			infinity: true,
			loop: true,
			scenesOnStage: 1,
			move: 1
		};
		
		var opts = $.extend({}, $.fn.onStage.defaults, options);
		
		
		return this.each(function()
		{
			var $this = $(this);
			var onStagInterval = '';
			
			$this.addClass("onStage").addClass(opts.effect);
				
			var $first = $this.find(".scene:first").addClass("first");
			var $last = $this.find(".scene:last").addClass("last");
			var $stage = $this.find(".stage");
			var $preview = $this.find(".preview");
			var $controls = $this.find(".controls").first();
			
			build();
			
			var sceneCount = $this.find(".scene").length;
			var sceneWidth = $this.find(".scene.first").width();
			var sceneHeight = $this.find(".scene.first").height();
			
			init();
			createControls();
			
			if(opts.auto){
				play();
			}
			function build(){
				if($stage.length == 0){
					var stage = jQuery('<div class="stage"></div>');
					$this.append(stage);
					$stage = $(stage);
					$stage.append($this.find('.scene'));
					$stage.appendTo($this);
				}
				
				$this.find(".scene").each(function(){
					jQuery(this).addClass("scene" + jQuery(this).index());
				});
				
				if(opts.infinity){
					$stage.find(".scene:lt("+ opts.scenesOnStage +")").each(function(){
						$(this).clone().addClass('clone').appendTo($stage);
					});
				}
				
//				
//				var stageContainer = document.createElement('div');
//				stageContainer.setAttribute('class', 'stageContainer');
//				$this.append(stageContainer);
//				$stageContainer = $(stageContainer);
//				
//				$stageContainer.append($stage.clone().removeClass("stage").addClass("prestage"));
//				$stageContainer.append($stage);
//				$stageContainer.append($stage.clone().removeClass("stage").addClass("nextstage"));
				
				//set position for animation with css-transition
				$stage.css('left', '0px');
				//set width/height for each scene
				$this.find('.scene').each(function(){
					$(this).css({
						width: Math.round($this.width()/opts.scenesOnStage),
						height: $this.height()
					})
				});
				//build controls
				if($controls.length == 0 && opts.controls){
					var controls = document.createElement('div');
					controls.setAttribute('class','controls');
					$this.append(controls);
					$controls = $(controls);
				}
				var $prev = $controls.find(".prev");
				if($prev.length == 0 && opts.controls && opts.btnPrev != ""){
					var prev = document.createElement('span');
					prev.setAttribute('class','prev');
					prev.appendChild(document.createTextNode(opts.btnPrev));
					$controls.append(prev);
				}
				var $play = $controls.find(".play");
				if($play.length == 0 && opts.controls && opts.btnPlay != ""){
					var play = document.createElement('span');
					play.setAttribute('class','play');
					play.appendChild(document.createTextNode(opts.btnPlay));
					$controls.append(play);
				}
				var $pause = $controls.find(".pause");
				if($pause.length == 0 && opts.controls && opts.btnPause != ""){
					var pause = document.createElement('span');
					pause.setAttribute('class','pause');
					pause.appendChild(document.createTextNode(opts.btnPause));
					$controls.append(pause);
				}
				var $next = $controls.find(".next");
				if($next.length == 0 && opts.controls && opts.btnNext != ""){
					var next = document.createElement('span');
					next.setAttribute('class','next');
					next.appendChild(document.createTextNode(opts.btnNext));
					$controls.append(next);
				}
				//build preview
				if($preview.length == 0){
					var preview = document.createElement('ul');
					preview.setAttribute('class', 'preview');
					if(!opts.preview)
						preview.setAttribute('style', 'display: none;');
					for (var i = 0; i <= $this.find('.scene:not(.clone)').length / opts.move-opts.scenesOnStage; i++){
						preview.appendChild(document.createElement('li'));
					}
					$this.append(preview);
					$preview = $(preview);
				}
				$this.find(".preview LI:first").addClass("first");
				$this.find(".preview LI:last").addClass("last");
			}
			
			function init(){
				
				switch(opts.effect){					
				
					case "slide":
						$stage.width( sceneWidth * sceneCount );
						$stage.height( sceneHeight );
						break;
						
					case "fall":
						$stage.height( sceneHeight * sceneCount );
						$stage.css("top", (-1) * (sceneCount-1) * sceneHeight);
						break;
						
					case "bullet":
					
						break;
					
					default:
						$this.find(".scene").hide();
				}
				
				$first.show().addClass("active");
				$this.find("UL:first LI:first").addClass("active");
			}
			
			function createControls(){
				$("#rezepte_controls .next").click(next);
				$("#rezepte_controls .prev").click(prev);
				$this.find(".play").click(play);
				$this.find(".pause").click(pause);
				
				$this.find("UL.preview LI").click(function(){
					show(jQuery(this).index());
				});
			}
			
			function show( scene ){
				pause();
				if(opts.auto){
					play();
				}
				
				if(scene == "first"){
					$this.find(".scene.active").removeClass("active");
					$this.find(".scene:eq(0):not(.clone)").addClass("active");
					$stage.css("left", "0px");
				}else if(scene == "last"){
					$this.find(".scene.active").removeClass("active");
					$this.find(".scene.first.clone").addClass("active");
					$stage.css("left", (-1) * $this.find(".scene.first.clone").position().left+"px");
				}else{
								
					var $old = $this.find(".scene.active");
					var $next = $this.find(".scene:eq("+scene+")");
					var $oldlabel = $this.find("UL:first LI.active");
					var $label = $this.find("UL:first LI:eq("+scene+")");
					var oldPosition = $old.position();
					var nextPosition = $next.position();
					switch(opts.effect){
					
						case "slide":
							$stage.animate({
									left: '+=' + (oldPosition.left - nextPosition.left)
								}, opts.duration, function() {
									
								}
							);
							break;
							
						case "fall":
						
							$stage.animate({
									top: '+=' + (nextPosition.top - oldPosition.top)
								}, opts.duration, function() {
									
								}
							);
							break;
						
						default:
							$old.fadeOut(opts.duration);
							$next.fadeIn(opts.duration);
					}
					$old.removeClass("active");
					$next.addClass("active");
					$oldlabel.removeClass("active");
					$label.addClass("active");
				}
			}
			
			function next() {
				$active = $stage.find('.active');
				if($active.is(".first.clone")){
					show("first");
					$active = $stage.find('.active');
				}
				
				show($active.index()+opts.move);
			}
			
			function prev() {
				$active = $stage.find('.active');
				if($active.is(".first:not(.clone)")){
					show("last");
					$active = $stage.find('.active');
				}
				
				show($active.index()-opts.move);
			}
			
			function play() { onStagInterval = window.setInterval(next, opts.speed); }
			
			function pause() { window.clearInterval(onStagInterval); }
		});
    };
})(jQuery);