var productsalpha = 0.45; // Alpha-Wert der gedimmten Produkte
var textcolor = '#333';
var textalphacolor = '#a3a3a3';
var bluetextcolor = '#007dd8';
var bluetextalphacolor = '#8cc5ee';
/*var startAnimSpeed = 4000;*/ // Einblendungsdauer einzelner Produkte zum Start
var moveProductY = 68; // Pixelverschiebung aktiver Produkte
var textSpeed = 10; // Einblendungsdauer wechselnder Feature- und Promo-Texte (in Sekunden)
var products = new Array('wa', 'vv', 'pf', 'vm'); // Verwendete Produkte

/*var productLink = new Array;
productLink['wa'] = 'http://www.etracker.com/de/etracker-produkte-echtzeit-web-controlling-visitor-voice/web-controlling-echtzeit-web-analysen-statt-logfile-analyse.html';
productLink['vv'] = 'http://www.etracker.com/de/etracker-produkte-echtzeit-web-controlling-visitor-voice/visitor-voice-besucherbefragung-kundenzufriedenheit.html';
productLink['pf'] = 'http://www.etracker.com/de/etracker-page-feedback/page-feedback-basic.html';
productLink['vm'] = 'http://www.etracker.com/de/etracker-produkte-echtzeit-web-controlling-visitor-voice/etracker-visitor-motion.html';*/

var savePosition = new Array();
var activeProduct = false;
var activeText = false;
var ToLT;
var ToLB;
var ToRT;
var ToRB;
var wa_feature = new Array();
var wa_promo = new Array();
var vv_feature = new Array();
var vv_promo = new Array();
var pf_feature = new Array();
var pf_promo = new Array();
var vm_feature = new Array();
var vm_promo = new Array();
var mouseOverProductBox = false;
var productBoxAnimTO;

var overProduct;
var openProduct;
var showText;
var closeAllProducts;

