// JavaScript Document

var curHL = 0;
var loopHL;
var maxid;
var interval_hl = 5000;
var speedout = 1000;
var speedin = 0;
var anim = 0;

$(document).ready(function(){	
	if(document.getElementById('pic')){
		maxid = document.getElementById('pic').getElementsByTagName('img').length;
		if(maxid > 1){		
			for(var i = 0; i < maxid; i++){
				document.getElementById('thumbs').getElementsByTagName('a')[i].myID = i;
				document.getElementById('thumbs').getElementsByTagName('a')[i].onclick = function(){RollOut(this.myID); this.blur(); return false};
				if((i) == curHL){
					document.getElementById('pic').getElementsByTagName('img')[i].style.display = "inline";
					$("#thumbs a").eq(i).toggleClass('sel');
				}else{
					document.getElementById('pic').getElementsByTagName('img')[i].style.display = "none";					
				}		
			}
			loopHL = window.setInterval('RollOut(null)',interval_hl);	
		}	
	}	
});

function RollOut(el){
	if(el != curHL && anim == 0){
		clearInterval(loopHL);
		anim = 1;
		if(el != null){
			newHL = el;
		}else{
			var newHL = curHL + 1;
			if(newHL == maxid){
				newHL = 0;
			}	
		}				
		var nextimgsrc = document.getElementById('pic').getElementsByTagName('img')[newHL].src;
		$("#pic").css("background","url(" + nextimgsrc +")");
		$("#pic img").eq(curHL).fadeOut(speedout, RollIn);
		$("#thumbs a").eq(curHL).toggleClass('sel');	
		curHL = newHL;
		$("#thumbs a").eq(curHL).toggleClass('sel');
	}
}

function RollIn(){
	$("#pic img").eq(curHL).fadeIn(speedin);
	loopHL = window.setInterval('RollOut()',interval_hl);
	anim = 0;
}