/*****************************************************************************************
@Author: Ricard Catalan Díaz (katan)
@Version: 0.5.2
@License: GNU
@description: Modalbox class for use on others class using extends. Created for mootools 1.2.3 or higger
*****************************************************************************************/
var Moodalbox = new Class({
	// Default options
	option: {
		title: '',
		duration: 400,
		lang: 'en',
		width: 300,
		height: 100,
		style: 'classic',
		type: 'center',
		lockable: false
	},
	// Construct method
	initialize: function(width, height, style, type){
		// Check params recibed to change it
		if( typeof(width) != undefined && typeof(width) === 'number' ) this.option.width = width;
		if( typeof(height) != undefined && typeof(height) === 'number' ) this.option.height = height;
		if( typeof(style) != undefined  && typeof(style) === 'string' ) this.option.style = style;
		if( typeof(type) != undefined && typeof(type) === 'string' ) this.option.type = type;
	},
	/**
	* @params: Object
	*/
	position: function(modaldiv){
		this.navSize = window.getSize();
		this.left = (this.navSize.x - this.option.width)/2;
		switch(this.option.type){
			case 'center': 
				this.top = (this.navSize.y - this.option.height-70)/2;
				modaldiv.setStyles({
					'top': this.top,
					'left': this.left
				});
				break;
			default: modaldiv.setStyles({ 'left': this.left });
		}
	},
	actions: function(){
		//check the lockable option
		if(!this.option.lockable){
			// AddEvent to close modalbox on click outside the window
			document.id('modalbox').addEvent('click', function(){
				if( document.id('mboxCenter') ){ //Check
					this.fadeOut();
				}
			}.bind(this));
			//AddEvent to close modalbox on click the "X" image.
			document.id('closeMbox').addEvent('click', function(e){
				e.stop();
				if( document.id('mboxCenter') ){
					this.fadeOut();
				}
			}.bind(this));
		}
	},
	fadeIn: function(){
		document.id('modalbox').fade('hide');
		document.id('mboxc').fade('hide');
		document.id('modalbox').fade(0.5);
		this.mboxFx = new Fx.Tween(document.id('mboxc'), { duration:this.option.duration  });
		this.mboxFx.start('height', '0px', (this.option.height)+25+'px').chain(function(){ this.start('opacity', 0, 1); });
	},
	fadeOut: function(){
		this.delBox = function(){
			// Check if
			if( document.id('mboxCenter') && document.id('mboxCenter') ){
				document.id('mboxCenter').destroy();
				document.id('modalbox').destroy();
			}
		};
		document.id('modalbox').fade('out');
		this.mboxFx = new Fx.Tween(document.id('mboxc'), { duration:this.option.duration  });
		this.mboxFx.start('height',  ((this.option.height)+50)+'px', '0px' );
		this.delBox.delay(this.option.duration-100);
	},
	createModal: function(){
		this.modalHeader = new Element('div', { 'id': 'mboxHeader' });
		//Make title
		this.modalTitle = new Element('div', { 'id': 'mboxTitle','html': this.option.title, 'style': 'width:'+((this.option.width)-40)+'px;'});
		//Make Close image
		this.modalClose = new Element('div', {'id': 'mboxClose'});
		this.modalClose_btn = new Element('a', {'id': 'closeMbox','href': '#','html': 'x'});
		//Make a content DIV for Modalbox
		this.modaldiv = new Element('div', {'id': 'mboxCenter','title': this.option.title, 'style': 'width:'+this.option.width+'px;' });
		this.modalContent = new Element('div', { 'id': 'mboxc'});
		// InjectTop
		this.modalClose_btn.injectTop(this.modalClose);
		this.modalClose.injectTop(this.modalHeader);
		this.modalTitle.injectTop(this.modalHeader );
		this.modalContent.injectTop(this.modaldiv );
		this.modalHeader.injectTop(this.modaldiv );
		return this.modaldiv;
	},
	/**
	* Create a modal box window
	*/
	initModal: function(){
		modaldiv = this.createModal();
		//Listener position
		this.position(this.modaldiv); // Call position to center
		window.addEvent('resize', function(){
			this.position(this.modaldiv); // Call position to center
		}.bind(this));
		// Insert DIV with gray background
		modaldiv.injectTop( document.body ); // InjectTop in a body tag
		this.modalop = new Element('div', { 'id': 'modalbox' });
		this.modalop.injectTop( document.body ); // InjectTop in a body tag
		//After injectTop, start a fadeIn to show effect
		this.fadeIn();
		this.actions(); //Call to actions
		el = modaldiv.getChildren();
		return el[1]; //return the DIV element
	}
});