/*...............................................*/
/* View-all-models Slider,apdated for LU    	 */
/*...............................................*/

slideTeaserSlider_status=0;
slideThumbnailSlider_status=0;
imageLoadError	= 0;
var page;

function initModelsSlider()
{
	itemsPerPage	= 1;
	page			= 1;
	itemList		= new Array();
	ulTarget 		= document.getElementById("displayModelsSlider");
	ulDatabase		= document.getElementById("modelsSliderDatabase");
	ulDatabaseLength= ulDatabase.getElementsByTagName("li").length;
	numberPages		= Math.ceil(ulDatabaseLength / itemsPerPage);
	amountOverflow	= itemsPerPage;
	widthTeaserElement = 620;
	
	// Set Layer to hide activities:
	$("div#containerMainContent").append("<div id='loadingOverlay' style='z-index:40;background-color:white;height:550px;width:1000px;position:absolute;top:0;'></div>");


	// Write Progress-Indicator:
	$("div#containerMainContent").append("<table class='progressIndicator' style='z-index:45;position:absolute;left:490px;top:265px;'><tr><td valign='middle' align='center'><img src='assets/images/progressIndicator.gif'/></td></tr></table>");

	// Empty target:
	$(ulTarget).empty();
	
	emptyPageFillers=0;
	
	lastPageStart 	= ulDatabaseLength - itemsPerPage;
	
	
	$(document).ready(function() {
		$("#boxCtaButtons .button").each(function (){
			if (!$("span.btnText", this).length>0) {
				$(this).append('<span class="btnText">' + $(this).text() + '</span>').contents().not("span").remove();
			}
		});
		if(numberPages>2)
		{
			generateSliderStageItems(getPage(-2),'last','a');
			generateSliderStageItems(getPage(-1),'last','a');
			generateSliderStageItems(page,'','a');
			generateSliderStageItems(getPage(+1),'','a');
			generateSliderStageItems(getPage(+2),'','a');
			//$(ulTarget).css("left","-859px");
			$(ulTarget).css("left","0px");
		}
		else if(numberPages==2)
		{
			generateSliderStageItems(numberPages,'last','a');
			generateSliderStageItems(page,'','a');
			generateSliderStageItems(numberPages,'','a');
			//$(ulTarget).css("left","-859px");
			$(ulTarget).css("left","0px");
		}
		else if(numberPages==1)
		{
			generateSliderStageItems(page,'','a');
			$(ulTarget).css("left","0px");
		}
	});
	$(window).load(function() {
		if(numberPages>1)
		{
			$(ulTarget).animate({ 
					left:"0px"
					}, 1100 );		
				$(ulTarget).animate({ 
					left:"-1055px"
					}, 340, 'easing', function(){
							$("ul#displayModelsSlider li.last").css("visibility","visible");
							writeModelPrice();
							writeCtaButtons();
						});
		}
	});

	$("#boxThumbnails").append("<ul id='thumbnails'></ul>");
	
	thumbnailImages = new Array;thumbnailImagesActive = new Array;
	for(i=0;i<ulDatabaseLength;i++)
	{
		var imagePath = ulDatabase.getElementsByTagName("li")[i].getElementsByTagName("img")[0].src;
		var modelName = ulDatabase.getElementsByTagName("li")[i].getElementsByTagName("p")[0].getElementsByTagName("span")[0].innerHTML;
		var thumbnailPath = imagePath.split(".png");
		thumbnailImages[i] = new Image();
		thumbnailImages[i].src = thumbnailPath[0] + "-thumbnail.jpg";
		thumbnailImagesActive[i] = new Image();
		thumbnailImagesActive[i].src = thumbnailPath[0] + "-thumbnail-active.jpg";				
	}
	
	//displayThumbnails();
	for(i=0;i<ulDatabaseLength;i++)
	{
		var imagePath = ulDatabase.getElementsByTagName("li")[i].getElementsByTagName("img")[0].src;
		var modelName = ulDatabase.getElementsByTagName("li")[i].getElementsByTagName("p")[0].getElementsByTagName("span")[0].innerHTML;
		var thumbnailPath = imagePath.split(".png");
		$("ul#thumbnails").append("<li onclick='slideToModel("+ (i+1) +")'><img src='" + thumbnailPath[0] + "-thumbnail.jpg'/><span>" + modelName + "</span></li>");
	}
	$(window).load(function() {
		var thumbnailSliderLength = 0;
		var thumbnailTextPadding = 20;
		var thumbnailSlider = $("ul#thumbnails").children("li").children("img");
		$.each(thumbnailSlider, function() {
						var thisWidth = $(this).width();
						thumbnailSliderLength = thumbnailSliderLength + thisWidth;
						$(this).parent("li").css("width", thisWidth+"px");
						$(this).parent("li").children("span").css("width", (thisWidth-thumbnailTextPadding)+"px");
										});
		$("ul#thumbnails").css("width",thumbnailSliderLength+"px");
		
		
		
		// If items don't fill up the complete width, share them over the width. If not, show scrollbar/slider:
		var parentBoxWidth = $("div#boxThumbnails").width();
		if(thumbnailSliderLength<parentBoxWidth)
		{
			var fillupWidth = parentBoxWidth - thumbnailSliderLength;
			/* center: var paddingSide = (parentBoxWidth - thumbnailSliderLength) / 2;
			$("ul#thumbnails").css("left", paddingSide+"px");*/
			var marginLeft = fillupWidth / (ulDatabaseLength-1);
			$("#boxContentSlider").css("display","none");
			$("#boxThumbnails").after("<div style='position:relative'><div style='position:absolute;z-index:51;top:-3px;left:38px;width:926px;height:3px;background-image:url(../../assets/images/view-all-models-bottom-outline.gif);background-repeat:no-repeat;overflow:hidden;'>&nbsp;</div></div>");
			$("ul#thumbnails").css("width",parentBoxWidth+"px");
			$("ul#thumbnails li").each(function(j){
												if(j!=0){$(this).css("margin-left", marginLeft+"px");}
												});
			
		}

		$("ul#thumbnails").ready(function (){updateModelThumbnailSlider()});
		
	});

	handleSlider();

	// If everything ready: Show page:
	$(document).ready(function() {
		$(window).load(function() {
		if(imageLoadError>0)
		{
			$("div#containerMainContent .progressIndicator").empty();
			$("div#containerMainContent").append("<table class='progressIndicator' style='z-index:45;position:absolute;height:550px;width:1000px;left:0;top:0;'><tr><td valign='middle' align='center'>Error: Application couldn't find all images!</td></tr></table>");
		}
		else
		{
			$("div.containerViewAllModelsStage").css("visibility","visible");			
			$("div#containerMainContent table.progressIndicator").remove();
			$("#loadingOverlay").fadeOut('slow');//.remove();
		}
								});
							  });
}
// Check, if all images are really loaded and found:
function checkImageLoad(element,group)
{
	imageLoadError=1;
}

