var browserName = navigator.appName;
var element = null;
var timer = null;

function setOpacity(level, hide) {
	element.style.opacity = level;
	element.style.MozOpacity = level;
	element.style.KhtmlOpacity = level;
	element.style.filter = "alpha(opacity=" + (level * 100) + ");";
	if (hide == true && level == 0 && currentBanner == null ) element.style.display = "none";
}

var currentBanner = null;

function categoryOver(bannerID) {
	clearTimeout(timer);
	if (currentBanner == bannerID) return;
	currentBanner = bannerID;
	mySlider.pauseIt();
	if (document.getElementById(bannerID).className.indexOf(bannerID + "_image") == -1) {
		document.getElementById(bannerID).className += " " + bannerID + "_image";
	}
	var tempItemIDs = document.getElementsByClassName('temp_item');
	var itemIDs = document.getElementsByClassName('item');
	var bannerDiv = document.getElementById('banner');
	var theControls = document.getElementById('controls');
	theControls.style.display = "none";
	for (var i = 0; i < itemIDs.length; i++) {
    	itemIDs[i].style.marginTop = "312px";
	}
	for (var i = 0; i < tempItemIDs.length; i++) {
    	tempItemIDs[i].style.display = "none";
	}
	element = document.getElementById(bannerID);
	//element = elements[0];
	if ( browserName !== "Microsoft Internet Explorer" ) {
		for (i = 0; i <= 1; i += (1 / 16)) {
        	setTimeout("setOpacity(" + i + ", false)", i * 500);
    	}
	}
	element.style.display = "block";
}

function categoryOuter(bannerID) {
	timer = setTimeout("categoryOut('" + bannerID + "')", 500);
}

function categoryOut(bannerID) {
   	element = document.getElementById(bannerID);
	//element = elementsi[0];
	if (browserName !== "Microsoft Internet Explorer") {
		for (i = 0; i <= 1; i += (1 / 16)) {
        	setTimeout("setOpacity(" + (1 - i) + ", true)", i * 300);
    	}
	}
	if (browserName == "Microsoft Internet Explorer") {
		element.style.display = "none";
	}
	var itemIDs = document.getElementsByClassName('item');
	var theControls = document.getElementById('controls');
	theControls.style.display = "block";
	for (var i = 0; i < itemIDs.length; i++) {

    	itemIDs[i].style.marginTop = "0px";
	}
	currentBanner = null;
	mySlider.unpauseIt();
}

