/*
  jsTrans - for image transitions
  
  Vaclav Kusak 2009
  
*/
    
  function jsTrans(transElemID)
  { this.imgs         = Array();
    this.from         = 0;
    this.parElem      = null,
    this.elem1        = null;
    this.elem2        = null;
    this.opacity      = 1;
    this.step         = 0.02;
    this.speed        = 20;
    this.wait         = 3000;
    this.left         = '0px';
    this.top          = '0px';
    this.randomStart  = false;
    this.intervalID   = null;
    
    this.parElem = document.getElementById(transElemID);
    
    if( this.parElem )
    { var pom = document.createElement('div');
          pom.id = 'jsTransIMGElement01' + '-' + transElemID;
          pom.style.position = 'absolute';
          pom.style.top = '0px';
          pom.style.left = '0px';
          pom.style.width = '100%';
          pom.style.height = '100%';
          this.parElem.appendChild(pom);
          
      var pom = document.createElement('div');
          pom.id = 'jsTransIMGElement02' + '-' + transElemID;
          pom.style.position = 'absolute';
          pom.style.top = '0px';
          pom.style.left = '0px';
          pom.style.width = '100%';
          pom.style.height = '100%';
          this.parElem.appendChild(pom);
      
      this.elem1 = document.getElementById('jsTransIMGElement01' + '-' + transElemID);
      this.elem2 = document.getElementById('jsTransIMGElement02' + '-' + transElemID);
      
      if( this.elem1 && this.elem2 )
      { this.elem1.style.zIndex = 1;
        this.elem2.style.zIndex = 2;
      }
      else
      { alert('jsTrans: Objects missing!');
      }
    }
    else
    { alert('jsTrans: Object missing!');
    }
  }
  
  jsTrans.prototype.start = function()
  { this.elem1.style.top  = this.top;
    this.elem1.style.left = this.left;
    
    this.elem2.style.top  = this.top;
    this.elem2.style.left = this.left;
    
    if( this.randomStart ) 
    { this.from  = Math.floor(Math.random()*(this.imgs.length-1)+1);
    }
    
    if( !this.from || this.from >= this.imgs.length || this.from < 0 ) 
    { this.from = 0; 
    }
    
    for(var i=0; i < this.imgs.length; i++)
    { var img = new Image();
      img.src = this.imgs[i];
    }
    
    this.elem1.style.backgroundImage = 'url("' + this.imgs[this.from] + '")';
    
    this.privateTimer0 = function()
    { this.cycle();
    }
    
    var _self = this;
    this.intervalID = window.setTimeout( function() { _self.privateTimer0(); }, this.wait );
  }
  
  jsTrans.prototype.cycle = function()
  { if( this.opacity == 1 )
	  { var pos1 = this.from;
    	var pos2 = this.from+1;
    
	    window.clearTimeout(this.intervalID);
	    
	    if( (pos2+1) > this.imgs.length )
	    { pos2 = 0;
	    }
	    
	    this.elem1.style.backgroundImage = 'url("' + this.imgs[pos1] + '")';
	    this.elem2.style.backgroundImage = 'url("' + this.imgs[pos2] + '")';
	    
	    this.trans();
	    
	    this.from = pos2;
	    if( this.from >= this.imgs.length ) 
	    { this.from = 0; 
	    }
	  }
  }
  
  jsTrans.prototype.trans = function()
  { var _self = this;
    
	  if( this.opacity >= 0 )
    { this.elem1.style.opacity = this.opacity;
      this.elem2.style.opacity = 1-this.opacity;
      
      this.elem1.style.filter = 'alpha(opacity='+(this.opacity*100)+')';
      this.elem2.style.filter = 'alpha(opacity='+(100 - (this.opacity*100))+')';
      
      this.privateTimer1 = function()
      { this.cycle();
      }
			
			this.privateTimer2 = function()
      { this.trans();
      }
      
      this.opacity = this.opacity - this.step;
      window.setTimeout( function() { _self.privateTimer2(); }, this.speed );
    }
    else
    { this.elem1.style.opacity = 0;
      this.elem2.style.opacity = 1;
      
      this.opacity = 1;
      
      this.intervalID = window.setTimeout( function() { _self.privateTimer1(); }, this.wait );
    }
  }