function slideToModel(pageNumber)
{
	if(pageNumber != page)
	{
		// Select direction depending on actual page and target page:
		var wayLeft = 0; var wayRight = 0;
		var step = page; var final = 0;
		// left:
		while(final==0)
		{
			if(step==1){step=numberPages;}
			else {step--;}
			wayLeft++;
			if(step==pageNumber){final=1;}
		}
		// right:
		var step = page; var final = 0;
		while(final==0)
		{
			if(step==numberPages){step=1;}
			else {step++;}
			wayRight++;
			if(step==pageNumber){final=1;}
		}
		// compare:
		//alert("Right: " + wayRight + "\nLeft: " + wayLeft);
		if(wayLeft>wayRight){slideModels(+1,wayRight);}
		else {slideModels(-1,wayLeft);}
	}
}

function generateSliderStageItems(page,elemPos,copyElement)
{
	//alert("Gen Page: "+page);
	for(ij=0;ij<itemsPerPage;ij++)
	{
		var selectItem 	= ij+(itemsPerPage*(page-1));
		//alert("Item: "+selectItem);
		var newParent	= document.createElement("li");
		if(elemPos=='last')
		{newParent.className='last';}
		newParent.style.width = widthTeaserElement+"px"; // width is set global
		var newElement = ulDatabase.getElementsByTagName("li")[selectItem].getElementsByTagName(copyElement)[0].cloneNode(true);
//		var elementMargin = ulDatabase.getElementsByTagName("li")[selectItem].getElementsByTagName(copyElement)[0].innerHTML;

		var imgWidth = parseInt(ulDatabase.getElementsByTagName("li")[selectItem].getElementsByTagName("span")[0].innerHTML);
		//$(ulDatabase.getElementsByTagName("li")[selectItem].getElementsByTagName("img")[0]).css('border','4px solid blue');
		//alert("Img-width: " + imgWidth);
		var imgMargin = ((widthTeaserElement-imgWidth)/2) + "px";
		//alert('Neues Margin: ' + imgMargin + '\nVon Element: ' + selectItem);
		newElement.getElementsByTagName("img")[0].style.marginLeft = imgMargin;
		newParent.appendChild(newElement);
		ulTarget.appendChild(newParent);
	}	
}
/* Scrollbar: */
function handleSlider()
{
	$(window).load(
		function () 
		{		
		// Remove HTML-Slider:
		$("div#boxThumbnails").css("overflow","hidden");
		// Set JS Slider:
		  $("#contentSlider").slider({
			handle: ".ui-slider-handle",
			change: handleSliderChange,
			slide: handleSliderSlide
				});
		  // Set JS Slider Left and Right Buttons:
		  $("#boxContentSlider").append("<div class='buttonLeft' onclick='changeSlider(+1,20)'></div>");
		  $("#boxContentSlider").append("<div class='buttonRight' onclick='changeSlider(-1,20)'></div>");
	});

}
/* By click on the arrows or set new position:*/
function changeSlider(direction,step)
{
	//alert("slide in step: " + step);
	if(slideThumbnailSlider_status==0)
	{
		slideThumbnailSlider_status=1;
		var maxScroll = $("ul#thumbnails").attr("scrollWidth") -
					  $("div#boxThumbnails").width();
		var slideStep = step;
		var slideStepPerzent = (slideStep / maxScroll) * 100;
		var sliderLeft = parseFloat($("ul#thumbnails").css('left'));
		var sliderLeftPerzent = parseFloat($("div#contentSlider a").css('left'));
		var newLeft = (sliderLeft+(slideStep*direction));
		var newLeftPerzent = (sliderLeftPerzent+(slideStepPerzent*direction*-1));
		//
		if(newLeft<(maxScroll*-1)) {newLeft=(maxScroll*-1); newLeftPerzent=100;}
		if(newLeft>0) {newLeft=0;newLeftPerzent=0;}
		//console.info("newLeft: "+newLeft+"\nmaxScroll: "+maxScroll);
		//
		if(newLeft<=0 && newLeft>=(maxScroll*-1))
		{
			$("ul#thumbnails").animate({left: (	newLeft + 'px')}, 200);
			$("div#contentSlider a").css("left", newLeftPerzent + "%");
		}
		$(document).ready(function(){slideThumbnailSlider_status=0;});
	}
}

