/* $Id: carousel.js 13304 2011-10-10 14:23:56Z mmawdsley $ */

function Carousel ()
{
  /*
   * Used for internal referencing
   */
  var that = this;
  /*
   * Whether the carousel is moving
   */
  that.moving = false;
  /*
   * Container of the links
   */
  that.container = null;
  /*
   * Container of the next button
   */
  that.next_container = null;
  /*
   * Container of the previous button
   */
  that.previous_container = null;
  /*
   * Current index
   */
  that.index = 0;
  /*
   * List of items
   */
  that.items = new Array ();
  /*
   * Current margin
   */
  that.margin = 0;
  /*
   * Last index pulled from the list of videos for prepending to the list
   */
  that.prepend_index = null;
  /*
   * Last index pulled from the list of videos for appending to the list
   */
  that.append_index = null;
  /*
   * Number of items per page
   */
  that.items_per_page = null;
  /*
   * Width of an item
   */
  that.item_width = 208;
  /*
   * Duration of the animation
   */
  that.animation_duration = 750;
  /*
   * Width of the next and previous containers
   */
  that.button_width = 60;
  /*
   * Whether to show the info beneath each image
   */
  that.show_info = false;

  /*
   * Class constructor
   * @param integer items_per_page number of items per page
   * @param element container container element
   * @param element next container for the next button
   * @param element previous container for the previous button
   */
  that.setup = function (items_per_page, container, next, previous)
    {
      var i = null;             // Index
      var image = null;         // <img> element

      that.items_per_page = items_per_page;
      that.next_container = next;
      that.previous_container = previous;

      that.container = $('<ul/>');
      that.container.css ('position', 'relative');
      that.container.css ('list-style-type', 'none');
      that.container.css ('margin', '0');
      that.container.css ('padding', '0');

      container.css ('vertical-align', 'top');
      container.css ('overflow', 'hidden');

      container.append (that.container);

      if ($.browser.msie
          && ($.browser.version == '6.0' || $.browser.version == '7.0'))
        {
          that.show_first_page ();
          return;

        }

      container.css ('width', that.get_viewing_area_width () + 'px');

      that.append_index = that.items.length - 1;
      that.prepend_index = 0;

      for (i in that.items)
        that.container.append (that.create_item (that.items[i]));

      while (that.container.children ().length < that.items_per_page)
        {
          that.append_new ();

        }

      that.setup_lightbox ();

      that.container.css ('width', that.get_width () + 'px');

      image = $('<img/>');
      image.attr ('src', '/images/prev.png');
      image.attr ('alt', 'Previous');
      image.click (function () { that.previous (); });

      that.previous_container.css ('vertical-align', 'top');
      that.previous_container.css ('text-align', 'center');
      that.previous_container.css ('width', that.button_width + 'px');
      that.previous_container.css ('padding-top', '70px');
      that.previous_container.append (image);

      image = $('<img/>');
      image.attr ('src', '/images/next.png');
      image.attr ('alt', 'Next');
      image.click (function () { that.next (); });

      that.next_container.css ('vertical-align', 'top');
      that.next_container.css ('text-align', 'center');
      that.next_container.css ('width', that.button_width + 'px');
      that.next_container.css ('padding-top', '70px');
      that.next_container.append (image);

    }

  /*
   * Shows the first page
   */
  that.show_first_page = function ()
    {
      var max = null;           // Number of items to show
      var i = null;             // Index

      that.container.css ('padding-left', '45px');
      that.container.css ('padding-top', '2px');

      max = Math.min (that.items_per_page, that.items.length);

      for (i = 1; i <= max; ++i)
        that.container.append (that.create_item (that.items[i - 1]));

      that.setup_lightbox ();

    }

  /*
   * Adds a new link
   * @param json item item data
   */
  that.add_item = function (item)
    {
      that.items.push (item);

    }

  /*
   * Sets whether to show the info beneath the images
   * @param boolean show_info
   */
  that.set_show_info = function (show_info)
    {
      that.show_info = show_info;

    }

  /*
   * Shows the next item
   */
  that.next = function ()
    {
      var item_count = $('li', that.container).length;

      if (that.moving)
        return;

      if (item_count - that.index - that.items_per_page < that.items_per_page)
        that.append_new ();

      that.moving = true;
      that.container.animate ({ marginLeft:  '-=' + (that.item_width * that.items_per_page) + 'px' },
                              that.animation_duration, 'swing', function () { that.moving = false; });
      that.margin -= that.get_animation_width ();
      that.index += that.items_per_page;

    }

  /*
   * Shows the previous item
   */
  that.previous = function ()
    {
      var item_count = $('li', that.container).length;

      if (that.moving)
        return;

      if (that.index == 0)
        that.prepend_new ();

      that.moving = true;
      that.container.animate ({ marginLeft:  '+=' + that.get_animation_width () + 'px' },
                              that.animation_duration, 'swing', function () { that.moving = false; });
      that.margin += that.get_animation_width ();
      that.index -= that.items_per_page;

    }

  /*
   * Appends a new item to the list
   */
  that.append_new = function ()
    {
      var listing = null;       // Listing array
      var item = null;          // <li> element
      var image = null;         // <img> element
      var i = null;             // Index

      for (i = 0; i < that.items_per_page; ++i)
        {
          ++that.append_index;

          if (that.items.length - 1 < that.append_index)
            that.append_index = 0;

          listing = that.items[that.append_index];

          item = that.create_item (listing);

          that.container.append (item);
          that.container.css ('width', that.get_width () + 'px');

        }

      that.setup_lightbox ();

    }

  /*
   * Returns the markup for an item
   */
  that.create_item = function (listing)
    {
      var item = null;                // <li> element
      var link = null;                // <a> element
      var image = null;               // <img> element
      var description = new Array (); // Description
      var info = new Array ();        // List of item info
      var paragraph = null;           // <p> element

      item = $('<li/>');
      item.addClass ('carousel-item');
      item.css ('width', '184px');
      item.css ('padding', '10px 24px 10px 0');
      item.css ('text-align', 'center');
      item.css ('float', 'left');
      item.css ('z-index', '1');

      link = $('<a/>');
      link.addClass ('subtle');
      link.attr ('href', listing['full_image_uri']);

      if (listing['name'])
        {
          paragraph = $('<p/>');
          paragraph.append (listing['name']);
          paragraph.css ('font-size', '1.3em');

          description.push (($('<div/>').append (paragraph).remove ().html ()));

        }

      if (listing['description'])
        {
          paragraph = $('<p/>');
          paragraph.append (listing['description']);

          description.push (($('<div/>').append (paragraph).remove ().html ()));

        }

      if (listing['range'])
        {
          paragraph = $('<p/>');
          paragraph.css ('font-size', '0.9em');
          paragraph.append ('Part of the ' + listing['range'] + ' range');

          description.push (($('<div/>').append (paragraph).remove ().html ()));

        }

      link.attr ('title', description.join (''));
      link.attr ('rel', 'lightbox');

      image = $('<img/>');
      image.addClass ('listing-image');
      image.css ('width', '183px');
      image.css ('height', '138px');
      image.attr ('src', listing['image_uri']);
      link.append (image);

      item.append (link);

      if (that.show_info
          && listing['section'] && listing['section'].length > 0)
        {
          info.push (listing['name'] + ' ' + listing['section']);

        }
      else
        {
          info.push (listing['name']);

        }

      if (listing['range'] && listing['range'].length > 0)
        {
          info.push ('<span style="font-size: 0.9em;"><br/>Part of the '
                     + listing['range'] + ' range</span>');

        }

      if (info.length > 0)
        {
          paragraph = $('<p/>');
          paragraph.append (info.join ('<br/>'));

          item.append (paragraph);

        }

      return item;

    }

  /*
   * Runs the lightBox method on the links
   */
  that.setup_lightbox = function ()
    {
      var options = null;       // Lightbox options

      options = { imageBtnNext: '/js/lightbox/images/lightbox-btn-next.gif',
                  imageBtnPrev: '/js/lightbox/images/lightbox-btn-prev.gif',
                  imageBtnClose: '/js/lightbox/images/lightbox-btn-close.gif',
                  imageLoading: '/js/lightbox/images/lightbox-ico-loading.gif',
                  imageBlank : '/js/lightbox/images/lightbox-black.gif' }

      $('a[rel=lightbox]', that.container).lightBox (options);

    }

  /*
   * Pre-pends a new item to the list
   */
  that.prepend_new = function ()
    {
      var listing = null;       // Listing array
      var first_item = null;    // <li> element
      var item = null;          // <li> element
      var image = null;         // <img> element
      var i = null;             // Index

      for (i = 0; i < that.items_per_page; ++i)
        {
          --that.prepend_index;

          if (that.prepend_index < 0)
            that.prepend_index = that.items.length - 1;

          listing = that.items[that.prepend_index];

          first_item = $('li', that.container).filter (':first');

          item = that.create_item (listing);

          if (first_item)
            item.insertBefore (first_item);
          else
            that.container.append (item);

          that.container.css ('width', that.get_width () + 'px');
          that.margin -= that.item_width;
          that.container.css ('margin-left', that.margin);

          ++that.index;

        }

      that.setup_lightbox ();

    }

  /**
   * Returns the width of the container
   * @return integer
   */
  that.get_width = function ()
    {
      var item_count = $('li', that.container).length;

      return item_count * that.item_width;

    }

  /*
   * Returns the width of the viewing area
   * @return integer
   */
  that.get_viewing_area_width = function ()
    {
      return (that.item_width * that.items_per_page) - 20;

    }

  /*
   * Returns the amount to animate
   * @return integer
   */
  that.get_animation_width = function ()
    {
      return that.item_width * that.items_per_page;

    }

}