/* 
 * image scroller
 *
 * Image in middle is highlighted, images scroll when selected
 * 
 */

var ImageScroller = Class.create();

ImageScroller.prototype = {
	active : false,

	initialize : function(options) {


		this.options = Object.extend( {
			minImages : 2,
			selectedClass : 'selected',
			defaultImage : 0,
			activatedClass : 'imgButton'
		}, options || {});

		// get images
		this.imageList = $$('#' + this.options.imageContainer + ' ul')[0];
		this.imageListItems = $$('#' + this.options.imageContainer + ' ul li');

		// return if not more than max images
		if (this.imageListItems.length < this.options.minImages) {
			return;
		}

		this.setupImages();

		this.middleImage = Math.ceil(this.imageListItems.length / 2);

		// bind buttons
		if (this.options.buttonLeft) {
			this.bindScrollLeft(this.options.buttonLeft);
		}

		if (this.options.buttonRight) {
			this.bindScrollRight(this.options.buttonRight);
		}

		// setup popup image
		if (this.options.showPopup) {
			this.bindMainImage();
		}

		this.imageWidth = this.imageListItems[0].getWidth();
		this.imageContainerWidth = $(this.options.imageContainer).getWidth();
		this.containerWidth = $(this.options.scrollContainer).getWidth();

		// set default image
		this.currentIndex = this.options.defaultImage;
		this.moveTo(this.options.defaultImage);
		this.startObserving();

	},

	setupImages : function() {
		var i = 0;
		this.imageListItems.each(function(liImage) {
			liImage.id = 'li_' + i;
			liImage.childElements()[0].id = 'img_' + i;
			i++;
		});
	},

	stopObserving : function() {

		var previousIndex = this.currentIndex - 1;
		if (previousIndex < 0) {
			previousIndex = this.imageListItems.length - 1;
		}

		var nextIndex = this.currentIndex + 1;
		if (nextIndex >= this.imageListItems.length) {
			nextIndex = 0;
		}

		this.imageListItems[previousIndex].stopObserving();
		this.imageListItems[previousIndex]
				.removeClassName(this.options.activatedClass);
		this.imageListItems[nextIndex].stopObserving();
		this.imageListItems[nextIndex]
				.removeClassName(this.options.activatedClass);
	},

	startObserving : function() {

		var previousIndex = this.currentIndex - 1;
		if (previousIndex < 0) {
			previousIndex = this.imageListItems.length - 1;
		}

		var nextIndex = this.currentIndex + 1;
		if (nextIndex >= this.imageListItems.length) {
			nextIndex = 0;
		}

		this.bindScrollLeft(this.imageListItems[previousIndex]);
		this.imageListItems[previousIndex]
				.addClassName(this.options.activatedClass);
		this.bindScrollRight(this.imageListItems[nextIndex]);
		this.imageListItems[nextIndex]
				.addClassName(this.options.activatedClass);
	},

	scrollLeft : function() {

		if (this.active) {
			return;
		}

		this.active = true;

		this.stopObserving();
		this.currentIndex--;

		// wrap index
		if (this.currentIndex < 0) {
			this.currentIndex = this.imageListItems.length - 1;
		}

		this.changeImage();

		var imageToShift = (this.currentIndex + this.middleImage)
				% this.imageListItems.length;

		// remove last image and insert at start
		this.imageListItems[imageToShift].remove();
		this.imageList.insert( {
			top : this.imageListItems[imageToShift]
		});

		this.startObserving();

	},

	scrollRight : function() {

		if (this.active) {
			return;
		}

		this.active = true;

		this.stopObserving();
		this.currentIndex++;

		// wrap index
		if (this.currentIndex >= this.imageListItems.length) {
			this.currentIndex = 0;
		}
		this.changeImage();

		var imageToShift = (this.currentIndex + this.imageListItems.length
				- this.middleImage - 1)
				% this.imageListItems.length;

		// remove last image and insert at start
		this.imageListItems[imageToShift].remove();
		this.imageList.insert( {
			bottom : this.imageListItems[imageToShift]
		});

		this.startObserving();
	},

	bindScrollLeft : function(element) {
		Event.observe(element, 'click', this.scrollLeft.bind(this), false);
	},

	bindScrollRight : function(element) {

		Event.observe(element, 'click', this.scrollRight.bind(this), false);

	},

	bindMainImage : function() {
		Event.observe(this.options.mainImage, 'click', this.popupMainImage
				.bind(this), false);
		$(this.options.mainImage).className = 'imgButton';
	},

	popupMainImage : function() {
		new Ajax.Request('/ajax/shop_popup.ajax.php', {
			method : 'get',
			parameters : {
				image_id : this.imageListItems[this.currentIndex].className
			},
			onSuccess : function(transport) {
				PopupWindow.show('shop_popup', {
					html : transport.responseText
				});
			},
			onFailure : function(transport) {
				alert('Failed to load image');
			}
		});
	},

	changeImage : function() {

		// bring in new image behind current one
		$(this.options.mainImage2).src = this.options.imageArray[this.currentIndex];
		$(this.options.mainImage2).show();
		// alert($(this.options.mainImage2).style.display);
		var imageScroller = this;
		// fade out current one
		Effect
				.Fade(
						this.options.mainImage,
						{
							afterFinish : function() {

								// reset front image and show it
								$(imageScroller.options.mainImage).src = imageScroller.options.imageArray[imageScroller.currentIndex];
								$(imageScroller.options.mainImage).show();

								// hide image in back
								$(imageScroller.options.mainImage2).hide();
								// scroll finished
								imageScroller.active = false;
							}
						});
	},

	scaleThumb : function() {
		// alert('img_' + this.currentIndex + ' ' +
		// this.options.scalePercentage);
		// Effect.Grow('img_' + this.currentIndex);
		// alert(Effect.Scale);
		// Effect.Scale('img_' + this.currentIndex,
		// this.options.scalePercentage);
		// alert('here')
	},

	shrinkThumb : function() {
		Effect.Scale('img_' + this.currentIndex,
				100 * 100 / this.options.scalePercentage, {
					scaleFromCenter : true
				});
	},

	moveTo : function(index) {

		if (index < this.middleImage) {
			var imagesToShift = this.middleImage - index;

			var shiftTo = this.imageListItems.length - imagesToShift;

			for ( var i = this.imageListItems.length - 1; i >= shiftTo; i--) {

				this.imageListItems[i].remove();
				this.imageList.insert( {
					top : this.imageListItems[i]
				});
			}
		} else if (index > this.middleImage) {
			var imagesToShift = index - this.middleImage;
			var shiftTo = imagesToShift;

			for ( var i = 0; i <= shiftTo; i++) {

				this.imageListItems[i].remove();
				this.imageList.insert( {
					top : this.imageListItems[i]
				});
			}
		}

		// alert(((this.middleImage + 1) * this.imageWidth) -
		// this.containerWidth / 2);

	$(this.options.scrollContainer).scrollLeft = ((this.middleImage + 1) * this.imageWidth)
			- this.containerWidth / 2 - this.imageWidth / 2;

	if (this.options.scaleThumb) {
		this.scaleThumb();
	}

}
}