var znmCarousel = new Class({
	Implements: Options,
	options: {
        'triggerWidth'	: '30%',
        'triggerHeight'	: 100,
        'scrollSpeed'	: 1000
    },
    scrollingActive : false,
	initialize  : function(scrollElement, options){
    				this.setOptions(options);
    				this.buildCarousel(scrollElement);
    				
    				this.nextImage().delay(2000, this);

				},
	buildCarousel : function(element){
					var carouselBlock = new Element('div', {
							'styles'	: {
								'background-color' : '#FFF',
								'width'		: '100%', 
								'height' 	: this.options.triggerHeight, 
								'overflow'	: 'hidden',
								'position'	: 'relative',
								'float'		: 'left',
								'clear'		: 'left'
							}
						});
					var carouselElements =  new Element('div', {
							'styles'	: {
							'background-color' : '#FFF',
							'width'		: '0', 
							'height' 	: this.options.triggerHeight, 
							'position'	: 'absolute',
							'z-index'	: '10',
							'left'		: '0',
							'top'		: '0',
							'text-align': 'left'
						}
					}) 
					carouselElements.images = new Array();
					carouselElements.inject(carouselBlock);
					
					$each(element.getElements('img'), function(imgElement, index){
						carouselElements.setStyle('width', carouselElements.getStyle('width').toInt() + imgElement.get('width').toInt());
						if(carouselBlock.getStyle('height').toInt() < imgElement.get('height').toInt())
							carouselBlock.setStyle('height', imgElement.get('height').toInt());						
						carouselElements.adopt(imgElement);
						carouselElements.images.push(imgElement);
					});
					carouselBlock.replaces(element);
					
					this.scrollContent = carouselElements;
					this.scrollBlock = carouselBlock;
					carouselElements.activeImage = 0;

				},
	nextImage	: function(){
					if(!this.scrollingActive)
						var currentImage = this.scrollContent.images[this.scrollContent.activeImage];
						var imageSize = currentImage.getSize().x
						var tweenFX = new Fx.Tween(currentImage);
						this.scrollingActive = true;
						tweenFX.start('margin-left', 0, -imageSize)
							   .chain(function(){
								   this.scrollingActive = false;
								   var currentImage = this.scrollContent.images[this.scrollContent.activeImage]
								   currentImage.setStyle('margin-left', 0);
								   if(this.scrollContent.activeImage == 0)
									   var insertAfterImage = this.scrollContent.images[this.scrollContent.images.length - 1];
								   else
									   var insertAfterImage = this.scrollContent.images[this.scrollContent.activeImage-1];
								   
								   this.scrollContent.activeImage++;
								   if(this.scrollContent.activeImage == this.scrollContent.images.length)
									   this.scrollContent.activeImage = 0;
									
								   currentImage = currentImage.dispose();
								   currentImage.inject(insertAfterImage, 'after');
								   this.nextImage();
								}
							   .bind(this).delay(3000, this));
				},
});

(function(){
	window.addEvent('domready', function() {
		$each($$('div.carouselGallery'), function(element){
			var carousel = new znmCarousel(element);
		});
	})
})();