// Properties

_features = null;
_featureIndex = 0;
_featureLength = 0;
_featureHeight = 0;
_timer = null;
_disableInteraction = false;

// Functions

function startTimer(){
	clearTimer();
	_timer = setTimeout(timerComplete, 10000);
}
function clearTimer(){
	if (_timer) clearTimeout(_timer);
}
function timerComplete(){
	nextFeature();
}
function getNextFeatureIndex(){
	return (_featureIndex == _featureLength - 1) ? 0 : _featureIndex + 1;
}
function getPreviousFeatureIndex(){
	return (_featureIndex == 0) ? _featureLength - 1 : _featureIndex - 1;
}
function previousFeature(){
	if (_disableInteraction) return;
	animateFeature(getPreviousFeatureIndex(), -1);
}
function nextFeature(){
	if (_disableInteraction) return;
	animateFeature(getNextFeatureIndex(), 1);
}
function animateFeature (index, direction) {
	// Prevent user interaction while animating
	_disableInteraction = true;
	// Clear timer
	clearTimer();
	// Get current feature
	var currentFeature = $(_features.get(_featureIndex));
	// Set index
	_featureIndex = index;
	// Get requested feature
	var requestedFeature = $(_features.get(_featureIndex));
	// Set feature overlay content
	var content = requestedFeature.find('div.content');
	$('#feature-overlay-content div.content').css({opacity:0}).html(content.html()).animate({opacity:1}, 1000);
	// Set feature overlay navigation title
	var nextFeature = $(_features.get(getNextFeatureIndex()));
	var nextTitle = nextFeature.find('div.content h3');
	$('#feature-overlay-navigation h3').css({opacity:0}).html('Next: <strong>' + nextTitle.text() + '</strong>').animate({opacity:1}, 1000);
	// Animate features
	var y = _featureHeight * direction;
	requestedFeature.css({display:'block',zIndex:1});
	currentFeature.css({display:'block',zIndex:2,opacity:1}).animate({opacity:0,top:y}, 1000, function(){
		// Remove current feature
		currentFeature.css({display:'none',opacity:1,top:0});
		// Start timer
		startTimer();
		// Enable user interaction
		_disableInteraction = false;
	});
}

// DOM Ready

$(document).ready(function(){
	// Add feature overlay
	var html  = '<div id="feature-overlay">';
	    html +=     '<div id="feature-overlay-content">';
	    html +=         '<div class="content"></div>';
	    html +=     '</div>';
	    html +=     '<div id="feature-overlay-navigation">';
	    html +=         '<h3></h3>';
	    html +=         '<p class="previous"><a href="#"><img src="/images/home/previous-button.gif"/></a></p>';
	    html +=         '<p class="next"><a href="#"><img src="/images/home/next-button.gif"/></a></p>';
	    html +=     '</div>';
	    html += '</div>';
	$(html).insertAfter('#features-mask');
	// Get all the features
	_features = $('#features div.feature');
	// Get feature length
	_featureLength = _features.size();
	// Get the feature height
	_featureHeight = $('#features-mask').height();
	// Hide overlay navigation if it is not needed
	if (_featureLength < 2) {
		$('#feature-overlay-navigation').css({display:'none'});
	}
	// Initialize each feature
	_features.each(function(i){
		// Hide feature content
		var content = $(this).find('div.content');
		if (content) content.css({display:'none'});
		// If this is the first feature...
		if (i == 0) {
			// Add feature content to the overlay content
			if (content) $('#feature-overlay-content div.content').html(content.html());
		} else {
			// Hide feature
			$(this).css({display:'none'});
		}
		// If this is the second feature...
		if (i == 1) {
			// Add feature title to the overlay navigation
			if (content) $('#feature-overlay-navigation h3').html('Next: <strong>' + content.find('h3').text() + '</strong>');
		}
	});
	// Initialize overlay navigation
	$('#feature-overlay-navigation p.previous a').click(function(){
		previousFeature();
		return false;
	});
	$('#feature-overlay-navigation p.next a').click(function(){
		nextFeature();
		return false;
	});
	if (_featureLength > 1) {
		// Start timer
		startTimer();
	}
	// Map
	$('a.fancybox').fancybox({
		overlayColor : '#644628',
		overlayOpacity : 0.7,
		speedOut : 100,
		titleShow : false
	});
});