// generiert mehrere schritte nacheinander
// playerContent array mit den inhalten
// localeArray array mit den uebersetzungen
// stepContentArrayName bezeichnung des arrays in dem sich der inhalt befindet
// durationToWait dauer in sekunden bis zum automatischen abspielen des players
// height hohe in pixel des players
// width breite in pixel des players
var initializePlayer = function(playerContent, localeArray, stepContentArrayName, durationToWait, height, width) {
	bilderArray = new Array();
	
	// mit dem layer die groesse  reservieren
	$('player-image').setStyle({
		height:  height +'px',
		width: width + 'px'
	});
	
	$('current-image-layer').value = "player-image-one";
	
	// erstelle layer fuer bilder wiedergabe
	var lOne = new Element('div', {'id': 'player-image-one'});
	lOne.setOpacity(1);
	lOne.setStyle({
		backgroundPosition: 'center center',
		backgroundRepeat: 'no-repeat',
		height:  height +'px',
		position: 'absolute',
		width: width + 'px'
	});
	
	var lTwo = new Element('div', {'id': 'player-image-two'});
	lTwo.setOpacity(0);
	lTwo.setStyle({
		backgroundPosition: 'center center',
		backgroundRepeat: 'no-repeat',
		height:  height +'px',
		position: 'absolute',
		width: width + 'px'
	})
	
	$('player-image').insertBefore(lTwo, $('player-image').firstChild);
	$('player-image').insertBefore(lOne, $('player-image').firstChild);
	
	$('player-image').show();
	
	var str = '<li><a href="javascript://" onclick="restart(false);">' + playerContent['initial']['headline'][0] + '</a></li>';
	showImageWithPath(playerContent['initial']['images'][0]);
	
	var i = 0;
	for (i = 0; i < playerContent['steps'].length; i++) {
		str = str + '<li><a href="javascript://" onclick="showStep(' + stepContentArrayName + ', ' + i + ', 0);">' + '- ' + playerContent['steps'][i]['title'] + '</a></li>';
		for (var n = 0; n < playerContent['steps'][i]['images'].length; n++)
		{
			var pos = bilderArray.length
			bilderArray[pos] = new Image();
			bilderArray[pos].src = playerContent['steps'][i]['images'][n];
		}
	}
	
	$('player-navigation').update(str);
	setStepAutoPlay();
	// warte bis zum abspielen
	init_pe = new PeriodicalExecuter(function(pe) {	
		showAllSteps(playerContent['steps']);
		pe.stop();
		return;
	}, durationToWait);
}

var showAllSteps = function(stepContentArray) {
	$('player-step-text').update('');
	showStep(stepContentArray, 0, 0);
	$('player-status-stop').value = 0;
}

// wiedergabe eines schrittes
var showStep = function(stepContentArray, stepIndex, imageIndex) {
	init_pe.stop();
	$('player-step-text').update('');
	$('player-autoplay').value = 1;
	//$('player-status-stop').value = 0;
	$('player-current-step-index').value = stepIndex;
	$('player-current-image-index').value = imageIndex;
	//$('player-control-play').addClassName('on');
	showText('<strong>Schritt ' + (stepIndex+1) + ':</strong> ' + stepContentArray[stepIndex]['text']);
	updateImageNavigation(stepContentArray);
	
	if (imageIndex > 0 || imageIndex < stepContentArray[stepIndex]['images'].length) {
		showImage(stepContentArray, imageIndex);
		updateStepNavigation();
		var timeStamp = new Date().getTime();
		$('player-step-unique-id').value = timeStamp;
		step_pe = new PeriodicalExecuter(function(pe) {
			// ausbrechen aus der funktion
			if ($('player-step-unique-id').value != timeStamp) {
				return;
			}
			
			if ($('player-status-stop').value == 1){
				//$('player-control-play').removeClassName('on');
				return;
			}
			
			if (imageIndex < 0 || (imageIndex+1) >= stepContentArray[stepIndex]['images'].length || 
							$('player-autoplay').value == 0 || 
							$('player-step-unique-id').value != timeStamp) {
				pe.stop();
				// falls stepautoplay so spiele den naechsten schritt ab.
				// rekursiver ablauf
				if ((parseInt($('player-step-autoplay').value) == 1) && (stepContentArray.length > (stepIndex + 1))) {
					$('player-current-step-index').value = (stepIndex + 1);
					showStep(stepContentArray, (stepIndex + 1), 0);
				} else {
					stop();
					disableStepAutoPlay();
				}
			} else {
				imageIndex++;
				showImage(stepContentArray, imageIndex);
			}
		}, imageShowDuration());
	}
}

