var columns = new Array();

var debug = false;
var stop = false;

if (true == debug)
{

	var textDurationWidth = 1;
	var textDurationOpacity = 1;
	var entryDuration = 1;
	var textDurationWaitShowing = 1;
}
else
{
	var textDurationWidth = 2000;
	var textDurationOpacity = 3000;
	var entryDuration = 3000;
	var textDurationWaitShowing = 12000;
}


columns[0] = new Object();
columns[0]['id'] = 'anwender';
columns[0]['x'] = '-10';
columns[0]['inactive_x'] = '358';
columns[0]['effect'] = Fx.Transitions.elasticInOut;

columns[1] = new Object();
columns[1]['id'] = 'berater';
columns[1]['x'] = '-10';
columns[1]['inactive_x'] = '325';
columns[1]['effect'] = Fx.Transitions.elasticInOut;

columns[2] = new Object();
columns[2]['id'] = 'software';
columns[2]['x'] = '-10';
columns[2]['inactive_x'] = '295';
columns[2]['effect'] = Fx.Transitions.elasticInOut;

columns[3] = new Object();
columns[3]['id'] = 'strategen';
columns[3]['x'] = '-10';
columns[3]['inactive_x'] = '265';
columns[3]['effect'] = Fx.Transitions.elasticInOut;

/**/

var element = 0;
var deactEffects = new Fx.Styles();
var txtEffects = new Fx.Styles();
var heightEffect = new Fx.Styles();

var myTimer = false;
var toggleCenter = false;
var stopCenter = false;


function replay()
{
	element = 0;
	stop = false;
	this.myTimer = $clear(myTimer); //nevermind
	$('middle').setStyle('margin-top', '0px');

	initialize();
}

function stopAni()
{
	if(element < 5)
	{
		var src = columns[element];
		if($chk(  	$(src['id']+'_txt')  	))
		{
			var textObject = $(src['id']+'_txt');
			textObject.setStyle('display', 'none');
		}
	}
	element = 5;
	//stopt den timer der darauf wartet das die animation los gehen soll.
	this.myTimer = $clear(myTimer); //nevermind
	/*Stop die eventuell gerade am laufen befindliche animationen eines Tex-Objects*/
	this.txtEffects.stop();
	this.heightEffect.stop();
	/*Stop die eventuell gerade am Laufen befindliche Animationen eines Eintrags der gerade deaktiviert wird*/
	this.deactEffects.stop();

	/* Setzt die Globale Variable stop auf true so das keine weiteren Animationne ausgeführt werden */
	this.stop = true;

	$('middle').setStyle('margin-bottom', '-15px');

	/*Füre die Abschlussanimtion aus und mache garnichts mehr*/
	finalAct();
	$('play').setStyle('visibility', 'visible');
	$('stop').setStyle('visibility', 'hidden');
}

function giveMe()
{
	$('play').setStyle('visibility', 'visible');
	$('control_wrapper').setStyle('border-color', 'red');
    this.myTimer = initialize.delay(5000); //wait 5 seconds and execute my function.
}

/*
* @desc Lasse die Komplettansicht der Schautafel ausblenden.
* @desc INitialisiere den MidenButtons
*/
function initialize()
{
//	$('play').replaceWith($('play_false'));

	/* Setze die werte für die Mediencontrolbuttons. Im CSS sind sie normaler Weise deaktiviert, so das die bei JS OFF nicht angezeigt werden*/

	$('play').setStyle('visibility', 'hidden');
	$('stop').setStyle('visibility', 'visible');

	// Die MEdienControls sollen nicht mehr blinken
	stopCenter = true;

	var objAnimation = $('animation');
	var mainEffects = new Fx.Styles(
	objAnimation,
		{
			duration: 1500,
			transition: Fx.Transitions.linear,
			onComplete: function()
				{
					Animation()
				}
		}
	);

	mainEffects.start({
	    'opacity': [1, 0.3],
	    'height': [460],
	    'padding-bottom': [0, 20]
	});

}

