var timeout = 6500;
var trans_speed = 1500;
var cur_image = 0;
var new_image;
var paused = false;
var intval;
var img_len;

// adds a listener to the current browsers "on load" event to create/setup the slideshows
if (window.attachEvent) {
	window.attachEvent('onload', startHeader);
} else if (window.addEventListener) {
	window.addEventListener('load', startHeader, false);
} else {
	document.addEventListener('load', startHeader, false);
}

function startHeader(){
	//set the images length
	img_len = $(".header_image").length;
	
	//if there is more than one image start the slideshow
	if(img_len > 1){
		intval = setTimeout('swapImage()',timeout);
	}
}

function swapImage(){
	//get the next image
	if(cur_image + 1 >= img_len) { 
		new_image = 0;
	} else {
		new_image = cur_image + 1;
	}
	
	//animate the image
	animateImage();
}

function changeImage(ele){
	//get the element
	ele = $(ele);
	
	//get the new index
	new_image = $(".thumb_border").index(ele);
	
	//set paused to true
	pause();
	
	//animate the image
	animateImage();
}

function animateImage(){
	//return false if current image is the same as the new image or the image is animated
	if($(".header_image").eq(cur_image).is(":animated") || cur_image == new_image) return false;
	
	//animate the images
	$(".header_image").eq(cur_image).fadeOut(trans_speed);
	$(".header_image").eq(new_image).fadeIn(trans_speed,function(){
		if(!paused){
			play();
		}
	});
	
	//remove the active class
	$(".thumb_border").each(function(){
		$(this).removeClass('thumb_active');
	});
	
	//set the new active class
	$(".thumb_border").eq(new_image).addClass('thumb_active');

	//set the current image
	cur_image = new_image;
}

function pause(){
	//pause the slideshow
	clearTimeout(intval);
	paused = true;
	
	//show the play button
	$(".header_pause").css({'display':'none'});
	$(".header_play").css({'display':'block'});
}

function play(){
	//clear the timeout
	clearTimeout(intval);
	
	//start the slideshow
	paused = false;
	intval = setTimeout('swapImage()',timeout);
	
	//show the pause button
	$(".header_play").css({'display':'none'});
	$(".header_pause").css({'display':'block'});
}