// JavaScript Document

var light_box = new Class
({
	Implements:[Options,Events],
	instances: 0,
	//elementos:
	options:{//set all the options here
		lightBoxOpacity:0.7,
		heightContent: 400,
		widthContent: 400,
		borderColorContainer:'#000000',
		transition: 'bounce:out',
		totalPag: 0,
		tema:''
	},
	
	initialize: function (options){
		this.options.container = $(document.body);
		this.setOptions(options);
	},
	
	abrirLightBox: function(_contenido, titulo){
		light_box.instances++;
		titulo = titulo || '';
		this.contenido = _contenido;
		
		this.overlay = new Element('div', { 'id': light_box.instances+'light_box', 'class': 'light_box'});
		this.overlay.addClass(this.options.tema+'_light_box');
		this.overlay.inject(document.body,'top');
		this.overlay.addEvents({
			'click': this.cerrarLight.bindWithEvent(this)
		});
		this.overlay.setStyles({ 'top': 0,'height':$(window).getScrollSize().y});
		
		var morph = $(this.overlay).get('morph', {duration: 200});
		$(this.overlay).setStyle('opacity', 0 );
		this.div_container = new Element('div', { 'id': light_box.instances+'div_container', 'class': this.options.tema+'_container'});
		this.div_contenido = new Element('div', { 'id': light_box.instances+'div_contenido', 'class': this.options.tema+'_contenido'});
		this.div_titulo = new Element('div', { 'id': light_box.instances+'div_titulo', 'class': this.options.tema+'_titulo'});
		this.btn_cerrar = new Element('div', { 'id': light_box.instances+'btn_cerrar', 'class': this.options.tema+'_btn_cerrar'});
		
		this.div_titulo.inject(this.div_container);
		this.btn_cerrar.inject(this.div_container);
		this.div_contenido.inject(this.div_container);
		if (titulo != '')
			this.div_titulo.set('html', '<span>'+titulo+'</span>');
		
		this.btn_cerrar.addEvents({
			'click': this.cerrarLight.bindWithEvent(this)//
		});
		
		morph.start({'opacity': this.options.lightBoxOpacity}).chain(this.injectar_contenido.bindWithEvent(this));
	},
	
	cerrarLight: function(){
		light_box.instances--;
		var opacity_init = this.options.lightBoxOpacity;
		var elements = this.destruirElements;
		var object = this;
		var cont = this.div_container;
	   	var over = this.overlay;
		var morph = this.div_container.get('morph', {duration: 500});
		var morph2 = $(this.overlay).get('morph', {duration: 200});
		morph.start({'opacity': [1,0]}).chain(function(){morph2.start({'opacity': [opacity_init,0]}).chain(function (){cont.dispose();over.dispose();});});
	},
	
	injectar_contenido: function(e){
		this.div_container.setStyle('opacity', 0);
		var morph = this.div_container.get('morph', {duration: 500});
		this.div_contenido.set('html', this.contenido);
		this.div_container.inject(this.options.container, 'top');
		this.centrado_inicial();
		morph.start({'opacity': [0,1]});
		window.addEvent('scroll', this.centrar_contenido.bindWithEvent(this));
		window.addEvent('resize', this.centrar_contenido.bindWithEvent(this));
		
	},
	
	centrado_inicial: function(){
		$(this.overlay).setStyles({ 'top': 0,'height':$(window).getScrollSize().y});
		var scroll_pos = $(window).getScroll().y;
		var area_visible = $(window).getSize().y;
		
		var top = scroll_pos+((area_visible - this.div_container.getSize().y)/2);
		var left = ($(window).getSize().x - this.div_container.getSize().x)/2;
		
		this.div_container.setStyle('top', top);
		this.div_container.setStyle('left', left);
	},
	
	centrar_contenido: function(){
		$(this.overlay).setStyles({ 'top': 0,'height':$(window).getScrollSize().y});
		var scroll_pos = $(window).getScroll().y;
		var area_visible = $(window).getSize().y;
		
		var top = scroll_pos+((area_visible - this.div_container.getSize().y)/2);
		var left = ($(window).getSize().x - this.div_container.getSize().x)/2;
		
		var morph = this.div_container.get('morph', {duration: 500});
		morph.start({'top': top, 'left': left});
	}
});
light_box.instances = 0;