// $Id: slideshow.js,v 1.1 2011/04/04 21:14:37 brian Exp $
//
// PhotoRotator
// Usage:
// var photo_rotator = new PhotoRotator();
// photo_rotator.init(
//   string_of_container_id, (required)
//   array_of_strings_of_image_urls, (required)
//   bool_should_auto_rotate, (optional)
//   number_auto_delay, (optional, measured in milliseconds)
//   number_transition_length (optional, measured in seconds)
// )
//
// Notes:
// Dimensions of images will be forced to match container.
//
// Position and style of controls are not set by default. Use the following
// selectors to position and style the controls:
//
// div.pr-container               div element that holds image and controls
// ul.pr-controls                 ul element containing all controls
// ul.pr-controls li.pr-selected  li element currently selected control item
// ul.pr-controls li a            a element that fires change JS events
//
// Dependencies: Prototype.js and Scriptaculous
//

var PhotoRotator = function() {
  return {
    "container": null,
    "image": null,
    "images": [],
    "links": [],
    "controls": null,
    "current_pos": 0,
    "forward_interval": null,
    "delay": 3000,
    "trans_length": 0.1,
    "init": function(container, images, links, auto_forward, delay, trans_length)
    {

      this.container = (container != undefined) ? $(container) : this.container;

      this.images = (images != undefined) ? images : this.images;
      
      this.links = (links != undefined) ? links : this.links;

      this.trans_length = (trans_length != undefined)
        ? trans_length : this.trans_length;

      this.delay = (delay != undefined) ? delay : this.delay;

      // Create image object

      this.image = new Element('img', {"src": this.images[0]});

      // Set initial cursor style

      if(this.links[0])
      {
        this.image.setStyle({"cursor": 'pointer'});
      }

      this.image.observe('click', this.link.bind(this));

      size = this.container.getDimensions(); // Get container size

      // Set container size.

      this.image.setStyle(
      {
        width: size.width+'px',
        height: size.height+'px'
      });

      this.container.addClassName('pr-container'); // Add class to container
      this.container.setStyle({'backgroundColor': '#fff'});

      this.container.innerHTML = ''; // Clear contents
      this.container.insert(this.image); // Insert image object

      // Create controls

      this.controls = new Element('ul',
        {
          "class": "pr-controls"
        }
      );

      prev_item = new Element('li');

      prev_link = new Element('a',
        {
          "href": "#",
          "class": "pr-prev"
        }
      );

      prev_link.observe('click', this.prev.bind(this));
      prev_link.insert('<');

      prev_item.insert(prev_link);

      this.controls.insert(prev_item);

      var item;

      for(x in this.images)
      {
        if(this.images.hasOwnProperty(x))
        {

          // Create a list item

          item = new Element('li');

          // Create a link to change it

          link = new Element('a',
            {
              "href": this.images[x],
              "class": "pr-goto"
            }
          );

          if(x == 0)
          {
            item.addClassName('pr-selected');
          }

          link.observe('click', this.goto.bind(this));

          link.insert(parseInt(x) + 1); // Add link text as a just a number

          // Add control elements to controls object

          item.insert(link);
          this.controls.insert(item)
        }
      }

      next_item = new Element('li');

      next_link = new Element('a',
        {
          "href": "#",
          "class": "pr-next"
        }
      );

      next_link.observe('click', this.next.bind(this));
      next_link.insert('>');

      next_item.insert(next_link);

      this.controls.insert(next_item);

      this.container.insert(this.controls);

      if(auto_forward == true)
      {
        this.start();
      }

    },

    "start": function()
    {
      this.forward_interval = setInterval(this.next.bind(this), this.delay)
    },

    "stop": function()
    {
      clearInterval(this.forward_interval);
    },

    "prev": function(evt)
    {

      if(typeof evt == 'object')
      {
        evt.stop(); // Stop page change from link.
      }

      if(this.current_pos != 0)
      {
        this.change(this.current_pos - 1);
      }
      else
      {
        this.change(this.images.length - 1)
      }
    },

    "next": function(evt)
    {

      if(typeof evt == 'object')
      {
        evt.stop(); // Stop page change from link.
      }

      if(this.current_pos != (this.images.length - 1))
      {
        this.change(this.current_pos + 1);
      }
      else
      {
        this.change(0);
      }
    },

    "goto": function(evt)
    {

      evt.stop(); // Stop page change from link.

      for(x in this.images)
      {
        if(this.images.hasOwnProperty(x))
        {
          if(evt.target.href.match(this.images[x]) != null)
          {
            this.change(x);
          }
        }
      }

    },

    "change": function(index)
    {

      index = parseInt(index);

      if(index == this.current_pos)
      {
        return;
      }

      links = this.controls.childElements();
      links[this.current_pos+1].removeClassName('pr-selected');
      links[index+1].addClassName('pr-selected');

      // Update current position

      this.current_pos = index;

      // Change image

      this.image.fade(
        {
          "duration": this.trans_length,
          "afterFinish": function()
          {
            this.image.src = this.images[index];
            this.image.appear({duration: this.trans_length})
          }.bind(this)
        }
      );

      // Change cursor style if link exists or doesn't exist

      if(this.links[index] != undefined)
      {
        this.image.setStyle({"cursor": 'pointer'});
      }
      else
      {
        this.image.setStyle({"cursor": 'auto'});
      }

    },

    "link": function()
    {
      url = this.links[this.current_pos];

      if(url != undefined)
      {
        window.location.href = url;
      }
    }

  };
}