Element.implement({
	createCarousel:function(opt) {
		
		var me = this;
		this.carousel_options = opt
		this.addClass("carousel");
		this.togglers = new Array();
		this.fx = new Fx.Scroll(me);
		this.morph = new Fx.Morph(me,{"duration":"short"});
		
		// get elements and max height.
		this.lis = this.getElements('ul li');
		this.images = this.getElements('img');
		var a = this.images.getSize();
		var maxy = 0;
		var count = 0;
		var x = 0;
		
		a.each(function(val,dx){ 
			maxy = Math.max(val.y,maxy); ++count
			me.images[dx].getParent('li').setStyle('left',x);
			if(dx == 0) {
				me.morph.start({"height":val.y});
			}
			x+=val.x;
		});
		this.setStyle('height',maxy+"px");
		
		// some interaction....
		var remove_hovers = function(){
			me.togglers.each(function(el) { 
				el.removeClass("hover");
			});			
		};
		
		// create the selectors.
		var selector = new Element('ul',{"class":"carousel_selector"}).inject(this.getParent());
		for(var i = 0; i < count; ++i) {
			var el = new Element('li',{
				"class":"carousel_selector_item " +((i == 0) ? "selected" : "")
			}).inject(selector);
			el.store("dx",i);
			el.addEvent("click",function(ev) {
				me.togglers.each(function(tog){
					tog.removeClass("selected");
				});
				remove_hovers();
				this.addClass("selected");
				me.fx.start(me.lis[this.retrieve("dx")].getStyle('left').toInt(),0);
				var h = me.images[this.retrieve("dx")].getSize().y.toInt();
				me.morph.start({"height":h});
			});
			el.addEvent("mouseenter",function(ev) {
				remove_hovers();
				this.addClass("hover");
			});
			el.addEvent("mouseleave",function(ev) {
				remove_hovers();
			});
			me.togglers.push(el);
		}
		
		// position togglers.
		/*
		var total_w = me.togglers.length * me.togglers[0].getCoordinates().left;
		selector.setStyles({
			'width' : total_w
			,'position':'relative'
			,'left' : (this.getSize().x * 0.5) - (total_w * 0.5)
		});
		*/
	}
});