/*
**	Simple modal lightBox Javascript class
**
**	(c) 2011 Mikoon Webservices
*/

/*
**	Usage:
**
**	mybox = new lBox('html content', {options});
**	mybox.open();
*/

var lBox = new Class({
	
	Implements: Options,
	
	options: {
		prefix:	'lbox',			//	dom element id prefix
		opacity: 0.75,			//	overlay opacity
		bgcolor: '#EEEEED',		//	overlay bgcolor
		duration: 500,			//	transition duration (overlay & container)
		delay: 500,				//	delay between overlay and container transition
		autoopen: true			//	auto open lightbox after initialization
    },
	
	markup: '',
	
	initialize: function(in_content, options){
		
		//	set options
		this.setOptions(options);
		
		//	set markup
		this.markup = '<div id="'+this.options.prefix+'-overlay" class="lbox-overlay"></div><div id="'+this.options.prefix+'-wrapper" class="lbox-wrapper"><div id="'+this.options.prefix+'-container" class="lbox-container"></div></div>';
		
		//	append markup to body
		this.append(document.body, this.markup);
		
		//	set container & element styles
		$(this.options.prefix+'-overlay').setStyles({'opacity': 0, 'display': 'block', 'background-color': this.options.bgcolor});
		$(this.options.prefix+'-wrapper').setStyles({'opacity': 0, 'display': 'block'});
		
		//	set content
		if(in_content) this.set_content(in_content);
		
		//	setup
		this.setup();
	},
	
	append: function(el, html){
        if(el.insertAdjacentHTML){
            el.insertAdjacentHTML('BeforeEnd', html);
        } else if(el.lastChild){
            var range = el.ownerDocument.createRange();
            range.setStartAfter(el.lastChild);
            var frag = range.createContextualFragment(html);
            el.appendChild(frag);
        } else {
            el.innerHTML = html;
        }
    },
	
	setup: function(){
		//	check for auto open
		if(this.options.autoopen) this.open();
	},
	
	set_content: function(in_content){
		$(this.options.prefix+'-container').set('html', in_content);
	},
	
	open: function(){
		var options = this.options;
		
		if($(options.prefix+'-overlay').fx) $(options.prefix+'-overlay').fx.cancel();
		$(options.prefix+'-overlay').fx = new Fx.Tween($(options.prefix+'-overlay'), {duration: options.duration}).start('opacity', $(options.prefix+'-overlay').getStyle('opacity'), options.opacity);
		
		(function(){ 
			if($(options.prefix+'-wrapper').fx) $(options.prefix+'-wrapper').fx.cancel();
			$(options.prefix+'-wrapper').fx = new Fx.Tween($(options.prefix+'-wrapper'), {duration: options.duration}).start('opacity', $(options.prefix+'-wrapper').getStyle('opacity'), 1); 
		}).delay(options.delay);
	},
	
	close: function(){
		var options = this.options;
		if($('lbox-overlay').fx) $('lbox-overlay').fx.cancel();
		if($('lbox-wrapper').fx) $('lbox-wrapper').fx.cancel();
		$('lbox-overlay').fx = new Fx.Tween($('lbox-overlay'), {duration: options.duration}).start('opacity', $('lbox-overlay').getStyle('opacity'), 0);
		$('lbox-wrapper').fx = new Fx.Tween($('lbox-wrapper'), {duration: options.duration, onComplete: function(){ $('lbox-wrapper').dispose(); $('lbox-overlay').dispose(); }}).start('opacity', $('lbox-wrapper').getStyle('opacity'), 0); 
	}
	
});