;(function($,exports,undefined){
 "use strict";
 // console.log(!$.fn.FadeBImage)
 if (!$.fn.FadeBImage)
  {
  // 기본 설정값 정의
   var DefaultSettings = {   
                             MinWidth      : 1020 // 이미지 쇼 최소 넓이
                            ,Height        :  320 // 이미지 쇼 높이
                            ,Speed         : 1000 // 전환 속도
                            ,Interval      : 3000 // 전환 간격
                            ,Cover         : true // 커버 노출 여부
                            ,SelectImage   : ''
                            ,UnSelectImage : ''
                          };
  // end - DefaultSettings
  $.fn.FadeBImage = function (options)
    {
   var 
        _this         = this  // .slideshow
    ,SetValue      = $.type(options) == 'object' ? $.extend({},DefaultSettings, options) : DefaultSettings
     // 반복시킬 대상
       ,$ShowTarget    = $('li',_this)         // 이미지 목록. .slideshow li
    ,$ShowTargetImg = $('img',$ShowTarget)  // 
    ,$ImageQty      = $ShowTarget.length    // 총 갯수.
    ,ImageIndex     = 0
    ,$ShowParent    = _this.parent("div");
//    console.log('_this : ' + _this);
  
      // Fade 용 이미지 갯수만큼 Select 용 이미지 항목 추가.
      for(var i=0;i<$ShowTarget.length;i++)
      {
        $ShowParent.append("<li class='FadeSelectImage'><img src=''></li>");
      }
      // 위 추가한 항목을 감싼다.
      $(".FadeSelectImage").wrapAll("<ul class='FadeSelect'>");
      // 인수로 전달받은 이미지 경로를 적용. 
      $(".FadeSelectImage img").attr("src",SetValue.UnSelectImage);
      var
        $FadeSelectImage = $(".FadeSelectImage img");
      $ShowParent.css
      ({
     'position' : 'relative'  // 현재 위치 기준. 상대 위치.
   });
  
   //각 li 안의 이미지에 대한 설정
   $ShowTargetImg.css
      ({            
         'background-size' : 'cover'
        ,'opacity' : '0'  // 투명하게.
   });
        
      var SlideIntval;
   
   $(function()
      {
//        $(".FadeSelectImage img").on
        $FadeSelectImage.on
        ({
          "click":function(){  // 반복실행 중지.
                               clearInterval(SlideIntval);
                               // 현재 이미지 투명하게 처리.
                               $FadeSelectImage.eq(ImageIndex).attr("src",SetValue.UnSelectImage);
                               $ShowTargetImg  .eq(ImageIndex).stop().animate({'opacity' : '0'},SetValue.Speed,'swing');
                               // Click 한 이미지 순번 저장.
                               ImageIndex = $FadeSelectImage.index(this);
                               // Click 한 이미지를 표시.
                               $ShowTargetImg  .eq(ImageIndex).stop().animate({'opacity' : '1'},SetValue.Speed,'swing');
                               $FadeSelectImage.eq(ImageIndex).attr("src",SetValue.SelectImage);
                               // 다시 반복실행 하도록 처리.
                               slideshowstart();
                            }
        });
      });
   function verticalCenter()
      {
     // console.log("로드완료 후 이미지 세로 중앙 정렬")
        // each. 여러개의 요소에 순차적으로 하나씩 접근 시 사용. 
        // $.each(선택요소 ,function(선택요소 인덱스,선택요소){..})
        // $(선택요소).each(function(선택요소 인덱스,선택요소){..})
     $.each($ShowTargetImg,function() 
                              {
                                $(this).parent("li").css({
//                                                     'margin-top' : (SetValue.Height-$(this).height())/2
                                                       });         
                               
                              }
              );
   };   
   //resize 창 조절에 따른 이미지 세로 중앙 정렬
   $(window).on('resize',function(){
    verticalCenter();
   });   
   //슬라이드쇼 기능
   function slideshowstart()
      {
//     var SlideIntval;
    SlideIntval = setInterval( function(){
                                               // 현재 이미지를 투명으로 만든다. 
                                               // ImageIndex++ 이므로, 현재 Index 값으로 처리.
                                               $FadeSelectImage.eq(ImageIndex  ).attr("src",SetValue.UnSelectImage);
                                               $ShowTargetImg  .eq(ImageIndex++).stop().animate({'opacity' : '0'},SetValue.Speed,'swing');
                                               // 증가한 ImageIndex 값이 이미지 수량과 같으면 0 으로 만든다.
                                               if (ImageIndex == $ImageQty)
                                               {
                                                 ImageIndex = 0;
                                               };
                                               // 이 시점의 ImageIndex 값은 다음 ImageIndex 값을 가진다. 위에서 ImageIndex++ 으로 처리 했기 때문에.
                                               // 그래서, 다음에 보여줄 이미지를 보이게 한다.
                                               $ShowTargetImg  .eq(ImageIndex).stop().animate({'opacity' : '1'},SetValue.Speed,'swing');
                                               $FadeSelectImage.eq(ImageIndex).attr("src",SetValue.SelectImage);
                                             }
                                  ,SetValue.Interval);
   }
   // end fn.slideshowstart 
   var loadedcount = 0;
  
   function onloadedimage(e)
      {    
     loadedcount++;
     if (loadedcount == $ShowTarget.children().length)
     {   
       verticalCenter();
          $FadeSelectImage.eq(0).attr("src",SetValue.SelectImage);
          $ShowTargetImg.eq(  0).stop()
                                          .animate( {'opacity' : '1'}
                                                           ,SetValue.Speed
                                                           ,'swing'
                                                           ,function()
                                                            {    
                                                              slideshowstart();
                                                            }
                                                          );    
     }
   }
   //end onloadedimage
   $(document).ready( function() 
                         {
                           var 
                             imageLoaded = function()
                                           {
                                             onloadedimage();
                                           }
                         
                           // each. 여러개의 요소에 순차적으로 하나씩 접근 시 사용. 
                           // $.each(선택요소 ,function(선택요소 인덱스,선택요소){..})
                           // $(선택요소).each(function(선택요소 인덱스,선택요소){..})
                           $ShowTargetImg.each( function() 
                                                {
                                                  var 
                                                    targetImg = new Image();
                                                  targetImg.onload = imageLoaded ;
                                                  targetImg.src = $(this).attr('src') ;
                                                }
                                              );
                         }
                       );
   //
  }
  // end - fn
 }
 // end - if 
})(window.jQuery, window);