/*
* @desc setze alle ELemente auf durchsichtig und beginne mit der Animation des Topelements
*/
function Animation()
{
	var objTop = $('top');
	var objBottom = $('bottom');
	var objAnwender = $('anwender');
	var objAnwenderTxt = $('anwender');
	var objBerater = $('berater');
	var objBeraterTxt = $('berater_txt');
	var objStrategen = $('strategen');
	var objStrategenTxt = $('strategen_txt');
	var objSoftware = $('software');
	var objSoftwareTxt = $('software_txt');
	var objBottomTxt = $('bottom_txt');

	objTop.setStyles({opacity: '0'});
	objBottom.setStyles({opacity: '0' });
	objAnwender.setStyles({opacity: '0' });
	objAnwenderTxt.setStyles({opacity: '0' });
	objBerater.setStyles({opacity: '0'});
	objBeraterTxt.setStyles({opacity: '0'});
	objStrategen.setStyles({opacity: '0' });
	objStrategenTxt.setStyles({opacity: '0' });
	objSoftware.setStyles({opacity: '0' });
	objSoftwareTxt.setStyles({opacity: '0' });
	objBottomTxt.setStyles({opacity: '0' });

	effectTop();
}

/*
*@desc Animiere das nächste Element aus dem columns-Array
*@desc Positioniere und Animiere es anch den Angaben im Array
*@desc führe Anschliessen die Animtaion zum Beschreibungstext aus
*/
function effectNext(objectId)
{
	if( element >(columns.length-1))
	{
		finalAct();
		return false;
	}
	var src = columns[element];
	var imgObject = $(src['id']);

	var Effects = new Fx.Styles(
		imgObject,
		{
			duration: entryDuration,
			unit: 	  'px',
			transition: src['effect'],
			onStart: function()
			{
				imgObject.setStyle('left', src['x']+'px');
			},
			onComplete: function()
			{
				effectText();
			}
		}
	);

	Effects.start({
	    'height': [0, imgObject.getSize().size.y],
	    'width': [0, imgObject.getSize().size.x],
	    'opacity': [0, 1]
	});

	return true;
}


/*
*@desc Animiere die Erklährungstexte des Aktuellen Elements aus dem column-Array
*@desc Führe dazu zwei Animationen aus um das Hereinspringen und einfaden asyncron ausführen zu können
*@desc Missbrauche eine nächste FUnktion um das warten auf das ausführen der nächsten Funktion zu ermöglichen :-(
*@desc Führe Anschliessend die SlideAwway funktion aus.
*/
function effectText()
{
	if( element >(columns.length-1))
	{
		return false;
	}
	var src = columns[element];
	var textObject = $(src['id']+'_txt');

	this.txtEffects = new Fx.Styles(
		textObject,
			{
			duration: textDurationWidth,
			transition: Fx.Transitions.elasticInOut,
			onStart: function()
			{
				textObject.setStyle('display', 'block');
				textObject.setStyle('margin-left', '-230px');
				textObject.setStyle('z-index', '1081');
			},
			onComplete: function(){}
			}
		);


	txtEffects.start(
	{
	    'width': [0, textObject.getSize().size.x],
	    'height': [0, textObject.getSize().size.y],
	    'margin-left': 0
	});

	this.heightEffect = new Fx.Styles(
		textObject,
			{
				duration: textDurationOpacity,
				transition: Fx.Transitions.linear,
				onComplete: function()
				{
				}
			}
		);

	heightEffect.start.delay(0, heightEffect,
	{
	     'opacity': [0.2, 1]
	});

	/*bitte warten damit amn den text lesen kann bevor man zum nächsten geht.*/
	var nothingEffect = new Fx.Styles(
		textObject,
			{
				duration: 1,
				transition: Fx.Transitions.linear,
				onComplete: function()
				{
					slideAway(src['id'], 0);
				}
			}
		);

	nothingEffect.start.delay(textDurationWaitShowing, nothingEffect,
	{
	     'opacity': [1, 1]
	});

	return true;
}


function effectTextNice()
{
	if( element >(columns.length-1))
	{
		return false;
	}
	var src = columns[element];
	var textObject = $(src['id']+'_txt');

	var Effects = new Fx.Styles(
		textObject,
			{
			duration: 6000,
			transition: Fx.Transitions.elasticInOut,
			onStart: function()
			{
				textObject.setStyle('margin-left', '-230px');
			},
			onComplete: function(){}
			}
		);


	Effects.start(
	{
	    'width': [0, textObject.getSize().size.x-2],
	    'height': [0, textObject.getSize().size.y/2],
	    'opacity': [0.2, 1],
	    'margin-left': 0
	});

	var heightEffect = new Fx.Styles(
		textObject,
			{
				duration: 6500,
				transition: Fx.Transitions.linear,
				onComplete: function()
				{
					slideAway(src['id'], 0);
				}
			}
		);

	heightEffect.start.delay(12500, heightEffect,
	{
	    'height': [textObject.getSize().size.y/2, textObject.getSize().size.y]
	});
}

