(function($) {
	var methods = {
		init : function(options) {
			return this.each(function() {
				var $this = $(this);
				var opts = $.extend($.fn.multiTeaser.defaults, options);
				if (opts.teasers.length < 2) {
					$('#' + $this.attr("id") + 'No0').show();
					return;
				}
				var status = {};
				$this.data("opts", opts);
				$this.data("status", status);
				status.teaser = new Array();
				status.teaserOptions = new Array();
				status.cssClass = opts.cssClass;
				status.currentTeaserNo = 0;
				status.loop = true;
				status.inTransition = false;
				status.currentTimeout = null;
				status.width = $this.width();
				status.height = $this.height();
				status.coveringMargin = parseInt(status.height/3.1); // margin nach rechts wegen den 18 grad
				status.id = $this.attr("id");
				$this.addClass(status.cssClass);
				$this.css("position", "relative");
				for (var i in opts.teasers) {
					var teaserOpts = opts.teasers[i];
					var teaserId = status.id + 'No' + i;
					$this.append('<div id="' + teaserId + '"></div>');
					status.teaser[i] = $('#'+teaserId).css("width", status.width).css("height", status.height).css("position", "absolute").hide();
					status.teaserOptions[i] = teaserOpts;
				}
				$this.append('<div id="' + status.id + 'Covering" class="' + status.cssClass + 'Covering"></div>');
				$this.append('<div id="' + status.id + 'LeftButton" class="' + status.cssClass + 'LeftButton"></div>');
				$this.append('<div id="' + status.id + 'RightButton" class="' + status.cssClass + 'RightButton"></div>');
				status.covering = $('#'+status.id+'Covering').css("width", status.width+status.coveringMargin).css("height", status.height).css("position", "absolute").hide();
				$('#'+status.id+'LeftButton').data("teaser", $this)[0].onclick = function() {
					var teaser = $(this).data("teaser");
					if (!teaser.data("status").inTransition) {
						teaser.data("status").loop = false;
						$(this).data("teaser").multiTeaser('transition', $(this).data("teaser").data("status").currentTeaserNo-1);
					}
				};
				$('#'+status.id+'RightButton').data("teaser", $this)[0].onclick = function() {
					var teaser = $(this).data("teaser");
					if (!teaser.data("status").inTransition) {
						teaser.data("status").loop = false;
						$(this).data("teaser").multiTeaser('transition', $(this).data("teaser").data("status").currentTeaserNo+1);
					}
				};
				var buttons = $this.append('<div id="' + (status.id + 'Buttons') + '" class="' + status.cssClass + 'Buttons"></div>').find('#' + status.id + 'Buttons');
				for (var i=opts.teasers.length-1 ; i>=0 ; i--) {
					var buttonId = status.id + 'Button' + i;
					var button = buttons.append('<div id="' + buttonId + '" class="' + status.cssClass + 'Button">'+(i*1+1)+'</div>').find('#'+buttonId);
					//var button = $('#'+buttonId).css("right", opts.teasers.length*23 - i*23 + 37);
					button.data("teaser", $this).data("no", i).bind('click', function() {
						var teaser = $(this).data("teaser");
						if (!teaser.data("status").inTransition) {
							teaser.data("status").loop = false;
							teaser.multiTeaser('transition', $(this).data("no"));
						}
					});
				}
				var playButton = buttons.append('<div id="' + status.id + 'PlayButton" class="' + status.cssClass + 'PlayButton">&nbsp;</div>').find('#'+status.id+'PlayButton');
				playButton.data("teaser", $this).bind('click', function() {
					var teaser = $(this).data("teaser");
					teaser.data("status").loop = !teaser.data("status").loop;
					setButtonClasses(teaser);
					if (!teaser.data("status").inTransition) {
						clearTimeout(teaser.data("status").currentTimeout);
						if (teaser.data("status").loop) teaser.multiTeaser('transition', teaser.data("status").currentTeaserNo+1);
					}
				});
				$this.multiTeaser('transition', 0);
		    });
		},
		transition : function(no) {
			return this.each(function() {
				var $this = $(this);
				var status = $this.data("status");
				no = parseInt(no);
				if (no >= status.teaser.length) no = 0;
				if (no < 0) no = status.teaser.length - 1;
				if (!status.teaser[no] || !status.teaserOptions[no]) return;
				status.inTransition = true;
				clearTimeout(status.currentTimeout);
				status.teaser[status.currentTeaserNo].fadeOut(1000, function() {
					getContent(status.teaser[no], status.teaserOptions[no].src, function() {
						status.covering.css("left", "-"+status.coveringMargin+"px").show();
						status.teaser[no].show();
						status.covering.delay(300).animate({left : status.width}, 1500, function() {
							status.covering.hide();
							status.inTransition = false;
							if (status.loop) {
								status.currentTimeout = setTimeout(function() { 
										$this.multiTeaser('transition', no+1); 
									}, status.teaserOptions[no].periode * 1000);
							}
						});
					});
				});
				status.currentTeaserNo = no;
				status.loop = status.loop && status.teaserOptions[no].periode > 0;
				setButtonClasses($this);
			});
		}
	};

	$.fn.multiTeaser = function(method) {
		// Method calling logic
		if ( methods[method] ) {
			return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
		} else if (typeof method === 'object' || !method ) {
			return methods.init.apply(this, arguments);
		} else {
			$.error('Method ' +  method + ' does not exist on jQuery.multiTeaser');
		}
	};

	function getContent(teaser, src, callback) {
		if(teaser.html() == "") {
			$.ajax({
				url : src + ".html",
				success : function(data) {
					teaser.html(data);
					teaser.ready(function() {
						callback();
					});
				},
				error : function() {
					teaser.html("Failed to load " + src);
					callback();					
				}
			});
		} else {
			callback();
		}
	}
	
	function setButtonClasses($obj) {
		var status = $obj.data("status");
		for (var i=0 ; i< status.teaser.length ; i++) {
			if (i == status.currentTeaserNo) {
				$('#' + status.id + 'Button' + i).addClass(status.cssClass + "ButtonActive");
			} else {
				$('#' + status.id + 'Button' + i).removeClass(status.cssClass + "ButtonActive");
			}
		}
		if (status.loop) {
			$('#'+status.id+'PlayButton').addClass(status.cssClass + "PlayButtonActive");
		} else {
			$('#'+status.id+'PlayButton').removeClass(status.cssClass + "PlayButtonActive");
		}
	}
	
	$.fn.multiTeaser.defaults = {
		cssClass: 'multiTeaser',
		teasers : [
		]
	};

})(jQuery);

function setAutoTransitionMode(mode) {
	//alert(mode);
}