function uiLayerClass(){

	var c1 = jml.obj ;
	var c2 = jml.xml.node ;
	var c3 = jml.events ;
	var c4 = jml.jme ;
	
	var host ;
	var structure = { container : null , content : null , mask : null , ifrm : null } ;
	var property = { width : 'auto' , height : 'auto' , scrollable : false , transition : { display : 'none' , hide : 'none' } } ;
	var cache ;
	var target ;
	var transition = {
		fade : true ,
		expand : true ,
		none : true
	};
	
	function createLayer( id ){

		if( isset( structure.container ) ) hideLayer() ;

		//if( isset( scrollable ) ) property.scrollable = scrollable ;
		//if( isset( transitionDisplay ) && isset( transition[ transitionDisplay ] ) ) property.transition.display = transitionDisplay ;
		//if( isset( transitionHide ) && isset( transition[ transitionHide ] ) ) property.transition.hide = transitionHide ;
		
		try{
		
			structure.container = c2.create( 'DIV' , document.body ) ;
			structure.mask 	= c2.create( 'DIV' , structure.container ) ;
			structure.content = c2.create( 'DIV' , structure.mask ) ;
			// pseudo shadow !?
			
		}catch( errorObject ){ return null ; }
		
		c1.set( structure.container , 'position' , 'absolute' );
		c1.set( structure.container , 'left' , '0px' );
		c1.set( structure.container , 'top' , '0px' );
		c1.set( structure.container , 'cursor' , 'default' );
		
		//if( property.transition.display == 'expand' || property.transition.hide == 'expand' ) 
		c1.set( structure.mask , 'position' , 'relative' );
		// Should also set width and height, otherwise, the mask won't work...
		
		bringToFront() ;

		if( !isset( structure.ifrm ) && isset( lower( navigator.userAgent ).match( 'msie 6' ) ) ){
			try{
				structure.ifrm = c2.create( 'DIV' , document.body ) ;
					c1.set( structure.ifrm , 'position' , 'absolute' ) ;
					c1.set( structure.ifrm , 'overflow' , 'hidden' ) ;
					c1.set( structure.ifrm , 'left' , '0px' ) ;
					c1.set( structure.ifrm , 'top' , '0px' ) ;
				
				var iframe = c2.create( 'IFRAME' , structure.ifrm ) ;
					c1.set( iframe , 'display' , 'block' ) ;
					c1.set( iframe , 'position' , 'absolute' ) ;
					c1.set( iframe , 'margin' , '0px' ) ;
					c1.set( iframe , 'padding' , '0px' ) ;
					c1.set( iframe , 'border' , '0px' ) ;
					c1.set( iframe , 'zIndex' , '-1' ) ;
					c1.set( iframe , 'filter' , 'mask()' ) ;
					c1.set( iframe , 'width' , '3000px' ) ;
					c1.set( iframe , 'height' , '3000px' ) ;
					c1.set( iframe , 'left' , '0px' ) ;
					c1.set( iframe , 'top' , '0px' ) ;

			}catch( errorObject ){}
		}

		if( isset( host.onCreate ) ) host.onCreate( structure );
		
		if( property.transition.display == "fade" ) c1.set( structure.mask , "alpha" , 0 ) ;
		if( property.transition.display == "expand" ) c1.set( structure.mask , "top" , ( 0 - c1.get( structure.mask , 'offsetHeight' ) ) + "px" ) ;
		
		showLayer() ;
	} ;
	function removeLayer(){
		c2.remove( structure.container );
		c2.remove( structure.ifrm );
	} ;
	function showLayer( type ){
		c1.set( structure.container , "display" , "block" ) ;
		c1.set( structure.mask , "alpha" , 100 ) ;
		c1.set( structure.mask , "visibility" , "visible" ) ;
		c1.set( structure.ifrm , 'visibility' , 'visible' );
	} ;
	function hideLayer(){
		if( !isset( structure.mask ) ) return ;
		c1.set( structure.mask , "visibility" , "hidden" ) ; 
		c1.set( structure.container , "display" , "none" ) ;
		c1.set( structure.ifrm , 'visibility' , 'hidden' ) ;
	} ;
	//function setContent( content ){ c1.set( structure.content , "innerHTML" , content ) ; } ;
	function bringToFront(){ c1.set( structure.container , 'zIndex' , '999999' ) ; } ;
	function setPosition( x , y ){
		c1.set( structure.container , 'left' , x + 'px' );
		c1.set( structure.container , 'top' , y + 'px' );
		c1.set( structure.ifrm , 'left' , ( x - 8 ) + 'px' );
		c1.set( structure.ifrm , 'top' , ( y - 13 ) + 'px' );		
	}
	function setDimension( width , height ){
	
		var width = width || property.width ;
		var height = height || property.height ;
		
		if( width != 'auto' ){
			c1.set( structure.container , 'width' , width + 'px' );
			c1.set( structure.mask , 'width' , width + 'px' );
			c1.set( structure.content , 'width' , ( width - 17 ) + 'px' );
		}
		if( height != 'auto' ){
			c1.set( structure.container , 'height' , height + 'px' );
			c1.set( structure.mask , 'height' , height + 'px' );
		}
		
		var n1 = c1.get( structure.content , 'offsetHeight' ) ;
		
		//if( height!='auto' && ( n1 > height || property.scrollable || property.transition.display == 'expand' || property.transition.hide == 'expand' ) ){
			
			//maskElement( structure.container ) ;
			maskElement( structure.mask ) ;
			
			if( property.scrollable ){
				c1.set( structure.mask , 'height' , ( height - 10 ) + 'px' );
				addScrollBar( structure.mask ) ;
			}
		//}

		c1.set( structure.ifrm , 'width' , ( c1.get( structure.container , 'offsetWidth' ) + 10 ) + 'px' );
		c1.set( structure.ifrm , 'height' , ( c1.get( structure.container , 'offsetHeight' ) + 20 ) + 'px' );		
	}
	function maskElement( element ){
		if( element != structure.container ) c1.set( element , 'position' , 'relative' );
		c1.set( element , 'overflow' , 'hidden' );
		try{
			c1.set( element , 'overflow' , '-moz-scrollbars-none' );
			c1.set( element , 'overflow-x' , 'hidden' );
			c1.set( element , 'overflow-y' , 'hidden' );
		}catch( errorObject ){}
	}
	function addScrollBar( element ){ c1.set( element , 'overflow' , 'auto' ); }	
	return {
		constructor : function(){
			host = this ;
			return this ;
		} ,
		create : createLayer ,
		remove : removeLayer ,
		show : showLayer ,
		hide : hideLayer ,
		bringToFront : bringToFront ,
		setPosition : setPosition ,
		setDimension : setDimension ,
		onCreate : null
	}.constructor() ;
} ;