// Image Bank Constructor - don't instantiate until after the window
// has loaded
function ImageBank() {

  this.highlightedImage = null;
  this.imageContainers  = new Array();

  this.imageBankUrl = Conf.Path.appRoot + '/'
                      + Conf.Path.controller  
                      + '/imagebank/' 
                      + $F('section') + '/' 
                      + $F('date')    + '/'
                      + $F('slug')    + '/';
                      
  this.deleteImageUrl  = Conf.Path.appRoot + '/'
                         + Conf.Path.controller  
                         + '/deleteimage/' 
                         + $F('section') + '/' 
                         + $F('date')    + '/'
                         + $F('slug')    + '/'
                         + '?deleteimage=';
                    
  this.deleteAllImagesUrl  = Conf.Path.appRoot + '/'
                             + Conf.Path.controller  
                             + '/deleteallimages/' 
                             + $F('section') + '/' 
                             + $F('date')    + '/'
                             + $F('slug')    + '/';

  
  this.checkImages();    
  // Add a Periodic AJAX updater (10 second interval)
  // Periodically check to see if the image bank has been updated
  // There is no trigger in the page when an upload completes
  var self = this;  
  this.pollerId = setInterval(  function () {
    self.checkImages();
  }, 10000);
  //this.startPoller();  //don't do this
  
};

// Poll the server for images - once
ImageBank.prototype.checkImages = function () {
  if ( TimelineBuilder.hasCompleteId() ) {
   
    new Ajax.Updater(
      'thumbnailcontainer',
      this.imageBankUrl,
      {
        method : "get",
        onComplete : function (e) {
          this.setupImageListeners(e)
        }.bindAsEventListener(this)
      }  
    );    
  }

};

// Set up the periodical updater -- this would be better if the
// uploader applet had a trigger
//
// This is giving me all kinds of problems.  Instead, I've just
// used Window.setInterval - see the constructor
ImageBank.prototype.startPoller = function () {

  new Ajax.PeriodicalUpdater(
    'thumbnailcontainer',
    this.imageBankUrl,
    {
      method : "get",
      frequency : 5,
      onSuccess : function (e) {
        this.setupImageListeners(e)
      }.bindAsEventListener(this)
    }  
  );  
};


// Set up event listners on all of the thumbnails
ImageBank.prototype.setupImageListeners = function (e) {

  //this.highlightedImage = null;
  this.imageContainers =  $$('a.thumbnailfloat'); 
  $('imagecount').innerHTML = '' + this.imageContainers.length;  
  for ( var i=0; i < this.imageContainers.length; i++ ) {
    this.imageContainers[i].id = 'imagecontainer' + i; 
    this.imageContainers[i].observe('click', function (e) {
        this.toggleImageHandler(e);
      }.bindAsEventListener(this)
    );
  }
  this.highlightImage(this.highlightedImage);
};

// Get the anchor id from the event caught - then toggle the image
ImageBank.prototype.toggleImageHandler = function (e) {
  var id;
  // grab the anchor
  if ( typeof e.element() == 'object' && e.element().match('img') ) {
    id = e.element().up('a').identify();
  }
  else {
    id = e.element().identify();
  } 
  this.toggleImage(id);  
}

// toggle image
ImageBank.prototype.toggleImage = function (id) {

   if ( this.highlightedImage == id ) {
     this.dehighlightImage(id);
   }
   else {
     this.highlightImage(id);
   }  
}

// de-highlight image
ImageBank.prototype.dehighlightImage = function (id) {      
  $(id).removeClassName('highlighted');
  this.highlightedImage = null;
}

// de-highlight currently highlighted image 
ImageBank.prototype.clearHighlight = function () {  
  if ( this.highlightedImage != null ) {
    $(this.highlightedImage).removeClassName('highlighted');
    this.highlightedImage = null;
  }
}

ImageBank.prototype.highlightImage = function (id) {      

  // highlight new image -- dehighlight old if necessary
  if ( this.highlightedImage != null ) 
  {
    $(this.highlightedImage).removeClassName('highlighted');
  }
  $(id).addClassName('highlighted');
  this.highlightedImage = id;
}

// get highlighted image src attribute
// this will then be updated on the frame when the select image button is
// clicked
ImageBank.prototype.getHighlightedImageSrc = function (e) {
  var src;
  if ( this.highlightedImage != null ) {
    src = $(this.highlightedImage).down('img').src;
  }   
  return src;
}

// delete image
// returns the src attribute of the deleted image
ImageBank.prototype.deleteImage = function (e) {
  var src;
  if ( this.highlightedImage != null 
       && this.imageContainers.length > 0 ) 
  {
    src = $(this.highlightedImage).down('img').src;
    var url = this.deleteImageUrl + src;

    $(this.highlightedImage).down('div').hide();
    this.highlightedImage = null;     
    
    new Ajax.Updater( 
      'statusmessages', url, 
      { 
        method : "get",
        onComplete : this.checkImages.bind(this)  
      } 
    );    
    $('imagecount').innerHTML = '' + (this.imageContainers.length-1);    
  }

  return src;         
}

// delete all images
ImageBank.prototype.deleteAllImages = function (e) {
  if ( this.imageContainers.length > 0
       && confirm('Delete All Images: are you sure?') ) 
  {
      
    new Ajax.Updater( 'statusmessages', this.deleteAllImagesUrl, 
                      { method : "get",
                        onComplete: this.checkImages.bind(this) 
                      } 
                    );  
    $('imagecount').innerHTML = '0';  
  }       
}