var teaserWidth = 50;
var inUse = false;
var inUse2;
var initSwitchTeaser = function() {
	var leftSwitch = $$('.left_switch');
	var rightSwitch = $$('.right_switch');
	var teaserContainer = $$('.teaser_container');
	leftSwitch.each(function(ele, index) {
		ele.setStyle({'opacity' : '0.5'});
		ele.setStyle({'visibility' : 'hidden'});
        Event.observe(ele, 'click', handleLeftSwitch);
        Event.observe(ele, 'mouseover', handleArrow);
	});
	rightSwitch.each(function(ele, index) {
		ele.setStyle({'opacity' : '0.5'});
		Event.observe(ele, 'click', handleRightSwitch);
		Event.observe(ele, 'mouseover', handleArrow);
	});
	teaserContainer.each(function(ele, index) {
		Event.observe(ele, 'mouseover', handleArrowAll);
	});
};

var initSwitchTeaserWidth = function() {
	var test = $$('.teaser_container');
	var height = 100;
	test.each(
	    function(ele, index) {
	    	height = 0;
	        var width = ele.getWidth() - 50;
	        var allTeaser = ele.immediateDescendants();
	        var teaser = getAllActiv(allTeaser);
	        var teaserCount = teaser.length;
	        teaserWidth = Math.floor(width/teaserCount) - 12;
	        allTeaser.each(
	        	function(value, index) {
	        		if(teaserCount > 1) {
		        		value.setStyle({'width' : teaserWidth + 'px'});
		        		value.addClassName('left_float');
	        		}
	        		var testHeight = value.getHeight();
	        		if (height < testHeight) {
	        			height = testHeight;
	        		}
	        	}
	        );
	        ele.setStyle({'height' : height + 'px'});
		arrowTop = Math.floor((height/2)-24);
		ele.previous().setStyle({'top':arrowTop+'px'});
		ele.next().setStyle({'top':arrowTop+'px'});
	    }
	);
	
};

var handleRightSwitch = function(event){
	var teasetContainer = this.previousSiblings();
	var teaser = teasetContainer[0].immediateDescendants();
	var allActive = getAllActiv(teaser);
	var activeCount = allActive.length - 1;
	var nextToDisplay = allActive[activeCount].nextSiblings();
	if(teasetContainer[1].getStyle('visibility') == 'hidden') {
		teasetContainer[1].setStyle({'visibility' : 'visible'});
	}
	if(nextToDisplay[1] ) {
		if(!nextToDisplay[2]){
			var ele = this;
			window.setTimeout(function() {
				ele.setStyle({'visibility' : 'hidden'});
			}, 250);
		}
		displayToogle(allActive[0], nextToDisplay[0]);
	}
};

var handleLeftSwitch = function(event){
	var teasetContainer = this.nextSiblings();
	var teaser = teasetContainer[0].immediateDescendants();
	var allActive = getAllActiv(teaser);
	var activeCount = allActive.length - 1;
	var nextToDisplay = allActive[0].previousSiblings();
	if(teasetContainer[1].getStyle('visibility') == 'hidden') {
		teasetContainer[1].setStyle({'visibility' : 'visible'});
	}
	if(nextToDisplay[0]) {
		//inUse = true;
		if(!nextToDisplay[1]){
			var ele = this;
			window.setTimeout(function() {
				ele.setStyle({'visibility' : 'hidden'});
			}, 250);
		}
		displayToogle(allActive[activeCount], nextToDisplay[0]);
	}
};

var displayToogle = function(hideEle,displayEle) {
	var eleWidth = hideEle.getWidth();
	Effect.Fade(hideEle.id, { duration: 0.3, queue : {position:'end', scope:'queue1'} });
	Effect.Appear(displayEle.id, { duration: 0.3, queue : {position:'end', scope:'queue1'} } );
};

var handleArrow = function(event) {
	this.morph('opacity:1.0;', {duration : 0.3});
};

var handleArrowAll = function(event) {
	var leftSwitch = $$('.left_switch');
	var rightSwitch = $$('.right_switch');
	leftSwitch.each(function(ele, index) {
		ele.morph('opacity:0.5;', {duration : 0.3});
	});
	rightSwitch.each(function(ele, index) {
		ele.morph('opacity:0.5;', {duration : 0.3});
	});
};

var getAllActiv = function(teaser){
	var outArray = new Array();
	var cnt = 0;
	teaser.each(
		function(ele, index){
			if(ele.getStyle('display') != 'none' && !ele.hasClassName('clearer')) {
				outArray[cnt] = ele;
				cnt++;
			}
		}
	);
	return outArray;
};
FastInit.addOnLoad(initSwitchTeaser,initSwitchTeaserWidth);