// wiedergabe eines bildes
var showImage = function(stepContentArray, imageIndex) {
	$('player-current-image-index').value = imageIndex;
	var stepIndex = parseInt($('player-current-step-index').value);
	var imagePath = stepContentArray[stepIndex]['images'][imageIndex];
	if (!Browser.isMSIE5) {
		showImageWithPath(imagePath);
	} else {
		showImageWithPathIE5(imagePath);
	}
	$('player-img-counter').update((imageIndex+1) + '/' + stepContentArray[stepIndex]['images'].length);
}

var showImageWithPathIE5 = function(imagePath) {
	$('player-image-two').hide();
	var lOne = $('player-image-one');
	lOne.style.backgroundImage = 'url(' + imagePath + ')';
}

var showImageWithPath = function(imagePath) {
	var lOne = $('player-image-one');
	var lTwo = $('player-image-two');
	var current = $('current-image-layer').value;
	
	if (current == 'player-image-one') {
		lTwo.setStyle({
			backgroundImage: 'url(' + imagePath + ')'
		});
		
	  new Effect.Parallel([
			new Effect.Opacity('player-image-one', { 
				sync: true,
				transition: Effect.Transitions.linear,
				from: 1.0, 
				to: 0
			}),

			new Effect.Opacity('player-image-two', { 
				sync: true,
				transition: Effect.Transitions.linear,
				from: 0,
				to: 1
			})
		], { 
	    duration: 1.5
	  });
		$('current-image-layer').value = 'player-image-two';
	} else {
		lOne.setStyle({
			backgroundImage: 'url(' + imagePath + ')'
		});
	  new Effect.Parallel([
			new Effect.Opacity('player-image-two', { 
				sync: true,
				transition: Effect.Transitions.linear,
				from: 1.0, 
				to: 0
			}),

			new Effect.Opacity('player-image-one', { 
				sync: true,
				transition: Effect.Transitions.linear,
				from: 0,
				to: 1
			})
		], { 
	    duration: 1.5
	  });
		$('current-image-layer').value = 'player-image-one';
	}
	//console.log($('player-image-one'));
	//console.log($('player-image-two'));
}

var showText = function(text) {
	$('player-step-text').update(text);
}

var prevStep = function(stepContentArray) {
	var stepIndex = parseInt($('player-current-step-index').value);
	if (stepIndex > 0) {
		showStep(stepContent, (stepIndex-1), 0);
	}
	/**
	$('player-autoplay').value = 0;
	$('player-step-autoplay').value = 0;
	var imageIndex = parseInt($('player-current-image-index').value);
	var stepIndex = parseInt($('player-current-step-index').value);

	if ((imageIndex) < stepContentArray[stepIndex]['images'].length && ((imageIndex - 1) >= 0)) {
		showImage(stepContentArray, (imageIndex - 1));
	}
	**/
}

var nextStep = function(stepContentArray) {
	var stepIndex = parseInt($('player-current-step-index').value);
	if ((stepIndex >= 0) && (stepContentArray.length > (stepIndex+1))) {
		showStep(stepContent, (stepIndex+1), 0);
	}
	/**
	$('player-autoplay').value = 0;
	$('player-step-autoplay').value = 0;
	var imageIndex = parseInt($('player-current-image-index').value);
	var stepIndex = parseInt($('player-current-step-index').value);
	
	if ((imageIndex + 1) < stepContentArray[stepIndex]['images'].length && (imageIndex >= 0)) {
		showImage(stepContentArray, (imageIndex + 1));
	}
	**/
}

