/*! $Id: view-all-models-slider.js 6700 2009-10-21 18:26:57Z bhillebrand $ */
/*global $: false, window: false, page: true, amountOverflow: true, itemList: true, itemsPerPage: true, numberPages: true, page: true,
 ulDatabase: true, ulDatabaseLength: true, ulTarget: true, widthTeaserElement: true, elemWidth: true, emptyPageFillers: true, pageElements: true,
 imageLoadError: true, slideTeaserSlider_status: true, slideThumbnailSlider_status: true, lastPageStart: true, oCtaHelper: true */
"use strict";

/*..............................*/
/* View-all-models Slider		*/
/*..............................*/

imageLoadError	= 0;
slideTeaserSlider_status = 0;
slideThumbnailSlider_status = 0;
//ulTargetLength = 0;

function getPage(operation) {
	var i,
		resultPage = page;

	if (operation > 0) {
		for (i = 0; i < operation; i += 1) {
			if (resultPage === numberPages) {
				resultPage = 1;
			}
			else {
				resultPage += 1;
			}
		}
	}
	else if (operation < 0) {
		for (i = 0; i < operation; i += 1) {
			if (resultPage === 1) {
				resultPage = numberPages;
			}
			else {
				resultPage -= 1;
			}
		}
	}
	else {
		resultPage = page;
	}
	return resultPage;
}

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

	/* if the oCtaHelper object is loaded, do a group refresh to cover possible changes in height by changed content length */
	if (typeof oCtaHelper === 'object' && $.isFunction(oCtaHelper.refreshGroup)) {
		oCtaHelper.refreshGroup(buttonGroup);
	}
}

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 changeSlider(direction, step) {
	var maxScroll,
		newLeft,
		newLeftPerzent,
		sliderLeft,
		sliderLeftPerzent,
		slideStep,
		slideStepPerzent;

	if (slideThumbnailSlider_status === 0) {
		slideThumbnailSlider_status = 1;
		maxScroll = $("ul#thumbnails").attr("scrollWidth") -
		$("div#boxThumbnails").width();
		slideStep = step;
		slideStepPerzent = (slideStep / maxScroll) * 100;
		sliderLeft = parseFloat($("ul#thumbnails").css('left'));
		sliderLeftPerzent = parseFloat($("div#contentSlider a").css('left'));
		newLeft = (sliderLeft + (slideStep * direction));
		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 updateModelThumbnailSlider() {
	var activeElement,
		activeElementWidth,
		bgImage,
		i,
		imagePath,
		modelName,
		parentPosition = $("div#boxThumbnails").offset(),
		parentWidth,
		position,
		thisElement,
		thumbnailPath;

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

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) });
}

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>");
	});

}

function generateSliderStageItems(page, elemPos, copyElement) {
	var ij,
		//elementMargin,
		imgMargin,
		imgWidth,
		newElement,
		newParent,
		selectItem;

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

		imgWidth = parseInt(ulDatabase.getElementsByTagName("li")[selectItem].getElementsByTagName("span")[0].innerHTML, 10);
		//$(ulDatabase.getElementsByTagName("li")[selectItem].getElementsByTagName("img")[0]).css('border', '4px solid blue');
		//alert("Img-width: " + imgWidth);
		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);
	}
}

function checkImageLoad(element, group) {
	imageLoadError = 1;
}

function doModelSlide(thisElement, direction, animateValue) {
	var knoten,
		ulTargetLength;

	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);
			knoten = ulTarget.getElementsByTagName("li")[(ulTargetLength - 1)];
			ulTarget.removeChild(knoten);
			ulTargetLength -= 1;
			//alert("Content after do:\n"+ulTarget.innerHTML);
		}
		else if (direction === +1) {
			ulTargetLength = ulTarget.getElementsByTagName("li").length;
			//alert("Laenge: " + ulTargetLength + "\ndirection +1: " + ulTarget.getElementsByTagName("li")[0].innerHTML);
			knoten = ulTarget.getElementsByTagName("li")[0];
			ulTarget.removeChild(knoten);
		}
		else {
			alert("Unsupported Error.");
		}
		slideTeaserSlider_status += 1;
		if (slideTeaserSlider_status > itemsPerPage) {
			slideTeaserSlider_status = 0;
			updateModelThumbnailSlider();
		}
		slideTeaserSlider_status = 0;

	});
}

