// JavaScript Document
var Slide = new Class({
	Implements: [Options],
	options: {
		ancho:740,
		alto:240
	},
	initialize: function(options){
		var Obj = this;
		this.qty = 0;
		
		this.setOptions(options);
		this.imagenes = $('containerImagenes').getElements('li img');
		this.puntero = 0;
		for(i=0;i<this.imagenes.length;++i){
			
			this.imagenes[i].addEvent('load',function(e){
				Obj.qty++;
				if(Obj.qty == Obj.imagenes.length){
					Obj.comienzo();
				}
			});
			if(this.imagenes[i].width){
				this.imagenes[i].fireEvent('load'); 
			}
		}
		//this.comienzo();
		
	},
	comienzo: function(){
		var Myslide = this;
		$('btnimage1').addEvent("click",function(e){Myslide.slide(-1)});
		$('btnimage2').addEvent("click",function(e){Myslide.slide(1)});
		$('btnimage1').addEvent("mouseover",function(e){ $('btnimage1').setStyle('cursor','pointer');});
		$('btnimage2').addEvent("mouseover",function(e){ $('btnimage2').setStyle('cursor','pointer');});
		// damos el ancho de las imagenes
		var ancho = 0;
		for(i=0;i<this.imagenes.length;++i){
			this.imagenes[i].set("acumulado",ancho);
			ancho+= parseInt(this.imagenes[i].getSize().x);
		}
		$('contenidoImagenes').setStyle("width",ancho);
	},
	slide: function(v){
		if(v>0){
			this.puntero++;
			if(this.puntero>=this.imagenes.length){
				this.puntero=0;
			}
		}else{
			this.puntero--;
			if(this.puntero<0){
				this.puntero= (this.imagenes.length-1);
			}			
		}
		$('contenidoImagenes').morph({'margin-left':-(this.imagenes[this.puntero].get('acumulado'))});
	}
});