// JavaScript Document
( function($) {
	var banNum = 5;
	var banWidth = 685;

	var bannerList = new Array();
	var errorList = new Array();

	$(document).ready( function() {
		$("#tBanList li, #tBanNum").html("").css("opacity", 0);
	} );
	$(window).load( function() {
		$.getJSON( "js/banner.data.js", loadImages );
	} );
	function loadImages(json) {
		var banDatas = json.banner;
		for( var i=0; i<banDatas.length; i++ ) {
			bannerList[i] = new Object();
			bannerList[i].flag = false;
			bannerList[i].target = banDatas[i].target;
			bannerList[i].link = banDatas[i].link;
			bannerList[i].img = banDatas[i].img;
			bannerList[i].name = banDatas[i].name;
			bannerList[i].data = $('<img rel="'+i+'" />').attr("src", banDatas[i].img);
			bannerList[i].data.load( function() {
				bannerList[ parseInt($(this).attr("rel")) ].flag = true;
				for( var j=0; j<banDatas.length; j++ ) {
					if( !bannerList[j].flag ) {
						return false;
					}
				}
				loadEnd();
			} );
			bannerList[i].data.error( function() {
				bannerList[ parseInt($(this).attr("rel")) ].flag = true;
				errorList.push( parseInt($(this).attr("rel")) );
				for( var j=0; j<banDatas.length; j++ ) {
					if( !bannerList[j].flag ) {
						return false;
					}
				}
				loadEnd();
			} );
		}
	}
	function loadEnd() {
		if( errorList.length ) {
			errorList.sort();
			for( var e=0; e<errorList.length; e++ ) {
				bannerList.splice( errorList[e]-e, 1 );
			}
			banNum = bannerList.length;
		}
	
		for( var i=0; i<bannerList.length; i++ ) {
			if( bannerList[i].link != "" )
				$("#tBanList").append( $('<li>').css( {"opacity":0, "left":banWidth*i, "top":0, "position":"absolute"} ).append( $('<a href="'+bannerList[i].link+'" target="'+bannerList[i].target+'"><img src="'+bannerList[i].img+'" alt="'+bannerList[i].name+'" /></a>') ) );
			else
				$("#tBanList").append( $('<li>').css( {"opacity":0, "left":banWidth*i, "top":0, "position":"absolute"} ).append( $('<img src="'+bannerList[i].img+'" alt="'+bannerList[i].name+'" />') ) );
			$("#tBanNum").append( $('<li><a href="#'+(i+1)+'">'+(i+1)+'</a></li>') );
		}
		if( bannerList[0].link != "" )
			$("#tBanList").append( $('<li>').css( {"opacity":0, "left":banWidth*i, "top":0, "position":"absolute"} ).append( $('<a href="'+bannerList[0].link+'" target="'+bannerList[0].target+'"><img src="'+bannerList[0].img+'" alt="'+bannerList[0].name+'" /></a>') ) );
		else
			$("#tBanList").append( $('<li>').css( {"opacity":0, "left":banWidth*i, "top":0, "position":"absolute"} ).append( $('<img src="'+bannerList[0].img+'" alt="'+bannerList[0].name+'" />') ) );
		$("#tBanList li, #tBanNum").animate( {opacity:1}, {duration:500, easing:"easeOutCubic", complete:slideInit} );
	}
	function slideInit() {
		/*banNum = $("#tBanNum li").length;
		banWidth = $("#tBanList li").eq(0).width();*/
		var nowPic = 0;
		var interval;
		var _isClick = true;
		$("#tBanList").width( banNum*banWidth+banWidth ).height(320);
		$("#tBanNum li a").click( function() {
			if( _isClick ) {
				var index = $("#tBanNum li a").index(this);
				changePic(index);
				setTimer();
			}
			return false;
		} ).eq(0).trigger("click");
		function setTimer() {
			if( interval ) clearInterval(interval);
			interval = setInterval( nextPic, 5000 );
		}
		function nextPic() {
			if( nowPic+1>=banNum ) {
				changeRoopPic();
			} else {
				changePic( nowPic+1 );
			}
		}
		function changePic(id) {
			nowPic = id;
			$("#tBanNum li a").removeClass("active").eq(id).addClass("active");
			$("#tBanList").queue([]).animate( { left:-banWidth*id }, {duration:500, easing:"easeOutCubic"} );
		}
		function changeRoopPic() {
			nowPic = 0;
			//_isClick = false;
			$("#tBanNum li a").removeClass("active").eq(0).addClass("active");
			$("#tBanList").queue([]).animate( { left:-banWidth*banNum }, {duration:500, easing:"easeOutCubic", complete:changeRoopPicEnd} );
		}
		function changeRoopPicEnd() {
			//_isClick = true;
			$("#tBanList").css("left", 0);
		}
	}
} )(jQuery);