/* -------------------------------------------------------------------------- */
/* Purpose: Emotion hesder                                                    */
/*                                                                            */
/* Autor:   (c) Christian Kupnick                                             */
/* Date:    11-Oct-2007                                                       */
/* -------------------------------------------------------------------------- */
/* Mod. date     Who        Description                                       */
/* ========================================================================== */
/* 11-Oct-2007   Kupnick    Initial implementation                            */
/* 20-Nov-2007   Kupnick    Icons added                                       */
/* 24-Nov-2007   Kupnick    Function separation                               */
/* -------------------------------------------------------------------------- */

var changeInterval = 15;    // [seconds]
var overlapTime    = 2;    // [seconds]
var images = new Array(
                'img/emotions/emotion_1.jpg',
                'img/emotions/emotion_2.jpg',
                'img/emotions/emotion_3.jpg',
                'img/emotions/emotion_4.jpg',
                'img/emotions/emotion_5.jpg',
                'img/emotions/emotion_6.jpg',
                'img/emotions/emotion_7.jpg',
                'img/emotions/emotion_8.jpg',
                'img/emotions/emotion_9.jpg',
                'img/emotions/emotion_10.jpg'
            );

/* -------------------------------------------------------------------------- */
function randomizeArray ( myArray )
/* -------------------------------------------------------------------------- */
/* fisherYates                                                                */
/* -------------------------------------------------------------------------- */
{
  var i = myArray.length;
  if ( i == 0 ) return false;
  while ( --i ) {
     var j = Math.floor( Math.random() * ( i + 1 ) );
     var tempi = myArray[i];
     var tempj = myArray[j];
     myArray[i] = tempj;
     myArray[j] = tempi;
   }
}

/* -------------------------------------------------------------------------- */
function LoopImages( path )
/* -------------------------------------------------------------------------- */
{
  var checkInterval = null;
  var imageLineInterval = null;
  var currentImage = -1;
  
  // To store image objects
  loadingImages = new Array();
  
  
  //--------------------------------------------------------------   
  this.run = function()
  //--------------------------------------------------------------   
  {
    // check if images are loaded complete (100ms)
    checkInterval = window.setInterval('this.checkIfLoaded();', 100);
    
    // store all images in image container
    for(i = 0;i < images.length;i++)
    {
      image = path + images[i];
      loadingImages.push(new Image);
      loadingImages[i].src = image;
    }
    
    // randomize container
    randomizeArray( loadingImages );
  }
   
  //--------------------------------------------------------------      
  this.checkIfLoaded = function()
  //--------------------------------------------------------------      
  {
    allLoaded = true;
    for(i = 0;i < loadingImages.length;i++)
    {
      loadingImage = loadingImages[i];
      if(!loadingImage.complete)
        allLoaded = false;
    }

    if(allLoaded)
    {
      window.clearInterval(checkInterval);
      this.startImageLine();
      // change image every x seconds
      window.setInterval('this.startImageLine();', changeInterval*1000);
    }
  }
  
  //--------------------------------------------------------------      
  this.startImageLine = function()
  //--------------------------------------------------------------      
  {
    this.showImage();
           
    if(currentImage == (loadingImages.length - 1))
      currentImage = 0;
    else
      currentImage ++;
            
    element = document.getElementById('emotionheader');
    element.style.height = loadingImages[currentImage].height + 'px';
    element.style.width = loadingImages[currentImage].width + 'px';
    element.style.backgroundImage = 'url(' + loadingImages[currentImage].src + ')';
            
    window.setTimeout('this.hideImage();', (changeInterval-overlapTime)*1000);
  }
  
  //--------------------------------------------------------------
  this.hideImage = function()
  //--------------------------------------------------------------
  {
    element = document.getElementById('emotionheader');
    // from 0 bis 100 Percent
    // i * 10*  overlapTime = to slow down image fading
    for(i = 0;i <= 100;i++)
      window.setTimeout('element.style.filter = "Alpha(opacity=' + (100 - i) + ')"; element.style.MozOpacity = ' + (1 - i / 100) + '; element.style.opacity = ' + (1 - i / 100) + ';', i * 10*  overlapTime);
  }
  
  //--------------------------------------------------------------      
  this.showImage = function()
  //--------------------------------------------------------------
  {
    element = document.getElementById('emotionheader');
    for(i = 0;i <= 100;i++)
      window.setTimeout('element.style.filter = "Alpha(opacity=' + i + ')"; element.style.MozOpacity = ' + i / 100 + '; element.style.opacity = ' +  i / 100 + ';', i * 10*overlapTime);
  }
        
  this.run();
}