(function($){	
	$.fn.slideVisualBanner = function(options){
		
		if(this.length == 0) return;
		
		// support mutltiple elements
		if(this.length > 1){
			this.each(function(){$(this).slideVisualBanner(options)});
			return this;
		}
		
		var 
			defaults = {				
				active:1
				,interval:4000
				,speed:500
				,easing:null				
				,navigation:{
					btnstartpos:570
					,dist:38
				}
				,play:{
					auto:false
					,swap:false
				}
				,copy:{
					ext:'.png'
					,path:''
					,name:''
				}
			},
			settings = $.extend({}, defaults, options);
		var $this = this;	
//			this.each(function(){
			/*
			<ul class="banner_img">
				<li class="roll1 on">
					<a href="#"><span class="hide">첫번째 이미지 버튼</span></a>
					<img src="img_gallery_bg1.html" alt="이미지1" />
				</li>
				<li class="roll2">
					<a href="#"><span class="hide">두번째 이미지 버튼</span></a>
					<img src="img_gallery_bg2.html" alt="이미지2" />
				</li>
				<li class="roll3">
					<a href="#"><span class="hide">세번째 이미지 버튼</span></a>
					<img src="img_gallery_bg3.html" alt="이미지3" />
				</li>
			</ul>
			*/
			
		var $items;
		var $navigators;
		var $imgs;
		var $playBtn;
		var $stopBtn;
		var $copy;
		var total;				
		var nCurrentIndex;
		var nTimerID;
		var loop;								
		
		init();
		addEventListener();
		if(settings.play.auto) playLoop();
		
		// 요소 초기화.	
		function init(){
			$items = $this.find('ul>li');
			$navigators = $items.find('a');
			$imgs = $items.find('div.bg');
			$playBtn = $this.find('.playBtn');
			$stopBtn = $this.find('.stopBtn');
			$copy = $this.find('.gallery_cont p.copy img');
			total = $items.length;		
			nCurrentIndex = settings.active;
			nTimerID = 0;						
			loop = false;

			//배너갯수가 2개 미만일때 버튼 비활성화
			if(total < 2) {
				$this.find('a').addClass('disabled');
				return;
			}
//			alert(total);
//			showBannerAt(nCurrentIndex);
			$this.find('ul>li').eq(nCurrentIndex-1).appendTo($items.parent());
			setBtn();
		}
		
		//네비게이션 인덱스텍스트+위치설정,플레이버튼 위치설정
		function setBtn(){
			$items.each(function(index) {
//				$navigators.eq(index).text(index + 1);
				$navigators.eq(index).css({'left':settings.navigation.btnstartpos + (index*settings.navigation.dist)});
			});					
			if(settings.play.swap){
				$stopBtn.css({'left':$playBtn.css('left')});
				if(settings.play.auto){					
					$playBtn.css({'display':'none'});
				}else{
					$stopBtn.css({'display':'none'});
				}
			}
//			$playBtn.css({'left':settings.play.btnstartpos});
//			$stopBtn.css({'left':settings.play.btnstartpos + settings.play.dist});					
		}
		
		//버튼 이벤트
		function addEventListener(){
			if(total < 2) return;

			$navigators.on('click',function(event){
				if(!$(this).parents('li').hasClass('on')){
	//				showBannerAt($(this).parent().index());
					var myClass = $(this).parents('li').attr('class');
					var index = myClass.substr(4);
					showBannerAt(index);
				}
				return false;
			}).on('mouseenter focusin',function(event){
				if(loop) stopLoop();
			}).on('mouseleave focusout',function(event){
				if(loop) playLoop();
			})
			
			$playBtn.on('click',function(event){
				playLoop();
				if(settings.play.swap){
					$playBtn.css({
						display:"none"
					});
					$stopBtn.css({
						display:"inline-block"
					});
				}
				return false;
			});
			
			$stopBtn.on('click',function(event){
				stopLoop();
				loop = false;
				if(settings.play.swap){
					$stopBtn.css({
						display:"none"
					});
					$playBtn.css({
						display:"inline-block"
					});
				}
				return false;
			});	
		}
		
		//인터벌
		function playLoop(){	
			if(nTimerID > 0) return;
			if(total > 1) {
				nTimerID = setInterval(startPlayNext, settings.interval);	
				loop = true;
			}
		}
		
		function stopLoop(){	
//			alert('stoploop');
			if(loop){
				clearInterval(nTimerID);
				nTimerID = 0;
			}
		}
		
		//다음 배너 설정
		function startPlayNext(){

			if(total <= 1) return;
			 
			if(nCurrentIndex >= total)
				showBannerAt(1);
			else
				showBannerAt(parseInt(nCurrentIndex)+1);			
		}
		
		// nIndex에 해당하는 배너를 현재배너로 활성화시킴.
		function showBannerAt(nIndex){		
	//		console.log(nIndex);
			
			var classindex = $navigators.attr('class');
			$items.removeClass("on");
//			$this.find('ul>li.roll' + nCurrentIndex).removeClass("on");
			$this.find('ul>li.roll' + nIndex).addClass("on");
			
//			$imgs.hide();
//			$imgs.eq(nIndex).show();

			$this.find('ul>li.roll' + nIndex).appendTo($items.parent());
			$this.find('ul>li.roll' + nIndex).find('div.bg')
				.stop(true, false)
				.css('opacity',0)
				.animate({opacity:1},settings.speed	,settings.easing);
			
			//카피이미지변경
			$copy.attr('src',settings.copy.path + settings.copy.name + nIndex + settings.copy.ext);
				
			// 현재배너 index값을 업데이트 시켜준다.
			nCurrentIndex = nIndex;
//			console.log("nCurrentIndex" + nCurrentIndex);
		}
			
//		});

		/**
		 * ===================================================================================
		 * = PUBLIC FUNCTIONS
		 * ===================================================================================
		 */
		$this.startLoopPlay = function(){
//			$this.setPlayStopBtn('play');
			playLoop();
		}
		
		$this.stopLoopPlay = function(){
			stopLoop();	
			loop = false;
		}
		
		$this.setPlayStopBtn = function(state){
			if(total < 2) return;
			if(settings.play.swap){
				if(state == 'play'){					
					$playBtn.css({'display':'none'});
					$stopBtn.css({'display':'inline-block'});
				}else{
					$playBtn.css({'display':'inline-block'});
					$stopBtn.css({'display':'none'});
				}
			}
		}
		
		return this;
	}
})(jQuery);