var prefix = "feature", sT;

var updateFeature = function(id,loop) {
	id = id !== undefined ? id : 0;
	loop = loop !== undefined ? loop : true;
	$("#mainFeature").css({"background" : "transparent url('"+features[id].image+"') no-repeat top left"});
	$("#mainFeature h2").html(features[id].heading);
	$("#mainFeature p").html(features[id].description);
	$("#sideFeatures .selected .arrow").removeClass("arrow");
	$("#sideFeatures .selected .current").removeClass("current");
	$("#sideFeatures .selected").removeClass("selected");
	$("#"+prefix+id).addClass("selected");
	$("#sideFeatures .selected .overlay").addClass("current");
	$("#sideFeatures .selected .indicator").addClass("arrow");
	if(sT) {
		clearTimeout(sT);
	}
	if(loop) {
		sT = setTimeout("updateNextFeature()", 5000);
	}
};

var updateNextFeature = function() {
	var id = 0, tempId;
	var selected = $("#sideFeatures .selected");
	if(selected.length > 0) {
		tempId = parseInt($(selected).attr("id").replace(prefix, ""))+1;
		if(features[tempId] !== undefined) {
			id = tempId;
		}
	}
	updateFeature(id);
};

//Create Main Feature
$("#features").append('<div id="mainFeature"></div>'); 
$("#mainFeature").append('<div class="description"><h2></h2><p></p></div>'); 

//Create Side Features
$("#features").append('<div id="sideFeatures"></div>');
$.each(features, function(key,value) { 
	var feature = prefix + key;
	var featureid = "#"+feature;
	$("#sideFeatures").append('<div id="'+feature+'" class="sideFeature"></div>');
	$(featureid).css({"background" : "transparent url('"+features[key].thumbnail+"') no-repeat top left"});
	$(featureid).append('<div class="overlay">&nbsp;</div>');
	$(featureid).append('<div class="indicator">&nbsp;</div>');
	$(featureid).append('<div class="description"><h2>'+features[key].heading+'</h2></div>');
	if ( key === features.length-1 ) {
		$(featureid).addClass("last");
	}	
});

//Populate Main Feaure and add click events
$(document).ready(function(){
	updateFeature();
	$(".sideFeature").click(function(){
		updateFeature(this.id.replace(prefix, ""),false);
	});
});