
var banner = {
	list : [],
	DOM : {},
	refreshTimer : 10000,
	getIndex : function () { return banner.index | 0; },
	init : function() {
		
		//init set of slider image data
		$("#banner_list .banner_item").each(function(index, elem) {
			var linker = $(this).children("a")
			var data = {
				'linker' : linker,
				'href' : $(this).attr("href"),
				'title' : $(this).attr("title"),
				'thumb' : $(this).attr("thumb"),
				'low_pic' : $(this).attr("low_pic"),
				'high_pic' : $(this).attr("high_pic")
			};
			linker.click(function(evt) {
				evt.preventDefault();
				banner.resetTimer();
				banner.setLinker($(this));
				banner.slideTo(index);
			}).mouseover(function(evt){
				banner.thumb_on = true;
				banner.setThumbnail(index);
				banner.DOM.thumb.css('opacity', 1);
			}).mouseout(function(evt){
				banner.thumb_on = false;
				banner.setThumbnail(banner.getIndex());
				banner.DOM.thumb.css('opacity', 0);
			});
			banner.list.push(data);
			
		});
		
		
		//pointing to each DOM
		banner.DOM.currentSlider = $(".banner_slider").eq(0);
		banner.DOM.nextSlider = $(".banner_slider").eq(1);
		if(banner.list.length > 0) {
			banner.setLinker(banner.list[banner.getIndex()].linker);
			banner.DOM.content = $("#banner_content");
			banner.DOM.bcontent = $("#banner_content .bcontent");
			banner.DOM.body = $("#game_banner");
			banner.DOM.thumb = $(".banner_selector a.selector");
			banner.DOM.sliderText = $(".banner_selector .text_holder");
			banner.DOM.sliderTextBox = $(".banner_selector .text_holder .text");
			
			
			banner.TIMER = window.setInterval(banner.next, banner.refreshTimer);
			
			banner.DOM.thumb.css('opacity', 0);	
			
			//preload high quality images
			banner.prepare();
		}
	},
	setLinker : function (linker) {
		if(banner.DOM.sliderLink)
			banner.DOM.sliderLink.removeClass("active");
		banner.DOM.sliderLink = linker;
		banner.DOM.sliderLink.addClass("active");
	},
	resetTimer : function() {
		window.clearInterval(banner.TIMER);
		banner.TIMER = window.setInterval(banner.next, banner.refreshTimer);		
	},
	loaded : function (index) {
		banner.list[index].low_pic = banner.list[index].high_pic;					
		if(index == banner.getIndex())
			banner.DOM.body.css("backgroundImage", "url('" + banner.list[index].high_pic + "')");
			
	},
	prepare : function() {		
		for(index in banner.list) {	
			
			var img = new Image();			
			$(img).load(function() {
				banner.loaded($(this).attr("id"));
			}).error(function () {
				// notify the user that the image could not be loaded
			}).attr("id", index).attr('src', banner.list[index].high_pic);		
		}
	},
	next : function () {
		var index = banner.getIndex();
		index = ++index % banner.list.length;
		if(banner.list.length > 0)
			banner.setLinker(banner.list[index].linker);
				
		banner.slideTo(index);
	},
	replaceContent : function () {
		
	},
	setThumbnail : function(index) {
	
		banner.DOM.sliderTextBox.text(banner.list[index].title);
		banner.DOM.thumb.css("backgroundImage", "url(" + banner.list[index].thumb + ")");
	},
	slideTo : function(index) {
		var _currentIndex = banner.getIndex();
		if(index != _currentIndex) {
			banner.index = index;
			var _winWidth = $(document).width();
			if(index < _currentIndex)
				_winWidth *= -1;
			banner.DOM.currentSlider.css("left", 0);
			banner.DOM.currentSlider.css("backgroundImage", banner.DOM.body.css("backgroundImage")).show();
			
			banner.DOM.nextSlider.css("left", _winWidth);
			banner.DOM.nextSlider.css("backgroundImage", "url(" + banner.list[index].low_pic + ")").show();
			banner.DOM.body.css("backgroundImage", banner.DOM.nextSlider.css("backgroundImage"));
			banner.DOM.thumb.attr("href", banner.list[index].href);

			/*
			if(!banner.thumb_on) {
				banner.DOM.sliderText.slideToggle(1000, function(){
					banner.setThumbnail(index);
					$(this).slideToggle(1000);
				});
			}
			*/
			
			banner.DOM.content.stop().animate({
				opacity: 0
			}, 1000, 'easeOutExpo', function() {
				banner.DOM.bcontent.attr("href", banner.list[index].href).html(
					banner.DOM.sliderLink.html()
				);
				$(this).animate({
					opacity: 1 
				}, 1000, 'easeOutExpo', function() {
				});
			});	
			_winWidth *= -1;
			banner.DOM.currentSlider.stop().animate({
				left: '+=' + _winWidth
			}, 2000, 'easeOutExpo', function() {
				$(this).hide();
			});
			banner.DOM.nextSlider.stop().animate({
				left: '+=' + _winWidth
			}, 2000, 'easeOutExpo', function() {
				$(this).hide();
			});
			/*
			banner.DOM.nextSlider.animate({
				left: '+=' + _winWidth
			}, 1000, method, function() {
				$(this).hide();
			});
			banner.DOM.currentSlider.animate({
				left: '+=' + _winWidth
			}, 1000, method, function() {
				$(this).hide();
			});
			*/
		}
	}
};
