$(function() {
	var bannerInterval = null,
		bannerList = [
			{ id: "B_CD" }, 
			{ id: "B_Film" }, 
			{ id: "B_USB" }, 
			{ id: "B_Audio" }, 
			{ id: "B_Video" }
		],
		bannerIdx  = 0
		$slideshow = $("#slideshow");
	
	var CSS = {
		wrapper: "banner-wrapper",
		banner: "banner",
		activeBanner: "banner-active",
		menubar: "banner-menubar",
		menubarBg: "banner-menubar-bg",
		button: "banner-menubar-button",
		activeButton: "banner-menubar-button-active",
		text: "banner-text"
	};
		
	$.preLoadImages("/images/CD_1.jpg", "/images/Video_1.jpg", "/images/Film_1.jpg", "/images/USB_1.jpg", "/images/Audio_1.jpg")
	$("." + CSS.button).click(onButtonClick);
	$("." + CSS.menubarBg).show();
	$("." + CSS.menubar).show();
	showText(0);
	setBannerInterval();
	
	$("." + CSS.text).hover(function() {
		stopBannerInterval();
	}, function() {
		setBannerInterval();
	});
	
	function onBannerInterval() {
		++bannerIdx;
		
		if(bannerIdx >= bannerList.length) bannerIdx = 0;
		
		setBanner(bannerIdx);
	}
	
	function onButtonClick(e) {
		e.preventDefault();
		resetBannerInterval();
		
		var idx = $(this).parent().prevAll().size();
		if(idx != bannerIdx) {
			bannerIdx = idx;
			setBanner(idx);
		}
	}
	
	function setBannerInterval() {
		bannerInterval = window.setInterval(onBannerInterval, 5000);
	}
	
	function stopBannerInterval() {
		window.clearInterval(bannerInterval);	
	}
	
	function resetBannerInterval() {
		stopBannerInterval();
		setBannerInterval();
	}
	
	function setBanner(idx) {
		var id = bannerList[idx].id;
		$slideshow.find("." + CSS.banner).stop(true, true).filter("." + CSS.activeBanner).fadeOut(700, function() {
			$(this).removeClass(CSS.activeBanner);
		});
		$slideshow.find("." + CSS.button).removeClass(CSS.activeButton).eq(idx).addClass(CSS.activeButton);
		$("#" + id).fadeIn(700, function() {
			$(this).addClass(CSS.activeBanner);
		});
		showText(idx);
	}
	
	function showText(idx) {
		var banner = bannerList[idx];
		var $banner = $("#" + banner.id);
		$banner.find("." + CSS.text).show();
	}
});

(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)