/* -------------------------------------------------------------------
	=landingflow
 ------------------------------------------------------------------ */
var LandingFlow = Class.create({
	
	initialize: function(elm, initObject) {
		
		this.elm				= elm;
		this.ul					= this.elm.down('ul');
		this.elms				= this.ul.childElements();			
		
		this.animating 			= false;
		
		this.lft 				= elm.down('.sub-lft a');
		this.rgt 				= elm.down('.sub-rgt a');
		this.lft.href 			= 'javascript: void(0);';
		this.rgt.href 			= 'javascript: void(0);';

		this.showElms			= 3;
		this.countElms			= this.elms.length;
		
		this.duration 			= 0.25;
		this.transition 		= Effect.Transitions.sinoidal;
		
		this.preloadImages();
		this.initEventHandler();
	},
	
	getTeaserLink: function(idx) {
		return this.elm.down('li',idx).down('a');
	},		
	
	getTeaserImg: function(idx) {
		return this.elm.down('li',idx).down('img');
	},		
	
	preloadImages: function() {
		this.elms.each( function(e) {
			var SmallVisual = new Image();
			SmallVisual.src = e.down('img').getAttribute('SmallVisual');
			var BigVisual = new Image();
			BigVisual.src = e.down('img').getAttribute('BigVisual');
		});
	},
	
	initEventHandler: function(){
		this.turnLftDelayed = this.turnpageDelayed.bind(this, 'lft');
		this.turnRgtDelayed = this.turnpageDelayed.bind(this, 'rgt');
		
		this.lft.observe('click', this.turnLftDelayed);
		this.rgt.observe('click', this.turnRgtDelayed);
		
		// save eventHandler to delete them
		this.getTeaserLink(0).href = 'javascript:void(0);';
		this.getTeaserLink(0).observe('click', this.turnLftDelayed);
		
		this.getTeaserLink(1).href = this.getTeaserImg(1).getAttribute('teaserLink');
				
		this.getTeaserLink(2).href = 'javascript:void(0);';		
		this.getTeaserLink(2).observe('click', this.turnRgtDelayed);
		
	},
	
	openLink: function(elm, idx) {
		url = this.getTeaserImg(idx).getAttribute('teaserLink');
		window.location.href = url;
	},
	
	changePos: function(elm, pos, onClick, afterFinish) {
		if(onClick) elm.observe('click', onClick);
		elm.morph(pos, {duration: this.duration, transition: this.transition, afterFinish: afterFinish});
	},
	
	turnpageDelayed: function(direction) {
		this.turnpage.bind(this).defer(direction);
	},
	
	resetHREF: function(linkNr) {
		this.getTeaserLink(linkNr).href = this.getTeaserImg(linkNr).getAttribute('teaserLink')
	},
	
	turnpage: function(direction){
		if (this.animating)	return;
		this.animating = true;
		var that = this;

		// deleting event handle
		this.getTeaserLink(0).stopObserving('click', this.turnLftDelayed);
		this.getTeaserLink(1).href = 'javascript:void(0);';
		this.getTeaserLink(2).stopObserving('click', this.turnRgtDelayed);				
		
		if(direction == 'lft') {
			/* cloning the last element to the first position */
			var new_element = this.elm.down('li',this.countElms-1).cloneNode(true);
			new_element.down('a').setStyle({left: '-200px', top: '65px', opacity: '0'});
			new_element.down('img').setStyle({width: '202px', height: '141px'});
			
			this.ul.insertBefore(new_element, this.ul.firstChild);

			/* Left Outside	-> Left Small*/
			this.changePos(this.getTeaserLink(0), 'left:35px; top: 65px; opacity:1;', this.turnLftDelayed);
			this.changePos(this.getTeaserImg(0), 'width:202px; height:141px;');
			
			/* Left Small -> Middle	*/
			this.getTeaserImg(1).src = this.getTeaserImg(1).getAttribute('BigVisual');
			this.changePos(this.getTeaserLink(1), 'left:248px; top: 0px; opacity:1;');			
			this.changePos(this.getTeaserImg(1), 'width:460px; height:322px;','', this.resetHREF.bind(this, 1));
			
			/* Middle -> Right Small */
			this.getTeaserImg(2).src = this.getTeaserImg(2).getAttribute('SmallVisual');
			this.changePos(this.getTeaserLink(2), 'left: 719px; top: 65px; opacity:1;', this.turnRgtDelayed);
			this.changePos(this.getTeaserImg(2), 'width:202px; height:141px;');
		
			/* Right Small	-> Right Outside */
			this.changePos(this.getTeaserLink(3), 'left: 930px; top: 65px; opacity:0;');		
			this.changePos(this.getTeaserImg(3), 'width:202px; height:141px; ', '', function() {that.elm.down('li',that.countElms).remove(); that.animating = false;});
		}
		
		if(direction == 'rgt') {
			/* cloning the first element to the last position */
			var new_element = this.elm.down('li',0).cloneNode(true);
			new_element.down('a').setStyle({left: '930px', top: '65px', opacity: '0'});
			new_element.down('img').setStyle({width: '202px', height: '141px'});
			this.ul.appendChild(new_element);
		
			
			/* Right outside -> Right Small	*/
			this.changePos(this.getTeaserLink(3), 'left: 719px; top: 65px; opacity:1;', this.turnRgtDelayed);
			this.changePos(this.getTeaserImg(3), 'width:202px; height:141px;','', function() {that.animating = false});
			
			/* Right small -> Middle	*/
			this.getTeaserImg(2).src = this.getTeaserImg(2).getAttribute('BigVisual');
			this.changePos(this.getTeaserLink(2), 'left:248px; top: 0px; opacity:1;');
			this.changePos(this.getTeaserImg(2), 'width:460px; height:322px;','', this.resetHREF.bind(this, 2));
			
			/* Middle -> Left small	*/
			this.getTeaserImg(1).src = this.getTeaserImg(1).getAttribute('SmallVisual');
			this.changePos(this.getTeaserLink(1), 'left:35px; top: 65px; opacity:1;',this.turnLftDelayed);
			this.changePos(this.getTeaserImg(1), 'width:202px; height:141px;');
			
			/* Left Small -> Left Outside	*/
			this.changePos(this.getTeaserLink(0), 'left:-202px; top: 65px; opacity:0;');
			this.changePos(this.getTeaserImg(0), 'width:202px; height:141px;', '', function() { that.elm.down('li',0).remove(); });
		}
	}	
});

function setNewTopPos() {
	// 101: 	header without shadow
	// 57: 	footer without shadow
	// 415: 	minheight
	var availableHeight = Math.max((document.viewport.getHeight()-101-57-2), 435);;
	
	var flowHeight = $('flows').getHeight();
	var newTop = Math.round(Math.max(((availableHeight-flowHeight)*0.2),0));
	$('flows').setStyle({top: newTop+'px'});
	$('btn-lft').setStyle({top: newTop + 152 + 'px'});
	$('btn-rgt').setStyle({top: newTop + 152 + 'px'});

	var newTop = Math.round(((availableHeight*0.6767)) - flowHeight);
	$('buttons').setStyle({top: newTop+'px'});
}

initFunctions.push(function() {
	setNewTopPos();
	if ($('landingflow')){
		new LandingFlow($('landingflow'), {});
	};
	Element.observe(window, 'resize', function(event){
			setNewTopPos();
			correctPagefooter();
		});		
});