/******************************************
 * The Product View Image Gallery Class
 ******************************************/

onepica.Product.Gallery = Class.create({
	initialize: function (containerId) {
		this.scrollMinimum = 5;  // min number of thumbnails to require scrolling
		this.thumbnailWidth = 55;
		this.hover = false;
		this.duration = 0.5;
		this.hoverScroll = 55;  // pixels scrolled by every duration

		this.containerId = containerId;
		this.container = $(containerId);
		this.scrollerLeft = this.container.down('a.image-scroll-left');
		this.scrollerRight = this.container.down('a.image-scroll-right');
		this.gallery = this.container.down('.image-scroll-gallery');
		this.list = this.gallery.down('ul');
		this.thumbnails = this.gallery.select('li');

		if (this.thumbnails.length >= this.scrollMinimum) {
			this.scrollerLeft.show();
			this.scrollerLeft.observe('click', this.eventScrollerClick.bindAsEventListener(this, 'left'));
			this.scrollerLeft.observe('mouseover', this.eventScrollerHover.bindAsEventListener(this, 'left'));
			this.scrollerLeft.observe('mouseout', this.eventScrollerHoverOut.bindAsEventListener(this));
			this.scrollerRight.show();
			this.scrollerRight.observe('click', this.eventScrollerClick.bindAsEventListener(this, 'right'));
			this.scrollerRight.observe('mouseover', this.eventScrollerHover.bindAsEventListener(this, 'right'));
			this.scrollerRight.observe('mouseout', this.eventScrollerHoverOut.bindAsEventListener(this));
			this.list.setStyle({width: (this.thumbnails.length * this.thumbnailWidth).toString() + 'px'});
			this.bound = this.list.getWidth() - this.gallery.getWidth();
		}
	},

	/**
	 * Event triggered when scroll arrows are clicked.
	 */
	eventScrollerClick: function (event, direction) {
		this.hover = false;
		this.scrollList(this.thumbnailWidth, direction);
	},

	/**
	 * Event triggered when scroll arrows are hovered upon.
	 */
	eventScrollerHover: function (event, direction) {
		this.hover = true;
		this.direction = direction;
		this.scrollerHover();
	},

	/**
	 * Event triggered when scroll arrows are hovered out of.
	 */
	eventScrollerHoverOut: function (event) {
		this.hover = false;
	},

	/**
	 * Recursively scrolls the list while the hover state is maintained.
	 */
	scrollerHover: function () {
		if (this.hover) {
			this.scrollList(this.hoverScroll, this.direction);
			setTimeout(function () {
				this.scrollerHover();
			}.bind(this), this.duration * 1000);
		}
	},

	/**
	 * Scrolls the image gallery by {amount} pixels in direction {direction}.
	 */
	scrollList: function (amount, direction) {
		var leftPos = parseInt(this.list.getStyle('left'));
		var moveBy = 0;
		if (direction == 'right') {
			if (leftPos <= (this.bound * -1)) {  // don't go past the right bound
				moveBy = 0
			}
			else if ((leftPos - amount) <= (this.bound * -1)) {
				moveBy = (this.bound - Math.abs(leftPos)) * -1;
			}
			else {
				moveBy = amount * -1;
			}
		}
		else {
			if (leftPos >= 0) {  // don't go past the left bound, ie. 0
				moveBy = 0;
			}
			else if ((leftPos + amount) >= 0) {
				moveBy = Math.abs(leftPos);
			}
			else {
				moveBy = amount;
			}
		}
		//console.log('moveby: ' + moveBy + ', leftpos: ' + leftPos + ', direction: ' + direction + ', amount: ' + amount);
		new Effect.Move(this.list, {
			mode: 'relative',
			transition: Effect.Transitions.linear,
			duration: this.duration,
			y: 0,
			x: moveBy
		});
	}
});