var Carousel = new Class( {
	Implements : Options,

	options : {
		sliderSize : 0
	},

	initialize : function(el, options) {
		this.el = document.id(el);
		this.setOptions(options);
		var containerSize = (this.el.getParent('div.carousel-container')) ? this.el.getParent('div.carousel-container').getSize().x : this.el.getElement('div.clip').getSize().x;
		this.sliderSize = (this.options.sliderSize != 0) ? this.options.sliderSize : containerSize;
		this.initDom();
		this.addBubbles();
		this.addEventListeners();
	},

	initDom : function() {
		this.bubbles = (this.el.getElements('img.bubble').length != 0) ? this.el.getElements('img.bubble').getParent() : null;
		this.icons = this.el.getElements('.icon');
		this.container = this.el.getElement('ul');
		this.slideSize = this.container.getFirst() != null ? this.container.getFirst().getSize().x : 0;
		this.ulLength = this.slideSize * this.container.getElements('li').length;
		var slideInWindow = this.el.getSize().x / this.slideSize;
		this.nSlides = (this.container.getElements('li').length / slideInWindow);
	},

	addBubbles : function() {
		// Set bubbles opacity to zero so they're hidden initially and
		// toggle visibility on for their container
		if (!this.bubbles)
			return;
		var bubbleSize = this.bubbles[0].getElement('img').getSize();
		var iconSize = this.icons[0].getSize();
		var bubbleMargin = {
			left : -(bubbleSize.x - iconSize.x)/2,
			top : -(bubbleSize.y - iconSize.y)/2
		};
		this.bubbles.setStyle('opacity', 0);
		this.bubbles.each(function(item) {
			item.getElement('img').setStyles({
				'margin-left' : bubbleMargin.left,
				'top' : bubbleMargin.top,
				'z-index':100
			});
			item.addEvent('mouseleave', function(event) {
				new Fx.Morph(item, {
					duration : 10,
					transition : Fx.Transitions.Linear
				});
				item.morph( {
					'opacity' : 0,
					'z-index' : 0
				});
			});
		});

		this.icons.each(function(item) {
			item.addEvent('mouseenter', function(event) {
				this.bubbles.fireEvent('mouseleave');
				new Fx.Morph(item, {
					duration : 10,
					transition : Fx.Transitions.Linear
				});
				item.getParent().getFirst().morph( {
					'opacity' : 1,
					'z-index' : 100
				});
			}.bind(this));
		}.bind(this));
	},

	addEventListeners : function() {
		var pos = 0;
		var currentslide = 1;
		var myFx = new Fx.Tween(this.container);
		
		var that = this; // ref to the instance
		
		this.el.getElement('.next').addEvents( {
				'mouseleave': function() {
					if (Browser.Engine.trident < 5) this.setStyle("z-index", "-1");
				},
				'mouseenter': function() {
					if (Browser.Engine.trident < 5) this.setStyle("z-index", "1");
				},
				'click': function() {
					if (currentslide >= that.nSlides)
						return;
					currentslide++;
					if (currentslide >= that.nSlides) {
						pos -= that.ulLength-that.sliderSize;
					}
					else {
						pos -= that.sliderSize;
					}
					myFx.start('left', pos + 'px');
				}				
		});
		
		this.el.getElement('.prev').addEvents({
				'mouseleave': function() {
					if (Browser.Engine.trident < 5) this.setStyle("z-index", "-1");
				},
				'mouseenter': function() {
					if (Browser.Engine.trident < 5) this.setStyle("z-index", "1");
				},
				'click': function(event) {
					if (currentslide == 1)
						return;
					currentslide--;
					if (currentslide == 1) {
						pos = 0;
					} else {
						pos += that.sliderSize;
					}
					myFx.start('left', pos + 'px');
				}
		});
	}
});