/*
*@desc Animiere die deaktiverung des Erklährungstexte des Aktuellen Elements aus dem column-Array
*@desc Führe Anschliessend die deact funktion aus um das aktuelle Element nach rechts zu schieben
*/
function slideAway(objectId, target_x)
{
	if(true == this.stop)
	{
		return false;
	}
	var imObject = $(objectId);
	var textObject = $(objectId+'_txt');
	var Effects = new Fx.Styles(
		textObject,
			{
				duration: 1500,
				unit: 	  'px',
				transition: Fx.Transitions.elasticIn
			}
		);
	var Effects2 = new Fx.Styles(
		textObject,
			{
				duration: 1500,
				unit: 	  'px',
				transition: Fx.Transitions.linear,
				onComplete: function()
				{
						deact();
				}
			}
		);

	Effects.start.delay(2500, Effects, {
	    'width': [textObject.getSize().size.x, target_x]
	});

	Effects2.start.delay(3000, Effects2, {
	    'opacity': [0.9, 0]
	});
	return true;
}


/*
*@desc Animiere die Deaktiverung des aktuellen um das aktuelle Element nach rechts zu schieben
*@desc Zähle das die Variable element hoch und fühere Erneut effectNext aus.
*/
function deact()
{
	if(true == this.stop)
	{
		return false;
	}

	myelement = element;

	var src = columns[myelement];
	var imgObject = $(src['id']);

	var backObject = $(src['id']+'_back');
	var frontObject = $(src['id']+'_front');

	deactEffects = new Fx.Styles(
		imgObject,
		{
			duration: 3000,
			unit: 	  'px',
			transition: src['effect'],
			onStart: function(){ imgObject.setStyle('border-right', '0px dotted #000;'); },
			onComplete: function()
			{
					backObject.setStyle('opacity', '0');
					imgObject.setStyle('border-right', '1px dotted #000;');
					frontObject.setStyle('border', '0px dotted #000;');

					element++;
					effectNext();
			}
		}
	);

	deactEffects.start({
	    'opacity': [1, 0.7],
	    'left':	[src['x'], src['inactive_x']],
	    'width':	[imgObject.getSize().size.x, 60]
	});
	return true;
}

/*
*@desc Bewege alle Elemente aus dem colums-Array an die engültige Posiiton
*@desc rufe anschliessen die Animaton des Bottom-Elements auf
*/
function finalAct()
{
	var pos = 0;

	for(var i=0; i< columns.length; i++)
	{
		var src = columns[i];
		var imgObject = $(src['id']);
		var backObject = $(src['id']+'_back');
		var frontObject = $(src['id']+'_front');
		var middleObject = $('middle');
		var Effects = new Fx.Styles(
			imgObject,
			{
				duration: 3000,
				transition: src['effect'],
				onStart: function()
				{
					backObject.setStyle('opacity', '0.5');
					imgObject.setStyle('border-right', '0px');
					frontObject.setStyle('border', '1px solid #000');
					frontObject.setStyle('opacity', '1');
				},
				onComplete: function(){}
			}
		);

		//height from 10 to 100 and width from 900 to 300
		Effects.start({
		    'opacity': [0.7, 1],
		    'left':	[ src['inactive_x'], pos],
    	    'width':	[imgObject.getSize().size.x, 95]
		});
		backObject.setStyle('opacity', '0.5');
		pos = pos +100;
	}
	effectBottom();
	return true;
}



/*
*@desc Bewege die Middle-Div nach oben so das es über dem Top-Element ist.
*/
function effectMiddle()
{
	var obj = $('middle');
	var exampleFx;
	var middleEffects = new Fx.Styles(
		obj,
		{
			duration: 3500,
			unit: 	  'px',
			transition: Fx.Transitions.linear,
			onComplete: function()
						{} ,
			onStart: function()
						{ }

		}

	);

	//height from 10 to 100 and width from 900 to 300
	middleEffects.start({
	    'margin-top': [0, -20]
	});
	return true;

}

