/******************************************************************************/
/* Endlos Slider                                                              */
/* Eder IT                                                                    */
/* Gregor Schatz                                                              */
/******************************************************************************/

var slideBoxes = new Array(); // contains the moved containers script)
var slideBoxContents = new Array(); // contains the contents of then moved containers (title, image url and link url)

// we define the contents as title, url and image
//slideBoxContents.push({"title":"Clever!","url":"front_content.php?idart=216","img":"upload/Produktionen/Primetime-Show/Clever/bilder_thumb/clever_thumb.png"});
//slideBoxContents.push({"title":"Chartbreak-Hotel","url":"front_content.php?idart=215","img":"upload/Produktionen/Primetime-Show/Chartbreak-Hotel/bilder_thumb/chartbreakhotel_thumb.jpg"});
//slideBoxContents.push({"title":"Comeback","url":"front_content.php?idart=217","img":"upload/Produktionen/Primetime-Show/Comeback_-_Die_groe_chance/bilder_thumb/logo_come_back_thumb.jpg"});

var slideBoxWidth = 166;
var slideSpeed = 0;
var defSlideSpeed = 10;

function generateContents(contents) {
	slideBoxContents = contents;
	galleryViewPort = document.getElementById('galleryContainer');
	// create html for the defined contents
	// slideBoxContents.forEach(function (element, index, array) {
	slideBoxContents.each(function (element, index) {
								var posleft = 14 + index * slideBoxWidth;
								var tmpDiv = document.createElement('div');
								var tmpID = document.createAttribute('id');
									tmpID.nodeValue = 'slidebox'+index;
									tmpDiv.setAttributeNode(tmpID);
								var tmpClass = document.createAttribute('class');
									tmpClass.nodeValue = 'slideBox';
									tmpDiv.setAttributeNode(tmpClass);
								/*
								// this does not work fo IE
								var tmpStyle = document.createAttribute('style');
									tmpStyle.nodeValue = 'position:absolute;height:106px;width:'+slideBoxWidth+'px;left:'+posleft+'px;';
									tmpDiv.setAttributeNode(tmpStyle);
								*/
								// workaround for IE
								tmpDiv.style.position = 'absolute';
								tmpDiv.style.height = '106px';
								tmpDiv.style.width = slideBoxWidth+'px';
								tmpDiv.style.left = posleft+'px';
								tmpDiv.innerHTML = '<table border="0"><tr><td><div class="highlight"><a href="'+element['url']+'" onfocus="if(this.blur())this.blur();"><img class="highlightbg" src="'+element['img']+'" alt="'+element['title']+'" title="" /></a></div></td></tr></table>';
								//slideBoxes[index] = tmpDiv;
								galleryViewPort.appendChild(tmpDiv);
								slideBoxes[index] = tmpDiv;
								//slideBoxes[index] = document.getElementById('slidebox'+index);
							});
	
	// initial positions
	//slideBoxes.forEach(function (element, index, array) { var leftPos = element.offsetLeft; element.style.left = (14+index*slideBoxWidth) + 'px'; });
	slideBoxes.each(function (element, index) { var leftPos = element.offsetLeft; element.style.left = (14+index*slideBoxWidth) + 'px'; });
	
}

function initSlideShow(startpage,lang) {
	galleryViewPort = document.getElementById('galleryContainer');
	
	if (window.addEventListener)
	        /** DOMMouseScroll is for mozilla. */
	       galleryViewPort.addEventListener('DOMMouseScroll', function(event){slideWheel(event);}, false);
	/** IE/Opera. */
		galleryViewPort.onmousewheel = function(event){slideWheel(event);};
	document.getElementById('arrow_left').onmousemove = startSlide;
	document.getElementById('arrow_left').onmouseout = releaseSlide;
	document.getElementById('arrow_right').onmousemove = startSlide;
	document.getElementById('arrow_right').onmouseout = releaseSlide;
	
	gallerySlide();

	if (startpage) {
		showSlider(lang);
	}
}

function startSlide(e) {
	if (document.all) e = event;
	var id = this.id;
	this.getElementsByTagName('IMG')[0].src = 'images/' + this.id + '_over.gif';
	
	if (this.id == 'arrow_right') {
		slideSpeed = -defSlideSpeed;
	} else {
		slideSpeed = defSlideSpeed;
	}
}

function releaseSlide() {
	var id = this.id;
	this.getElementsByTagName('IMG')[0].src = 'images/' + this.id + '.gif';
	slideSpeed = 0;
}

function gallerySlide() {
	if (slideSpeed != 0) {
		galleryMove();
	}
	setTimeout('gallerySlide()', 20);
}

function galleryMove() {
	//slideBoxes.forEach(function (element, index) {
	slideBoxes.each(function (element, index) {
			var leftPos = element.offsetLeft;
			var oldPos = leftPos;
			leftPos = leftPos / 1 + slideSpeed;
			if (slideBoxes.length <=6) {
				// fixed flip on the end
				if (leftPos + slideBoxWidth < 14) {
					leftPos = leftPos + 6 * slideBoxWidth;
				} else if (leftPos  > 5 * slideBoxWidth) {
					leftPos = leftPos - 6 * slideBoxWidth;
				}
			} else {
				// dynamic flip to the end of the elements queue
				if (leftPos + slideBoxWidth < 14) {
					leftPos = leftPos + slideBoxes.length * slideBoxWidth;
				} else if (leftPos > 5 * slideBoxWidth -14) {
					leftPos = leftPos - slideBoxes.length * slideBoxWidth;
				}
			}
			element.style.left = leftPos + 'px';
			var newPos = element.offsetLeft;
		});
}

function slideWheel(event) {
		var delta = 0;
		if (!event) /* For IE. */
			event = window.event;
		if (event.wheelDelta) { /* IE/Opera. */
			delta = event.wheelDelta/120;
			if (window.opera)
				delta = -delta;
		} else if (event.detail) { /** Mozilla case. */
			delta = -event.detail/3;
		}
		if (delta) {
			slideSpeed = delta * 3 * defSlideSpeed;
			galleryMove();
			slideSpeed = 0;
		}
		if (event.preventDefault)
			event.preventDefault();
		event.returnValue = false;
}

//window.onload = initSlideShow;
//window.onDomReady(function(){initSlideShow(true, 1);});