var cfDesktop = new Class({
	
  Implements: [Events, Options],

  options: { 
    left:0, 
    top:0, 
    width:0,                    // if 0 = full width
    height:0,                   // if 0 = full height 
    hAlign: 'none',             // 'none' / 'center' / 'left' / 'right' 
    vAlign: 'none',             // 'none' / 'center' / 'top' / 'bottom'
    minWidth:20,                // Minimum width allowed
    minHeight:20,               // Minimum height allowed 
    areas: null                 // Areas definitions:
                                //   { 'top':    {'id': xxx, 'height': xxx, 'background':'xxxxx'} },
                                //   { 'left':   {'id': xxx, 'width': xxx, 'background':'xxxxx'} },
                                //   { 'center': {'id': xxx, 'background':'xxxxx'} },
                                //   { 'right':  {'id': xxx, 'width': xxx, 'background':'xxxxx'} },
                                //   { 'bottom': {'id': xxx, 'height': xxx, 'background':'xxxxx'} } 
	},

	initialize: function( idBase, options ) {    	
		this.setOptions(options);
    var tmpO = this.options;    
        		
		this.cfBase   = $( idBase );    	
    this.cfTop    = null;
    this.cfLeft   = null;
    this.cfCenter = null;
    this.cfRight  = null;
    this.cfBottom = null;        
    this.cfBase.addClass('cf-desktop');  
        
    if ( tmpO.areas['top'] != null ) {      
      this.cfTop = $(tmpO.areas['top'].id);
      this.cfTop.addClass('cf-top');
    } 
    if ( tmpO.areas['left'] != null ) {
      this.cfLeft = $(tmpO.areas['left'].id);
      this.cfLeft.addClass('cf-left');
    }
    if ( tmpO.areas['center'] != null ) {
      this.cfCenter = $(tmpO.areas['center'].id);
      this.cfCenter.addClass('cf-center');
    }
    if ( tmpO.areas['right'] != null ) {
      this.cfRight = $(tmpO.areas['right'].id);
      this.cfRight.addClass('cf-right');
    } 
    if ( tmpO.areas['bottom'] != null ) {
      this.cfBottom = $(tmpO.areas['bottom'].id);
      this.cfBottom.addClass('cf-bottom');
    }
    
    this.containerResize();
		
		window.addEvent( 'resize', function(e) { this.containerResize(); }.bind(this) );		
	},	
		
	containerResize: function() {
	  var wDim = window.getCoordinates();  
    var tmpO = this.options;
    var tmpA = this.options.areas;

	  var w = tmpO.width;
    var h = tmpO.height;
    if (h <=0) { h = (wDim.height < tmpO.minHeight) ? tmpO.minHeight : wDim.height; }	   
	  if (w <=0) { w = (wDim.width < tmpO.minWidth) ? tmpO.minWidth : wDim.width; }
    
    var th = (this.cfTop != null) ? tmpA.top.height : 0;
    var bh = (this.cfBottom != null) ? tmpA.bottom.height : 0;
    var ch = h - th - bh; 
    var lw = (this.cfLeft != null) ? tmpA.left.width : 0;
    var rw = (this.cfRight != null) ? tmpA.right.width : 0;
    var cw = w - lw - rw;       
         
    var l = tmpO.left;
    var t = tmpO.top;
    if ( tmpO.hAlign == 'left')   { l = 0; }
    if ( tmpO.hAlign == 'center') { l = (wDim.width - w)/2; }
    if ( tmpO.hAlign == 'right')  { l = wDim.width - w; }  
    if ( tmpO.vAlign == 'top')    { t = 0; }
    if ( tmpO.vAlign == 'middle') { t = (wDim.height - h)/2; }
    if ( tmpO.vAlign == 'bottom') { t = wDim.height - h; }  
    if ( l < 0 ) { l = 0; }
    if ( t < 0 ) { t = 0; } 
         
    this.cfBase.setStyles( {'left':l, 'top':t, 'width':w, 'height':h } );
    
    if (this.cfTop != null) {      
      this.cfTop.setStyles( {'left':0, 'top':0, 'width':w, 'height':th} );
    }
    if (this.cfLeft != null) {       
      this.cfLeft.setStyles( {'left':0, 'top':th, 'width':lw, 'height':ch} );
    }    
    if (this.cfCenter != null) {       
      this.cfCenter.setStyles( {'left':lw, 'top':th, 'width':cw, 'height':ch} );
    }     
    if (this.cfRight != null) {       
      this.cfRight.setStyles( {'left':w - rw, 'top':th, 'width':rw, 'height':ch} );
    }      
    if (this.cfBottom != null) {
      this.cfBottom.setStyles( {'left':0, 'top':h - bh, 'width':w, 'height':bh} );
    }    
  }     
});