/*  Modal JavaScript (use Prototype 1.6.x ), version 0.1
 *--------------------------------------------------------------------------*/

if (!Prototype) throw('Need prototype...'); else
if (parseFloat(Prototype.Version.substr(0,3)) < 1.6) throw('Wrong version of prototype...');

var Modal = Class.create();

/**
 * Modal default configuration
 *
 * Allow Fade
 */
var FADE_ENABLE = true;

/*
 * Fade opacity 
 */
var FADE_OPACITY = 0.8;

/*
 * Fade color
 */
var FADE_COLOR = '#333';

/*
 * Modal initial z-index
 */
var MODAL_ZINDEX = 100;

/*
 * Modal align in middle of window height
 */
var MODAL_MIDDLE = false;

/*
 * Global Variables
 */
Modal.fade = undefined;

var body = $(document.body)
var documentElement = document.documentElement;

/**
 * Modal Prototype
 */
Object.extend(Modal.prototype, {
	/**
	 * Constructor
	 */
	initialize: function(file, dimensions, zIndex) {
		if (!file) return false;
		if (!dimensions) return false;
		if (!dimensions.width) return false;
		if (!dimensions.height) return false;

		this.modal = new Element('div');
		this.content = new Element('div');

		this.width = parseInt(dimensions.width);
		this.height = parseInt(dimensions.height);

		if (FADE_ENABLE) Modal.createFade();

		this.modal.setStyle({background: 'transparent', position: 'absolute', top: '0', left: '0', zIndex: MODAL_ZINDEX + 1});
		this.content.setStyle(dimensions);
		this.setModalDimension();

		body.insert({ top: this.modal });
		this.modal.insert({ top: this.content });

		if (file == 'loading')
			this.createLoader(dimensions);
		else
			this.createIframe(file, dimensions);

		Event.observe(window, 'resize', (function(){
			this.setModalDimension();
		}).bind(this));

		if (MODAL_MIDDLE)
			Event.observe(window, 'scroll', (function(){
				this.setPosition();
			}).bind(this));
	},
	
	setPosition: function() {
		var dimensions = getDimensions();
		var scrolls = getPageScroll();

		var top = scrolls.top + 10;
		var diferenca = top + this.height - dimensions.pageHeight;

		if (diferenca > 0)
			top -= diferenca;

		this.content.setStyle({margin: top + 'px auto 0', top: '0'});
	},
	
	setModalDimension: function() {
		var dimensions = getDimensions();
		this.modal.setStyle({
			width: '100%',
			height: dimensions.pageHeight+'px'
		});
		this.setPosition();
	},
	
	close: function() {
		this.modal.remove();
		Modal.removeMask();
	},

	createIframe: function(file, dimensions) {
		if (this.loader)
			this.loader.hide();

		this.iframe = new Element('iframe', {frameBorder: '0', scrolling: 'no', marginWidth: '0', marginHeight:'0', src: file, id: '_iframe', name: '_iframe', allowTransparency: 'true'});
		this.iframe.setStyle({background: 'transparent', border: '0'});
		this.iframe.setStyle(dimensions);
		this.content.insert({ top: this.iframe });
	},

	createLoader: function(dimensions) {
		this.loader = new Element('div');
		this.loader.setStyle({background: 'transparent'});
		this.loader.setStyle(dimensions);
		this.loader.setStyle({border: '0'});
		this.loaderImage = new Element('img', {src: 'media/images/loader.gif'})
		this.content.insert({ top: this.loader });
		this.loader.insert({top: this.loaderImage});
	},
	
	setIframeModal: function(file, dimensions) {
		if (!file) return false;

		this.width = parseInt(dimensions.width);
		this.height = parseInt(dimensions.height);

		if (!this.iframe)
			this.createIframe(file, dimensions);
		else
			this.iframe.src = file;

		this.content.setStyle(dimensions);
		this.iframe.setStyle(dimensions);
		this.setModalDimension();
	}

});

/**
 * Modal Functions
 */
Object.extend(Modal, {
	createFade: function() {
		if (!FADE_ENABLE) return false;
		
		if (!this.fade) {
			this.fade = new Element('div');
			this.fade.setStyle({opacity: FADE_OPACITY, backgroundColor: FADE_COLOR, position: 'absolute', top: '0', left: '0', zIndex: MODAL_ZINDEX});

			body.insert({ top: this.fade });

			window.onresize = (function(){
				this.setMaskDimension();
			}).bind(this);
		}

		Modal.hideSelects();
		this.setMaskDimension();
	},
	
	removeMask: function() {
		if (!this.fade) return false;
		this.fade.remove();
		this.fade = undefined;
		Modal.showSelects();
	},
	
	setMaskDimension: function() {
		if (!this.fade) return false;

		var dimensions = getDimensions();
		this.fade.setStyle({
			width: '100%',
			height: dimensions.pageHeight+'px'
		});
	},

	showSelects: function() {
		$$('select').invoke('setStyle',{visibility:'visible'});
	},

	hideSelects: function() {
		$$('select').invoke('setStyle',{visibility:'hidden'});
	}
});