var verticalGallery = Class.create();

verticalGallery.prototype = {
  
  timerDown: null,
  timerUp: null,

	initialize: function(container, options) {
		this.options = Object.extend({
  		nextButton : 'gallery_next',
  		prevButton : 'gallery_prev',
  		windowClass : 'gallery_window',
  		sliderClass : 'gallery_slider',
  		arrowClass : 'gallery_arrows'
		}, options || {});

	  if (!$(container) || $$('.'+this.options.windowClass).size() == 0) {
	    return false;
	  }

		this.container    = $(container);
		this.sliderWindow = this.container.select('.'+this.options.windowClass).first();
		this.slider       = this.sliderWindow.select('.'+this.options.sliderClass).first();
    // height of the visible content
    this.windowHeight = this.container.select('.'+this.options.windowClass).first().getHeight();

    // set up the next buttons
    var nextButton = this.container.select('.'+this.options.nextButton).first();
    Event.observe(nextButton, 'mousedown', this.moveNext.bindAsEventListener(this));
    Event.observe(nextButton, 'mouseup', this.stop.bindAsEventListener(this), false);
    Event.observe(nextButton, 'mouseout', this.stop.bind(this));
    nextButton.onclick = function() {return false;};

    // set up the previous buttons
    var prevButton = this.container.select('.'+this.options.prevButton).first();
    Event.observe(prevButton, 'mousedown', this.movePrev.bindAsEventListener(this), false);
    Event.observe(prevButton, 'mouseup', this.stop.bindAsEventListener(this), false);
    Event.observe(prevButton, 'mouseout', this.stop.bind(this));
    prevButton.onclick = function() {return false;};
    
    // // calculate the height of the listed colours
    // var fc_images_height  = $('fabric_colours_wrapper').getHeight();
    // var fc_heading_height = $('colours-header').getHeight();
    // var fc_total_height   = fc_images_height + fc_heading_height
    // console.log("fc_total_height: "+fc_total_height);
    // 
    // // calculate the height to the bottom of the first image
    // var imgs_heading_height = $('gallery-header').getHeight();
    // var first_link = $$('#gallery-content .gallery_slider a').first();
    // var link_bottom_offset = first_link.positionedOffset()["top"] + first_link.getHeight();
    // console.log("link_bottom_offset: "+link_bottom_offset);
    // 
    // if (link_bottom_offset < fc_total_height) {
    //   $('gallery-content').show();
    //   $('gallery-content').style.height = link_bottom_offset;
    // };
	},
	
	moveNext: function() {
	  clearTimeout(this.timerDown);
    var position = this.slider.positionedOffset()[1];
    var bottom = position + this.slider.getHeight() - this.sliderWindow.getHeight();
    if (bottom > 0) {
      this.slider.setStyle({top: (position - 5) + "px"});
      this.timerDown = setTimeout(function() {
        this.moveNext();
      }.bind(this),5);
    }
	},
	
	movePrev: function() {
	  clearTimeout(this.timerUp);
    var position = this.slider.positionedOffset()[1];
    if (position < 0) {
      this.slider.setStyle({top: (position + 5) + "px"});
      this.timerUp = setTimeout(function() {
        this.movePrev();
      }.bind(this),10);
    }
	},
	
	stop: function() {
	  clearTimeout(this.timerDown);
	  clearTimeout(this.timerUp);
	}
}