var FirstImage;

var MooFlow = new Class({

	Implements: [Events, Options],
	
	options: {
		onStart: Class.empty,
		onComplete: Class.empty,
		onCancel: Class.empty,
		container: 'MooFlow',
		imgContainer: 'images',
		labelTitulo: 'captionTitulo', //esto lo agrego aca para poder poner el titulo.	
		labelDescripcion: 'captionDescripcion', //esto lo agrego aca para poder poner el titulo.
		//estas dos variables las agrego en el script que tengo en el index, asi las veo desde aca.	
		//podria usar alguna de estas opciones para pasar la url.
		slider: false,
		caption: true,
		reflection: 1.0,
		startIndex: 0,
		buttons: false,
		interval: 3000,
		useWindowResize: true,
		useMouseWheel: true,
		useKeyInput: true
	},
	initialize: function(options){
		this.setOptions(options);
		this.foc = 150;
		this.cur = 0;
		this.tar = 0;
		if ($$(this.options.images).length < 2)
		    this.curI = 0;
		else 
		    this.curI = Math.floor($$(this.options.images).length / 2) - 1; //this.options.startIndex;
		this.isRun = false;
		this.sli = null;
		this.checker = null;		
		this.images = $$(this.options.images);
		this.iL = $$(this.options.images).length;		
		this.interval = this.options.interval;
		
		FirstImage = $$(this.options.images)[this.curI];
		
		this.init();
		if(this.options.buttons){
			this.initButtons(this.options.buttons);
		}
		if(this.options.useWindowResize){
			window.addEvent('resize', this.update.bind(this));
		}
	},
	init: function(){
		$$(this.options.images).each(function(image, i){
			image.setStyle('display','block');
			image.addEvent('click', this.clickTo.bind(this,[i]));
		}, this);
		
		if(this.options.useMouseWheel && this.options.slider){
			$(this.options.container).addEvent('mousewheel', this.wheelTo.bind(this));
		}
		if(this.options.useKeyInput){
			document.addEvent('keydown', this.keyTo.bind(this));
		}
		this.update();
	},
	update: function(){
		this.oW = $(this.options.container).offsetWidth;
		this.oT = $(this.options.container).offsetTop;
		$(this.options.imgContainer).setStyle('height', this.oW*0.15);//contenedor de la imagen
		$(this.options.container).setStyle('height', this.oW*0.29); //tamaņo del contenedor
		$(this.options.container).setStyle('visibility','visible');
		this.sz = this.oW * 0.5; //tamaņo de la imagen giratoria.
		if(this.options.slider){
			this.sli = new Slider($(this.options.slider.slider), $(this.options.slider.knob),{
				steps: this.iL-1
			}).set(this.curI);
			$(this.options.slider.knob).setStyles({'width':$(this.options.slider.slider).offsetWidth/this.iL,'opacity':0.5});
			this.sli.addEvent('onChange', this.glideTo.bind(this));
		}
		this.process(this.curI*-this.foc);
		this.glideTo(this.curI);
		LoadFirstVideo();
	},
	
	auto: function(){
		if(this.curI < this.iL-1){
			this.curI++;this.clickTo(this.curI);
		} else if(this.curI == this.iL-1){
			this.curI=0;this.clickTo(this.curI);
		}
	},
	next: function(){
		if(this.curI < this.iL-1)
			this.curI++;this.clickTo(this.curI);
	},
	start: function(){
		this.isRun = true;
		this.checker = this.check.periodical(50, this);
	},
	end: function(){
		$clear(this.checker);
	},
	keyTo: function(e){
		switch (e.code){
			case 37:
				if(this.curI > 0)
					this.curI--;this.clickTo(this.curI);
				break;
			case 39:
				if(this.curI < this.iL-1)
					this.curI++;this.clickTo(this.curI);
				break;
		}
	},
	wheelTo: function(e){
		var d = e.wheel;
		if(d > 0 && this.curI > 0)
			this.curI--;this.clickTo(this.curI);
		
		if(d < 0 && this.curI < this.iL-1)
			this.curI++;this.clickTo(this.curI);
	},
	clickTo: function(i){
		if(this.options.slider){
			this.sli.set(i);
		} else {
			this.glideTo(i);
		}
	},
	
	//obtiene los datos del objeto seleccionado y se los pasa a las labels.
	glideTo: function(i){	    
		if(!this.isRun){this.start();}
		if(this.options.caption && this.images[i]){	
		var algo = "onclick=\"javascript:embedVideo('" + this.images[i].alt + "','" + this.images[i].title.split("|")[0] +"'); return false;\"";
		$(this.options.labelTitulo).set('html', '<a href="#" ' + algo + '>' + this.images[i].title.split("|")[0] + '</a>');
		$(this.options.labelDescripcion).set('html', '<a href="#" ' + algo + '>' + this.images[i].title.split("|")[1] + '</a>');}	        				
		//$(this.options.labelTitulo).set('html', '<a href="#" onclick="javascript:embedVideo(' + this.images[i].alt + ',' + this.images[i].title.split("|")[0] + '); return false;">' + this.images[i].title.split("|")[0] + '</a>');
		//$(this.options.labelDescripcion).set('html', '<a href="#" onclick="javascript:embedVideo(' + this.images[i].alt + ',' + this.images[i].title.split("|")[0] + '); return false;">' + this.images[i].title.split("|")[1] + '</a>');}	        				
		this.curI = i;
		this.tar = i*-this.foc;
	},
	check: function(){
		switch(this.tar < this.cur-1 || this.tar > this.cur+1){
			case true:
				this.process(this.cur + (this.tar-this.cur)/3);
				break;
			default:
				this.isRun = false;
				this.end();
				break;
		}
	},
	process: function(x){
		x = Math.round(x);
		this.cur = x;
		var zI = this.iL;
		var z, xs, imgH, imgW, percent;
		$$(this.images).each(function(img){
			if(x<-this.foc*6||x>this.foc*6){img.setStyle('display','none');} else {img.setStyle('display','block');} //los valores dentro del if son la cantidad de fotos que se ven.
			z = Math.sqrt(10000 + x * x) + 70; //cuanto mas chico es el valor que le sume mas grande la imagen sera.
			xs = x / z * this.sz + this.sz;
			imgH = img.height;
			imgW = img.width;
			percent = 100;
			if ((imgW + 1) > (imgW / (this.options.reflection + 1))){
				percent = 115;
			}
			newL = xs - (percent / 2) / z * this.sz;//esto va a ser el margin izquierdo de la tira de imagenes.
			newH = (imgH / imgW * percent)*0.56 / z * this.sz;//esto va a ser la altura.
			newT = (this.oW * 0.17 - newH) + ((newH / (this.options.reflection + 1)) * this.options.reflection); //esto va a ser el margin top de las imagenes.ee
						
			img.setStyle('left', newL);
			img.setStyle('height', newH);
			img.setStyle('margin-top', newT);
			img.setStyle('zIndex', x < 0 ? zI++ : zI--);						
			
			x += this.foc;
			
			
			
		}, this);
		
	}
});

function embedVideo(url,titulo){
    var newVideo = "<embed autostart='1' height='329' id='player' mediawrapchecked='true' type='video/x-ms-asf' width='504' src='";
    newVideo += url+"' ></embed>";
    var div = $('video_player');
    div.innerHTML =  newVideo;
    var tit = $('tituloVideo').innerHTML = '- ' + String(titulo);
}

function LoadFirstVideo() {
    embedVideo(FirstImage.alt, FirstImage.title.split("|")[0]);
}