//
// Created by KSI ( www.xksi.pl )
//

function fadeBox( instanceName )
{
  this.instanceName  = instanceName ;  
  this.dontMove      = false ;
  this.loopCount     = 0 ;
  this.width         = 0 ;
  this.height        = 0 ;
  
  this.loadedLayers  = new Array() ;
  this.layers        = new Array() ;
  this.urls          = new Array() ;
  this.buttonsId     = new Array() ;
  this.layersCount   = 0 ;
  this.currLayer     = -1 ;
  
  this.loopMainSpeed = 25 ; // miliseconds
  this.ferquency     = 5000 ;
  this.timeOut       = 0 ;
  this.lastLayer     = null ;
  this.divLog        = null ;
  this.divDebug      = null ;
  
  this.useLog        = false ;

  // buttons
  
  this.backgroundImage          = '' ;
  this.backgroundImageOver      = '' ;
  this.backgroundImageSelected  = '' ;
  
  ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // Layers
  ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  
  this.reloadLayer = function ( layerId )
    {
      if ( this.loadedLayers [ layerId ] == false )
        {
          layer = this.layers[layerId] ;
          url   = this.urls  [layerId] ;
          //
          // jquery function
          //
          $(layer).load(url);
          this.loadedLayers[layerId] = true ;
          this.addLogLine ( 'reloadLayer with reload: ' + layerId ) ;
        }
        else
        {
          this.addLogLine ( 'reloadLayer without reload: ' + layerId ) ;
        }
    }
    
  this.showLayer = function ( layerId )
    {
      var doReload = true ;
      if ( this.currLayer == layerId ) doReload = false ;
      this.currLayer = layerId ;
      layer = this.layers[layerId] ;
      url   = this.urls  [layerId] ;
      
      this.reloadLayer ( layerId ) ;
      for ( ii=0;ii<=this.layersCount-1;ii++)
        {
          if ( ii!=this.currLayer )
            {
              document.getElementById ( this.buttonsId[ii] ).style.background='url('+this.backgroundImage+')';
            }
            else
            {
              document.getElementById ( this.buttonsId[ii] ).style.background='url('+this.backgroundImageSelected+')';
            }
        }

        if ( doReload == true ) 
          {
            if ( this.lastLayer != null )
              {
                $(this.lastLayer).fadeOut(200);
              }
            $(layer).fadeIn(200);
          }
      this.lastLayer = layer ;
      this.addLogLine ( 'showLayer : ' + layerId ) ;
    }

  this.addLayer = function ( obj, url, buttonDivId )
    {
      this.urls         [ this.layersCount ] = url ;
      this.layers       [ this.layersCount ] = document.getElementById ( obj ) ;
      this.buttonsId    [ this.layersCount ] = buttonDivId ;
      this.loadedLayers [ this.layersCount ] = false ;
      this.layersCount ++ ;
      this.addLogLine ( 'addLayer : ' + url ) ;
    }

  this.goToLayerRel = function ( rel )
    {
      this.addLogLine ( 'goToLayerRel : ' + rel ) ;
      nLayer = this.currLayer + rel ;
      if ( nLayer < 0 )
        {
          nLayer = this.layersCount - 1 ;
        }
      if ( nLayer > this.layersCount - 1 ) 
        { 
          nLayer = 0 ;
        }
      this.showLayer ( nLayer ) ;
    }

  ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  // Main onTimer loop
  ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  this.init = function ()
    {
      this.showLayer(0);
      this.timeOut = this.ferquency ;
      this.loopMain();      
      this.addLogLine ( 'initialised : ' + this.instanceName ) ;
    }
    
  this.loopMain = function ()
    {
      //
      // if can move then is moving
      //
      if ( this.dontMove == false )
        {
          this.timeOut = this.timeOut - this.loopMainSpeed ;
        }      
      
      if ( this.timeOut <= 0 ) 
        {
          
          this.timeOut = this.ferquency ;
          this.goToLayerRel ( 1 ) ;
        }

      setTimeout ( this.instanceName+".loopMain();", this.loopMainSpeed ) ;
      this.loopCount ++ ;
      this.showDebug();
    }

  ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  //  Debug, log and tools
  ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  this.initLog = function ( logId, debugId )
    {
      if ( this.useLog == true )
        {
          this.divLog = document.getElementById ( logId ) ;
          this.divDebug = document.getElementById ( debugId ) ;
          this.addLogLine ( "Log and debug windows ready. \r\n" ) ;
        }
    }
    
  this.addLogLine = function ( logLine )
    {
      if ( this.useLog == true )
        {
          this.divLog.innerHTML = this.divLog.innerHTML + "<br>" + logLine ;
        }
        else
        {
          //alert ( 'addLogLine : divLog not initialised');
        }
    }

  this.showDebug = function ()
    {
      if ( this.useLog == true )
        {
          lan = 'loopCount :' + this.loopCount + '<br>' ;
          lan += 'instanceName :' + this.instanceName + '<br>' ;
          lan += 'dontMove :' + this.dontMove + '<br>' ;
          //lan += 'width :' + this.width + '<br>' ;
          lan += 'height :' + this.height + '<br>' ;
          lan += 'layers :' + this.layers + '<br>' ;
          lan += 'urls :' + this.urls + '<br>' ;
          lan += 'layersCount :' + this.layersCount + '<br>' ;
          lan += 'currLayer :' + this.currLayer + '<br>' ;
          lan += 'loopMainSpeed :' + this.loopMainSpeed + '<br>' ;
          lan += 'ferquency :' + this.ferquency + '<br>' ;
          lan += 'timeOut :' + this.timeOut + '<br>' ; 
          lan += 'lastLayer :' + this.lastLayer.id + '<br>' ; 
          this.divDebug.innerHTML = lan ;
        }
    }
}