var ButtonManager = new Class({
	
	initialize: function() {
		this.aButtons = new Array();
		this.lastActive = null;
	},
	
	addButton: function(button){
		this.aButtons.push(button);
	},
	
	deactivate: function(){
	  	this.lastActive.desactivar();
		this.lastActive.activado = 0;
		this.lastActive = null;
	},
	
	activate: function(button){
		if($chk(this.lastActive)) this.deactivate();
		this.lastActive = button;
		this.lastActive.activado = 1;
		this.lastActive.activar();
	},
	
	returnIzq:function(){
		for(i=0;i<this.aButtons.length-1;i++){
			if(this.aButtons[i]==this.lastActive){
				return i*112;
			}
		}
	},
	
	cargaSig: function(){
		if(!$chk(this.lastActive)){
			this.lastActive = this.aButtons[1]
			this.lastActive.initFoto();
			this.activate(this.lastActive);
		}else{
			for(i=0;i<this.aButtons.length-1;i++){
				if(this.aButtons[i]==this.lastActive){
					this.deactivate(this.lastActive);
					this.lastActive = this.aButtons[i+1];
					this.lastActive.initFoto();
					this.activate(this.lastActive);
					break;
				}
			}
		}
	},
	
	cargaAnt: function(){
		if($chk(this.lastActive)){
			for(i=this.aButtons.length-1;i>0;i--){
				if(this.aButtons[i]==this.lastActive){
					this.deactivate(this.lastActive);
					this.lastActive = this.aButtons[i-1];
					this.lastActive.initFoto();
					this.activate(this.lastActive);
					break;
				}
			}
		}
	}
	
});

var Button = new Class({

	initialize: function(elm) {
		this.boton			= elm;
		this.rutaFoto		= elm.getFirst();
		this.activado = 0;
		this.scope = null;
		this.izq = elm.offsetLeft;
		this.boton.setStyle('opacity', 0.5);
		this.boton.addEvent('click', this.onClick.bind(this));
		this.boton.addEvent('mouseover', this.onMouseOver.bind(this));
		this.boton.addEvent('mouseout', this.onMouseOut.bind(this));
	},
	
	init: function(_scope){
		this.scope = _scope;
	},
	
	activar: function (){	
		this.boton.effect('opacity', {duration: 300,transition: Fx.Transitions.linear}).start(1);
	},
	
	desactivar: function (){	
		this.boton.effect('opacity', {duration: 300,transition: Fx.Transitions.linear}).start(0.5);
	},
	
	onClick: function (e){	
		e = new Event(e).stop(); //deshabilito el href del enlace
		this.initFoto();
		this.scope.onClick(this);
	},
	
	onMouseOver: function (){	
		if(this.activado == 0) this.activar();
	},
	
	onMouseOut: function (){	
		if(this.activado == 0) this.desactivar();
	},
	
	initFoto: function(){
		$('contImg').setStyles({
			height: $('imagenCambiar').getStyle('height'),
			overflow: 'hidden'
		});
		$('contImg').effect('opacity', {duration: 300, transition:Fx.Transitions.linear, onComplete: function(){this.cambiaFoto();}.bind(this)}).start(0);
	},
	
	cambiaFoto:function(){
		var nuevaFoto = new Asset.image(this.rutaFoto, {id: 'imagenCambiar', alt:'Foto', onload: function(){this.cargarImg(); }.bind(this) });
		$('imagenCambiar').replaceWith(nuevaFoto);
		$('galeriaFinca').setStyle('background', 'url(images/loading.gif) no-repeat 50% 50%');
	},
	
	cargarImg: function(){
		$('contImg').effect('height', {duration: 300, transition:Fx.Transitions.linear, onComplete: function(){
			$('contImg').effect('opacity', {duration: 200, transition:Fx.Transitions.linear}).start(1);
			$('galeriaFinca').setStyle('background', 'none');
			if($$('.botonAtras')!="") $$('.botonAtras').setStyle('height', $('imagenCambiar').getStyle('height'));
			if($$('.botonAdelante')!="") $$('.botonAdelante').setStyle('height', $('imagenCambiar').getStyle('height'));
		}.bind(this)
		}).start($('imagenCambiar').getStyle('height'));
	}
	
});

var Main = new Class({
	
	start: function(){
		this.botonManager = new ButtonManager();
		this.enlaces = $$('.thumb li');		
		this.creaSlider();
		this.creaBotones();
		this.creaPaginador();
	},
	
	creaBotones: function(){
		this.enlaces.each(function(lista, i){
			if(i!=this.enlaces.length-1) lista.setStyle('margin-right', 10);
			var button = new Button(lista);
			this.botonManager.addButton(button);
			button.init(this);
		}.bind(this));
	},
	
	onClick: function(buttonClicked){
		this.botonManager.activate(buttonClicked);
	},
	
	creaPaginador: function(){
		var atras = new Element('a', {
			 'styles':{
			 	'height': $('imagenCambiar').getStyle('height')
			 },
			 'events':{
			 	'click': function(e){
					e = new Event(e).stop();
				   this.botonManager.cargaAnt();
					this.mueveScoller();
				}.bind(this)
			 },
			 'class': 'botonAtras',
			 'title': 'ver imagen anterior',
    		 'href': '#'
		}).injectInside($('contImg'));
		
		var adelante = new Element('a', {
			'styles': {
			 	'height': $('imagenCambiar').getStyle('height')
			 },
			 'events':{
			 	'click': function(e){
					e = new Event(e).stop();
				 	this.botonManager.cargaSig();
					this.mueveScoller();
				}.bind(this)
			 },
			 'class': 'botonAdelante',
			 'title': 'ver imagen siguiente',
    		 'href': '#'
		}).injectInside($('contImg'));
		
	},
	
	mueveScoller:function(){
		var pos = this.botonManager.returnIzq();
		this.elementscoller.scrollTo(pos, 0);
	},
	
	creaSlider: function(){
		$$('.thumb').setStyle('width', this.enlaces.length*132-10);
	
		this.scoller = new Scroller($('intmin'), {area: 200, velocity: 0.2});
		$('intmin').addEvent('mouseover', function(){ this.scoller.start();}.bind(this));
		$('intmin').addEvent('mouseout', function(){ this.scoller.stop();}.bind(this));
	
		this.elementscoller = new Fx.Scroll($('intmin'), {
			duration: 400,
			onStart: this.scoller.stop.bind(this.scoller),
			onComplete: this.scoller.start.bind(this.scoller)
		});

	}

});


function init(){
	var sitio = new Main().start();
}

window.addEvent('domready', init);