function handleSliderChange(e, ui)
{
  var maxScroll = $("ul#thumbnails").attr("scrollWidth") -
				  $("div#boxThumbnails").width();
  $("ul#thumbnails").animate({left: (ui.value * (maxScroll / 100))*(-1) }, 200);
}

function handleSliderSlide(e, ui)
{
  var maxScroll = $("ul#thumbnails").attr("scrollWidth") -
				  $("div#boxThumbnails").width();
  $("ul#thumbnails").attr({left: (ui.value * (maxScroll / 100))*(-1) });
}

/* (END) Scrollbar */

function updateModelThumbnailSlider()
{
	var parentPosition = $("div#boxThumbnails").offset();
	// Write Active-Images in BG:
	for(i=0;i<ulDatabaseLength;i++)
	{
		var imagePath = ulDatabase.getElementsByTagName("li")[i].getElementsByTagName("img")[0].src;
		var modelName = ulDatabase.getElementsByTagName("li")[i].getElementsByTagName("p")[0].getElementsByTagName("span")[0].innerHTML;
		var thumbnailPath = imagePath.split(".png");
		var thisElement = document.getElementById("thumbnails").getElementsByTagName("li")[i];
		var bgImage= thumbnailPath[0] + "-thumbnail-active.jpg";
		//alert(bgImage);
		//$(thisElement).css("backgroundImage", "url("+bgImage+")");
		thisElement.style.backgroundImage="url("+bgImage+")";
	}	
	$("#thumbnails").children("li").children("img").css("visibility","visible");	
	var activeElement = document.getElementById("thumbnails").getElementsByTagName("li")[(page-1)];
	$(activeElement.getElementsByTagName("img")[0]).css("visibility","hidden");
	var position = $(activeElement).offset();
	//alert("Active Element left: " + position.left + " : Parent Element Left: " + parentPosition.left);
	var parentWidth = parseInt($("div#boxThumbnails").css('width'));
	var activeElementWidth = parseInt($(activeElement.getElementsByTagName("img")[0]).width());
	//alert($(thisElement.getElementsByTagName("img")[0]).width());
	//console.info(parseInt(position.left + activeElementWidth) + " > " + parseInt(parentPosition.left + parentWidth));
	if(position.left<parentPosition.left)
	{
		//alert("Slider zu weit links");
		changeSlider(+1,(parseInt(parentPosition.left)-parseInt(position.left)));
	}
	else if(
		parseInt(position.left + activeElementWidth) > parseInt(parentPosition.left + parentWidth)
	)
	{
		//alert("Slider zu weit rechts, change to:\n" + (position.left + activeElementWidth) - (parentPosition.left + parentWidth));
		changeSlider(-1,(parseInt(position.left + activeElementWidth) - parseInt(parentPosition.left + parentWidth)));
	}
}

