var curHL = 0; // current highlight id
var curHEAD = 0; // current header id
var loopHL;
var headIMG;
var maxid;
var interval_hl = 3000;
var interval_head = 3500;
var speedout = 100;
var speedin = 400;
var speedhead = 700;
var imgarray;

$(document).ready(function(){
	/* Init Scrollbars for *What's Up?* */
	var $myscroll = $('#whatsul');
	var i = 0;
	var el = document.getElementById('whatsul').getElementsByTagName('li');
	while(el[i]){
		if(el[i].className == "odd"){
			el[i].className = "odd jscrollli";
		}else{
			el[i].className = "par jscrollli";
		}		
		i++;
	}
	$myscroll.jScrollPane({scrollbarWidth:9, scrollbarMargin:0, scrollbarOnLeft:0, showArrows:1, animateTo:false});
	/* Init Highlights */
	maxid = document.getElementById('hlbox').getElementsByTagName('li').length;	 // numbers of highlights
	document.getElementById('hllist').innerHTML = ""; // reset highlights bullets
	if(maxid > 1){
		for(var i = 0; i < maxid; i++){
			if((i) == curHL){
				document.getElementById('hllist').innerHTML += '<li><a href="#" class="sel" onclick="RollOut(this, ' + i + ');"></a></li>';	// selected highlight
				document.getElementById('box' + (i + 1)).style.display = "inline";
			}else{
				document.getElementById('hllist').innerHTML += '<li><a href="#" onclick="RollOut(this, ' + i + ');this.blur()"></a></li>';	
				document.getElementById('box' + (i + 1)).style.display = "none";
			}		
		}
		loopHL = window.setInterval('RollOut()',interval_hl); // call RollOut function		
	}
	/* Init Header */
	imgarray = document.getElementById('img').getElementsByTagName('img');
	headIMG = window.setInterval('HeaderOut()',interval_head); // call Fade Function
	/* Init Lightbox */
	$("a.iframe").fancybox({
		'overlayOpacity': 1,
		'frameWidth':1024,
		'frameHeight':768,
		'imageScale':false,
		'centerOnScroll':false,
		'hideOnContentClick': false
	});
});

function RollOut(el,id){
	if(id != curHL){
		clearInterval(loopHL); // stop Interval (beginning of animation)
		document.getElementById('hllist').getElementsByTagName('li')[curHL].getElementsByTagName('a')[0].className = ""; // switch off bullet
		var mybox = '#' + 'box' + (curHL + 1); // select current id
		$(mybox).fadeOut(speedout, RollIn); // fade out
		if(id != null){ // if it's user's click
			curHL = id;
			el.blur();
		}else{ // if it's autoroll, select next
			curHL++;
			if(curHL == maxid){ //if the id doesn't exist, back to first one
				curHL = 0;
			}
		}
	}	
}

function RollIn(){
	var mybox = '#' + 'box' + (curHL + 1);	 // select current id
	var oldHEAD;
	document.getElementById('hllist').getElementsByTagName('li')[curHL].getElementsByTagName('a')[0].className = "sel"; // switch on bullet
	$(mybox).fadeIn(speedin); // fade in
	loopHL = window.setInterval('RollOut()',interval_hl); // start interval (end of animation)
}

function HeaderOut(){
	clearInterval(headIMG); // stop Interval (beginning of animation)	
	var maximg = imgarray.length;
	oldHEAD = curHEAD;
	curHEAD++;
	if(curHEAD == maximg){
		curHEAD = 0;
	}
	document.getElementById('img').style.background = '#000 url(' + imgarray[curHEAD].src + ')';
	$(imgarray[oldHEAD]).fadeOut(speedhead, HeaderIn);
	
}
function HeaderIn(){
	$(imgarray[curHEAD]).fadeIn(speedhead);
	headIMG = window.setInterval('HeaderOut()',interval_head);
}