//var altoIconos;

function inicia(){
	if($('iconos')){
		var sitio = new Main().start();
	}
	paginacion();
//	altoIconos = $('iconos').getStyle('height');
};

function paginacion(){
	if($('prev')){
		$('prev').addEvent('click', function(e){
			e = new Event(e);e.stop();							 
			pagPrev();
		});
	}
	if($('next')){
		$('next').addEvent('click', function(e){
			e = new Event(e);e.stop();							 
			pagNext();
		});			
	}
}

function pagPrev(){
	var ruta = $('prev').getProperty('href');
	$('miniaturas').effect('opacity', {duration: 300, onComplete: function(){sacarMiniaturas(ruta.split('?')[1])}}).start(1,0);	
}
function pagNext(){
	var ruta = $('next').getProperty('href');
	$('miniaturas').effect('opacity', {duration: 300, onComplete: function(){sacarMiniaturas(ruta.split('?')[1])}}).start(1,0);	
}
function sacarMiniaturas(ruta, alto){
	var newAjax = new Ajax('paginacion.php', {
			data: ruta,
	    	method: 'get',
			asynchronous:false,
	   		onComplete: onCambiarMinis,
			update: $('miniaturas')
	  });
	newAjax.request();
}

function onCambiarMinis(responseText) {
	//$('miniaturas').setHTML(responseText);
	var sitio = new Main().start();
	$('miniaturas').effect('opacity', {duration: 300}).start(0,1);
	//$('iconos').setStyle('height', altoIconos);
}


/* -----------------------------------------------------------------------------
--------------------------------------------------------------------------------
----------------------------------------------------------------------------- */ 
var ButtonManager = new Class({
	
	initialize: function() {
		this.aButtons = new Array();
	},
	
	addButton: function(button){
		this.aButtons.push(button);
	},
	
	colocaMinis: function(){
		altoMinis = 0;
		anchoMinis = 8;
		this.aButtons.each(function(el, i){ 
			if(i%4==0 && i!=0){	
				altoMinis += 54;
				anchoMinis = 8;
			}else if(i!=0){
				anchoMinis += 54;
			}
			//coloco las minis
			el.boton.setStyle('left', anchoMinis);
			el.boton.setStyle('top', altoMinis);
			el.left = anchoMinis;
			el.top = altoMinis;
		});
		$('iconos').setStyle('height',altoMinis);
	}
	
});

var Button = new Class({

	initialize: function(elm) {
		this.boton			= elm;
		this.rutaFoto		= elm.getFirst();
		this.descripcion	= elm.getFirst().getFirst().getProperty('alt');
		
		this.left 			= 0;
		this.top 			= 0;
		this.boton.setStyle('opacity', 0.5);
		this.boton.setStyle('position', 'absolute');

		//eventos
		this.boton.addEvent('click', this.onClick.bind(this));
		this.boton.addEvent('mouseover', this.onMouseOver.bind(this));
		this.boton.addEvent('mouseout', this.onMouseOut.bind(this));
		
		this.myEffects = new Fx.Styles(this.boton, {duration: 200,wait:false , transition: Fx.Transitions.linear});
	},
	
	onClick: function (e){	
		e = new Event(e).stop(); //deshabilito el href del enlace
		this.initFoto();
	},
	
	onMouseOver: function (){	
		this.myEffects.start({'opacity': [1],'height': [60],'width': [60],'left': [this.left-10],'top': [this.top-10]});
	},
	
	onMouseOut: function (){	
		this.myEffects.start({'opacity': [0.5],'height': [40],'width': [40],'left': [this.left],'top': [this.top]});
	},
	
	initFoto: function(){
		$('contFoto').setStyles({
			height: $('contFoto').getStyle('height'),
			overflow: 'hidden'
		});
		$('imagenCambiar').effect('opacity', {duration: 300, transition:Fx.Transitions.linear, onComplete: function(){this.cambiaFoto();}.bind(this)}).start(0);
		$('descripcion').setHTML(' ');
		$('contFoto').setStyle('background', 'url(images/load.gif) no-repeat 50% 50%');
	},
	
	cambiaFoto:function(){
		var nuevaFoto = new Asset.image(this.rutaFoto, {id: 'imagenCambiar', alt:'Foto', onload: function(){this.cargarImg(); }.bind(this) });
		$('imagenCambiar').replaceWith(nuevaFoto);
		$('imagenCambiar').setStyle('opacity', 0);
	},
	
	cargarImg: function(){
		var myEffectsCargada = new Fx.Styles($('contFoto'), {duration: 300, transition: Fx.Transitions.linear, onComplete: function(){
			$('contFoto').setStyle('background', 'none');
			$('imagenCambiar').effect('opacity', {duration: 200, transition:Fx.Transitions.linear}).start(1);
			$('descripcion').setText(this.descripcion);
			$('descripcion').setStyle('text-align', 'right');
			
		}.bind(this)
		});
		
		myEffectsCargada.start({'height': [$('imagenCambiar').getStyle('height')], 'width': [$('imagenCambiar').getStyle('width')]});
		
		$('derecha').effect('width', {duration: 300, transition:Fx.Transitions.linear}).start($('imagenCambiar').getStyle('width'));
	}
	
});

var Main = new Class({
	
	start: function(){
		this.botonManager = new ButtonManager();
		this.enlaces = $$('#iconos li');	
		this.creaBotones();
		this.botonManager.colocaMinis();
	},
	
	creaBotones: function(){
		this.enlaces.each(function(lista, i){
			var button = new Button(lista);
			this.botonManager.addButton(button);
		}.bind(this));
	}
});

window.addEvent('domready', inicia);