// banner.js



var banner = {
	hover_fade: 200,
	play_speed: 4000,
	banner_fade: 500,
	
	init: function() {
		
		banner.handlers();
		
		// start playing through:
		banner.leastpos = parseInt($('#thumbnail_pane li:first').attr('data-pos'));
		banner.maxpos = parseInt($('#thumbnail_pane li:last').attr('data-pos'));
		banner.timer = window.setInterval(banner.play,banner.play_speed);
		
	},
	timer:null,
	leastpos:null,
	maxpos:null,
	play: function() {
		var curpos = parseInt($('#thumbnail_pane li.current').attr('data-pos'));
		var nextpos = curpos + 1;
		if(nextpos>banner.maxpos) {nextpos = banner.leastpos;}

		banner.goto(nextpos);
	},
	pause: function() {
		window.clearTimeout(banner.timer);
		banner.timer = null;
	},
	
	handlers: function() {
		$('#thumbnail_pane li').bind('click',banner.thumbnailClick);
		$('#thumbnail_pane li img').live('mouseover',banner.hoverPaneOver);
		$('#thumbnail_pane, #hover_pane').live('mouseover',banner.hoverPaneOutCancel);
		$('#thumbnail_pane, #hover_pane').live('mouseout',banner.hoverPaneOut);
	},
	
	thumbnailClick: function(){
		banner.pause();
		if(parseInt($('#thumbnail_pane li.current').attr('data-pos'))==$(this).attr('data-pos')) {
			//clicked the current image...
			return false;
		}
		banner.goto($(this).attr('data-pos'));
	},
	
	hoverPaneOver: function() {
		var title = $(this).parent().attr('data-title');
		var description = $(this).parent().attr('data-description');

		$('#hover_pane h3').html(title);
		$('#hover_pane p').html(description);
		$('#hover_pane').fadeIn(banner.hover_fade);
	},
	hoverPaneOutCancel: function() {
		window.clearTimeout(banner.hoverPaneTimer);
		banner.hoverPaneTimer = null;
	},
	hoverPaneTimer:null,
	hoverPaneOut: function() {
		banner.hoverPaneTimer = window.setTimeout(banner.hoverPaneOutConfirm,banner.banner_fade);	
	},
	hoverPaneOutConfirm: function() {
		$('#hover_pane').fadeOut(banner.hover_fade);
	},
	
	goto: function(pos) {
		
		var prevImg = $('#banner_pane a.current img');
		var prevA = $('#banner_pane a.current');
		var prevThumb = $('#thumbnail_pane li[data-pos="' + prevA.attr('data-pos') + '"]');

		var nextImg = $('#banner_pane a[data-pos="' + pos + '"] img');
		var nextA = $('#banner_pane a[data-pos="' + pos + '"]');
		var nextThumb = $('#thumbnail_pane li[data-pos="' + pos + '"]');

		prevThumb.removeClass('current');
		nextThumb.addClass('current');

		nextImg.fadeTo(1,1);
		prevImg.fadeTo(banner.banner_fade,0,function(){
			prevA.removeClass('current');
			nextA.addClass('current');
		});
		if(prevImg.length<1) {nextA.addClass('current');}// mostly just here for testing purposes...should never be needed in production mode.
		return false;
	},
	
	end:null
};


$(function() {
	banner.init();
})