/**
 * @param slideWidth	The number of pixels to move on each slide. Note that this does not necessarily
 *			equal the width of an image
 * @param shownImages	The number of images shown at one time
 * @param imageCount	The total number of images in the slider
 * @param slider	The long div that wraps the images (jQuery object)
 * @param arrowLeft	The left arrow (jQuery object)
 * @param arrowRight	The right arrow (jQuery object)
 */
ImageSlider = function(slideWidth, shownImages, imageCount, slider, arrowLeft, arrowRight)
{
  this.slideWidth = slideWidth;
  this.shownImages = shownImages;
  this.imageCount = imageCount;
  this.slider = slider;
  this.arrowLeft = arrowLeft;
  this.arrowRight = arrowRight;

  this.arrowLeft.hide();

  this.listen();
};

ImageSlider.ARROW_FADE_OUT_TIME = 100;
ImageSlider.ARROW_FADE_IN_TIME = 200;
ImageSlider.SCROLL_TIME = 400;

ImageSlider.prototype.listen = function()
{
  var self = this;
  this.arrowLeft.click(function() {
    self.scroll(1, self.arrowLeft)
    return false;
  });
  this.arrowRight.click(function() {
    self.scroll(-1, self.arrowRight)
    return false;
  });
};

/**
 * @param steps		The number of steps to scroll. Negative means scrolling left
 * @param arrow		The arrow object that was clicked
 */
ImageSlider.prototype.scroll = function(steps, arrow)
{
  this.arrowLeft.fadeOut(ImageSlider.ARROW_FADE_OUT_TIME);
  this.arrowRight.fadeOut(ImageSlider.ARROW_FADE_OUT_TIME);

  var currentPos = this.slider.css("margin-left").replace(/px/, "") - 0; // -0 for conversion to number
  var self = this;
  this.slider.animate({marginLeft: currentPos + steps * this.slideWidth}, ImageSlider.SCROLL_TIME,
		     function() {
		       var currentStep = Math.round(-self.slider.css("margin-left").replace(/px/, "") / self.slideWidth);
		       var arrowOther = arrow == self.arrowLeft ? self.arrowRight : self.arrowLeft;
		       if(!((arrow == self.arrowLeft && currentStep == 0) ||
			    (arrow == self.arrowRight && currentStep == self.imageCount - self.shownImages))) {
			 arrow.fadeIn(ImageSlider.ARROW_FADE_IN_TIME);

			 // really just applies to arrowLeft:
			 if(arrow.css("display") == "none")
			   arrow.css("display", "block");
		       }
		       arrowOther.fadeIn(ImageSlider.ARROW_FADE_IN_TIME);
		     });

}