window.addEvent('domready', function(){
	// PNG-Dateien im IE6 durch GIF ersetzen:
	if (window.ie6) {
		$each($$('.product_view'), function(e) {
			e.innerHTML = e.innerHTML.split('.png').join('.gif');
		});
	}

	closeAllProducts = function() {
		$each($$('.product'), function(e) {
			var ProductName = e.getProperty('id').split('product_').join('');
			// Linie ausblenden:
			$('line_'+ProductName).setStyle('display', 'block');
			// Hintergrundbild ausblenden:
			e.setStyle('background', 'transparent none no-repeat center 0');
			// Stagebild ausblenden:
			$('stage_'+ProductName).setStyle('opacity', .01);
			// Texte aus-/einblenden:
			e.getElement('.text_on').setStyle('display', 'none');
			e.getElement('.text_off').setStyles({'display': 'block', 'color': bluetextcolor});
			// Screenshots ausblenden
			$('screenshot_'+ProductName+'0').setStyle('display', 'none');
			$('screenshot_'+ProductName+'1').setStyle('display', 'none');
			$('screenshot_'+ProductName+'2').setStyle('display', 'none');
			$('screenshot_'+ProductName+'3').setStyle('display', 'none');
			// Titelgröße zurücksetzen & entfärben:
			e.getElement('h4').setStyles({'color': textcolor, 'font-size': 18});
			// Feature- & Promo-Texte ausblenden:
			$('text_lt').setStyle('display', 'none');
			$('text_lb').setStyle('display', 'none');
			$('text_rt').setStyle('display', 'none');
			$('text_rb').setStyle('display', 'none');
			// Produkt voll anzeigen
			e.getElement('.product_logo').setStyle('opacity', 1);
		});
		activeProduct = false;
	}

	openProduct = function(product) {
		$each($$('.product'), function(e) {
			var ProductName = e.getProperty('id').split('product_').join('');
			$('line_'+ProductName).setStyle('display', 'none');
			// Produkt & Texte abdimmen
			e.getElement('.product_logo').setStyle('opacity', productsalpha);
			e.getElement('h4').setStyles({'color': bluetextalphacolor});
			e.getElement('.text_off').setStyles({'color': textalphacolor});
		});

		activeProduct = product;
		var oP = $('product_'+product);

		// Produkt voll einblenden
		oP.getElement('.product_logo').setStyle('opacity', 1);

		// Titel vergrößern & einfärben:
		oP.getElement('h4').setStyles({'color': bluetextcolor, 'font-size': 22});

		// Linie einblenden:
		$('line_'+activeProduct).setStyle('display', 'block').setStyle('opacity', 0);
		new Fx.Style($('line_'+activeProduct), 'opacity', {duration: 500}).start(1);

		// Texte aus-/einblenden:
		oP.getElement('.text_off').setStyle('display', 'none');
		oP.getElement('.text_on').setStyles({'display': 'block', 'opacity': 0, 'color': textcolor});
		new Fx.Style(oP.getElement('.text_on'), 'opacity').start(1);

		// Stagebild einblenden:
		$('stage_'+activeProduct).setStyle('display', 'block').setStyle('opacity', 0);
		if (window.ie) { // IE ohne Fade wegen des PNG-Fade-Problems
			$('stage_'+activeProduct).setStyle('opacity', 1);
		} else { // Alle anderen Browser mit Fade
			new Fx.Style($('stage_'+activeProduct), 'opacity', {duration: 1}).start(1);
		}
	}

	showText = function(position) {
		// Wenn kein Produkt eingeschaltet ist, kein Text:
		if (mouseOverProductBox == false) {
			return false;
		}
		// Texte aus-/einblenden
		var text = '';
		var promoProduct = activeProduct;
		
		if (position == 'lt' || position == 'lb') {
			// Feature-Text:
			var featureTexts = window[activeProduct+'_feature'];

			// Screenshot ausblenden
			$each($$('.screenshot_'+position), function(e) {
				e.setStyle('display', 'none');
			});

			if (activeText === false || activeText == featureTexts.length-1) {
				activeText = 0;
			} else {
				activeText++;
			}
			text = '<a href="'+productLink[activeProduct]+'" class="product_link">'+featureTexts[activeText]+'</a>';

		}/* else {
			// Promo-Text (nicht das aktive Produkt):
			while(promoProduct == activeProduct) {
				promoProduct = products[Math.floor(Math.random()*products.length)];
			}
			if (position == 'rb') {
				text = $('text_rt').innerHTML;
				while (text == $('text_rt').innerHTML) {
					text = '<span onMouseOver="openProduct(\''+promoProduct+'\')" onMouseOut="closeAllProducts();openProduct(\''+activeProduct+'\');"><a href="'+productLink[promoProduct]+'" class="promo_link">'+window[promoProduct+'_promo'][Math.floor(Math.random()*window[promoProduct+'_promo'].length)]+'</a></span>';
				}
			} else {
				// Text für Position: rt
				text = '<span onMouseOver="openProduct(\''+promoProduct+'\')" onMouseOut="closeAllProducts();openProduct(\''+activeProduct+'\');"><a href="'+productLink[promoProduct]+'" class="promo_link">'+window[promoProduct+'_promo'][Math.floor(Math.random()*window[promoProduct+'_promo'].length)]+'</a></span>';
			}
		}*/
        
		if (savePosition[position] == undefined) {
			savePosition[position] = $('text_'+position).getStyle('margin-left').split('px').join('');
		}

		$('text_'+position).setStyle('display', 'block').setStyle('opacity', 0).setStyle('margin-left', parseInt(savePosition[position])-75).innerHTML = text;		
		new Fx.Styles($('text_'+position), {duration: 200}).start({
			'margin-left': savePosition[position],
			'opacity': 1
		});

		// Screenshots einblenden
		if (position == 'lt') {
			var screenLeft = 65;
		} else {
			var screenLeft = 485;
		}
		$('screenshot_'+promoProduct+activeText).addClass('screenshot_'+position).setStyle('display', 'block').setStyle('margin-left', screenLeft);
		// Screenshots mit Link versehen
		$('screenshot_'+promoProduct+activeText).innerHTML = '<a href="'+productLink[promoProduct]+'">'+$('screenshot_'+promoProduct+activeText).innerHTML+'</a>';
		
		// Timeout für nächsten Text
		window['To'+position.toUpperCase()] = setTimeout(function() {showText(position);}, textSpeed*500);
	}

	overProduct = function (product) {
		if (activeProduct == product) {
			return false;
		}
		mouseOverProductBox = true;
		closeAllProducts();
		
		// Textüberblendungen stoppen:
		clearTimeout(ToLT);
		clearTimeout(ToLB);
		//clearTimeout(ToRT);
		//clearTimeout(ToRB);
		
		// Texte ausblenden:
		activeText = false;
		$each($$('.stage_text'), function(e) {
			new Fx.Styles(e, {duration: 200}).start({
				'opacity': 0
			});
		});

		openProduct(product);

		// Texte zum aktuellen Produkt einblenden:
		ToLT = setTimeout(function() {showText('lt')}, textSpeed/4*0);
		ToLB = setTimeout(function() {showText('lb')}, textSpeed/4*500);
		//ToRT = setTimeout(function() {showText('rt')}, textSpeed/4*1000);
		//ToRB = setTimeout(function() {showText('rb')}, textSpeed/4*1500);
	}

	// Bei MouseOver des Logos wird aktuelles Produkt aktiviert:
	$$('.product').addEvents({
		'mouseenter': function() {
			var product = $(this).getProperty('id').split('product_').join('');
			overProduct(product);
		}
	});

	// Bei MouseOver des Personenteils wird aktuelles Produkt aktiviert:
	// DURCH IMAGE MAPS ERSETZT, DIE OVERPRODUCT() DIREKT AUSLÖSEN
	/*$$('.product_view').addEvents({
		'mouseenter': function() {
			var product = $(this).getProperty('id').split('stage_').join('');
			overProduct(product);
		}
	});*/
	
	$('productbox').addEvents({
		'mouseleave': function() {
			mouseOverProductBox = false;
			closeAllProducts();
			showAllProductParts();
		}
	})
	
	// Alle Produktteile einblenden
	function showAllProductParts() {
		$each($$('.product_view'), function(e) {
			e.setStyle('display', 'block');
			if (!window.ie) {
				new Fx.Style(e, 'opacity', {duration: 0}).start(0,1);
			} else {
				e.setStyle('opacity', 1);
			}
		});
	}

	// Start-Events:
	for(var i=0; i<4; i++) {
		var product = products[i];

		// Text-Arrays aus DOM-Elementen erstellen:
		$each($$('.feature_'+product), function(e) {			
			window[product+'_feature'].push(e.innerHTML);
		});
		/*$each($$('.promo_'+product), function(e) {
			window[product+'_promo'].push(e.innerHTML);
		});*/
	}

	showAllProductParts();
});