var ModalBox = new Class({
	options : {
		width : '750',
		height : '550'
		
	}, 
	
	initialize : function()
	{
		this.overlay = $('mb_overlay').setStyle('opacity', '0.5)');
		
		this.box = $('mb_box');
		this.header =  $('mb_header');
		this.content = $('mb_content');
		this.title = $('mb_header_title');
		this.icon = $('mb_header_icon');

		this.btnClose = $('mb_btn_close')
		this.btnClose.addEvent('click', function() { this.close(); }.bind(this));
													
	},
	
	open : function(ajax, options)
	{
		this.setOptions(options);
		this.setup(true);
		this.setSize();
		this.setPosition();
		this.reset();
		
		if(this.options.icon)
			new Element('img').setProperty('src', this.options.icon).injectInside(this.icon);
		this.title.setHTML(this.options.title);
		this.overlay.setStyle('display', 'block');
		this.box.setStyle('display', 'block');
		
		if(ajax)
		{
			this.content.addClass('ajax_loading');
			ajax.options.update = this.content;
			ajax.addEvent('onComplete',  function() { this.content.removeClass('ajax_loading'); }.bind(this));
			ajax.request();
		}
		
	},
	
	display : function(contents, options)
	{
		this.setOptions(options);
		this.setup(true);
		this.setSize();
		this.setPosition();
		this.reset();
		
		if(this.options.icon)
			new Element('img').setProperty('src', this.options.icon).injectInside(this.icon);
		this.title.setHTML(this.options.title);
		this.overlay.setStyle('display', 'block');
		this.box.setStyle('display', 'block');
		
		this.content.setHTML(contents);
	},
	
	
	setup: function(open) 
	{
		var elements = $A($$('object'));
		elements.extend($$(window.ActiveXObject ? 'select' : 'embed'));
		elements.each(function(el){ el.style.visibility = open ? 'hidden' : ''; });
		var fn = open ? 'addEvent' : 'removeEvent';
		window[fn]('resize', this.setPosition.bind(this));
		window[fn]('resize', this.setSize.bind(this, null, null));
		
	// fixed avec position: fixed!
	//	$E('html').setStyle('overflow', open ? 'hidden' : 'auto');
	},
	
	setSize : function(size)
	{
		if(!size || !size.width)
			size = {'width' : this.options.width, 'height' : this.options.height};
			 			
		size.width = Math.min(size.width, window.getWidth());
		size.height = Math.min(size.height, window.getHeight());
		this.options = size;
	
	
		this.box.setStyles({'width' : size.width + 'px',
							'height' : size.height + 'px'});
		[$('mb_box_left'), $('mb_box_right')].each(function(el) { el.setStyles({'top' : '30px', 'height' : (size.height - 32) + 'px'}) });
		this.content.setStyles({'height': (size.height - 48) + 'px', 'width' : (size.width - 20) + 'px'});
	},
	
	setPosition : function()
	{
		var pos = {};
		pos.y = Math.max(0, (window.getHeight() / 2 - this.options.height / 2));
		pos.x = Math.max(0, (window.getWidth() / 2 - this.options.width / 2));

		this.overlay.setStyles({'top' : '0px', 'height' : window.getHeight() + 'px'});
		
		this.box.setStyles({'top' : pos.y + 'px',
							'left' :  pos.x + 'px'});

	},
 	
	reset : function()
	{
		this.icon.empty();
		this.content.empty();
		this.title.empty();	
	},
	
	close : function()
	{
		this.overlay.setStyle('display', 'none');
		this.box.setStyle('display', 'none');
		this.setup(false);
	}
	
});

ModalBox.implement(new Options);
var modal_box = null;
window.onDomReady(function() { modal_box = new ModalBox(); });