var SlideshowHandler = {
	clickLeftArrow : function() {
		SlideshowUtility.stopAutoShow();
		var imgIndex = SlideshowUtility.getPrevIndex(SlideshowUtility.getCurrentImageIndex());
		SlideshowHandler.roll(imgIndex);
	},
	clickRightArrow : function() {
		SlideshowUtility.stopAutoShow();
		var imgIndex = SlideshowUtility.getNextIndex(SlideshowUtility.getCurrentImageIndex());
		SlideshowHandler.roll(imgIndex);
	},
	clickSmlImage : function(bucketIndex) {
		SlideshowUtility.stopAutoShow();
		var imgIndex = SlideshowUtility.getImageIndex(bucketIndex);
		if (imgIndex == SlideshowUtility.getCurrentImageIndex()) return;
		SlideshowHandler.roll(imgIndex);
	},
	pageLoad : function(imgPathArray, startImageIndex) {
		SlideshowUtility.init(imgPathArray);
		if (imgPathArray.length <= 1) return;
		if (arguments.length < 2) var startImageIndex = 0;
		SlideshowUtility.setActualVisible();
		// get the real position of the green indicator...?
		var indicatorIndex = Math.floor(Math.min(SlideshowUtility.getActualVisible(), imgPathArray.length) / 2);
		SlideshowUtility.setIndicatorIndex(indicatorIndex);
		SlideshowHandler.roll(startImageIndex);
		SlideshowUtility.placeCounter();
	},
	resizeWindow : function() { SlideshowUtility.placeCounter(); },
	roll : function(imgIndex) {
		if (!arguments.length) var imgIndex = SlideshowUtility.getNextIndex(SlideshowUtility.getCurrentImageIndex());
		SlideshowUtility.jumpTo(imgIndex);
		SlideshowUtility.updateCounter(imgIndex);
		SlideshowUtility.displayMainImage(imgIndex);
	}
}
var SlideshowUtility = {
	BUCKET_ID_PREFIX : "bucket_",
	COUNTER_ID : "vehCounter",
	CURRENT_COUNT_ID : "currentCount",
	IMAGE_CONTAINER_ID : "vehThumbnails",
	INDICATOR_ID : "vehIndicator",
	LEFTARROW_DIV_ID : "leftArrow",
	RIGHTARROW_DIV_ID : "rightArrow",
	SLIDESHOW_DIV_ID : "vehSlideshow",
	TOTAL_COUNT_ID : "totalCount",
	autoShowIV : null,
	autoShowTO : null,
	borderWidth : 1,
	currentImageIndex : 0,
	imageBucketIndexMap : {},
	imagePathArray : [],
	indicatorIndex : 0,
	leftArrowDiv : null,
	maxVisible : 0,
	slideshowDiv : null,
	thumbnailPadding : 5,
	init : function(imgPathArray) {
		SlideshowUtility.imagePathArray = imgPathArray;
		SlideshowUtility.slideshowDiv = document.getElementById(SlideshowUtility.SLIDESHOW_DIV_ID);
		SlideshowUtility.leftArrowDiv = document.getElementById(SlideshowUtility.LEFTARROW_DIV_ID);
		var rightArrowDiv = document.getElementById(SlideshowUtility.RIGHTARROW_DIV_ID);
		var thumbnailsDiv = document.getElementById(SlideshowUtility.IMAGE_CONTAINER_ID);
		SlideshowUtility.slideshowDiv.style.width = thumbnailsDiv.offsetWidth + SlideshowUtility.leftArrowDiv.offsetWidth + rightArrowDiv.offsetWidth + (SlideshowUtility.borderWidth * 2);
		var totalCountDiv = document.getElementById(SlideshowUtility.TOTAL_COUNT_ID);
		if (totalCountDiv) totalCountDiv.innerHTML = SlideshowUtility.imagePathArray.length;
	},
	displayMainImage : function(imgIndex) { VehiclePhotoHandler.setMainImage(imgIndex); },
	getActualVisible : function() { return SlideshowUtility.actualVisible; },
	getCurrentImageIndex : function() { return SlideshowUtility.currentImageIndex; },
	getImageIndex : function(bucketIndex) { return SlideshowUtility.imageBucketIndexMap[bucketIndex]; },
	getImagePath : function(imgIndex) { return SlideshowUtility.imagePathArray[imgIndex]; },
	getImagePathArray : function() { return SlideshowUtility.imagePathArray; },
	getIndicatorIndex : function() { return SlideshowUtility.indicatorIndex; },
	getMaxVisible : function() { return SlideshowUtility.maxVisible; },
	getNextIndex : function(imgIndex) { return (imgIndex >= SlideshowUtility.imagePathArray.length - 1) ? 0 : imgIndex + 1; },
	getPrevIndex : function(imgIndex) { return (imgIndex <= 0) ? SlideshowUtility.imagePathArray.length - 1 : imgIndex - 1; },
	getSlideshowHeight : function() { return SlideshowUtility.slideshowDiv.offsetHeight; },
	jumpTo : function(imgIndex) {
		SlideshowUtility.currentImageIndex = imgIndex;
		// start at the midpoint and current imgIndex, fill forwards
		for (var i=SlideshowUtility.indicatorIndex; i<SlideshowUtility.actualVisible; i++) {
			document.getElementById(SlideshowUtility.BUCKET_ID_PREFIX + i).src = SlideshowUtility.getImagePath(imgIndex);
			SlideshowUtility.imageBucketIndexMap[i] = imgIndex;
			imgIndex = SlideshowUtility.getNextIndex(imgIndex);
		}
		// start just before the midpoint and last known imgIndex, fill backwards
		imgIndex = SlideshowUtility.getPrevIndex(SlideshowUtility.currentImageIndex);
		for (var j=SlideshowUtility.indicatorIndex-1; j>=0; j--) {
			document.getElementById(SlideshowUtility.BUCKET_ID_PREFIX + j).src = SlideshowUtility.getImagePath(imgIndex);
			SlideshowUtility.imageBucketIndexMap[j] = imgIndex;
			imgIndex = SlideshowUtility.getPrevIndex(imgIndex);
		}
	},
	placeCounter : function() {
		var counter = document.getElementById(SlideshowUtility.COUNTER_ID);
		// find the counter's left coord by starting with the width of the left arrow...
		var leftPosition = SlideshowUtility.leftArrowDiv.offsetWidth;
		// ... adding the width of each thumbnail to the indicator, plus padding in between...
		for (var i=0; i<SlideshowUtility.indicatorIndex; i++) {
			leftPosition += document.getElementById(SlideshowUtility.BUCKET_ID_PREFIX + i).offsetWidth + SlideshowUtility.thumbnailPadding;
		}
		// ... and finally the offset to center it within the indicator.
		leftPosition += (document.getElementById(SlideshowUtility.INDICATOR_ID).offsetWidth - counter.offsetWidth) / 2;
		counter.style.left = leftPosition;
		// small hack for mozilla, which doesn't seem to detect centered content very well.
		if (!counter.currentStyle) counter.style.left = counter.offsetLeft + SlideshowUtility.slideshowDiv.offsetLeft;
	},
	setActualVisible : function() { SlideshowUtility.actualVisible = Math.min(SlideshowUtility.imagePathArray.length, SlideshowUtility.maxVisible); },
	setIndicatorIndex : function(indicatorIndex) { SlideshowUtility.indicatorIndex = indicatorIndex; },
	setMaxVisible : function(maxVisible) { SlideshowUtility.maxVisible = maxVisible; },
	setThumbnailPadding : function(thumbnailPadding) { SlideshowUtility.thumbnailPadding = thumbnailPadding; },
	startAutoShow : function() {
		if (VehiclePhotoUtility.mainImagesLoaded()) {
			window.clearTimeout(SlideshowUtility.autoShowTO);
			SlideshowUtility.stopAutoShow();
			SlideshowUtility.autoShowIV = setInterval("SlideshowHandler.roll();", 2000);
		} else {
			SlideshowUtility.autoShowTO = window.setTimeout("SlideshowUtility.startAutoShow();", 200);
		}
	},
	stopAutoShow : function() {
		if (SlideshowUtility.autoShowIV) clearInterval(SlideshowUtility.autoShowIV);
		SlideshowUtility.autoShowIV = null;
	},
	updateCounter : function(imgIndex) {
		document.getElementById(SlideshowUtility.CURRENT_COUNT_ID).innerHTML = parseInt(imgIndex) + 1;
	}
};
function getAbsOffsetLeft(element) {
	if (element.offsetParent) return element.offsetLeft + getAbsOffsetLeft(element.offsetParent);
	else return element.offsetLeft;
}
function getAbsOffsetTop(element) {
	if (element.offsetParent) return element.offsetTop + getAbsOffsetTop(element.offsetParent);
	else return element.offsetTop;
}