// 배너 하나의 크기.
var BANNER_WIDTH = 980;
var SHOW_DURATION = 600; 
var AUTO_PLAY_TIME = 4000;
// 우리가 움직이게 될 배너 컨텐츠 엘리먼트.
var $banner_content;
// 배너 전체 개수.
var nBannerLength = 0;
// 현재 화면에 보이고 있는 배너 인덱스 값.
var nCurrentBannerIndex = 0;
//움직임방향 next:0,prev:1;
var play_dirction=0;
// 배너 메뉴의 위치를 표시할 엘리먼트가 담길 변수.
var $banner_dots;
//화면넓이
var $bannerWidth;
// 자동실행 타이머 아이디.
var autoTImerID;
//재생상태확인(1:자동재생중, 0:멈춤상태)
var is_play=1;

$(document).ready(function(){
 initMenu();
 initEventListener();
 startAutoPlay();
});
$(window).resize(function(){
 //화면크기변화시 넓이값 업데이트
 $bannerWidth=$("#banner_content").width();
 
 
 //변화에 따른 요소위치 재정렬
 for(var i=0; i<nBannerLength; i++){
  //요소위치값을 구함
  var offset = $banner_content.eq(i).offset();
  
  if(i != this.nCurrentBannerIndex){//현재 배너위치는 항상 0이므로 무시함.
   //좌측영역에 위치한경우
   if(offset.left<0){
    $banner_content.eq(i).css({left:-$bannerWidth+"px"});
   //우측영역에 위치한경우
   }else{
    $banner_content.eq(i).css({left:$bannerWidth+"px"});
   }
  }
 }
});

// 메뉴 엘리먼트 관련 초기화.
function initMenu(){
 $banner_content = $("#banner_content").children();
 nBannerLength = $banner_content.length;
 //초기위치설정
 $bannerWidth=$("#banner_content").width();
 $banner_content.css({left:$bannerWidth+"px"});
 $banner_content.eq(0).css({left:"0px"});
 
 // 배너 메뉴의 위치를 표시할 엘리먼트가 담길 변수.
 $banner_dots = $("#banner_nav li a");
 // 배너 메뉴의 위치를 0번째로 초기화 시킴.
 showBannerDotAt(0);
 
 // autoPlay의 타이머 ID값.
 autoTImerID = 0;
}
// 이벤트 처리.
function initEventListener(){
 // 이전  배너 보이기
 $("#btn_prev_banner").bind("click", function(){
   prevBanner();
 });
 // 다음 배너 보이기
 $("#btn_next_banner").bind("click", function(){
   nextBanner();
 });
 
 // 배너 메뉴에서 마우스가 오버되는 경우, 오버된 위치에 맞게 배너를 보이도록 하기.
 $banner_dots.bind("click",function(){
  var nIndex = $banner_dots.index(this);
  showBannerAt(nIndex);
  return false;
 });
 
 //마우스오버시 슬라이드컨트롤 상태변화요소
 
 var $over_element = $("#banner_nav, #btn_navi");
 // 배너슬라이더에 마우스 커서가 들어오는 경우 자동실행 기능을 멈춘다.
 $over_element.bind("mouseenter",function(){
  stopAutoPlay();
 });
 // 배너슬라이더에서 마우스 커서가 밖으로 나가는 경우 다시, 자동실행 기능 시작.
 $over_element.bind("mouseleave",function(){
  if(is_play==1){
   startAutoPlay();
  }else{
   stopAutoPlay();
  }
 });
 //STOP, PLAY버튼
 $("#btn_play_stop").toggle(function(){
  stopAutoPlay();
  $(this).text("PLAY");
  is_play=0;
 },function(){
  startAutoPlay();
  $(this).text("STOP");
  is_play=1;
 });
 
}
 
// 이전  배너 보이기
function prevBanner(){
 // 이동할 이전 배너 인덱스 값 구하기.
 var nIndex = this.nCurrentBannerIndex-1;
 // 이전 내용이 없는 경우 마지막 배너 인덱스 값으로 설정하기.
 if(nIndex<0)
  nIndex = this.nBannerLength-1;
  
 // n번째 배너 보이기.
 play_dirction = 1; 
 this.showBannerAt(nIndex);   
}
// 다음 배너 보이기
function nextBanner()
{
 // 이동할 이전 배너 인덱스 값 구하기.
 var nIndex = this.nCurrentBannerIndex+1;
 // 다음 내용이 없는 경우, 첫 번째 배너 인덱스 값으로 설정하기.
 if(nIndex>=nBannerLength)
  nIndex = 0;
 
 // n번째 배너 보이기.
 play_dirction = 0;   
 this.showBannerAt(nIndex); 
}
// nIndex에 해당하는 배너 보이기.
function showBannerAt(nIndex){
 if (nIndex != this.nCurrentBannerIndex) {
  //  n번째 배너 위치 값 구하기.
  //var nPosition = -BANNER_WIDTH * nIndex;
  var nPosition = BANNER_WIDTH;
  // 배너 메뉴의 위치 값을 업데이트 시킴.
  this.showBannerDotAt(nIndex);
  
  //이전배너인덱스
  pIndex = this.nCurrentBannerIndex;
  
  // 슬라이드 시작.
  $banner_content.stop();
  
  for(var i=0; i<nBannerLength; i++){
   
   if(play_dirction==0){//next
    if(i==nIndex){
     $banner_content.eq(i).css({left:$bannerWidth+"px"});
     $banner_content.eq(i).animate({left:"0px"}, SHOW_DURATION, "easeOutQuart");
    }else if(i==pIndex){
     $banner_content.eq(i).animate({left:-$bannerWidth+"px"}, SHOW_DURATION, "easeOutQuart");
    }else{
     $banner_content.eq(i).css({left:$bannerWidth+"px"});
    }
   }else{//prev
    if(i==nIndex){
     $banner_content.eq(i).css({left:-$bannerWidth+"px"});
     $banner_content.eq(i).animate({left:"0px"}, SHOW_DURATION, "easeOutQuart");
    }else if(i==pIndex){
     $banner_content.eq(i).animate({left:$bannerWidth+"px"}, SHOW_DURATION, "easeOutQuart");
    }else{
     $banner_content.eq(i).css({left:-$bannerWidth+"px"});
    }
   }
  }
  //현재 배너 인덱스 업데이트 시키기.
  this.nCurrentBannerIndex = nIndex;
 }
}

// 배너 메뉴의 위치값을 업데이트 시킴.
function showBannerDotAt(nIndex){
 this.$banner_dots.eq(this.nCurrentBannerIndex).removeClass("select");
 this.$banner_dots.eq(nIndex).addClass("select");
}

////////////////////////////////////////////////////////
// 자동 실행 시작
function startAutoPlay(){
 
 if(this.autoTimerID!=0)
  clearInterval(this.autoTimerID);
  
 this.autoTimerID = setInterval(function(){
  nextBanner();
 },this.AUTO_PLAY_TIME);
}
// 자동실행 멈춤.
function stopAutoPlay(){
 if(this.autoTimerID!=0)
  clearInterval(this.autoTimerID);
  
 this.autoTimerID = 0;
}