// mooMessageBox
// a simple messageBox Class for mootools 1.1
// infos and help: admin@artviper.net
// visit us for more widgets and tools at www.artviper.net or www.artviper.net/en/
// This code is free, if you intend to use it in a commercial project please contact us prior doing so
// Thanks :)



// constructor function
function msgBox(title,message,width,height,type,speed){
	this.title = title;
	this.message = message;
	this.width = width;
	this.height= height;
	this.type = type;
	this.speed = speed;
	this.buttonClicked = "";
	this.createBox = createBox;	
	this.createBox();
};



function createBox(){
	
	if(this.type < 1 && this.type > 2){
	 	this.type = 1;
	}
	
	if(this.type == 1){
		
		var btnWidth = 80;
		var btnPos = (this.width - btnWidth)/2;
		
		
		var btn1 = new Element('button', {
		   'styles':{
		    	'margin':'15px auto 0 auto',
				'clear':'both'
			}
		 });		
		 
		btn1.value = "Ok";
		btn1.innerHTML = "Ok";
		
		btn1.addEvent('click',function(){
			container.effect('opacity', { duration: 300, wait:true, transition:Fx.Transitions.linear }).chain(function(){
				container.remove();
			}).start(1,0);
			this.buttonClicked = "true";
			visible=false;
			return true;
		})
		
		
		
	}
	
	if(this.type == 2){
		var btn1 = new Element('button', {
		   'styles':{
		    	'margin':'15px auto 0 auto'
				
			}
		 });		
		var btn2 = new Element('button', {
		   'styles':{
		    	'margin':'15px auto 0 auto'
				
			}
		 });		
		 
		btn1.addEvent('click',function(){
			container.effect('opacity', { duration: 300, wait:true, transition:Fx.Transitions.linear }).chain(function(){
				container.remove();
			}).start(1,0);
			this.buttonClicked = "true";
			return true;
		})
		
		btn2.addEvent('click',function(){
			container.effect('opacity', { duration: 300, wait:true, transition:Fx.Transitions.linear }).chain(function(){
				container.remove();
			}).start(1,0);
			this.buttonClicked = "false";
			return false;
		})
		
		btn1.value = "Ok";
		btn1.innerHTML = "Ok!";
		btn2.value = "Cancel";
		btn2.innerHTML = "No!";
	}
	
	var wwidth = "";
	if(window.ie){
			wwidth = document.body.clientWidth.toInt();
	}else{
			wwidth =  window.innerWidth.toInt();
		}
		
	wwidth = (wwidth-this.width)/2;
	
	// Add the title line	
	var LineWidth = this.width - 10;
	var titleLine = new Element('div', {
		'styles': {
			'width': LineWidth,
			'height':'18px',
			'padding':'3px 5px',
			'line-height':'18px',
			'background-image':'url(images/bg.jpg)',
			'color':'#323232',
			'font-size':'11px',
			'font-weight':'bold'
			
		}
	});
	// Add the container messageBox
	var	container = new Element('div',{
		'styles': {
			'cursor':'pointer',
			'width':this.width,
			'height':'auto',
			'display':'block',
			'position':'absolute',
			'background-color':'#FFF',
			//'opacity':'0.9',
			'margin-bottom':'15px',
			'padding-bottom':'20px',
			'left': wwidth,
			'top': '300px',
			'z-index' : '99'
		}
	})
	// Add the message in the inside container
	var innerContent = new Element('div',{
		'styles': {
				'padding':'10px'
		}
	});
	
	
	// Add the close button top right
	var closeBtn = new Element('img',{		
		'styles':{
			'position':'absolute',
			'right':0,
			'top':0,
			'width':'24px',
			'height':'24px'
		}
	});
	
	closeBtn.addEvent('click',function(){
		container.remove();
		return true;
	})
	 
	// Add a div for the buttons so we can place them centered
	var btnDivWidth = (this.width-(this.width/2))/2;
	var btnDiv = new Element('div',{
		'styles':{
			//'width':this.width,
			'height':'auto',
			'margin-right':'auto',
			'margin-left':'auto',			
			'display':'block',
			'clear':'both',
			'position':'absolute',
			'bottom':'10px',
			//'left':btnDivWidth
			'right' : '10px'
		}
	});
	
	// add round corners to the container
	var rC = new Element('img',{
	'styles':{
		'position':'absolute',
		'right':0,
		'bottom':0
	}
	})
	rC.src = "images/btn_right.gif";
	
	var lC = new Element('img',{
	'styles':{
		'position':'absolute',
		'left':0,
		'bottom':0
	}
	})
	lC.src = "images/btn_left.gif";
	
	
	closeBtn.src = "images/closebtn.jpg";
	innerContent.innerHTML = this.message;
	titleLine.innerHTML = this.title;
	container.injectInside(document.body);
	//closeBtn.injectInside(titleLine);
	titleLine.injectInside(container);
	btnDiv.injectInside(innerContent);
	rC.injectInside(container);
	lC.injectInside(container);
	container.effect('height', { duration: this.speed, wait:true, transition:Fx.Transitions.linear }).chain(function(){
	innerContent.injectInside(container); }).start(0,this.height);
	
	if(this.type == 1){
		btn1.injectInside(btnDiv);
	}else{
		btn1.injectInside(btnDiv);
		btn2.injectInside(btnDiv);
	}	
	
	
}