// use a global variable as namespace
var SCBHK = {};

(function(){
SCBHK.isIE = $.browser.msie;
SCBHK.isIE6 = SCBHK.isIE && $.browser.version.substring(0,1) === '6';
})();

SCBHK.Config = {
	classAlignBottomContainer:".jsAlignBottomContainer",
	classAlignBottomItem:".jsAlignBottomItem",
	classBanner:".jsBanner",
	classBannerImage:".jsBannerImage",
	classBannerControlSet:".jsBannerControlSet",
	classBannerControl:".jsBannerControl",
	classBannerWithAnimatedImage:".jsAnimatedImage"
	
};

SCBHK.AlignBottom = {
	init:function(){
		var config = SCBHK.Config;
		var containers = $(config.classAlignBottomContainer);
		containers.each(function(){
			var items = $(config.classAlignBottomItem,this);
			var numItem = items.length;
			if(numItem > 0){
				var maxHeight = 0;
				for(var i = numItem; i > 0; i--){
					var itemHeight = items.eq(i-1).height();
					if(itemHeight > maxHeight){
						maxHeight = itemHeight;
					}
				}
				if(SCBHK.isIE6){
					items.css({'height':maxHeight + 'px'});
				}else{
					items.css({'min-height':maxHeight + 'px'});					
				}
			}
		});
	}
};

SCBHK.Banner = {
	fadeOutSpeed:1000,
	fadeInSpeed:1000,
	interval:5000,
	timer:0,
	loop:function(banner){
		var config  = SCBHK.Config;		
		var position = banner.data("current");
		var images = $(config.classBannerImage,banner);													
		var controls = $(config.classBannerControl,banner);	
		// hide the current set
		images.eq(banner.data('current')).fadeOut(SCBHK.Banner.fadeOutSpeed);
		controls.eq(banner.data('current')).removeClass('selected');
		// determine the current position
		if(position + 1 === controls.length ){
			position = 0;
		} else {
			position += 1;
		}
		// update the current position
		banner.data('current',position);
		// show the latest set
		// for non-IE browsers, if the current one is using animated images,
		// reload the image
		if(!SCBHK.isIE){
			(function(){
				var image = images.eq(banner.data('current'));
				if(image.hasClass(config.classBannerWithAnimatedImage)){
					var actualImage = image.find('img');
					var actualImageSource = actualImage.attr('src');
					// trim the identifier for the original image path
					var position = actualImageSource.indexOf("?");
					if(position > 0){
						actualImageSource = actualImageSource.substring(0,position);					
					}
					var timestamp = new Date();
					actualImage.attr('src', actualImageSource + "?" + timestamp.getTime());
				}
			})();
		}
		images.eq(banner.data('current')).fadeIn(SCBHK.Banner.fadeInSpeed);
		controls.eq(banner.data('current')).addClass('selected');
		// resume looping
		SCBHK.Banner.timer = setTimeout(function(){ 
			SCBHK.Banner.loop(banner);						
		},SCBHK.Banner.interval);
	},	
	clickHandler:function(targetControl){
		var config = SCBHK.Config;		
		var banner = targetControl.closest(config.classBanner);
		var images = $(config.classBannerImage,banner);													
		var controlSet = $(config.classBannerControlSet,banner);
		var controls = $(config.classBannerControl,controlSet);	
		// process only when the user is not clicking the selected one
		if(!targetControl.hasClass('.selected')) {
			// clear timeout
			clearTimeout(SCBHK.Banner.timer);
			// stop the current banner animation
			banner.stop();
			// add tracker
			targetControl.addClass("jsCurrent");
			// hide the current banner image
			images.eq(banner.data('current')).fadeOut(SCBHK.Banner.fadeOutSpeed);
			// remove the selected status to the current control
			controls.eq(banner.data('current')).removeClass('selected');
			// update the current position
			banner.data('current',controls.index( $('.jsCurrent',controlSet) ));
			// show the new banner image
			// for non-IE browsers, if the current one is using animated images,
			// reload the image
			if(!SCBHK.isIE){
				(function(){
					var image = images.eq(banner.data('current'));
					if(image.hasClass(config.classBannerWithAnimatedImage)){
						var actualImage = image.find('img');
						var actualImageSource = actualImage.attr('src');
						// trim the identifier for the original image path
						var position = actualImageSource.indexOf("?");					
						if(position > 0){
							actualImageSource = actualImageSource.substring(0,position);					
						}
						var timestamp = new Date();
						actualImage.attr('src', actualImageSource + "?" + timestamp.getTime());
					}
				})();
			}			
			
			images.eq(banner.data('current')).fadeIn(SCBHK.Banner.fadeInSpeed);
			// add the selected status to the current control
			controls.eq(banner.data('current')).addClass('selected');
			// remove the tracker
			targetControl.removeClass("jsCurrent");
			// resume looping
			SCBHK.Banner.timer = setTimeout(function(){ 
				SCBHK.Banner.loop(banner);			
			},SCBHK.Banner.interval);
		}
	},	
	init:function(){
		// use shorter interval for IE as it takes longer to run in each iteration
		if(SCBHK.isIE){
			SCBHK.Banner.interval = 4500;
		}
		var config = SCBHK.Config;
		var banners = $(config.classBanner);
		banners.each(function(){
			var banner = $(this);																
			var images = $(config.classBannerImage,banner);													
			var controlSet = $(config.classBannerControlSet,banner);													
			var controls = $(config.classBannerControl,controlSet);	
			// find out which one is selected (defined in HTML)
			var position = controls.index( $('.selected',controlSet) );
			// use the first one if not find any pre-select control
			if(position < 0){
				position = 0;
			}
			banner.data('current',position);
			// display the corresponding banner image
			images.removeClass('selected');
			images.eq(banner.data('current')).addClass('selected');
			// control handler
			controls.click(function(evt){
				evt.preventDefault();
				evt.stopPropagation();
				SCBHK.Banner.clickHandler($(this));
			});
			// start looping			
			SCBHK.Banner.timer = setTimeout(function(){
				SCBHK.Banner.loop(banner);			
			},SCBHK.Banner.interval);
		});
	}
}

$(document).ready(function(){
	var config = SCBHK.Config;													 
	/* solve the issue of flickering backround image under IE6 */
	if(SCBHK.isIE6) { document.execCommand("BackgroundImageCache", false, true); }
	if($(config.classAlignBottomContainer).length > 0){ SCBHK.AlignBottom.init(); }
	if($(config.classBanner).length > 0){ SCBHK.Banner.init(); }
});

