// JavaScript Document

var showingImgID = 1;
var numOfImages = 4;
var triggerName = '#feature';
var imageAreaName = 'div#mainImage'
var overFadeSpeed = 1000;
var autoFadeSpeed = 1600;
var changeInterval = 5000;
var timer;

function changeImages(myID,fadeSpeed){
	for(var j=1;j<=numOfImages;j++){
		if(j==myID){
			$(imageAreaName+j).fadeIn(fadeSpeed);
		}else{
			$(imageAreaName+j).fadeOut(fadeSpeed);
		}
	}
	showingImgID = myID;
}

function setNextImage(){
	var nextID = showingImgID+1;
	nextID = nextID>numOfImages ? 1 : nextID;
	changeImages(nextID,autoFadeSpeed);
// $('body').prepend(" nextID:"+nextID);
}





$(function () {
	var changeTimer = window.setInterval(function () {setNextImage();}, changeInterval);
	for(var i=1;i<=numOfImages;i++){
		$(triggerName+i).hover(function() {
			clearInterval(changeTimer);
			var myID = Number($(this).attr('id').slice(triggerName.length-1));
			changeImages(myID,overFadeSpeed);
		},
		function(){
			changeTimer = window.setInterval(function () {setNextImage();}, changeInterval);
		});
		
		$(imageAreaName+i).hover(function(){
			clearInterval(changeTimer);
		},
		function(){
			changeTimer = window.setInterval(function () {setNextImage();}, changeInterval);
		});
	}
	for(var i=1;i<=numOfImages;i++){
		var myHref = $('a',triggerName+i).attr('href');
		$('img','#mainImage'+i).wrap('<a href="'+myHref+'"></a>');
	}
});












/*$(function () {
	for(var i=1;i<=numOfImages;i++){
		$(triggerName+i).mouseover(function() {
			var myID = Number($(this).attr('id').slice(triggerName.length-1));
			for(var j=1;j<=numOfImages;j++){
				if(j==myID){
					$(imageAreaName+j).fadeIn(fadeSpeed);
				}else{
					$(imageAreaName+j).fadeOut(fadeSpeed);
				}
			}
		});
	}
});*/