function jBox(width,height) {
	
	this.width = width ;
	this.height = height ;
	
	this.overlay = new Element("div",{'class':'overlay'}) ;
	
	this.box  = new Element("div",{'id': 'jBox',
							 'class': 'cadre_l',
							 'opacity':0,
							 'styles': {
									'display': 'block',
									'top': '0',
									'left':'0',
									'position':'absolute',
									'backgroundColor': "white",
									'fontFamily':'tahoma',
									'fontSize':'10pt'
								}
							}) ;
	
	this.title_bar = new Element("div",{'class': 'title_bleu','styles':{'cursor':'pointer'}}) ;
	this.title_bar.jBox = this ;
	
	
	this.title_bar.addEvent('mousedown',function (e) {
											this.dragger = this.jBox.box.makeDraggable() ;	 
										});
	
	this.title_bar.addEvent('mouseup',function (e) {
											this.dragger.detach() ;	 
										});


	
	/*this.title_bar.addEvent('mousedown',function (e) {
											e = new Event(e) ;
											
											cursorX = e.page.x ;
											cursorY = e.page.y ;
											
											coords = this.jBox.box.getCoordinates() ;
											
											this.jBox.distanceX = parseInt(cursorX) - parseInt(coords.left) ;
											this.jBox.distanceY = parseInt(cursorY) - parseInt(coords.top) ;
											
											
											this.jBox.move = true ;
											this.jBox.title_bar.set("styles",{'cursor':'move'});
											return false;
										}) ;
	
	this.title_bar.addEvent('mouseup',function (e) {
											e = new Event(e) ;
											
											this.x = e.page.x ;
											this.y = e.page.y ;
											
											this.jBox.move = false ;
											this.jBox.title_bar.set("styles",{'cursor':'pointer'});
										}) ;

	
	this.title_bar.addEvent('mousemove',function (e) {
												 if (this.jBox.move) {
													e = new Event(e) ;
													
													top = parseInt(e.client.y) - parseInt(this.jBox.distanceY) ;
													left = parseInt(e.client.x) - parseInt(this.jBox.distanceX) ;													
																						
																								
													this.jBox.moveBox(left,top) ;
												 }
										});
	

	this.title_bar.addEvent('mouseout',function (e) {
										
										this.jBox.move = false;
										
										}) ;

	*/
	this.btnClose = new Element("img",{'src':'/img/admin/supprimer.png',
									   'class':'btn',
									   'opacity':0}) ;
	this.btnClose.jBox = this ;
	this.btnClose.addEvent('click',function (e) {
										e = new Event(e) ;
										this.jBox.close() ;		
										e.stopPropagation() ;
									}) ;
	
	this.title = new Element("h2",{"id":"title",
							 	   'opaticy':0}); 
	
	this.content = new Element("div",{'class': 'cadre_contenu',
							   		  'id':'jBoxContent'}) ;


	this.title_bar.adopt(this.title) ;
	this.title_bar.adopt(this.btnClose) ;
	
	
	this.box.adopt(this.title_bar) ;
	this.box.adopt(this.content) ;
	
	$(document.body).adopt(this.overlay) ;
	$(document.body).adopt(this.box) ;
	
	
	this.center = function() {
		scrollpos = getScrollingPosition() ;
			
		if (isIE)  {
			vtop = screen.height + parseInt(scrollpos[1]) ;
			vleft = screen.width ;
		}
		
		else {
			vtop = screen.height + parseInt(scrollpos[1]) ;
			vleft = parseInt(window.innerWidth) ;
		}
		
		if (vtop == 0) vtop = screen.height ;
		
		vtop = (vtop/2) - (parseInt(this.height) / 2) - 100 ;	
		vleft = (vleft/2) - (parseInt(this.width) / 2) ;
		
		var myFx = new Fx.Tween(this.box,{'link':'chain','duration':'short'}) ;
		myFx.start("top",vtop).start("left",vleft) ;
											
		this.x = vleft ;
		this.y = vtop ;
	
	}
	
	
	this.open = function() {
		this.box.set('styles',{ 'display':'block',
							'top': '0px',
							'left': '0px',
							'width':'10px',
							'height':'10px'}) ;
		this.center() ;
		
		var myFx = new Fx.Tween(this.box,{'link':'chain','duration':'short'}) ;
		myFx.start("opacity","0,","1").start("height","10px",this.height).start("width","10px",this.width) ;	
		
		//this.box.makeDraggable() ;
		
	}
	
	
	this.close = function() {
		
		var myFx = new Fx.Tween(this.content,{'duration':'short'}) ;
		myFx.start("opacity","1,","0") ;
		
		var myFx = new Fx.Tween(this.title,{'duration':'short'}) ;
		myFx.start("opacity","1,","0") ;
		
		var myFx = new Fx.Tween(this.btnClose,{'duration':'short'}) ;
		myFx.start("opacity","1,","0") ;
		
		
		var myFx = new Fx.Tween(this.box,{'link':'chain', 'duration':'short'}) ;
		myFx.start("height","10px").start("width","10px").start("left",0).start("top",0).start("opacity","1,","0") ;
		
		
	}
	
	this.setTitle = function(str) {
		this.title.set("text",str) ;
	}	
	
	
	this.moveBox = function(x,y) {
		this.box.style.top = parseInt(y) + 'px' ;
		this.box.style.left = parseInt(x) + 'px' ;		
	}
	
	this.resize = function (width, height) {
		
		this.width = width ;
		this.height = height ;
		
		var myFx = new Fx.Tween(this.box,{'link':'chain','duration':'short'}) ;
		myFx.start("height",height).start("width",width) ;
	}

	
	this.resizeWithEffect = function (width, height) {
		
		this.width = width ;
		this.height = height ;
		
		var myFx = new Fx.Tween(this.box,{'link':'chain','duration':'long', 'transition':'elastic:out'}) ;
		myFx.start("height",height).start("width",width) ;
	}
	
	this.bigger = function (height) {
		this.height = height ;
		
		var myFx = new Fx.Tween(this.box,{'link':'chain','duration':'long', 'transition':'elastic:out'}) ;
		myFx.start("height",height) ;
	}
	
	this.larger = function (width) {
		this.width = width ;
		
		var myFx = new Fx.Tween(this.box,{'link':'chain','duration':'long', 'transition':'elastic:out'}) ;
		myFx.start("width",width) ;
	}
} ;