/*
*@desc Bewege die Middle-Div nach oben so das es über dem Top-Element ist.
*/
function finalize()
{

	var obj = $('middle');
	var exampleFx;
	var middleEffects = new Fx.Styles(
		obj,
		{
			duration: 3000,
			transition: Fx.Transitions.backInOut,
			onComplete: function(){},
			onStart: function(){}
		}
	);

	var objBottom = $('bottom');
	var topEffects = new Fx.Styles(
	objBottom,
		{
			duration: 3000,
			transition: Fx.Transitions.backInOut,
			onComplete: function(){},
			onStart: function(){}
		}

	);

	var objAnimation = $('animation');
	var mainEffects = new Fx.Styles(
	objAnimation,
		{
			duration: 3000,
			transition: Fx.Transitions.backInOut,
			onComplete: function(){},
			onStart: function(){}
		}
	);

	//height from 10 to 100 and width from 900 to 300
	topEffects.start({
	    'margin-top': [15, 0]
	});

	//height from 10 to 100 and width from 900 to 300
	middleEffects.start({
	    'margin-top': [0, -20]
	});

	//height from 10 to 100 and width from 900 to 300
	mainEffects.start({
	    'padding-bottom': [20, 0],
	    'height': [460, 420]
	});

	if(true == stop)
	{
		return false;
	}
	return true;
}


function effectTop()
{
	var obj = $('top');
	$('animation').setStyle('opacity', '1');
	var topEffects = new Fx.Styles(
		obj,
		{
			duration: 3000,
			transition: Fx.Transitions.quintInOut,
			onComplete: function(){effectNext();}
		}

	);

	//height from 10 to 100 and width from 900 to 300
	topEffects.start({
	    'height': [1, 93],
	    'width': [1, 445],
	    'opacity': [0.2, 1]
	});
	return false;
}

function effectBottom()
{
	var obj = $('bottom');

	var Effects = new Fx.Styles(
		obj,
			{
				duration: 3000,
				unit: 	  'px',
				transition: Fx.Transitions.elasticInOut,
				onStart: function()
							{ },
				onComplete: function()
							{
								if(true == stop)
								{
									effectMiddle();
								}
								else
								{
									effectBottomTxt();
								}
							}

			}

		);



	//height from 10 to 100 and width from 900 to 300
	Effects.start({
	    'height': [1, 93],
	    'width': [1, 445],
	    'opacity': [0.2, 1]
	});
	return true;
}

function effectBottomTxt(obj)
{
	var textObject = $('bottom_txt');

	var Effects = new Fx.Styles(
		textObject,
			{
			duration: 1500,
			transition: Fx.Transitions.linear,
			onStart: function()
			{
				textObject.setStyle('display', 'block');
			},
			onComplete: function()
			{

				textObject.setStyle('z-index', '81');

			}
			}
		);


	Effects.start(
	{
	    'height': [0, textObject.getSize().size.y],
	    'opacity': [0.2, 1],
	    'margin-top': [-50, -15]
	});

	var nothingEffect = new Fx.Styles(
		textObject,
			{
				duration: 4000,
				transition: Fx.Transitions.linear,
				onComplete: function()
				{
					deactBottomTxt()
				}
			}
		);

	nothingEffect.start.delay(4000, nothingEffect,
	{
	     'opacity': [1, 1]
	});

	return true;
}


function deactBottomTxt()
{
	var textObject = $('bottom_txt');
	var nothingEffect2 = new Fx.Styles(
		textObject,
			{
				duration: 1500,
				transition: Fx.Transitions.linear,
				onStart: function()
				{
					finalize();
				}
			}
		);

	nothingEffect2.start(
	{
	    'height': [textObject.getSize().size.y, 0],
	    'opacity': [1,0]
	});

	$('play').setStyle('visibility', 'visible');
	$('stop').setStyle('visibility', 'hidden');

	return true;
}
var test = 0;
function blinkControlcenter()
{
	if(stopCenter || test > 100)
	{
		$('control_center').setStyle('opacity', '1');
		return false;
	}
	if(toggleCenter)
	{
		$('control_center').setStyle('opacity', '0');
		toggleCenter  = false;
	}
	else
	{
		$('control_center').setStyle('opacity', '1');
		toggleCenter  = true;
	}

	test++;
}

function initializeControler()
{
	$('control_wrapper').setStyle('border-color', 'red');
	blinkControlcenter.periodical(400, blinkControlcenter);
}


/* DAS MUSS AM ENDE AUFRUFEN WERDEN SONST GIBT ES EINEN FEHLER IN DEN MOTTOLLS KLASSEN */
window.addEvent('domready', initializeControler);
window.addEvent('domready', giveMe);