var Carousel = new Class({
	maxImageWidth: 76,
	maxImageHeight:76,
	itemWidth:76 + 8,
	pageSize:9,
	initialize: function(container, options) {
		this.setOptions(options);
		this.container = $(container);
		if (options && options.pageSize) {
			this.pageSize = options.pageSize;
		}
		this.carouselContainer = this.container.getElement("[class=carousel_content]");
		this.imagesContainer = this.container.getElement("ul");
		this.imageContainerItems = this.imagesContainer.getElements('li');
		this.imagesArray = this.carouselContainer.getElements("img");
		this.carouselPrev = this.container.getElement("[class=carousel_prev]");
		this.carouselNext = this.container.getElement("[class=carousel_next]");
		this.totalWidth = this.imagesArray.length * this.itemWidth;
		this.pageWidth = this.itemWidth * this.pageSize;
		this.imagesContainer.setStyle('width', this.totalWidth);
		this.carouselContainer.setStyle('width', this.pageWidth);
		this.imgCount = this.imageContainerItems.length;
		if (this.pageSize % 2 == 1) {
			this.centerIndex = (this.pageSize - 1) / 2;
		} else {
			this.centerIndex = this.pageSize / 2;
		}
		// show container
		new Fx.Tween(this.carouselContainer, {duration: 1000}).start("opacity", 0, 1);
		// calculate the item width of each move and the total width
		this.startPosition = this.imagesContainer.getStyle("margin-left").toInt();
		this.currentIndex = 0;
		this.currentPosition = this.startPosition;
		// bind events
		this.carouselPrev.addEvent("click", function(event) {
			new Event(event).stop();
			this.movePrevious(1);
		}.bind(this));
		this.carouselNext.addEvent("click", function(event) {
			new Event(event).stop();
			this.moveNext(1, 'auto');
		}.bind(this));
		this.imageContainerItems.each(function(item, index) {
			var img = item.getElement('img');
			if (Browser.Engine.trident4) {
				var newImg = new Asset.image(img.src, {onload: function() {
					var width = newImg.width;
					var height = newImg.height;
					if (width >= height) {
						if (width > this.maxImageWidth) {
							height = (this.maxImageWidth * height / width).toInt();
							img.setStyles({
								'width':this.maxImageWidth,
								'height':height
							});
						}
						img.setStyle('margin-top', ((this.maxImageHeight - height) / 2).toInt() + 'px');
					} else {
						if (height > this.maxImageHeight) {
							width = (this.maxImageHeight * width / height).toInt();
							img.setStyles({
								'height':this.maxImageHeight,
								'width':width
							});
						}
					}

				}.bind(this)});
			} else {
				img.addEvent('load', function() {
					if (img.height < this.maxImageHeight) {
						img.setStyle('margin-top', ((this.maxImageHeight - img.height) / 2).toInt() + 'px');
					}
				}.bind(this));
			}
			item.addEvent("click", function(event) {
				new Event(event).stop();
				this.setCurrentClass(index);
				this.setCurrentPosition(index);
				this.setCurrentIndex(index);
				var photoId = img.getProperty("photoId");
				var realImg = img.getProperty("realImg");
				this.changeImage("photo_real_image", photoId, realImg);
			}.bind(this));
		}.bind(this));
	},
	getImagesArray:function() {
		return this.imagesArray;
	},
	setCurrentIndex: function(index) {
		this.currentIndex = index;
	},
	setCurrentClass:function(index) {
		this.imageContainerItems[this.currentIndex].removeClass("current");
		this.imageContainerItems[index].addClass("current");
	},
	setCurrentPosition:function(index) {
		var startIndex = -this.currentPosition / this.itemWidth;
		if (index > startIndex && index < this.pageSize + startIndex - 1) {
			return;
		}
		var diff = index - this.currentIndex;
		if (diff < 0) {
			this.movePrevious(this.centerIndex);
		} else {
			if (diff > 0) {
				this.moveNext(this.centerIndex);
			}
		}
	},
	moveNext: function(num, isAuto) {
		var newPosition = this.currentPosition - this.itemWidth * num;
		var positionDiff = this.pageWidth - this.totalWidth;
		if (isAuto) {
			if (this.currentPosition <= positionDiff) {
				newPosition = this.startPosition;
			}
		}
		else {
			if (this.currentPosition <= positionDiff) {
				return;
			}
			if (newPosition < positionDiff) {
				newPosition = positionDiff;
			}
		}
		var myFx = new Fx.Morph(this.imagesContainer, {duration: 500, transition: Fx.Transitions.Sine.easeIn});
		myFx.start({'margin-left': [this.currentPosition,newPosition]});
		this.currentPosition = newPosition;
	},
	movePrevious: function(num) {
		if (this.currentPosition >= this.startPosition) {
			return;
		}
		var newPosition = this.currentPosition + this.itemWidth * num;
		if (newPosition > this.startPosition) {
			newPosition = this.startPosition;
		}
		var myFx = new Fx.Morph(this.imagesContainer, {duration: 500, transition: Fx.Transitions.Sine.easeIn});
		myFx.start({'margin-left': [this.currentPosition,newPosition ]});
		this.currentPosition = newPosition;
	},
	changeImage:function (oldImg, photoid, newImgSrc, maxWidth) {
		oldImg = $(oldImg);
		oldImg.setProperty('photoid', photoid);
		var newImg = new Asset.image(newImgSrc, {onload: function() {
			if (maxWidth && Browser.Engine.trident4) {
				var width = newImg.width;
				if (width > maxWidth) {
					newImg.width = maxWidth;
					newImg.height = newImg.height * maxWidth / width;
				}
			}
			var hideImg = new Fx.Morph(oldImg, {duration: 150, transition: Fx.Transitions.Sine.easeIn, oldImg:oldImg});
			hideImg.start({
				'opacity': [1, 0.2]
			}).chain(function() {
				new Fx.Morph(oldImg, {duration: 150, transition: Fx.Transitions.Sine.easeIn}).start({
					'width': [oldImg.width, newImg.width],
					'height': [oldImg.height, newImg.height]
				}).chain(function() {
					oldImg.src = newImgSrc;
					new Fx.Morph(oldImg, {duration: 150, transition: Fx.Transitions.Sine.easeIn}).start({
						'opacity': [0.2, 1]
					});
				});
			});
		}});
	},
	startSlideShow: function(interval) {
		this.slideShowTimer = this.showNext.bind(this).periodical(interval);
	},
	resumeSlideShow: function(interval) {
		this.stopSlideShow();
		this.slideShowTimer = this.showNext.bind(this).periodical(interval);
	},
	stopSlideShow: function() {
		if (this.slideShowTimer) {
			$clear(this.slideShowTimer);
		}
	},
	showNext: function() {
		var index = this.currentIndex + 1;
		if (index > this.imgCount - 1) {
			index = 0;
		}
		this.setCurrentClass(index);
		this.setCurrentPosition(index);
		this.setCurrentIndex(index);
		var img = this.imagesArray[index];
		var photoId = img.getProperty("photoId");
		var realImg = img.getProperty("realImg");
		this.changeImage("photo_real_image", photoId, realImg);
	}
});
Carousel.implement(new Events);
Carousel.implement(new Options);