/**
 * 
 * Timelord jQuery Brand List
 * 
 * 
 * [ html format ]
 * <div id="brand-area">
 *   <ul id="brand-image">
 *     <li><a><img /></a></li>
 *   </ul>
 *   <ul id="brand-list">
 *     <li><a><img /></a></li>
 *   </ul>
 * </div>
 * 
 */ 


(function($) {


jQuery().ready(function() {
	$('#brand-area').slide_brand();
});


$.fn.slide_brand = function() {
	
	var $that = $(this);
	
	if(!$that.length) {
		return;
	}
	
	var fade_speed = 500;
	var slide_speed = 4000;
	var pause = false;
	var tid;
	
	var $btn_img = $('#brand-list li a img');
	var btn_default = [];
	var btn_hover = [];
	var btn_select = [];
	
	var current_num = 0;
	var max = $btn_img.length;
	
	$btn_img.each(function(num) {
		btn_default[num] = $(this).attr('src');
		btn_hover[num] = btn_default[num].substr(0, btn_default[num].lastIndexOf('.')) + '_hover' + btn_default[num].substring(btn_default[num].lastIndexOf('.'));
		btn_select[num] = btn_default[num].substr(0, btn_default[num].lastIndexOf('.')) + '_select' + btn_default[num].substring(btn_default[num].lastIndexOf('.'));
		$('<img>').attr('src', btn_hover[num]).attr('src', btn_select[num]);
	});
	
	$('#brand-list a').each(function(num) {
		var $self = $(this);
		$self.hover(
			function() {
				if(!$self.hasClass('current')) {
					// change #brand-image
					$('#brand-image li:visible').fadeOut(fade_speed);
					$('#brand-image li').eq(num).fadeIn(fade_speed);
					// change #brand-list
					$self.addClass('current').parent('li').siblings('li').find('a').removeClass('current');
					$self.parent('li').parent('ul').find('li').find('img').eq(current_num).attr('src',btn_default[current_num]);
					current_num = num;
					$self.find('img').attr('src',btn_select[num]);
					pause = true;
					this.blur();
					return false;
				} else {
					$self.find('img').attr('src',btn_select[num]);
				}
			},
			function() {
				$self.find('img').attr('src',btn_select[num]);
			}
		);
	});
	
	function play(selector)	{
		
		clearTimeout(tid);
		
		if(pause) {
			return;
		}
		
		selector = selector || $('#brand-image li:visible:first');
		
		var $next_main_image = $(selector).next('li').length ? $(selector).next('li') : $(selector).parent('ul').find('li:first');
		var $next_a = $('#brand-list a.current').parent('li').next('li').length ? $('#brand-list a.current').parent('li').next('li').find('a') : $('#brand-list a:first');
		
		$('#brand-list a.current').removeClass('current');
		$next_a.addClass('current');
		
		// reset-set btn image
		$next_a.parent('li').parent('ul').find('li').find('img').eq(current_num).attr('src',btn_default[current_num]);
		current_num = (current_num + 1 < max) ? current_num + 1 : 0;
		$next_a.find('img').attr('src',btn_hover[current_num]);
		
		function next() {
			play($next_main_image);
		}
		
		$(selector).fadeOut(fade_speed);
		$($next_main_image).fadeIn(fade_speed, function() {
			tid = setTimeout(next, slide_speed);
		});
	}
	
	$that.find('li:first').siblings('li').hide();
	$btn_img.eq(current_num).parent('a').addClass('current').end().attr('src',btn_hover[current_num]);
	$(window).load(function() {
		tid = setTimeout(play, slide_speed);
	});
	
}


})(jQuery);