/**
 * Image Gallery Class
 *
 * @author Anders Evenrud <andersevenrud@gmail.com>
 * @class
 */
var ImageGallery = Class.create();
ImageGallery.prototype =
{
  'width'   : 576,
  'height'  : 280,
  'timeout' : 3000,

  /**
   * Initialize class
   *
   * @return  void
   */
  'initialize' : function() {
    var self = this;

    this.collection = [];
    this.container = $('gallery');
    this.images = [];
    this.index = 0;
    this.timer = null;
    this.locked = false;
    this.loaded = 0;
    this.running = false;
    this.highest = 0;

    if ( this.container ) {
      // Adjust outer container
      this.container.style.height     = this.height + "px";
      this.container.style.width      = this.width + "px";
      this.container.style.background = "#000";
      this.container.style.position   = 'relative';
      this.container.style.overflow   = 'hidden';
      this.container.style.padding    = 0;

      // Create inner container
      this.inner = Builder.node("DIV");
      this.inner.id = "ImageGalleryInner";

      $$("#rightcol a").each(function(el) {
        self.collection.push(el.href);
      });

      // Apply images
      if ( this.collection.length ) {
        var tw = 0;
        var z = this.collection.length;

        for ( var i = 0; i < this.collection.length; i++ ) {
          var im = Builder.node('IMG');
          //var im = new Image();

          // Calculate new height from images
          im.onload = (function(el, index) {
            return function() {
              if ( el.offsetHeight ) {
                if ( el.offsetHeight > self.highest ) {
                  if ( el.offsetHeight > 0 ) {
                    self.highest = el.offsetHeight;
                  }
                }
              }
              self.loaded++;

              if ( self.loaded >= (self.images.length - 1) ) {
                self.run();
              }
            };
          })(im, i);

          /*
          Event.observe(im, 'load', function() {
            if ( this.offsetHeight > self.highest ) {
              if ( this.offsetHeight > 0 ) {
                alert(this.offsetHeight);
                self.highest = this.offsetHeight;
              }
            }
            self.loaded++;

            if ( self.loaded >= (self.images.length - 1) ) {
              self.run();
            }
          });
          */

          // Images positioned relative to each other
          im.src            = this.collection[i];
          im.alt            = "";
          im.style.position = 'absolute';
          im.style.top      = '0px';
          im.style.left     = '0px'; //tw + 'px';
          im.style.margin   = 0;
          im.style.padding  = 0;
          im.style.width    = this.width + 'px';
          im.style.zIndex   = z;

          tw += this.width;
          z--;

          this.inner.appendChild(im);
          this.images.push(im);
        }
        this.container.appendChild(this.inner);
      } else {
        this.container.style.display = 'none';
      }
    }
  },

  /**
   * Run automatic sliding
   *
   * @return  void
   */
  'run' : function() {
    var self = this;

    if ( this.running )
      return;

    this.running = true;
    if ( this.highest && this.highest != this.height ) {
      this.height = this.highest;
    }

    // Re-apply some styles
    this.container.style.height = this.height + "px";
    this.container.style.width  = this.width + "px";

    // Apply image margins to center horizontally
    var el = null;
    var m = 0;
    for ( var i = 0; i < this.images.length; i++ ) {
      el = this.images[i];
      if ( el.offsetHeight < this.height ) {
        m = parseInt((this.height - el.offsetHeight) / 2,10);
        if ( m > 0 ) {
          el.style.marginTop = m + 'px';
          el.style.marginBottom = m + 'px';
        }
      }
    }

    /*
    // Add buttons
    this.prevButton = Builder.node("DIV");
    this.prevButton.style.position = "absolute";
    this.prevButton.style.left = "0px";
    this.prevButton.style.top = (this.height / 2 - 20) + "px";
    this.prevButton.style.width = "20px";
    this.prevButton.style.height = "20px";
    this.prevButton.style.background = "#ff0000";
    this.prevButton.style.zIndex = 2;
    this.prevButton.innerHTML = "&laquo;";
    Event.observe(this.prevButton, 'click', function() {
      if ( !self.locked ) {
        self.prev();
      }
    });

    this.nextButton = Builder.node("DIV");
    this.nextButton.style.position = "absolute";
    this.nextButton.style.right = "0px";
    this.nextButton.style.top = (this.height / 2 - 20) + "px";
    this.nextButton.style.width = "20px";
    this.nextButton.style.height = "20px";
    this.nextButton.style.background = "#ff0000";
    this.nextButton.style.zIndex = 2;
    this.nextButton.innerHTML = "&raquo;";

    this.container.appendChild(this.nextButton);
    this.container.appendChild(this.prevButton);
    Event.observe(this.nextButton, 'click', function() {
      if ( !self.locked ) {
        self.next();
      }
    });
    */

    this.timer = setInterval(function() {
      if ( !self.next() ) {
        self.reset();
      }
    }, this.timeout);
  },

  /**
   * Reset image position
   *
   * @return  void
   */
  'reset' : function() {
    var self = this;

    var d = (this.index * this.width);

    this.index = 0;

    new Effect.Appear(self.images[0], {
      beforeStart : function() {
        self.locked = true;
      },
      afterFinish : function() {
        self.locked = false;
      }
    });

  },

  /**
   * Show next image
   *
   * @return  bool
   */
  'next'  : function() {
    var self = this;

    this.index++;

    if ( this.index < (this.images.length) ) {
      new Effect.Appear(this.images[this.index], {
        beforeStart : function() {
          self.images[self.index - 1].fade();
          self.locked = true;
        },
        afterFinish : function() {
          self.locked = false;
        }
      });


      return true;
    }

    return false;
  },

  /**
   * Show previous image
   *
   * @return  bool
   */
  'prev' : function() {
    if ( this.index > 0 ) {
    /*
      this.index--;

      new Effect.Move("ImageGalleryInner", {
        x           : this.width,
        y           : 0,
        transition  : Effect.Transitions.sinoidal,
        beforeStart : function() {
          self.locked = true;
        },
        afterFinish : function() {
          self.locked = false;
        }
      });
      */

      return true;
    }

    return false;
  }

};

/**
 * Main
 */
Event.observe(window, 'load', function() {
  var g = new ImageGallery();
});