/**
 * CARRUSEL
 *
 * @version		0.0.1
 *
 * @license		GNU
 * @author		David Pestana Perdomo (solchitos@hotmail.com)
 * @copyright	Author
 */

var Carousel = new Class({
	Implements: [Events, Options],
	element:$empty,  // objeto contenedor
	parts:$empty,    // array con los spam
	width:$empty,
	options: {
		velocity:0.1,
		duration:200,
		downopacity:0.4,
		proportionarea:5,
		upopacity:1,
		width:0
	},
	initialize: function(element, options) {
		this.setOptions(options);
		this.element = element;
		this.parts   = element.getElements('li');
		this.create();
		this.effects();
		
	},

	create: function(){
		var element = this.element;
		var width = element.getSize().x;
		this.width = width;
		// creo la capa slide y la injecto dentro del elemento.
		element.setStyle('overflow','hidden');

		/*var slide = new Element('div', {'class': 'slide','id':'slide'});
		var limpiar = new Element('div',{'class' : 'limpiar' });
		element.adopt(slide);		
		this.parts.each(function(item,index){
			slide.adopt(item);
			item.setStyle('float','left');
		});
		slide.adopt(limpiar);
		if(this.options.width == 0){
			var slideWidth = 0;
			this.parts.each(function(item,index){	slideWidth = slideWidth + item.getSize().x; });
		}else{
			var slideWidth = this.options.width * this.parts.length;
		}
		slide.setStyles({'width': slideWidth});
		//
		//alert(element.id);
*/
		var myScroller = new Scroller(element.id,{area: (width/this.options.proportionarea), velocity: this.options.velocity}).start();
	},
	effects: function(){
		// cuando el raton entra en element todos los elementos opacity.
		var options = this.options;
		var parts = this.parts;
		this.element.addEvent('mouseenter',function(){
			parts.each(function(item,index){
				item.setStyle('opacity',options.downopacity);
			});
		});
		this.element.addEvent('mouseleave',function(){
			parts.each(function(item,index){
				item.tween('opacity',options.upopacity);
			});
		});
		parts.each(function(item,index){
			item.set('tween',{duration:options.duration});
			item.addEvent('mouseover',function(){this.tween('opacity',options.upopacity);});
			item.addEvent('mouseleave',function(){this.tween('opacity',options.downopacity);});	
		});
	},
	test: function(){

		alert(this.width);
	}	
	


});