/**
 * @fileOverview Marquee image slide show
 * @author Nathan L Smith
 */

// Prototype & Scriptaculous required
if (typeof Prototype == "object" && typeof Scriptaculous == "object") {
  /**
   * Creates a sliding marquee slide show 
   */
  var Marquee = Class.create(
  /** @scope Marquee.prototype */
  {
    /** @constructs */
    initialize : function (options) {
      var defaultOptions = {
        path : "/",
        container : "marquee",
        height : 100,
        width : 100,
        images : []
      };
      Object.extend(defaultOptions, options || {});
      Object.extend(this, defaultOptions);
      
      // Create scroller, should be twice the total width
      this.scroller = new Element('div', { id : "scroller" }).setStyle({
        whiteSpace : "nowrap", 
        width : this.width + 'px',
        opacity : 0 , 
        zIndex : 1
      });

      var w = 0; // width
      var index = 0; // image index
      var img; // image
      var width = 0; // width of a single image
      while (w < this.width * 20) {
        if (index >= this.images.length) { index = 0; }
        img = this._createImage(this.images[index], 'scroller_image_' + index);
        this.scroller.insert(img);
        if (img.width == 0) {
          width = parseInt(img.getStyle("width"), 10);
        } else { width = img.width; }
        w += width;
        index += 1;
      }
    },

    _createImage : function(uri, id) {
      uri = uri || "";
      id = id || "";

      var el = new Element('img', { 
        'src' : this.path + uri,
        'alt' : '',
        'id' : id
      });

      // Set height
      var originalHeight = el.height;
      el.height = this.height;

      // Set width based on new height
      var heightChange = el.height / originalHeight;
      el.width = el.width * heightChange;

      return el;
    },

    show : function () { 
      var scroller = this.scroller;
      $(this.container).update('').setStyle({
        overflow : "hidden", 
        whiteSpace : "nowrap",
        background : "transparent" }).insert(
        scroller, { position : "bottom" });
      new Effect.Appear(scroller, { duration : 3, queue : "end" });
      this.scroll();
  },

    scroll : function () {
      new Effect.Move("scroller", { y : 0, x : "-" + (this.width * 20),
        duration : 360,
        fps : 30,
        transition : Effect.Transitions.linear,
        queue : "end"
      });
    }
  });

  // Get config from server on load
  document.observe("dom:loaded", function () {
    if (Prototype.Browser.IE) { // IE Only
      new Ajax.Request("/scripts/fcmhosp/marquee/marquee.asp", {
        method : "get",
        onSuccess : function (transport) {
          var m = new Marquee(transport.responseJSON);
          m.show();
        }
      });
    } else if ($('photos')) {
      $('photos').update('<img src="/assets/fcmhosp/placeholder.jpg"' +
        'alt="" />'); 
    }
  });
}