/******************************************************************************/
/******************************* ImagePlayer object ***************************/
/******************************************************************************/

// interface with the media player

/*
*
* Contrary to MediaPlayer, ImagePlayer is designed to play a series of images. 
* It is launched the same way as MediaPlayer with its interface functions
* (startEnterTransition, startExitTransition, resize, play ...)
*
* However, it won't call scenario.next, but scenario.goto()
*
*
*
*
*/


ImagePlayer = function(playerEmbedId, imgContainerId) {

  this.type = 'I'; //mediatype played
  this.playerId = playerEmbedId;
  this.imgContainerId = imgContainerId;
  this.isCurrentlyPlaying = false;
  this.isCurrentlyPaused = false
  this.currentFrame = 0;
  this.originalFrame = 0;
  this.scale;
  this.lis = $(imgContainerId).getElementsByTagName('li');
  this.widths = new Array();
  this.heights = new Array();
  //before hidding the images, get their widths
  //prepare for display
  for( i=0; i < this.lis.length; i++){
		//if(i!=0){
		  this.widths[i] = this.lis[i].getElementsByTagName("div")[0].getElementsByTagName("img")[0].width;
		  this.heights[i] = this.lis[i].getElementsByTagName("div")[0].getElementsByTagName("img")[0].height;
		  //alert(this.widths[i]+" "+this.heights[i]);
			this.lis[i].style.display = 'none';
		//}
	}
}

