/*! $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 = jQuery('li', ulDatabase).eq(page - 1).find('.button, .cta'),
		buttonGroup = jQuery("#boxCtaButtons .button").each(function (i) {
			jQuery("span.btnText", this).html(buttonData.eq(i).html());
			jQuery(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' && jQuery.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>";
	jQuery("#modelnameViewer").html(thisElementModelname);
}

function changeSlider(direction, step) {
	//alert("direction" + direction + "step" + step);
	var maxScroll,
		newLeft,
		newLeftPercent,
		sliderLeft,
		sliderLeftPercent,
		slideStep,
		slideStepPercent;

	if (slideThumbnailSlider_status === 0) {
		slideThumbnailSlider_status = 1;
		maxScroll = jQuery("ul#thumbnails").attr("scrollWidth") -
		jQuery("div#boxThumbnails").width();
		slideStep = step;
		slideStepPercent = (slideStep / maxScroll) * 100;
		sliderLeft = parseFloat(jQuery("ul#thumbnails").css('margin-left'));
		sliderLeftPercent = parseFloat(jQuery("div#dynamicSlider a").css('left'));
		/* old version
		sliderLeft = parseFloat(jQuery("ul#thumbnails").css('left'));
		sliderLeftPercent = parseFloat(jQuery("div#contentSlider a").css('left'));
		*/
		newLeft = (sliderLeft + (slideStep * direction));
		newLeftPercent = (sliderLeftPercent + (slideStepPercent * direction * -1));
		//
		if (newLeft < (maxScroll * -1)) {
			newLeft = (maxScroll * -1);
			newLeftPercent = 100;
		}
		if (newLeft > 0) {
			newLeft = 0;
			newLeftPercent = 0;
		}
		//console.info("newLeft: "+newLeft+"\nmaxScroll: " + maxScroll);
		
		
		/* new  */
		var scrollPane		= jQuery("#boxThumbnails"),
			scrollContent	= jQuery("ul#thumbnails");
		
		
		if (newLeft <= 0 && newLeft >= (maxScroll * -1)) {
			//scrollContent.animate({marginLeft: (Math.round(newLeftPercent / 100 *  (scrollPane.width() - scrollContent.width() )) + 'px')}, 200);
			//new scrollContent.css('margin-left', Math.round(newLeftPercent / 100 *  (scrollPane.width() - scrollContent.width() )) + 'px');
			//jQuery("ul#thumbnails").animate({left: (newLeft + 'px')}, 200);
			//scrollContent.css('margin-left', Math.round(newLeftPercent / 100 *  (scrollPane.width() - scrollContent.width() )) + 'px');
			scrollContent.animate({marginLeft: (Math.round(newLeftPercent / 100 *  (scrollPane.width() - scrollContent.width() )) + 'px')}, 200);
			//jQuery("div.scroll-bar a").animate({left: (newLeftPercent + '%')}, 200);
			jQuery("div#dynamicSlider a").css("left", newLeftPercent + "%");
		}
		jQuery(document).ready(function () {
			slideThumbnailSlider_status = 0;
		});
	}
}

function updateModelThumbnailSlider() {
	var activeElement,
		activeElementWidth,
		bgImage,
		i,
		imagePath,
		modelName,
		parentPosition = jQuery("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 + ")";
	}
	jQuery("#thumbnails").children("li").children("img").css("visibility", "visible");
	activeElement = document.getElementById("thumbnails").getElementsByTagName("li")[(page - 1)];
	jQuery(activeElement.getElementsByTagName("img")[0]).css("visibility", "hidden");
	position = jQuery(activeElement).offset();
	//alert("Active Element left: " + position.left + " : Parent Element Left: " + parentPosition.left);
	parentWidth = parseInt(jQuery("div#boxThumbnails").css('width'), 10);
	activeElementWidth = parseInt(jQuery(activeElement.getElementsByTagName("img")[0]).width(), 10);
	//alert(jQuery(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 handleSliderSlide(e, ui) {
	var scrollPane = jQuery("#boxThumbnails"),
		scrollContent = jQuery("ul#thumbnails");
		
	if(scrollContent.width() > scrollPane.width()){
		scrollContent.css('margin-left', Math.round( ui.value / 100 * ( scrollPane.width() - scrollContent.width() )) + 'px');
		}
	else {
		scrollContent.css('margin-left', 0);
	}	
}

