// Classe box
function Box(title,content,$vars){
	
	var _this 	= this;
	
	_this.cont 						= document.createElement('DIV');
	_this.box_nav 					= document.createElement('DIV');
	_this.box_title					= document.createElement('DIV');
	_this.box_close 				= document.createElement('DIV');
	_this.box_toggle 				= document.createElement('DIV');
	_this.box_content 				= document.createElement('DIV');
	_this.cont.className			= 'boxCont';
	_this.box_nav.className 		= 'boxNav';
	_this.box_close.className 		= 'boxClose';
	_this.box_toggle.className 		= 'boxToggleUp';
	_this.box_content.className 	= 'boxContent';
	_this.box_title.className 		= 'boxTitle';
	_this.box_title.innerHTML 		= title;	
	_this.cont.						appendChild(_this.box_nav);
	_this.cont.						appendChild(_this.box_content);
	_this.box_nav.					appendChild(_this.box_title);
	_this.box_nav.					appendChild(_this.box_close);
	
	
	
	if($vars){
		
		for(var a in $vars){

			_this[a] = $vars[a];	
			
		}
		
	}
	
	if(_this['toggle'] === true){
		
		_this.box_nav.appendChild(_this.box_toggle);	
		
	}
	

	
	_this.center = function(){
		
		var w = _this.cont.offsetWidth;
		var h = _this.cont.offsetHeight;
		var x= screen_width/2-w/2;
		var y= screen_height/2-h/2+scroll_top;
		_this.cont.style.left = Math.round(x)+'px';
		_this.cont.style.top = Math.round(y)+'px';
	
	}	
		
	
	_this.position = function(x,y){

		_this.cont.style.left 	= x+'px';
		_this.cont.style.top 	= y+'px';
	
	}
	
	
	_this.setContent = function(content){
				
		var loadContent = new AjaxCall('system/box/getBoxContent',['content='+content],_this.printContent,false,false);
	
	}
	
	_this.setAjaxContent = function(content){
		
		var loadContent = new AjaxCall('system/box/getBoxContent',['content='+content],_this.printContent,false,false);
	
	}
	
	_this.printContent = function(html){
		
		_this.box_content.innerHTML = html;	
		if(_this['width'] == null){
			 width = _this.box_content.offsetWidth;
		}	else{
			width = _this['width'];
		}
		
		if(_this['autoResize'] && _this['autoResize'] === true){
				var new_width =  Math.max(160,Math.round(width));
				_this.cont.style.width = new_width +10 +'px';
				_this.box_nav.style.width = new_width  +'px';
		
		}

	
		if(_this['centerBox'] && _this['centerBox'] === true){
			
			_this.center();
		}
		
		if(_this['callback']){

			_this["callback"].apply(this);	
			
		}
	
	}
		
	
	_this.boxClose = function(e){
		
		cancelEvent(e);
		_this.destroy();
		
	
	}
	
	
	_this.boxToggle = function(){
		
		if(_this.box_toggle.className 	== 'boxToggleDown'){
		
			_this.box_toggle.className 		= 'boxToggleUp';

			_this.cont 						.style.paddingBottom 	= '5px';
			_this.box_nav 					.style.paddingBottom 	= '5px';
			_this.box_content 				.style.padding 			= '5px';
			
			var arr_content = _this.cont.getElementsByTagName('div');
			
				for(i=0;i<arr_content.length;i++){
					
					var div = arr_content[i];
						
					if(div != this.box_nav && div.parentNode.className != this.box_nav){
						div.style.display = 'block';
						
					}
				
				}
		
		}	else{
		
			_this.box_toggle.className 		= 'boxToggleDown';
			
			_this.cont 						.style.paddingBottom 	= '0px';
			_this.box_nav 					.style.paddingBottom 	= '0px';
			_this.box_content 				.style.padding 			= '0px';
			
			var arr_content = _this.cont.getElementsByTagName('div');
			
			for(i=0;i<arr_content.length;i++){
					
					var div = arr_content[i];
					
					if(div != this.box_nav && div.parentNode != this.box_nav){
						div.style.display = 'none';
					}
				
				}

		}
		
	
	}
		
	_this.destroy = function(){
		
		removeDom(_this.cont);
		
		if(_this.modal){
			_this.modal.destroy();	
		}
		
		if(_this['closeCallback']){

			_this["closeCallback"].apply(this);	
			
		}
		
	}
	
	addEvent(_this.box_close,	'mousedown',	_this.boxClose);
	addEvent(_this.box_toggle,	'mousedown',	function(){ 	_this.boxToggle(); 	});
	
		
	if(content != ''){
		
		_this.printContent(content);
		
	}
	
	document.body.appendChild(_this.cont);
}