ImagePlayer.prototype =
{
  play: function(media) {
    //Effect.Appear(this.lis[media.frame])
		this.lis[media.frame].style.display = 'block';
		this.lis[media.frame].display = 'block';
		this.isCurrentlyPlaying = true;
		this.currentFrame = media.frame;
    new PeriodicalExecuter(function(pe) {
      pe.stop();
      scenario.endElement();
      }, media.duration);

  },
  
  playImageSlideShow : function(theArray) {
  
    this.beginElement= theArray["beginElement"];
    this.endElement = theArray["endElement"];
    this.currentElement = this.beginElement;
    this.originalFrame = this.currentFrame;
    this.switchImage(this.currentFrame);
  },
  
  next : function() {
    this.currentElement++;
    scenario.currentDisplayed++; // to ensure setCaption(); is done correctly on resize
        
    if(this.currentElement == this.endElement) {
      this.currentFrame++; //for next iteration
      setTimeout('scenario.next(scenario.imagePlayer.endElement)',0);
    }
    else {
      if(scenario.scenarioElements[this.currentElement].type == "A") {
        scenario.scenarioElements[this.currentElement].display();
        setTimeout('scenario.imagePlayer.next()',0);
      }
      else {
        this.currentFrame++;
        this.resizeScreen(this.size);
        if(!this.mustStop && !this.isPaused())
          this.switchImage(this.currentFrame);
        else if (this.mustStop) {
          scenario.unloadAll();
        }
      }
    }
  },
  
  switchImage : function(frameNumber) {

    if(this.currentFrame != this.originalFrame) {
      imageExitFunctions[scenario.scenarioElements[this.previousElement].exitType](this.lis[this.currentFrame-1], { duration: scenario.scenarioElements[this.previousElement].exitDelay }); //[this.currentFrame-1]
    }
    if(scenario.scenarioElements[this.currentElement].getMustFadeTransition() == "true" || this.currentFrame == this.originalFrame) {
    //if must fade or no previous frame, switch to next
      this.displayNext();
    }
    else {
      //must not fade, so we wait for the end transition to end
      setTimeout('scenario.imagePlayer.displayNext()', scenario.scenarioElements[this.previousElement].exitDelay * 1000)
    }
    
  },
  
  displayNext : function() {
    imageEnterFunctions[scenario.scenarioElements[this.currentElement].enterType](this.lis[this.currentFrame],
      { duration: scenario.scenarioElements[this.currentElement].enterDelay,
        afterFinish: function(effect) {
          scenario.imagePlayer.resizeScreen(scenario.size);
          } });
    setTimeout('scenario.imagePlayer.setCaption()',scenario.scenarioElements[this.currentElement].enterDelay*1000);
  },
  
  setCaption : function(isNotLast) {
    scenario.scenarioElements[this.currentElement].setCaption();
    this.resizeScreen(this.size);
    setTimeout('scenario.imagePlayer.unsetCaption()',scenario.scenarioElements[this.currentElement].duration*1000);
  
  },
  
  unsetCaption : function(isNotLast) {
    scenario.scenarioElements[this.currentElement].unsetCaption();
    this.previousElement = this.currentElement;
    this.next();
  },
  
  stop: function() {
    this.mustStop = true;
  },
  
  pause: function() {
    this.isCurrentlyPaused = true;   
  },
  
  isPaused: function() {
    return this.isCurrentlyPaused;
  },
  
  isPlaying: function() {
    return this.isCurrentlyPlaying;
  },
  
  clear: function() {
    return true; // left here for compatibility with another player
  },
  
  unload: function() {
    return false;
  },
  
  unloadMedia: function() {
    this.lis[this.currentFrame].style.display = "none"
    this.lis[this.currentFrame].style.display = "none"
    
		//Effect.Fade(lis[scenario.currentImage])
  },
  
  getState:function() {
    return $f(this.playerId).getState();
  },
  
  show: function() {
    return true;
  },
  

  resetScreen:function() { // blackens and reset screen properties
    if ($f(this.playerId).isLoaded()) {
    $f(this.playerId).getPlugin('content').height = 90;
    $f(this.playerId).getScreen().hide();
    $f(this.playerId).getScreen().css({
        width:'100%',
        height:'100%',
        top: '50%',
        left:'50%'
      });
    //$f(this.playerId).reset('screen');
    }
  },
  
  
  
  resume : function() {
    if(this.isCurrentlyPaused) {
      this.isCurrentlyPaused = false
      this.switchImage(this.currentFrame);
    }
  },
  
  resizeScreen : function(aSize) {
    if (!(this.size) || this.size!=aSize) {
      this.size = aSize;
      if(aSize == "zero") {
        document.getElementById(this.playerId).style.width = "0px";
        document.getElementById(this.playerId).style.height = "0px";
        document.getElementById(this.imgContainerId).style.width = "0px";
        document.getElementById(this.imgContainerId).style.height = "0px";
        
      
        for( i=0; i < this.lis.length; i++){
            this.lis[i].style.display = 'none';
      	 }  	 
      	 return; 
      }
      
      if(aSize == "small") {
        document.getElementById(this.playerId).style.width = "320px";
        document.getElementById(this.playerId).style.height = "240px";
        document.getElementById(this.imgContainerId).style.width = "320px";
        document.getElementById(this.imgContainerId).style.height = "240px";

      }
      else if(aSize == "mid") {
        document.getElementById(this.playerId).style.width = "640px";
        document.getElementById(this.playerId).style.height = "480px";
        document.getElementById(this.imgContainerId).style.width = "640px";
        document.getElementById(this.imgContainerId).style.height = "480px";
      }
      
      else if(aSize == "big") {
        document.getElementById(this.playerId).style.width = "800px";
        document.getElementById(this.playerId).style.height = "600px";
        document.getElementById(this.imgContainerId).style.width = "800px";
        document.getElementById(this.imgContainerId).style.height = "600px";
      }
        
    }
    if(aSize != "zero") {
      var containerSize = this.computeContainerSize(aSize);
      var theDiv = this.lis[this.currentFrame].getElementsByTagName("div")[0];
      var theImg = theDiv.getElementsByTagName("span")[0].getElementsByTagName("img")[0]
      theDiv.style.width = containerSize["width"]+"px";
      theDiv.style.height = containerSize["height"]+"px";
      if(containerSize["imageWidth"] != 0) {
        //alert("width "+containerSize["imageWidth"])
        theImg.style.width = containerSize["imageWidth"]+"px";
        theImg.style.height = 'auto';
      }
      if(containerSize["imageHeight"] != 0) {
        //alert("height "+containerSize["imageHeight"])
        theImg.style.height = containerSize["imageHeight"]+"px";
        theImg.style.width = 'auto';
      }
        
    }
    return true; 
  },
  
  computeContainerSize : function(size) {
    
    if(size == "small") {
      var maxWidth = 320;
      var maxHeight = 240;
    }
    else if (size == "mid") {
      var maxWidth = 640;
      var maxHeight = 480;
    }
    else {
      var maxWidth = 800;
      var maxHeight = 600;
    }
    
    var imageWidth = 0;
    var imageHeight = 0;
    
    
    var theDiv = this.lis[this.currentFrame].getElementsByTagName("div")[0];
    var theImg = theDiv.getElementsByTagName("span")[0].getElementsByTagName("img")[0]
    var realWidth = theImg.width;
    var realHeight = theImg.height;
    if(realWidth < realHeight * 4/3) {
      //vertical image
      imageHeight = maxHeight;
    }
    else {
      imageWidth = maxWidth;;
    }
  
  theReturn = new Array();
  theReturn["height"] = maxHeight;
  theReturn["width"] = maxWidth;
  theReturn["imageWidth"] = imageWidth;
  theReturn["imageHeight"] = imageHeight;

    return theReturn;
  }
  

}