var oldID, oldimgID, oldcopyID;
var newID, newimgID, newcopyID;
var SLinterval;

newID = 'sl01';
oldID = 0;

imgOnSrc = 'images/home/spotlight/sl_btn_on.png';
imgOffSrc = 'images/home/spotlight/sl_btn_off.png';
imgRollSrc = 'images/home/spotlight/sl_btn_roll.png';
		

function init() {	

	startList();
	smbInit();
}

function switchSL(){
	oldimgID = 'image_' + oldID;
	oldcopyID = 'copy_' + oldID;
	newimgID = 'image_' + newID;
	newcopyID = 'copy_' + newID;
	
	document.getElementById(oldimgID).style.visibility = 'hidden';
	document.getElementById(oldcopyID).style.visibility = 'hidden';
	document.getElementById(newimgID).style.visibility = 'visible';
	document.getElementById(newcopyID).style.visibility = 'visible';
}

function toggleSL(){
	$S('#sl_head img').action ({
		onclick: function(){
			if(this.className == 'on' || this.className == 'sl_header_img'){
				return;
			}
			
			clearInterval(SLinterval);
			
			$S('#sl_head img.on').action({
				initialize: function(){
					oldID = this.id;
				}
			});
			newID = this.id;

			$S('#sl_head img.on').each(function(element){
				element.src = imgOffSrc;
				element.className = 'off';
			});
			this.src = imgOnSrc;
			this.className = 'on';
			slRollOver();
			slRollOut();
			
			switchSL();
			toggleSL();
			
			SLinterval = setInterval('timedSL()',5000);
		}				
	});
}

function timedSL(){
	oldID = newID;
	if(newID == 'sl05'){
		newID = 'sl01';
	} else { newID = 'sl0' + (parseInt(newID.slice(3)) + 1); }

	oldimgID = 'image_' + oldID;
	oldcopyID = 'copy_' + oldID;
	newimgID = 'image_' + newID;
	newcopyID = 'copy_' + newID;
	
	$S('#sl_head img.on').each(function(element){
		element.src = imgOffSrc;
		element.className = 'off';
	});
	
	activeID = 'img#' + newID;
	
	$S(activeID).action({
		initialize: function(){
			this.src = imgOnSrc;
			this.className = 'on';
		}
	});
	switchSL();
	toggleSL();
	slRollOver();
	slRollOut();
}

function slRollOver(){
	$S('#sl_head img.off').action ({
		onmouseover: function(){
			if(this.className == 'sl_header_img'){
				return;
			}
			this.src = imgRollSrc;
		}
	});
	$S('#sl_head img.on').action ({
		onmouseover: function(){
			if(this.className == 'sl_header_img'){
				return;
			}
			this.src = imgOnSrc;
		}
	});
}
	
function slRollOut(){
	$S('#sl_head img.off').action ({
		onmouseout: function(){
			if(this.className == 'sl_header_img'){
				return;
			}
			this.src = imgOffSrc;
		}
	});
	$S('#sl_head img.on').action ({
		onmouseout: function(){
			if(this.className == 'sl_header_img'){
				return;
			}
			this.src = imgOnSrc;
		}
	});
}