ODIL_Initializer.add_selector_with_action('.carousel_content', function(element) {
	new Carousel().initialize_on_element(element);
});

var Carousel = Class.create(ODIL_Base, {
	namespace: function($super) {
		return $super() + 'carousel-';
	},
	
	carousel_content: null,
	scroller: null,
	carousel: null,
	left: null,
	right: null,
	duration: 0.3,
	animating: false,
	
	initialize_on_element: function(element) {
		var that = this;
		this.carousel_content = element;
		this.scroller = this.carousel_content.wrap('div', {'class': 'scroller'});
		this.carousel = this.scroller.wrap('div', {'class': 'carousel'});
		this.left = new Element('div', {'class': 'left'});
		this.right = new Element('div', {'class': 'right'});
		
		this.carousel.appendChild(this.left);
		this.carousel.appendChild(this.right);
		
		this.carousel.setStyle({
			width: this.carousel_content.readAttribute(this.namespace() + 'width') + 'px',
			height: this.carousel_content.readAttribute(this.namespace() + 'height') + 'px'
		});
		
		this.scroller.setStyle({
			width: this.carousel_content.readAttribute(this.namespace() + 'width') + 'px',
			height: this.carousel_content.readAttribute(this.namespace() + 'height') + 'px'
		});
		
		this.carousel_content.setStyle({
			width: this.carousel_content.readAttribute(this.namespace() + 'width') * this.carousel_content.childElements().size() + 'px'
		});
		
/*
		carousel.writeAttribute('scroller_id', scroller.identify());
		carousel.writeAttribute('duration', 0.3);
		carousel.writeAttribute('animating', false);
*/
		
		if(!that.carousel_content.readAttribute(that.namespace() + 'manual_arrows')) {
			this.left.setStyle({ top: this.carousel.getHeight()/2 - this.left.getHeight()/2 + 'px' });
			this.right.setStyle({ top: this.carousel.getHeight()/2 - this.right.getHeight()/2 + 'px' });
		}
		
		Try.these(
			function() {
				if(that.carousel_content.readAttribute(that.namespace() + 'transparent_arrows') == 'true' && PNG_Fix != null) {
					PNG_Fix.initialize_background_on_element(that.left);
					PNG_Fix.initialize_background_on_element(that.right);
				}
			}
		);
		
		this.left.observe('click', function(event)
		{
			if(! that.animating)
			{
				that.animating = true;
				
				new Effect.Scroll(that.scroller, {
					duration: that.duration,
					x: -that.scroller.getWidth(),
					mode: 'relative',
					afterFinish: function() { that.animating = false; }
				});
			}
		});
		
		this.right.observe('click', function(event)
		{
			if(! that.animating)
			{
				that.animating = true;
				
				new Effect.Scroll(that.scroller, {
					duration: that.duration,
					x: that.scroller.getWidth(),
					mode: 'relative',
					afterFinish: function() { that.animating = false; }
				});
			}
		});
	}
});