$(function(){

	var slide = (function(){
		// dom
		var slide   = $("#homeContBannerSlide ul").css({position:"relative"}),
			banners = slide.find("li"),
			length  = banners.size();
		
		// val
		var movement = slide.width() / 2 - 16,
			currentIndex = 0,
			maxIndex = length -1;
		var animating = false;
		
		var positionAdjust = 8;
		
		
		// init
		slide.css({
			display: "block",
			width: movement * length + positionAdjust
		});
		
		// init banner positions
		banners.each(function(i){
			banners.eq(i).css({
				position: "absolute",
				top: 0,
				left: positionAdjust + i * movement
			});
			if( 1 < i ){
				banners.eq(i).hide();
			}
		});
		if( length <= 2 ){
    		$("#showNextBanner").hide();
    	}
		
		// closer
		return {
			index: function(){
				return currentIndex;
			},
			isMax: function(){
				return currentIndex == maxIndex;
			},
			next: function(){
				if( currentIndex < maxIndex ){
					this.show( currentIndex + 1 );
				}else{
					this.show( 0 );
				}
			},
			prev: function(){
				if( currentIndex == 0 ){
					this.show( maxIndex );
				}else{
					this.show( currentIndex - 1 );
				}
			},
			show: function( nextIndex, calledFromNavi ){
				nextIndex = parseInt( nextIndex );
				if( animating ) return;
				if( nextIndex == currentIndex ) return;
				animating = true;
				
				if( calledFromNavi && currentIndex < nextIndex ){
					nextIndex--;
				}
				
				var adjust = 0;
				if( nextIndex == maxIndex ){
					nextIndex--;
					adjust = 1;
				}
				
				
				// animation
				banners.filter(function(index){
					if( currentIndex < nextIndex ){
						if( currentIndex + 2 <= index && index <= nextIndex + 1 ){
							return true;
						}else{
							return false;
						}
					}else if( currentIndex > nextIndex ){
						if( nextIndex <= index && index <= currentIndex -1 ){
							return true;
						}else{
							return false;
						}
					}
					return false;
				}).fadeIn();
				
				banners.filter(function(index){
					if( index == nextIndex || index == nextIndex + 1 ){
						return false;
					}
					return true;
				}).fadeOut();
				
				slide.animate({
					left: -( movement * nextIndex )
				}, function(){
					animating = false;
					currentIndex = nextIndex + adjust;
				});
				
				// navi
				for( var i in navi ){
					if( i == nextIndex || i - 1 == nextIndex ){
						navi[i].addClass("selected");
					}else{
						navi[i].removeClass("selected");
					}
				}
				if( nextIndex == maxIndex -1 ){
					$("#showNextBanner").fadeOut();
				}else{
					$("#showNextBanner").fadeIn();
				}
				if( nextIndex == 0 ){
					$("#showPrevBanner").fadeOut();
				}else{
					$("#showPrevBanner").fadeIn();
				}
			}
		};
		
	})();
	
	// timer
	var timer = (function(){
		// 
		var timerFunction = function(){
			slide.next.call( slide, null );
		}
		//
		var timer = setInterval( timerFunction, 5000 );
		
		return {
			reset: function(){
				clearInterval(timer);
				timer = setInterval( timerFunction, 5000 );
			}
		}
	})();
	
	// event
	$("#showNextBanner").bind( "click", function(){
		slide.next();
		timer.reset();
		return false;
	});
	$("#showPrevBanner").bind( "click", function(){
		slide.prev();
		timer.reset();
		return false;
	}).hide();
	// create navigation
	var length = $("#homeContBannerSlide ul li").size();
	var navi = [];
	var naviArea = $("<div>").css({
						position: "absolute",
						right: 20,
						bottom: 5
					}).appendTo("#homeContBannerSlide");
	for( var i = 0 ; i < length ; i++ ){
		navi.push( $("<a>").html(i).attr("href","#").addClass("bannerSlideNavi") );
		$.data( navi[i].get()[0], "index", i );
		navi[i].bind( "click", function(i){
			slide.show( $.data( this, "index" ), true );
			timer.reset();
			return false;
		});
		naviArea.append(navi[i]);
		
		if( i < 2 ){
			navi[i].addClass("selected");
		}
		
	}
	$("#homeContBannerSlide img").hover(
		function(){
			$(this).stop().animate({
				opacity: 0.7
			}, "fast" );
		},
		function(){
			$(this).stop().animate({
				opacity: 1
			}, "fast" );
		}
	);
	//*/
});