function slideModels(direction, slidePages) {
	var animateValue,
		getThisElement,
		imgMargin,
		imgWidth,
		i,
		j,
		newElement,
		newParent,
		nextPage,
		thisElement = [];
		//thisLeft = parseInt(ulTarget.style.left, 10),
		//thisRight = parseInt(ulTarget.style.right, 10),
		//thisValue = parseInt(ulTarget.style.marginLeft, 10);

	pageElements = ulTarget.getElementsByTagName("li");
	//alert(thisLeft);
	// TODO: Bitte auslesen und nicht fix setzen!!!
	elemWidth = widthTeaserElement;

	// Collect the items, which have to be animated (reduced and removed OR expanded):
	if (direction === +1 && slideTeaserSlider_status === 0) {
		if (slideTeaserSlider_status === 0) {
			slideTeaserSlider_status += 1;

			for (i = 0; i < (itemsPerPage * slidePages); i += 1) {
				// 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 += 1;
					}
					if (page === numberPages) {
						nextPage = 1;
					}
					else {
						nextPage = page + 1;
					}
				}

				writeModelPrice();
				writeCtaButtons();

				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];
				newParent	= document.createElement("li");
				newParent.style.width = widthTeaserElement + "px";
				imgWidth = parseInt(ulDatabase.getElementsByTagName("li")[getThisElement].getElementsByTagName("span")[0].innerHTML, 10);
				imgMargin = ((widthTeaserElement - imgWidth) / 2) + "px";
				newElement	= ulDatabase.getElementsByTagName("li")[getThisElement].getElementsByTagName("a")[0].cloneNode(true);
				newElement.getElementsByTagName("img")[0].style.marginLeft = imgMargin;
				newParent.appendChild(newElement);
				ulTarget.appendChild(newParent);
				j += 1;
			}
			animateValue = "0px;";
		}
	}
	else if (direction === -1 && slideTeaserSlider_status === 0) {
		// TODO: Calculate exactly the position of the handling page-element!! itemsPerPage * slidePages
		slideTeaserSlider_status += 1;

		for (i = ((itemsPerPage * slidePages)); i > 0; i -= 1) {
			if (i === ((itemsPerPage * slidePages)) || i % itemsPerPage === 0) {
				j = 2;
				if (page === 1) {
					page = numberPages;
				} else {
					page -= 1;
				}
				if (page === 1) {
					nextPage = numberPages;
				} else {
					nextPage = page - 1;
				}
			}

			writeModelPrice();
			writeCtaButtons();

			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:
			newParent	= document.createElement("li");	// i+(itemsPerPage*(page - 1))
			//alert("Get element nr: " + (j+(itemsPerPage*(nextpage - 1))));
			imgWidth = parseInt(ulDatabase.getElementsByTagName("li")[getThisElement].getElementsByTagName("span")[0].innerHTML, 10);
			imgMargin = ((widthTeaserElement - imgWidth) / 2) + "px";
			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 -= 1;
		}
		animateValue = "620px;";
	}
	doModelSlide(thisElement, direction, animateValue);
}

function slideToModel(pageNumber) {
	var fertig = false,
		step = page,
		wayLeft = 0,
		wayRight = 0;

	if (pageNumber !== page) {
		// Select direction depending on actual page and target page:

		// left:
		while (!fertig) {
			if (step === 1) {
				step = numberPages;
			}
			else {
				step -= 1;
			}
			wayLeft += 1;
			if (step === pageNumber) {
				fertig = true;
			}
		}
		// right:
		step = page;
		fertig = false;
		while (!fertig) {
			if (step === numberPages) {
				step = 1;
			}
			else {
				step += 1;
			}
			wayRight += 1;
			if (step === pageNumber) {
				fertig = true;
			}
		}
		// compare:
		//alert("Right: " + wayRight + "\nLeft: " + wayLeft);
		if (wayLeft > wayRight) {
			slideModels(+1, wayRight);
		}
		else {
			slideModels(-1, wayLeft);
		}
	}
}

function initModelsSlider() {
	var thumbnailPath, //local???
		modelName,
		i,
		imagePath,
		thumbnailImages = [],
		thumbnailImagesActive = [];

	itemsPerPage		= 1;
	amountOverflow		= itemsPerPage;
	page				= 1;
	itemList			= [];
	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/global/preloader-white.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((numberPages - 1), 'last', 'a');
			generateSliderStageItems(numberPages, '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>");

	for (i = 0; i < ulDatabaseLength; i += 1) {
		imagePath = ulDatabase.getElementsByTagName("li")[i].getElementsByTagName("img")[0].src;
		modelName = ulDatabase.getElementsByTagName("li")[i].getElementsByTagName("p")[0].getElementsByTagName("span")[0].innerHTML;
		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 += 1) {
		imagePath = ulDatabase.getElementsByTagName("li")[i].getElementsByTagName("img")[0].src;
		modelName = ulDatabase.getElementsByTagName("li")[i].getElementsByTagName("p")[0].getElementsByTagName("span")[0].innerHTML;
		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,
		thumbnailTextPadding = 20,
		thumbnailSlider = $("ul#thumbnails").children("li").children("img"),
		parentBoxWidth,
		fillupWidth,
		marginLeft;

		$.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:
		parentBoxWidth = $("div#boxThumbnails").width();
		if (thumbnailSliderLength < parentBoxWidth) {
			fillupWidth = parentBoxWidth - thumbnailSliderLength;
			/* center: var paddingSide = (parentBoxWidth - thumbnailSliderLength) / 2;
			$("ul#thumbnails").css("left", paddingSide + "px");*/
			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/global/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:
	$(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();
		}
	});
}