function handleSlider() {
	jQuery(window).load(
	function () {
		// Remove HTML-Slider:
		jQuery("div#boxThumbnails").css("overflow", "hidden");
		// Set JS Slider:
		
        var container 				= jQuery('div#boxThumbnails'),
			ul 						= jQuery('ul', container),
			itemsWidth 				= ul.innerWidth() - container.outerWidth(),
			thumbnailSlider 		= jQuery("ul#thumbnails").children("li").children("img"),
			thumbnailSliderLength 	= 0,
			sliderWidth 			= jQuery("div#boxContentSlider").width(),
			scrollbar 				= jQuery("div#dynamicSlider").slider({
				slide: handleSliderSlide
			});

		jQuery.each(thumbnailSlider, function () {
			var thisWidth = jQuery(this).width();
			thumbnailSliderLength = thumbnailSliderLength + thisWidth;
		});
		
		
		var remainder = thumbnailSliderLength - jQuery("#boxThumbnails").width(),
			proportion = remainder / thumbnailSliderLength,
			handleSize = container.width() - (proportion * container.width()),
			/*handleSize = container.width() - (proportion * container.width()) - 46,
			handleSize = container.width() - (proportion * container.width()) - 44,
			handleSize = jQuery("#boxThumbnails").width() - (proportion * jQuery("#boxThumbnails").width()) - 44,
			var handleSize = jQuery("#boxThumbnails").width() - (proportion * jQuery("#boxThumbnails").width());*/
			handleHelper = scrollbar.find('.ui-slider-handle')
			.mousedown(function(){
				scrollbar.width( handleHelper.width() );
			})
			.mouseup(function(){
				//scrollbar.width( '926px' );
				scrollbar.width(sliderWidth);
			})
			.wrap('<div class="ui-handle-helper-parent"></div>').parent();
		scrollbar.find('.ui-slider-handle').css({
						width: handleSize,
						'margin-left': -handleSize/2
					});
		handleHelper.width('').width( scrollbar.width() - handleSize);
		
		// Set JS Slider Left and Right Buttons:
		/*jQuery("#boxContentSlider").append("<div class='buttonLeft' onclick='changeSlider(+1, 20)'></div>");
		jQuery("#boxContentSlider").append("<div class='buttonRight' onclick='changeSlider(-1, 20)'></div>");
		jQuery("#boxContentSlider").append("<div class='buttonLeft' onclick='slideToPreviousModel();'></div>");
		jQuery("#boxContentSlider").append("<div class='buttonRight' onclick='slideToNextModel();'></div>");*/
		jQuery("#boxContentSlider").append("<div class='buttonLeft' onclick='slideToThumbnail(-1);'></div>");
		jQuery("#boxContentSlider").append("<div class='buttonRight' onclick='slideToThumbnail(+1);'></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);
		//jQuery(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;
	jQuery(thisElement).css("overflow", "hidden");
	jQuery(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);
			jQuery(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;
		page				= 1;
		itemList			= [];
		ulTarget			= document.getElementById("displayModelsSlider");
		ulDatabase			= document.getElementById("modelsSliderDatabase");
		ulDatabaseLength	= ulDatabase.getElementsByTagName("li").length;
		numberPages			= Math.ceil(ulDatabaseLength / itemsPerPage);
		widthTeaserElement	= 620;

	// Set Layer to hide activities:
	jQuery("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:
	jQuery("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:
	jQuery(ulTarget).empty();

	emptyPageFillers = 0;
	lastPageStart	= ulDatabaseLength - itemsPerPage;

	jQuery(document).ready(function () {
						
				
		jQuery("#boxCtaButtons .button").each(function () {
			if (jQuery("span.btnText", this).length <= 0) {
				/*old jQuery(this).append('<span class="btnText">' + jQuery(this).text() + '</span>').contents().not("span").remove(); */
				jQuery(this).append('<span class="btnText">' + jQuery(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');
			//jQuery(ulTarget).css("left", "-859px");
			jQuery(ulTarget).css("left", "0px");
		}
		else if (numberPages === 2) {
			generateSliderStageItems(numberPages, 'last', 'a');
			generateSliderStageItems(page, '', 'a');
			generateSliderStageItems(numberPages, '', 'a');
			//jQuery(ulTarget).css("left", "-859px");
			jQuery(ulTarget).css("left", "0px");
		}
		else if (numberPages === 1) {
			generateSliderStageItems(page, '', 'a');
			jQuery(ulTarget).css("left", "0px");
		}
	});
	jQuery(window).load(function () {
		if (numberPages > 1) {
			jQuery(ulTarget).animate({left: "0px"}, 1100);
			jQuery(ulTarget).animate({left: "-1055px"}, 340, 'easing', function () {
				jQuery("ul#displayModelsSlider li.last").css("visibility", "visible");
				writeModelPrice();
				writeCtaButtons();
			});
		}
	});

	jQuery("#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");
		jQuery("ul#thumbnails").append("<li onclick='slideToModel(" + (i + 1) + ")'><img src='" + thumbnailPath[0] + "-thumbnail.jpg'/><span>" + modelName + "</span></li>");
	}
	jQuery(window).load(function () {
		var thumbnailSliderLength = 0,
		thumbnailTextPadding = 20,
		thumbnailSlider = jQuery("ul#thumbnails").children("li").children("img"),
		parentBoxWidth,
		fillupWidth,
		marginLeft;

		jQuery.each(thumbnailSlider, function () {
			var thisWidth = jQuery(this).width();

			thumbnailSliderLength = thumbnailSliderLength + thisWidth;
			jQuery(this).parent("li").css("width", thisWidth + "px");
			jQuery(this).parent("li").children("span").css("width", (thisWidth - thumbnailTextPadding) + "px");
		});
		jQuery("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 = jQuery("div#boxThumbnails").width();
		if (thumbnailSliderLength < parentBoxWidth) {
			fillupWidth = parentBoxWidth - thumbnailSliderLength;
			/* center: var paddingSide = (parentBoxWidth - thumbnailSliderLength) / 2;
			jQuery("ul#thumbnails").css("left", paddingSide + "px");*/
			marginLeft = fillupWidth / (ulDatabaseLength - 1);
			jQuery("#boxContentSlider").css("display", "none");
			jQuery("#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>");
			jQuery("ul#thumbnails").css("width", parentBoxWidth + "px");
			jQuery("ul#thumbnails li").each(function (j) {
				if (j !== 0) {
					jQuery(this).css("margin-left", marginLeft + "px");
				}
			});
		}
		jQuery("ul#thumbnails").ready(function () {
			updateModelThumbnailSlider();
		});

	});
	handleSlider();

	// If everything ready: Show page:
	jQuery(window).load(function () {
		if (imageLoadError > 0) {
			jQuery("div#containerMainContent .progressIndicator").empty();
			jQuery("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 {
			jQuery("div.containerViewAllModelsStage").css("visibility", "visible");
			jQuery("div#containerMainContent table.progressIndicator").remove();
			jQuery("#loadingOverlay").fadeOut('slow');//.remove();
		}
	});
}


function slideToThumbnail (direction) {
	
	var	thumbnailSlider 		= jQuery("ul#thumbnails").children("li").children("img"),
		thumbnailSliderLength 	= 0,
		foundLast				= 0,
		thumbnailMargin 		= jQuery("ul#thumbnails").css("marginLeft").replace("px", ""),
		modelCount 				= jQuery("ul#thumbnails").children("li").length,
		scrollPane 				= jQuery("div#boxThumbnails"),
		scrollContent 			= jQuery("ul#thumbnails"),
		sliderWidth 			= jQuery("#boxContentSlider").width(),
		currentIndex,
		thumbnailLengthWithNext,
		currentImageWidth,
		newLeftPercent;
		
		jQuery.each(thumbnailSlider, function () {
			var thisWidth = jQuery(this).width();

			thumbnailSliderLength = thumbnailSliderLength + thisWidth;
			
			/* slide to next model */
			if(thumbnailSliderLength > (sliderWidth - thumbnailMargin) && foundLast === 0 && direction === +1){
				currentIndex = jQuery(this).parent().prevAll().length;
				thumbnailLengthWithNext = thumbnailSliderLength;
				foundLast = 1;
				newLeftPercent = (thumbnailLengthWithNext - sliderWidth)/(scrollPane.width() - scrollContent.width())*-100;
				if(currentIndex < modelCount)
				{	
					scrollContent.animate({marginLeft: (- (thumbnailLengthWithNext - sliderWidth) + 'px')}, 200);
					//jQuery("ul#thumbnails").animate({marginLeft: (- (thumbnailLengthWithNext - sliderWidth) + 'px')}, 200);
					jQuery("div#dynamicSlider a").css("left", newLeftPercent + "%");
					/*jQuery("div.scroll-bar a").animate({left: newLeftPercent + "%"}, 200);*/
				}
			}
			/* slide to previous model */
			if(thumbnailSliderLength >= (- thumbnailMargin) && foundLast === 0 && thumbnailMargin < 0 && direction === -1){
				currentIndex = jQuery(this).parent().prevAll().length;
				thumbnailLengthWithNext = thumbnailSliderLength;
				/*currentImageWidth = thumbnailSlider.eq(currentIndex).css("width").replace("px", "");*/
				currentImageWidth = jQuery("ul#thumbnails").children("li").eq(currentIndex).css("width").replace("px", "");
				foundLast = 1;
				newLeftPercent = (thumbnailLengthWithNext - currentImageWidth)/(scrollPane.width() - scrollContent.width())*-100;
				scrollContent.animate({marginLeft: (- (thumbnailLengthWithNext - currentImageWidth) + 'px')}, 200);
				//jQuery("ul#thumbnails").animate({marginLeft: (- (thumbnailLengthWithNext - currentImageWidth) + 'px')}, 200);
				jQuery("div#dynamicSlider a").css("left", newLeftPercent + "%");
					//jQuery("div.scroll-bar a").animate({left: (newLeftPercent + "%")}, 200);
			}
		});	
}