var array_img = [];
var expre = 0;
var cap = 0;
var slid;
var expresiones = ['miedo','disgusto','enfado','alegria','tristeza','asombro'];

function preload_img(){
	for(var i=0;i<expresiones.length;i++){
		var emo = expresiones[i];
		var imago = new Image();
		imago.src =  "img/"+emo+".gif";
		array_img.push(imago);
		}
	}


window.addEvent('domready',function(e){
	preload_img();
	$$('#emociones a').addEvent('click',function(e){
		e.preventDefault();
		$$('#emociones a').removeClass('on');
		this.addClass('on');
		expre = expresiones[this.id];
		slid.set(0);
		img_frente = 'url("img/'+expre+'.gif")'
		$('frente').setStyle('background-image', img_frente );
		$('retrato').setStyle('background-image', img_frente);
		$('frente').setStyle('background-position', '0 0' );
		$('retrato').setStyle('background-position', '240px 0');
		});

	slid = new Slider($('barra'), $('hand'), {
		range : [0,300],
		wheel: true,
		//snap : true,
		onChange : function(step){
			var emo = expresiones[expre];
			if(step<100){
					cap = 0;
				} else if((step>=100)&&(step<200)){
					cap = 1;
				} else {
					cap = 2;
				}
		
			var frente = (0-(cap*240))+'px 0';
			var tras = (0-((cap+1)*240))+'px 0';
		
			$('frente').setStyle('background-position', frente );
			$('retrato').setStyle('background-position', tras );
			$('frente').setOpacity(1-((step-(cap*100))/100));
			}
		});

	});