function writeModelPrice()
{
	var thisElementModelname = ulDatabase.getElementsByTagName("li")[(page-1)].getElementsByTagName("p")[0].getElementsByTagName("span")[0].innerHTML;
	thisElementModelname = thisElementModelname + "<span class='price'>";
	thisElementModelname = thisElementModelname + ulDatabase.getElementsByTagName("li")[(page-1)].getElementsByTagName("p")[0].getElementsByTagName("span")[1].innerHTML;
	thisElementModelname = thisElementModelname + "&nbsp;";
	thisElementModelname = thisElementModelname + ulDatabase.getElementsByTagName("li")[(page-1)].getElementsByTagName("p")[0].getElementsByTagName("span")[2].innerHTML;
	thisElementModelname = thisElementModelname + "</span>";
	$("#modelnameViewer").html(thisElementModelname);
}

function writeCtaButtons() {
	var buttonData = $('li', ulDatabase).eq(page-1).find('.button, .cta');
	var onclickContent;
	$("#boxCtaButtons .button").each(function (i) {
		$("span.btnText", this).html(buttonData.eq(i).html());
		$(this).attr("href", buttonData.eq(i).attr("href"));
		if($(buttonData).eq(i).attr("onclick"))
		{
			onclickContent = $(buttonData).eq(i).attr("onclick");
			$(this).removeAttr("onclick");
			$(this).click(onclickContent);
		}
	});
}

function getPage(operation)
{
	var resultPage=page;
	if(operation>0)
	{
		for(i=0;i<operation;i++)
		{
			if(resultPage==numberPages)
			{resultPage=1;}
			else{resultPage++;}
		}
	}
	else if(operation<0)
	{
		for(i=0;i<Math.abs(operation);i++)
		{
			if(resultPage==1)
			{resultPage=numberPages;}
			else{resultPage--;}
		}
	}
	else {resultPage=page;}
	return resultPage;
}

