var SlideShow = Class.create();
  SlideShow.prototype = Object.extend(new BaseObject(),
  {
    initialize : function()
    {
      this.size = 0;
      this.index = 0;  
      this.slideDurationInMs = 4*1000;   
      this.timer;
      this.menuTimer;
      this.isFirstTime = true;
      this.isRunning = false;
      this.isMenuShowing = false;
      this.isPaused = false;         
    },
    reset : function()
    {
      this.index = 0;
      
      for (var i=0; i<this.size; i++)
      {
        new Effect.Fade('Slide'+i);        
        //$('Slide'+i).show();
      }
      
      clearTimeout(this.timer);
      this.isFirstTime = true;
      this.isRunning = false;
      this.isMenuShowing = false;
      this.isPaused = false;
    },
    start : function()
    {
      tracker(webContext, "","View Slide Show",albumName,albumId,"","");
      $('menuTop').show();
      $('menuText').update('Slide Show Options');
      if ( ! this.isRunning)
        new Effect.Appear('slideShowOverlay', { duration:1, from:0.0, to:0.95 });        
      this.isRunning = true;
      
      //setTimeout("slideShow.startSlideShow()", 3000);
      //for(var i=0; i<this.size; i++)
      //{
//        this.loadImage(i);
      //}
      
      this.startSlideShow();
    },    
    startSlideShow : function()
    {          
      this.index = 0;
      this.loadImage(this.index); 
      
      //wait for the photo to load.
      this.timer = setTimeout("slideShow.waitForLoad()", 1500);          
    },
    loadImage : function (index)
    {
      var img = $('SlideShowImg'+index);
      if ( img.src.indexOf("blank.gif") != -1)
      {
        img.src = img.longDesc;
      }
    },
    isPhotoLoaded : function(index)
    {        
        var img = new Image();
        img.src = $('SlideShowImg'+index).src;        
        if (img.complete)
        {
          //console.log(img.width);
          if (img.width <= 1)
            return false;
          else
            return true;
        }
        else
        {
          return false;
        }
    },
    maximizePhoto : function(index)
    {
      var img = new Image();
      img.src = $('SlideShowImg'+index).src;
      var browserWidth = window.innerWidth;
      var browserHeight = window.innerHeight;
    
      if (isBrowserIE())
      {
        browserWidth  =  document.body.clientWidth;
        browserHeight = document.body.clientHeight;
      }

      var photoWidth = img.width;
      var photoHeight = img.height;
      if (img.width > browserWidth)
      {
        photoWidth = (browserHeight * photoWidth)/photoHeight;
        photoHeight = browserHeight;
        
      }
      
      $('SlideShowImg'+index).width = Math.round(photoWidth);
      $('SlideShowImg'+index).height = Math.round(photoHeight);
      var xSpace = browserWidth - photoWidth;
      $('SlideShowImg'+index).style.marginLeft = xSpace/2 +"px";
      var ySpace = browserHeight - photoHeight;
      $('SlideShowImg'+index).style.marginTop = ySpace/2 +"px";
    },
    waitForLoad : function()
    {      
      clearTimeout(this.timer);

      if (this.isPhotoLoaded(this.index))
      {
        //if we have looped through, hid everything and start over.
        if (this.index == this.size)
          this.reset;

        this.showAndLoad();
      }
      else
      {
        this.timer = setTimeout("slideShow.waitForLoad()", 1500);
      }
    },
    showAndLoad : function()
    {        
      //console.log("starting show and load for index " +this.index);
      clearTimeout(this.timer);
      
      //check to make sure the photo is loaded
      if ( ! this.isPhotoLoaded(this.index))
      {
        //console.log("photo " +this.index +" is not loaded");
        this.loadImage(this.index);
        this.timer = setTimeout("slideShow.showAndLoad()", 1500);
        return;
      }         
      
      //Just incase the browser is resized, compute this each time.
      this.maximizePhoto(this.index);      
      
      if (this.isFirstTime)
      {
        this.showMenu();
        this.isFirstTime = false;
      }      
      //console.log("showing image " + this.index);
      
      if ( !this.isPaused)
        new Effect.Appear('Slide'+this.index, { duration:2.0, from:0.0, to:1.0, queue: { scope: 'slideQueue'} });
      else
        new Effect.Appear('Slide'+this.index);
      
      //hide the previous
      if (this.index-1 >=0)
      {           
        new Effect.Fade('Slide'+(this.index-1), { duration:0, from:1.0, to:0.0, delay:3.00, queue: { scope: 'slideQueue'} });
      }
      else
      {
        new Effect.Fade('Slide'+(this.size-1), { duration:0, from:1.0, to:0.0, delay:3.00, queue: { scope: 'slideQueue'} });
      }
      
      if ( !this.isPaused)
      {
        var preLoadIndex = this.index;
        preLoadIndex++;
  
        //if you reach the end, re-loop to the beginning.
        if (preLoadIndex == this.size)
        {
            preLoadIndex = 0;
        }
        this.index = preLoadIndex;
        //console.log("preloading next photo " +preLoadIndex);
        this.loadImage(preLoadIndex);              
        this.timer = setTimeout("slideShow.showAndLoad()", this.slideDurationInMs ); //the buffer is the slide transition duration.
      }
    },
    prev : function ()
    {    
      clearTimeout(this.timer);
      this.clearSlideEffectQueue();
      var prevImageIndex = this.index -1;
      if (prevImageIndex < 0)
        prevImageIndex = 0;
      //console.log("loading image index of " +prevImageIndex);
        
      this.loadImage(prevImageIndex);
      //check to make sure the prev photo is loaded
      if ( ! this.isPhotoLoaded(prevImageIndex))
      {
        //console.log("image was not loaded, waiting a while ");
        this.timer = setTimeout("slideShow.prev()", 1500);
        return;
      }   
      
      this.maximizePhoto(prevImageIndex);
      //console.log("hiding index of " +this.index);      
               
      for (var i=0; i<this.size; i++)
      {
        //hide all except for the prev image.
        if (i != prevImageIndex)
          new Effect.Fade('Slide'+(i), { duration:0, from:1.0, to:0.0, delay:0 });
      }      
      //console.log("showing index of " +prevImageIndex);                 
      new Effect.Appear('Slide'+prevImageIndex, { duration:0, from:0.0, to:1.0 });
         
      //console.log("setting index to " +prevImageIndex);
      this.index = prevImageIndex;
    },

    next : function()
    {
      //console.log("this index is " +this.index);
      clearTimeout(this.timer);
      this.clearSlideEffectQueue();
      
      var nextImageIndex = this.index +1;
      
      if(nextImageIndex >= this.size)
        nextImageIndex = 0;
      
      this.loadImage(nextImageIndex);
      if ( ! this.isPhotoLoaded(nextImageIndex))
      {
        this.timer = setTimeout("slideShow.next()", 1500);
        return
      }
      
      this.maximizePhoto(nextImageIndex);           
             
      //console.log("showing index of " +nextImageIndex);                 
      new Effect.Appear('Slide'+nextImageIndex, { duration:0, from:0.0, to:1.0 });  
      
      //try to load the next image for buffering.
      if (nextImageIndex +1 < this.size)
        this.loadImage(nextImageIndex +1);
      
      for (var i=0; i<this.size; i++)
      {
        //hide all except for the prev image.
        if (i != nextImageIndex)
          new Effect.Fade('Slide'+(i), { duration:0, from:1.0, to:0.0, delay:0 });
      }      
      
         
      //console.log("setting index to " +prevImageIndex);
      this.index = nextImageIndex;
      
    },
    play : function()
    {
      clearTimeout(this.timer);

      this.isPaused = false;
      $('btnPause').show();
      $('btnPlay').hide();
      if (this.index+1 < this.size)
        this.index++;
      else
        this.index = 0;        
      this.showAndLoad();
    },
    stop : function()
    {
      clearTimeout(this.timer);
      this.reset();

      for (var i=0; i<this.size; i++)
        $('Slide'+i).hide();

      $('slideShowOverlay').hide();
      $('menuTop').hide();
    },
    pause : function()
    {
      this.isPaused = true;
      $('btnPause').hide();
      $('btnPlay').show();
      clearTimeout(this.timer);
    },
    clearSlideEffectQueue : function()
    {
      var queue = Effect.Queues.get('slideQueue');
      queue.each(function(effect) { effect.cancel(); });
    },
    //-------------- menu ------------//
    showMenu : function()
    {
      //console.log("method showMenu isMenuShowing:" +this.isMenuShowing +" running:" +this.isRunning);

      var queue = Effect.Queues.get('menuQueue');
      queue.each(function(effect) { effect.cancel(); });


      if ( ! this.isMenuShowing && this.isRunning)
      {
        //console.log("showing menu");
        this.isMenuShowing = true;
        //console.log("menu top is " +$('menuTop').style.top);
        if ( $('menuTop').style.top == "-75px" )
          new Effect.Move('menuTop',{duration:0.5, y:75, mode:'relative', queue: { position: 'end', scope: 'menuQueue'} });
        else
          $('menuTop').style.top = "0px"

      }
      else if (this.isMenuShowing && this.isRunning)
      {
        $('menuTop').style.top = "0px";
      }

      clearTimeout(this.menuTimer);
      this.menuTimer = setTimeout("slideShow.hideMenu()", 3000);

    },

    hideMenu : function()
    {
      //console.log("method hideMenu");
      if (this.isMenuShowing)
      {

        //console.log("hiding menu");
        this.isMenuShowing = false;
        //console.log("menu top is " +$('menuTop').style.top);
        if ( $('menuTop').style.top == "0px" )
          new Effect.Move('menuTop',{duration:0.5, y:-75, mode:'relative', queue: { position: 'end', scope: 'menuQueue'} });
        else
          $('menuTop').style.top = "-75px";
      }
      else
      {
        $('menuTop').style.top = "-75px";
      }
    },

    showActiveImg : function(elem)
    {
      var src = elem.src;
      if (src)
      {
        var index = src.indexOf('Inactive');
        var activeSrc = src.substring(0,index) +'Active' +src.substring(index+8, src.length);
        elem.src = activeSrc;
      }

      if (elem.id.indexOf('Save') != -1)
      {
        $('textSave').style.color = 'white';
        $('btnSave').src="/images/icon/DisketteActive24X24.png"
      }

      if (elem.id.indexOf('View') != -1)
      {
        $('textView').style.color = 'white';
        $('btnView').src="/images/icon/DisketteActive24X24.png"
      }
    },

    showInactiveImg : function(elem)
    {
      var src = elem.src;
      if (src)
      {
        var index = src.indexOf('Active');
        var activeSrc = src.substring(0,index) +'Inactive' +src.substring(index+6, src.length);
        elem.src = activeSrc;
      }

      if (elem.id.indexOf('Save') != -1)
      {
        $('textSave').style.color = 'RGB(128,128,128)';
        $('btnSave').src="/images/icon/DisketteInactive24X24.png"
      }

      if (elem.id.indexOf('View') != -1)
      {
        $('textView').style.color = 'RGB(128,128,128)';
        $('btnView').src="/images/icon/DisketteInactive24X24.png"
      }
    },
    eventKeyPressed : function(event)
    {
      if (this.isRunning)
      {
        var keyCode = event.which ? event.which:event.keyCode;
        //console.log("key pressed:" +keyCode);
        if (keyCode == 27) //escape
        {
          this.stop();
          return false;
        }
        else if (keyCode == 32) //space bar
        {
          slideShow.extendMenuTime();                    
          if (this.isPaused)
            this.play();
          else
            this.pause();
            
          this.showMenu();
          
          return false;
        }
        else if (keyCode == 39) //next
        {
          slideShow.extendMenuTime();
          slideShow.pause();
          slideShow.next();
          slideShow.showMenu();
          return false;
        }
        else if (keyCode == 37) //prev
        {
          slideShow.extendMenuTime();
          slideShow.pause();
          slideShow.prev();
          slideShow.showMenu();
          return false;
        }        
        else
        {
          return true;
        }
      }
      return true;
    },
    mouseMove : function()
    {
      window.onmousemove = null;
      slideShow.showMenu();
      setTimeout("document.onmousemove=slideShow.mouseMove", 1000);
    },

    extendMenuTime : function()
    {
      clearTimeout(this.menuTimer);
      this.menuTimer = setTimeout("slideShow.hideMenu()", 3000);
    }
  });