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);
				},
	buildCarousel : function(element){
					var carouselBlock = new Element('div', {
							'styles'	: {
								'background-color' : '#F00;',
								'width'		: '100%', 
								'height' 	: this.options.triggerHeight, 
								'overflow'	: 'hidden',
								'position'	: 'relative',
								'float'		: 'left',
								'clear'		: 'left'
							}
						});
					var carouselElements =  new Element('div', {
							'styles'	: {
							'background-color' : '#0F0;',
							'width'		: '0', 
							'height' 	: this.options.triggerHeight, 
							'position'	: 'absolute',
							'z-index'	: '10',
							'left'		: '0',
							'top'		: '0'
						}
					}) 
					carouselElements.images = new Array();
					carouselElements.activeImage = 0;
					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);
					
					var carouselTriggerLeft = new Element('div', {
						'styles'	: {
							'background-color' : '#FFF',
							'width'		: this.options.triggerWidth, 
							'height' 	: carouselBlock.getStyle('height').toInt(), 
							'opacity'	: 0.04,
							'z-index'	: '20',
							'position' 	: 'absolute',
							'left'		: '0',
							'top'		: '0',
							'cursor'	: 'pointer'
						},
						'prevImageInterval' : 0
						})
					carouselTriggerLeft.addEvent('mouseover', function(){
						this.prevImage(),
						this.prevImageInterval = function(){ this.prevImage();}.periodical(this.options.scrollSpeed, this)
					}.bind(this));
					carouselTriggerLeft.addEvent('mouseout', function(){
						$clear(this.prevImageInterval);
					}.bind(this));
					
					var carouselTriggerRight = new Element('div', {
						'styles'	: {
							'background-color' : '#FFF',
							'width'		: this.options.triggerWidth, 
							'height' 	: carouselBlock.getStyle('height').toInt(), 
							'opacity'	: 0.04,
							'z-index'	: '20',
							'position' 	: 'absolute',
							'right'		: '0',
							'top'		: '0',
							'cursor'	: 'pointer'
						},
						'nextImageInterval' : 0
					})
					carouselTriggerRight.addEvent('mouseover', function(){
						this.nextImage();
						this.nextImageInterval = function(){ this.nextImage();}.periodical(this.options.scrollSpeed, this)
					}.bind(this));
					carouselTriggerRight.addEvent('mouseout', function(){
						$clear(this.nextImageInterval);
					}.bind(this));

					carouselTriggerLeft.inject(carouselBlock, 'top');
					carouselTriggerRight.inject(carouselBlock, 'top');
				
					this.scrollContent = carouselElements;
					this.scrollBlock = carouselBlock;
				},
	nextImage	: function(){
					if(!this.scrollingActive)
						if(this.scrollContent.activeImage < (this.scrollContent.images.length-2)){
							var contentPosition = this.scrollContent.getStyle('left').toInt();
							var imageSize = this.scrollContent.images[this.scrollContent.activeImage].getSize().x
							var tweenFX = new Fx.Tween(this.scrollContent);
							
							this.scrollingActive = true;
							tweenFX.start('left', contentPosition, contentPosition - imageSize).chain(function(){this.scrollingActive = false;}.bind(this));
							this.scrollContent.activeImage ++;
						};
				},
	prevImage	: function(){
					if(!this.scrollingActive)
						if(this.scrollContent.activeImage > 0){
							var contentPosition = this.scrollContent.getStyle('left').toInt();
							this.scrollContent.activeImage --;
							var imageSize = this.scrollContent.images[this.scrollContent.activeImage].getSize().x
							var tweenFX = new Fx.Tween(this.scrollContent);

							this.scrollingActive = true;
							tweenFX.start('left', contentPosition, contentPosition + imageSize).chain(function(){this.scrollingActive = false;}.bind(this));
						};
				}
});

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