function slideModels(direction,slidePages)
{
	pageElements = ulTarget.getElementsByTagName("li");
	var thisValue = parseInt(ulTarget.style.marginLeft)
	var thisLeft = parseInt(ulTarget.style.left);
	//alert(thisLeft);
	// TODO: Bitte auslesen und nicht fix setzen!!!
	elemWidth = widthTeaserElement;
	var thisRight = parseInt(ulTarget.style.right);
	// 
	// Collect the items, which have to be animated (reduced and removed OR expanded):
	var thisElement = new Array();
	if(direction==+1 && slideTeaserSlider_status==0)
	{
			if(slideTeaserSlider_status==0)
			{
				slideTeaserSlider_status++;
				
				for(i=0;i<(itemsPerPage*slidePages);i++)
				{
					// Hier ist die Stelle: Ein Element mehr, Seite wird also falsch abgefragt.
						if(i==0 || i%itemsPerPage==0)
						{
							j=0;
							if(page==numberPages){page=1;}else{page++;}
							if(page==numberPages){var nextPage=1;}else{var nextPage=page+1;}
						}
	
					
					writeModelPrice();
					writeCtaButtons();
					
					var getThisElement = page+1;
					if(getThisElement==numberPages){getThisElement=0;}
					if(getThisElement>numberPages){getThisElement=1;}
					//console.info("RECHTS || Aktuelle Page: " + page + " Selektiere dieses LI: " + getThisElement);
					
					//alert("Next page= " + getThisElement);
					thisElement[i] = ulTarget.getElementsByTagName("li")[i];
					var newParent	= document.createElement("li");
					newParent.style.width = widthTeaserElement+"px";
					var imgWidth = parseInt(ulDatabase.getElementsByTagName("li")[getThisElement].getElementsByTagName("span")[0].innerHTML);
					var imgMargin = ((widthTeaserElement-imgWidth)/2) + "px";
					var newElement 	= ulDatabase.getElementsByTagName("li")[getThisElement].getElementsByTagName("a")[0].cloneNode(true);
					newElement.getElementsByTagName("img")[0].style.marginLeft = imgMargin;				
					newParent.appendChild(newElement);
					ulTarget.appendChild(newParent);
					j++;
				}
				var animateValue="0px;";				
			}
	}
	else if(direction==-1 && slideTeaserSlider_status==0)
	// TODO: Calculate exactly the position of the handling page-element!! itemsPerPage*slidePages
	{
		slideTeaserSlider_status++;
		
		for(i=((itemsPerPage*slidePages));i>0;i--)
		{
			if(i==((itemsPerPage*slidePages)) || i%itemsPerPage==0)
			{
				j=2;
				if(page==1){page=numberPages;}else{page--;}
				if(page==1){var nextPage=numberPages;}else{var nextPage=page-1;}
			}		
	
	
			writeModelPrice();
			writeCtaButtons();
	
			var getThisElement = page-3;
			if(getThisElement==-1){getThisElement=(numberPages-1);}
			if(getThisElement==-2){getThisElement=(numberPages-2);}
			//console.info("LINKS || Aktuelle Page: " + page + " Selektiere dieses LI: " + getThisElement);
	
			// Prepend new Element:
			var newParent	= document.createElement("li");	// i+(itemsPerPage*(page-1))
			//alert("Get element nr: " + (j+(itemsPerPage*(nextPage-1))));
			var imgWidth = parseInt(ulDatabase.getElementsByTagName("li")[getThisElement].getElementsByTagName("span")[0].innerHTML);
			var imgMargin = ((widthTeaserElement-imgWidth)/2) + "px";		
			var newElement 	= ulDatabase.getElementsByTagName("li")[getThisElement].getElementsByTagName("a")[0].cloneNode(true);
			newParent.style.width="0px";
			newElement.getElementsByTagName("img")[0].style.marginLeft = imgMargin;
			newParent.appendChild(newElement);
			$(ulTarget).prepend(newParent);
			thisElement[(i-1)]=newParent;
			j--;
		}
		var animateValue="620px;";
	}
	else {}
	//alert("stop: " + thisElement + "\n" + direction + "\n" + animateValue);
	doModelSlide(thisElement,direction,animateValue);
}

ulTargetLength=0;
function doModelSlide(thisElement,direction,animateValue)
{
	updateModelThumbnailSlider();	
	// alert(thisElement + " | " + direction + " | " + animateValue);
	slideTeaserSlider_status=1;
	$(thisElement).css("overflow","hidden");
	$(thisElement).animate({ 
		width:animateValue
		}, 340,'easing', function(){
			if(direction==-1) { 
				ulTargetLength = ulTarget.getElementsByTagName("li").length;
				//alert("Content BEFOR do:\n"+ulTarget.innerHTML);
				//alert("Anfang: "+ulTarget.getElementsByTagName("li")[ulTarget.getElementsByTagName("li").length].innerHTML);
				//alert("Laenge: "+ ulTargetLength);
				var knoten = ulTarget.getElementsByTagName("li")[(ulTargetLength-1)];
				ulTarget.removeChild(knoten);
				ulTargetLength--;
				//alert("Content after do:\n"+ulTarget.innerHTML);
			}
			else if(direction==+1) {
				var ulTargetLength = ulTarget.getElementsByTagName("li").length;
				//alert("Laenge: " + ulTargetLength + "\ndirection +1: " + ulTarget.getElementsByTagName("li")[0].innerHTML);
				var knoten = ulTarget.getElementsByTagName("li")[0];
				ulTarget.removeChild(knoten);		
			}
			else
			{
				alert("Unsupported Error.");
			}
			slideTeaserSlider_status++;
			if(slideTeaserSlider_status>itemsPerPage)
			{
				slideTeaserSlider_status=0;
				updateModelThumbnailSlider();
			}
			slideTeaserSlider_status=0;

			});
}