///////////////////////////////////////////////////////////////////////////////
//
//  KIUFader
// 
var KIUFader = (function (){


// constructor
// Arguments: N/A
// Returns:   N/A 
  function KIUFader(_shellId)
  {
    this.mLandscapeMode = true;
    
    this.mImages = [];
    this.mPeriod = 5000;
    this.mDuration = 400;
    this.mFrameIndex = 0;
    this.mLastFrameIndex = -1;
    this.mTO1Handle = null;
    this.mTO2Handle = null;
    this.mImg1 = null;
    this.mImg2 = null;
    this.mImgWrapper1 = null;
    this.mImgWrapper2 = null;
    this.mButtonBar = null;
    this.mShellWidth = 0;
    this.mShellHeight = 0;
    this.mFadeDirection = 0;
    
    this.mButtonSrc = "";
    this.mButtonHoverSrc = "";
    this.mButtonSelectSrc = "";
    
    this.setShell(_shellId);
  }
  
// setShell
// 
  KIUFader.prototype.setShell = function(_shellId)
  {
    var shell = document.getElementById(_shellId);
    this.mShellWidth = shell.offsetWidth;
    this.mShellHeight = shell.offsetHeight;
    
    this.mImgWrapper1 = document.createElement("DIV");
    this.mImgWrapper2 = document.createElement("DIV");
    this.mButtonBar = document.createElement("DIV");
    
    this.mImgWrapper1.id = "_kiu_fader_wrapper1";
    this.mImgWrapper2.id = "_kiu_fader_wrapper2";
    this.mButtonBar.id = "_kiu_fader_buttonBar";
    
    this.mImgWrapper1.style.overflow = "hidden";
    this.mImgWrapper1.style.height = this.mShellHeight+"px";
    this.mImgWrapper2.style.overflow = "hidden";
    this.mImgWrapper2.style.height = this.mShellHeight+"px";
    this.mImgWrapper2.style.position = "relative";
    this.mImgWrapper2.style.top = -this.mShellHeight+"px";
    this.mButtonBar.style.position = "relative";
    this.mButtonBar.style.top = -(2*this.mShellHeight)+"px";
    this.mButtonBar.style.zIndex = "2";
    this.mButtonBar.style.textAlign = "right";
    
    shell.appendChild(this.mImgWrapper1);
    shell.appendChild(this.mImgWrapper2);
    shell.appendChild(this.mButtonBar);
  }; 
  
// setButtonBarStyle
// 
  KIUFader.prototype.setButtonBarId = function(_id)
  {
    if (this.mButtonBar)
      this.mButtonBar.id = _id;
  }; 

// setButtonBar
  KIUFader.prototype.setButtonBar = function(_id)
  {
	  this.mButtonBar = document.getElementById(_id);
  };

// setPortraitMode
// 
  KIUFader.prototype.setPortraitMode = function()
  {
    this.mLandscapeMode = false;
  }; 
// setDisplayDuration
// 
  KIUFader.prototype.setDisplayDuration = function(_duration)
  {
    dis.mPeriod = _duration;
  }; 
// setFadeSteps
// 
  KIUFader.prototype.setTransitionDuration = function(_duration)
  {
    this.mDuration = _duration;
  }; 
  
// setButtonSrc
// 
  KIUFader.prototype.setButtonSrc = function(_imgSrc)
  {
    this.mButtonSrc = _imgSrc;
  }; 
// setButtonHoverSrc
// 
  KIUFader.prototype.setButtonHoverSrc = function(_imgSrc)
  {
    this.mButtonHoverSrc = _imgSrc;
  }; 
// setButtonSelectSrc
// 
  KIUFader.prototype.setButtonSelectSrc = function(_imgSrc)
  {
    this.mButtonSelectSrc = _imgSrc;
  }; 
  
// addImage
// 
  KIUFader.prototype.addImage = function(_imgSrc, _href, _title)
  {
    var imgObj = {};
    this.mImages.push(imgObj);
    var index = this.mImages.length -1;
    
    imgObj.mElement = document.createElement("IMG");
    imgObj.mElement.src = _imgSrc;
    imgObj.mElement.style.position = "relative";

    if (this.mLandscapeMode)
      imgObj.mElement.width = this.mShellWidth;
    else
      imgObj.mElement.height = this.mShellHeight;
    if (_href && _href.length > 0)
      imgObj.mElement.onclick = function(){location.href = _href;};
    if (_title && _title.length > 0)
      imgObj.mElement.title = _title;
    if (this.mButtonSrc.length)
    {
      imgObj.mButton = document.createElement("IMG");
      imgObj.mButton.src = this.mButtonSrc;
      imgObj.mButtonSrc = this.mButtonSrc;
      if (this.mButtonSelectSrc.length)
        imgObj.mButtonSelectSrc = this.mButtonSelectSrc
      else
        imgObj.mButtonSelectSrc = this.mButtonSrc;
      if (this.mButtonHoverSrc.length)
        imgObj.mButtonHoverSrc = this.mButtonHoverSrc
      else
        imgObj.mButtonHoverSrc = this.mButtonSelectSrc;
        
      var dis = this;  
      imgObj.mButton.onclick = function(){
          dis.mFrameIndex = index;
          clearTimeout(dis.mTO1Handle);
          clearTimeout(dis.mTO2Handle);
          dis.paintFader();
          dis.fade();
          dis.mTO1Handle = setTimeout(function(){dis.runFadeFunc()}, dis.mPeriod);
        };
      imgObj.mButton.onmouseover = function(){
          if (dis.mLastFrameIndex == index)
            return;
          if (dis.mLastFrameIndex >= 0 && ("mButton" in dis.mImages[index]))
            dis.mImages[index].mButton.src = dis.mImages[index].mButtonHoverSrc;
        };
      imgObj.mButton.onmouseout = function(){
          if ("mButton" in dis.mImages[index])
          {
            if (dis.mLastFrameIndex == index)
              dis.mImages[index].mButton.src = dis.mImages[index].mButtonSelectSrc;
            else
              dis.mImages[index].mButton.src = dis.mImages[index].mButtonSrc;
          }
        };
          
      this.mButtonBar.appendChild(imgObj.mButton);
    }
  }; 
  
// start
// 
  KIUFader.prototype.start = function()
  {
    if (this.mImages.length == 0)
      return;
    var dis = this;
    this.paintFader();
    this.fade();
    this.mTO1Handle = setTimeout(function(){dis.runFadeFunc();}, dis.mPeriod);
  }; 
  
// runFadeFunc
// 
  KIUFader.prototype.runFadeFunc = function()
  {
    this.paintFader();
    this.fade();
    var dis = this;
    this.mTO1Handle = setTimeout(function(){dis.runFadeFunc();}, dis.mPeriod);
  }; 
  
// addButtonCtrl
// 
  KIUFader.prototype.paintFader = function()
  {
    var imgWrapper = null; 
    var img = null;
    var oldImg = null;
    if (this.mFadeDirection)
    {
      this.mImg1 = this.mImages[this.mFrameIndex].mElement;
      img = this.mImg1;
      oldImg = this.mImg2;
      imgWrapper = this.mImgWrapper1;
    }
    else
    {
      this.mImg2 = this.mImages[this.mFrameIndex].mElement;
      img = this.mImg2;
      oldImg = this.mImg1;
      imgWrapper = this.mImgWrapper2
    }
    
    var imgs = imgWrapper.getElementsByTagName("IMG");
    for (var i = 0; i < imgs.length; i++)
      imgs[i].parentNode.removeChild(imgs[i]);
      
    imgWrapper.appendChild(img);
    img.style.top = "0px";
    img.style.left = "0px";
    
    if (this.mLandscapeMode)
    {
      var iHeight = img.offsetHeight;
      var padding = (iHeight > 0)?Math.round((this.mShellHeight - iHeight)/2):0;
      img.style.top = padding+"px";
    }
    else
    {
      var iWidth = img.offsetWidth;
      var padding = (iWidth > 0)?Math.round((this.mShellWidth - iWidth)/2):0;
      img.style.left = padding+"px";
    }
    
    img.style.zIndex = 1;
    if (oldImg)
      oldImg.style.zIndex = 0;
    
    if ("mButton" in this.mImages[this.mFrameIndex])
      this.mImages[this.mFrameIndex].mButton.src = this.mImages[this.mFrameIndex].mButtonSelectSrc;
    if (this.mLastFrameIndex >= 0 && ("mButton" in this.mImages[this.mLastFrameIndex]))
      this.mImages[this.mLastFrameIndex].mButton.src = this.mImages[this.mLastFrameIndex].mButtonSrc;
      
    this.mLastFrameIndex = this.mFrameIndex;
    this.mFrameIndex++;
    if (this.mFrameIndex >= this.mImages.length) 
      this.mFrameIndex = 0;
  };
  
// fade
// 
  KIUFader.prototype.fade = function()
  {
    var d = new Date();
    var start = d.getTime();
    var step = 1;
    var dis = this;
    var doFade = function()
    {
      var d2 = new Date();
      var df = d2.getTime() - start;
      var delta = df/dis.mDuration;
      if (dis.mFadeDirection)
      {
        var opa = (delta<1)?1 - delta: 0;
        var opb = (delta<1)?delta:1;
      }
      else
      {
        var opa = (delta<1)?delta:1;
        var opb = (delta<1)?1- delta:0;
      }
      dis.mImgWrapper1.style.opacity = opa;
      dis.mImgWrapper2.style.opacity = opb;
      opa = Math.round( 100 * opa);
      opb = Math.round( 100 * opb);
      dis.mImgWrapper1.style.filter = "alpha(opacity="+opa+");";
      dis.mImgWrapper2.style.filter = "alpha(opacity="+opb+");";
      if (delta < 1)
        this.mTO2Handle = setTimeout(doFade, 0);
    };
    this.mFadeDirection = (this.mFadeDirection)? 0 : 1;
    this.mTO2Handle = setTimeout(doFade, 0);
  }; 
  
  return KIUFader;
})();