var imageShowDuration = function () {
	return 5;
}

var setStepAutoPlay = function() {
	$('player-step-autoplay').value = 1;
	$('player-control-play').addClassName('on');
}

var disableStepAutoPlay = function() {
	$('player-step-autoplay').value = 0;
}

var updateImageNavigation = function(stepContentArray) {
	var prevLink = $('player-step-image-navigation-prev');
	var nextLink = $('player-step-image-navigation-next');
	var stepIndex = parseInt($('player-current-step-index').value);
	if (stepContentArray.length == (stepIndex+1) || stepContentArray.length == 0) {
		nextLink.hide();
	} else if (stepContentArray.length > 1) {
		nextLink.update(stepContentArray[stepIndex+1]['title']);
		nextLink.show();
	}
	
	if (stepIndex > 0) {
		prevLink.update(stepContentArray[stepIndex-1]['title']);
		prevLink.show();
	} else {
		prevLink.hide();
	}
}

var resetImageNavigation = function ()
{
	var prevLink = $('player-step-image-navigation-prev');
	var nextLink = $('player-step-image-navigation-next');
	
	prevLink.hide();
	nextLink.hide();
}

var updateStepNavigation = function() {
	var nav = $('player-navigation');
	for (var i = 1; i < nav.childElements().length; i++) {
		// link
		var child = nav.childElements()[i].childElements()[0];
		if ((i-1) == $('player-current-step-index').value) {
			//child.setAttribute('style', 'font-weight: bold');
			child.style.fontWeight = 'bold';
		} else {
			child.style.fontWeight = 'normal';
			//child.setAttribute('style', 'font-weight: normal');
		}
	}
}

var resetStepNavigation = function()
{
	var nav = $('player-navigation');
	for (var i = 1; i < nav.childElements().length; i++) {
		// link
		var child = nav.childElements()[i].childElements()[0];
		child.style.fontWeight = 'normal';
	}
}

var stop = function() {
	$('player-status-stop').value = 1;
	$('player-control-stop').addClassName('on');
	$('player-control-play').removeClassName('on');
	step_pe.stop();
}

var play = function(stepContentArray) {	
	if ($('player-status-stop').value == 1) {
		$('player-status-stop').value = 0;
		$('player-control-play').addClassName('on');
		$('player-control-stop').removeClassName('on');

		var imageIndex = parseInt($('player-current-image-index').value);
		var stepIndex = parseInt($('player-current-step-index').value);
		setStepAutoPlay();
		showStep(stepContentArray, stepIndex, imageIndex);
	}
}

var restart = function(startRotation) {
	showImageWithPath(playerContent['initial']['images'][0]);
	$('player-current-image-index').value = 0;
	$('player-current-step-index').value = 0;
	$('player-step-text').update('');
	if(startRotation)
	{
		step_pe.stop();
		$('player-status-stop').value = 0;
		$('player-control-play').addClassName('on');
		$('player-control-stop').removeClassName('on');
		setStepAutoPlay();
		// warte bis zum abspielen
		init_pe = new PeriodicalExecuter(function(pe) {	
			showAllSteps(playerContent['steps']);
			pe.stop();
			return;
		}, imageShowDuration());
	}
	
	else
	{
		stop();
		disableStepAutoPlay();
	}
	
	resetStepNavigation();
	resetImageNavigation();
	$('player-img-counter').update('');
}

var Browser = {
	detect: function() {
	 var UA = navigator.userAgent;
	 this.isKHTML = /Konqueror/.test(UA);
	 this.isWebKit = navigator.userAgent.indexOf('AppleWebKit/') > -1;
	 this.isGecko = Prototype.Browser.Gecko;
	 this.isOpera = Prototype.Browser.Opera;
	 this.isMSIE  = Prototype.Browser.IE;
	 this.isMSIE5 = this.isMSIE && !document.compatMode;
	 this.isMSIE7 = this.isMSIE && window.XMLHttpRequest;
	 this.isMSIE6 = this.isMSIE && !this.isMSIE5 && !this.isMSIE7;
	} // function detect
}
Browser.detect();