window.addEvent('domready', function() {
	var thumbnails = $$('img[class~=feature-thumbnail]');
	var thumbnailMask = $('feature-thumbnail-mask');
	var thumbnailPanel = $('feature-thumbnail-panel');
	
	var maskWidth = getMaskWidth();
	var thumbnailWidth = getThumbnailWidth();
	var leftPosOfCenteredThumbnail = (maskWidth * 0.5) - (thumbnailWidth * 0.5);
	
	var features = $$('div[class~=feature]');	
	setTweenDurations(1300, 1500);

	function setTweenDurations(thumbDur, featureDur) {
		thumbnailPanel.set('tween', {duration: thumbDur});
		features.each(function(feature) {
			feature.set('tween', {duration: featureDur});
		});
	}
	
	// Highlight and shift the thumbnail plane so the selected
	// item is centered.
	function selectThumbnail(thumbnail, options) {
		var originalThumbnail = getSelectedThumbnail();
		if(thumbnail !== originalThumbnail) {
			var delta = getCenterDelta(thumbnail);
			thumbnailPanel.tween('margin-left', delta);
			thumbnails.each(function(t) {
				t.removeClass('feature-thumbnail-selected');
			});
			thumbnail.addClass('feature-thumbnail-selected');
			deselectFeature(originalThumbnail);
			selectFeature(thumbnail);
		}
	}

	function initSelectedThumbnail() {
		var currentThumbnail = getSelectedThumbnail();
		
		// If no thumbnail has class 'feature-thumbnail-selected', then
		// select the first thumbnail.
		if(!$chk(currentThumbnail)) {
			currentThumbnail = thumbnails[0];
			currentThumbnail.addClass('feature-thumbnail-selected');
		}
		thumbnailPanel.setStyle('margin-left', getCenterDelta(currentThumbnail));
		selectFeature(currentThumbnail);
	}
	
	// Given a thumbnail, select the corresponding feature.
	function selectFeature(thumbnail) {
		index = thumbnails.indexOf(thumbnail);
		features[index].fade('in');
	}
	
	// Given a thumbnail, deselect the corresponding feature.
	function deselectFeature(thumbnail) {
		index = thumbnails.indexOf(thumbnail);
		features[index].fade('out');
	}
	
	function getMaskWidth() {
		return thumbnailMask.getStyle('width').toInt();
	}
	
	function getThumbnailWidth() {
		return thumbnails[0].getStyle('width').toInt();
	}
	
	function getSelectedThumbnail() {
		return thumbnailPanel.getElement('.feature-thumbnail-selected');
	}
	
	function getSelectedFeature() {
		return features[thumbnails.indexOf(getSelectedThumbnail())];
	}
	
	function getCenterDelta(thumbnail) {
		var thumbnailRelativeCoordinates = thumbnail.getCoordinates(thumbnailMask);
		var distance = leftPosOfCenteredThumbnail - thumbnailRelativeCoordinates.left;
		var left = thumbnailPanel.getStyle('margin-left').toInt();
		return(left + distance);
	}
	
	function rotateThumbnail() {
		var currentThumbnail = getSelectedThumbnail();
		var currentThumbnailIndex = thumbnails.indexOf(currentThumbnail);
		if(currentThumbnailIndex == (thumbnails.length-1)) {
			selectThumbnail(thumbnails[0]);
		} else {
			selectThumbnail(thumbnails[currentThumbnailIndex + 1]);
		}
	}
	var autoRotate = rotateThumbnail.periodical(5000);

	function selectNextThumbnail() {
		var currentThumbnail = getSelectedThumbnail();
		if(currentThumbnail !== null) {
			var nextThumbnail = currentThumbnail.getNext();
			if(nextThumbnail !== null) {
				selectThumbnail(nextThumbnail);
			}
		}
	}
	
	function selectPreviousThumbnail() {
		var currentThumbnail = getSelectedThumbnail();
		if(currentThumbnail !== null) {
			var nextThumbnail = currentThumbnail.getPrevious();
			if(nextThumbnail !== null) {
				selectThumbnail(nextThumbnail);
			}
		}
	}
	
	function initFeaturePositions() {
		features.each(function(feature) {
			feature.setStyle('position','absolute');
			feature.setStyle('left',0);
			feature.setStyle('top',0);
			feature.fade('hide');
		});
		features[thumbnails.indexOf(getSelectedThumbnail())].fade('show');
	}
	
	thumbnails.each(function(thumbnail, index) {
		thumbnail.addEvent('click', function(event){
			event.preventDefault();
			$clear(autoRotate);
			setTweenDurations(500, 500);
			selectThumbnail(thumbnail);
		});
	});
	
	$('feature-next').addEvent('click', function(event) {
		event.preventDefault();
		$clear(autoRotate);
		setTweenDurations(500, 500);
		selectNextThumbnail();
	});
	
	$('feature-previous').addEvent('click', function(event) {
		event.preventDefault();
		$clear(autoRotate);
		setTweenDurations(500, 500);
		selectPreviousThumbnail();
	});
	
	initSelectedThumbnail();
	initFeaturePositions();
});