// Adds event to window.onload without overwriting currently 
// assigned onload functions.
function addLoadEvent(func)
{    
    var oldonload = window.onload;
    if (typeof window.onload != 'function')
    {
        window.onload = func;
    } 
    else 
    {
        window.onload = function()
        {
            oldonload();
            func();
        }
    }
}

addLoadEvent(loadProductShow);



//###############################################################################

function productShow(title,element,data,pagelink,pageurl){
	this.element = element;
	this.title = title;
	var data = data;
	this.pagelink = pagelink;
	this.pageUrl = pageurl;
	this.actElement = 3;
	this.markerPos = 3;
	this.posIndex = new Array();
	
	for(var i=0; i < data.length;i++){
			
		this.posIndex[i] = i;
				
	}
	
	
	
	var html;
	
	//Bilder preload
	this.loadImages = function(data){
		
		var slideElements = new Array();
		var x = 0;



		//Prfen ob Bild existiert / geladen wurde
		//Unterschied zwischen MSIE und dem Rest
		function imageExists(image){
			if(navigator.appName.search("Microsoft") > -1){
				if(image.complete){
					return true;
				}
			}else{
				if(image.width){
					return true;
				}
			}	
		}


		for(i=0; i < data.length;i++){
			
			var currentImage = new Image();
			currentImage.src = data[i][0];
			
			//if(imageExists(currentImage)){
				slideElements[x] = new Array(currentImage, data[i][1], data[i][2], data[i][3]);
				x++;
			//}
			
		}
		
		return slideElements;
		
	}
	

	this.getSlideShowHTML = function(data){
	
		html = '	<div class="productShowHeader">';
		html += '		<div class="icon"></div>';
		html += '		<h2>' + this.title + '</h2>';
		html += '		<div class="productLink"><a href="'+this.pageUrl+'">'+this.pagelink+' &raquo;</a></div>';
		html += '	</div>';
		html += '	<div class="slideBoxOuter">';
		
		html += '		<div class="slideBox">';
		
		html += '			<div class="fadeoutLeft"></div>';
		html += '			<a href="#" id="'+this.element+'ScrollLeft" class="arrowLeft" onclick="return false;"></a>';
		html += '			<div class="fadeoutRight"></div>';
		html += '			<a href="#" id="'+this.element+'ScrollRight" class="arrowRight" onclick="return false;"></a>';	
	
		html += '<div id="'+this.element+'Outer" class="productListOuter">';

		//Produktliste erstellen 
		
		if(data.length > 1){
		
			//#0
			html += '			<div id="'+this.element+'List0" class="'+this.element+'List productList">';
			for(i=0; i < data.length;i++){
				if(data[i][1] == ""){
					data[i][1] = '#';
				}
				
				html += '			<a id="'+this.element+'List0Link'+i+'" href="'+ unescape(data[i][1]) +'" title="'+ data[i][2] +'" ><img id="'+this.element+'List0Image'+i+'" src="'+ data[i][0].src +'" title="'+ data[i][2] +'" alt="'+ data[i][2] +'" width="82" /></a>';
			}
			html += '			</div>';
	
			//#1
			html += '			<div id="'+this.element+'List1" class="'+this.element+'List productList">';
			for(i=0; i < data.length;i++){
				if(data[i][1] == ""){
					data[i][1] = '#';
				}
							
				html += '			<a id="'+this.element+'List1Link'+i+'" href="'+ unescape(data[i][1]) +'" title="'+ data[i][2] +'" ><img id="'+this.element+'List1Image'+i+'" src="'+ data[i][0].src +'" title="'+ data[i][2] +'" alt="'+ data[i][2] +'" width="82" /></a>';
			}
			html += '			</div>';
			
			//#2
			html += '			<div id="'+this.element+'List2" class="'+this.element+'List productList">';
			for(i=0; i < data.length;i++){
				
				if(data[i][1] == ""){
					data[i][1] = '#';
				}
							
				html += '			<a id="'+this.element+'List2Link'+i+'" href="'+ unescape(data[i][1]) +'" title="'+ data[i][2] +'" ><img id="'+this.element+'List2Image'+i+'" src="'+ data[i][0].src +'" title="'+ data[i][2] +'" alt="'+ data[i][2] +'" width="82" /></a>';
			}
			html += '			</div>';		

		
		}else{

			html += '			<div id="'+this.element+'List1" class="'+this.element+'List productList" style="left:325px;">';
			for(i=0; i < data.length;i++){
				html += '			<a id="'+this.element+'List1Link'+i+'" href="'+ unescape(data[i][1]) +'" title="'+ data[i][2] +'" ><img id="'+this.element+'List1Image'+i+'" src="'+ data[i][0].src +'" title="'+ data[i][2] +'" alt="'+ data[i][2] +'" width="82" /></a>';
			}
			html += '			</div>';		
		
		}
	
		html += '</div>';

		html += '		</div>';
		html += '	</div>';
		
		html += '	<div class="productShowInfo">';
		html += '		<div id="'+this.element+'spitze" class="spitze spitzePos3"></div>';
		html += '		<div class="productShowInfoInner">';
		
		this.start_headline = "";
		this.start_text = "";
		this.start_link = "";

		if(data[3][2] != ""){
			this.start_headline = data[3][2];
		}

		if(data[3][3] != ""){
			this.start_text = unescape(data[3][3]);
		}

		if(data[3][1] != ""){
			this.start_link = '<a href="'+unescape(data[3][1])+'">zum Produkt</a>';
		}
		
		html += '			<h3 id="'+this.element+'Headline">'+this.start_headline+'</h3>';
		html += '			<p 	id="'+this.element+'Text">'+this.start_text+'</p>';
		html += '			<p 	style="text-align:right;" id="'+this.element+'Link">'+this.start_link+'</p>';
		
		html += '		</div>';
		html += '	</div>';
	
	
		return html;
	}

	this.setSlideShowHTML = function(e,html){
		$(e).innerHTML = html;
	}
	
	
	this.setStartPos = function(e){
		if(data.length > 6){
			var newLeft = 0 - parseFloat($(e+'List0').getStyle('width'));
		
			var newLeft = newLeft + 4;
			$(e+'Outer').setStyle({ left: newLeft+'px' });
		}
	}
	
	this.setControlHandler = function(){
		if(data.length > 6){

			Event.observe($(this.element+'ScrollLeft'),'mouseover', function(){ this.hoverOver(1); }.bind(this));
			Event.observe($(this.element+'ScrollLeft'),'mouseout', function(){ this.hoverOut(1); }.bind(this));
			
			Event.observe($(this.element+'ScrollRight'),'mouseover', function(){ this.hoverOver(2); }.bind(this));
			Event.observe($(this.element+'ScrollRight'),'mouseout', function(){ this.hoverOut(2); }.bind(this));
	
			for(var i=0; i < data.length;i++){
				Event.observe($(this.element+'List0Link'+i),'mouseover', function(e){ this.hoverEvents(e); }.bind(this));
				Event.observe($(this.element+'List1Link'+i),'mouseover', function(e){ this.hoverEvents(e); }.bind(this));
				Event.observe($(this.element+'List2Link'+i),'mouseover', function(e){ this.hoverEvents(e); }.bind(this));
			}
		}else{
			/*for(var i=0; i < data.length;i++){
				Event.observe($(this.element+'List1Link'+i),'mouseover', function(e){ this.getInfo(e); }.bind(this));
			}*/
			
			for(var i=0; i < data.length;i++){
				Event.observe($(this.element+'List0Link'+i),'mouseover', function(e){ this.hoverEvents(e); }.bind(this));
				Event.observe($(this.element+'List1Link'+i),'mouseover', function(e){ this.hoverEvents(e); }.bind(this));
				Event.observe($(this.element+'List2Link'+i),'mouseover', function(e){ this.hoverEvents(e); }.bind(this));
			}			
			
		}
	
	}
	
	this.hoverEvents = function(e){
		this.setPosIndex(e);
		this.moveArrow(e);
		this.getInfo(e);
	}
	
	this.getInfo = function(e){
		element = e.element();
		
		actImage = element.id;
		

		
		aImgRegex = /List[0-9]+Image([0-9]+)/;
		
		aImgRegex.exec(actImage);
		
		var actImageNo  = RegExp.$1;
		
		
		if(data[actImageNo][2] != ""){
			$(this.element+'Headline').innerHTML = data[actImageNo][2];
		}else{
			$(this.element+'Headline').innerHTML = "";
		}
		
		if(data[actImageNo][3] != ""){
			$(this.element+'Text').innerHTML = unescape(data[actImageNo][3]);
		}else{
				$(this.element+'Text').innerHTML = "";
		}
		
		if(data[actImageNo][1] != "" && data[actImageNo][1] != "#"){
			$(this.element+'Link').innerHTML = '<a href="'+unescape(data[actImageNo][1])+'">zum Produkt</a>';
		}else{
			$(this.element+'Link').innerHTML = '';
		}

	}
	
	this.updateMarker = function(e){
	/*	startElement = this.actElement;
		
		element = e.element();
		actImage = element.id;

		aImgRegex = /List[0-9]+Image([0-9]+)/;
		aImgRegex.exec(actImage);
		
		var actImageNo  = RegExp.$1;
	*/
	}
	
	this.getPosIndex = function(e){
		
		element = e.element();
		actImage = element.id;

		aImgRegex = /List[0-9]+Image([0-9]+)/;
		aImgRegex.exec(actImage);
		
		var actImageNo  = RegExp.$1;
		
		alert(this.posIndex[actImageNo]);	
	}
	
	this.updatePosIndex = function(direction){
		if(direction == 'left'){
			var lastPos = this.posIndex[this.posIndex.length - 1];
			
			this.posIndex.pop();
			this.posIndex.unshift(lastPos);
		}

		if(direction == 'right'){
			var firstPos = this.posIndex[0];
			
			this.posIndex.shift();
			this.posIndex.push(firstPos);
		}

	}	
	
	this.setPosIndex = function(e){

		element = e.element();
		actImage = element.id;

		aImgRegex = /List[0-9]+Image([0-9]+)/;
		aImgRegex.exec(actImage);
		
		var actImageNo  = RegExp.$1;

		for(var i=0; i < this.posIndex.length;i++){
				
			if(actImageNo == this.posIndex[i]){
				if(i == 0){ this.markerPos = i; }
				if(i == 1){ this.markerPos = i; }
				if(i == 2){ this.markerPos = i; }
				if(i == 3){ this.markerPos = i; }
				if(i == 4){ this.markerPos = i; }
				if(i == 5){ this.markerPos = i; }
				if(i == 6){ this.markerPos = i; }
			}
		}
			
	}
	
	this.moveArrow = function(e){
		
		element = e.element();
		actImage = element.id;

		aImgRegex = /List[0-9]+Image([0-9]+)/;
		aImgRegex.exec(actImage);
		
		var actImageNo  = RegExp.$1;		
		
		$(this.element+'spitze').className = 'spitze spitzePos' + this.markerPos;
		this.actElement = actImageNo;
	}
	
	this.updateInfo = function(direction){
		
		var nextElement = this.actElement;
		
		var faktor = 1;
		
		if(direction == 'left'){
			if((parseInt(nextElement) - parseInt(faktor)) == -1){
				nextElement = parseInt(data.length) - parseInt(faktor);
			}else{
				nextElement = parseInt(nextElement) - parseInt(faktor);
			}
		}
		
		
		if(direction == 'right'){
			if((parseInt(nextElement) + parseInt(faktor)) == data.length){
				nextElement = 0;
			}else{
				nextElement = parseInt(nextElement) + parseInt(faktor);
			}
		}		
		
		

		if(data[nextElement][2] != ""){
			$(this.element+'Headline').innerHTML = data[nextElement][2];
		}else{
			$(this.element+'Headline').innerHTML = "";
		}
		
		if(data[nextElement][3] != ""){
			$(this.element+'Text').innerHTML = unescape(data[nextElement][3]);
		}else{
				$(this.element+'Text').innerHTML = "";
		}
		
		if(data[nextElement][1] != "" && data[nextElement][1] != "#"){
			$(this.element+'Link').innerHTML = '<a href="'+unescape(data[nextElement][1])+'">zum Produkt</a>';
		}else{
			$(this.element+'Link').innerHTML = '';
		}
		

		
		this.actElement = nextElement;
		
		
		this.updatePosIndex(direction);		
		
	
	}
	
	var myMove = Class.create(Effect.Move,{
		initialize: function(element) {
		    this.element = $(element);
		    if (!this.element) throw(Effect._elementDoesNotExistError);
		    var options = Object.extend({
		      x:    0,
		      y:    0,
		      mode: 'relative',
		      parent: 0
		    }, arguments[1] || { });

		    this.start(options);
		  }	
	});
	
	this.moveLeftCallback = function(){

		//this.parent.updateInfo('left');

		if(this.parent.hover == 1){ 
			
			if(parseFloat($(this.parent.element+'Outer').getStyle("left")) > 0){
				this.parent.setStartPos(this.parent.element);
			}
			
			this.parent.moveLeft(); 
						
		}else{ 
			if(parseFloat($(this.parent.element+'Outer').getStyle("left")) > 0){
				this.parent.setStartPos(this.parent.element);
			}		
		
			this.parent.effectRunning = false; 
		}
		

	}

	this.moveRightCallback = function(){

		//this.parent.updateInfo('right');

		if(this.parent.hover == 2){ 
		
			if(parseFloat($(this.parent.element+'Outer').getStyle("left")) < (0 - (parseFloat($(this.parent.element+'List0').getStyle("width")) + parseFloat($(this.parent.element+'List1').getStyle("width"))-79))){
				this.parent.setStartPos(this.parent.element);
			}	
			
			this.parent.moveRight(); 
		}else{ 
			if(parseFloat($(this.parent.element+'Outer').getStyle("left")) < (0 - (parseFloat($(this.parent.element+'List0').getStyle("width")) + parseFloat($(this.parent.element+'List1').getStyle("width"))-79))){
				this.parent.setStartPos(this.parent.element);
			}			
		
			this.parent.effectRunning = false; 
		}
		
	
	}

	this.moveLeft = function(){
		this.effectRunning = true;
		this.updateInfo('left');
		var moveEffect = new myMove($(this.element+'Outer'), {parent: this, x: 111, y: 0,duration: 1.0,  transition: Effect.Transitions.linear, delay: 0.07, afterFinish: this.moveLeftCallback, queue: {position:'end', scope: this.element, limit:1}},this);
	}

	this.moveRight = function(){
		this.effectRunning = true;
		this.updateInfo('right');
		var moveEffect = new myMove($(this.element+'Outer'), {parent: this, x: -111, y: 0, duration: 1.0,  transition: Effect.Transitions.linear, delay: 0.07, afterFinish: this.moveRightCallback, queue: {position:'end', scope: this.element, limit:1}},this);		
	}

	this.hoverOver = function(direction){
		this.hover = direction;
		
		if(this.effectRunning) return;
		if(direction == 1){
			this.moveLeft();
		}else{
			this.moveRight();
		}
	}

	this.hoverOut = function(){
		this.hover = 0;
	}

	this.initSlideShow = function(){
		data = this.loadImages(data);
		
		this.setSlideShowHTML(this.element,this.getSlideShowHTML(data));
		
		this.setControlHandler();
		
	}

	this.initSlideShow();
	this.setStartPos(this.element);
	
	this.setStartPos(this.element);
}