var index = 1;
var count = 0;
var intervalEnt;
var shown = '';
var slideH = 15;
var slideTime = 150;
var showList;
var allList;
var liLeftList;
var intervalTime = 5000;

var showOn = function() {
	index++;
	if ('img' + index == shown) {
		index++;
	}
	if (index > count) {
		index = 1;
	}
	slideCenter();
	$(showList[1]).find('.small_img_class').trigger('click');
}

$(document).ready(function() {
	initLiLeftList();
	bindEvent();
	initShow();
});

function initLiLeftList() {
	liLeftList = new Array();
	liLeftList.push(80);
	liLeftList.push(370);
	liLeftList.push(640);
}

function initShow() {
	allList = $("#scrollUl li");
	count = allList.length;
	showList = new Array();
	if (count <= 3) {
		$('#leftDiv').hide();
		$('#rightDiv').hide();
		
		for(var i = 0;i<allList.length;i++){
			showList.push(allList[i]);
		}
	} else {
		for(var i = 0;i<allList.length;i++){
			if(i<3){
			    showList.push(allList[i]);
			}			
		}
	}
	$(showList).each(function(i) {
		$(showList[i]).css('left', liLeftList[i]);
	});
	slideSmallImg(true);
	$('#bigimg1').show();
	shown = 'bigimg1';
	intervalEnt = setInterval(showOn, intervalTime);
}

function slideSmallImg(isInit, isRight) {
	$('#scrollUl li').remove();
	$(showList).each(function(i) {
		$(showList[i]).appendTo($('#scrollUl'));
		if (isRight) {
			if (i >= 2) {
				if (!isInit) {
					$(showList[i]).css('left', 800);
				}
			}
		} else {
			if (i == 0) {
				if (!isInit) {
					$(showList[i]).css('left',-60);
				}
			}
		}
		$(showList[i]).animate( {
			left : liLeftList[i]
		}, 300);
	});
	$(showList).find('.small_img_class').animate( {
		top : +0
	}, 300);
	bindSmallDivClick();
}

function getIdIndex(){
	var id = $(showList[2]).find('.small_img_class').attr('id');
	var idx = id.substring(id.indexOf('img') + 3,
			id.length);
	if (idx >= allList.length) {
		idx = 0;
	}
	return idx;
}

function slideRight() {	
	var idx = getIdIndex();
	showList.splice(0, 1);
	showList.push(allList[idx]);
	slideSmallImg(false, true);
	$(showList[2]).find('.small_img_class').trigger('click');
}

function slideCenter(){
	var idx = getIdIndex();
	showList.splice(0, 1);
	showList.push(allList[idx]);
	slideSmallImg(false, true);
	$(showList[1]).find('.small_img_class').trigger('click');
}

function slideLeft() {
	var idx = getIdIndex();
	showList.splice(showList.length - 1, 1);
	showList.splice(0, 0, allList[idx]);
	slideSmallImg(false, false);
	$(showList[0]).find('.small_img_class').trigger('click');
}

function bindEvent() {
	bindSmallDivClick();
	$("#banner").mouseout(function() {
		intervalEnt = setInterval(showOn, intervalTime);
	});

	$('#banner').mouseover(function() {
		clearInterval(intervalEnt);
	});

	$('#rightDiv').click(function() {
		slideRight();
	});

	$('#leftDiv').click(function() {
		slideLeft();
	});
}

function bindSmallDivClick() {
	$(".small_img_class").unbind('click');
	$(".small_img_class").click(
			function() {
				var hoverId = $(this).attr('id');
				if (shown == hoverId) {
					return;
				}
				$('#' + shown).animate( {
					top : +0
				}, slideTime);
				var idx = hoverId.substring(hoverId.indexOf('img') + 3,
						hoverId.length);
				index == idx;
				shown = hoverId;
				$('#' + hoverId).animate( {
					top : -slideH
				}, slideTime);
				$('.big_a_class').filter(":visible").fadeOut(500).parent()
						.children().eq(idx - 1).fadeIn(1000);
			});
}