$GLOBAL_COUNTER=0;
 $COMPONENT_LIST = new Array();
 UIPanel = Class.create(Observable,{
    initialize : function($super){
        $super();
        this.id = $GLOBAL_COUNTER++;
        this.container = null;
        this.mainNode = null;
        $COMPONENT_LIST[this.id] = this;
    },
    render : function(){
       alert("render function of UIPanel must be overridden, and ot must return the top node in this panel");
    },
    /*
     * @param container the container that will hold mainDiv Node
     * @param childPosition position of the child for insertion 'top': add child at the top of the container,
     * 'bottom': add child at the bottom of the container.
     * 
     */
    addToContainer : function(container, childPosition){
       this.mainNode  = this.render();
       container.insert(this.mainNode, {position: childPosition});
       this.container = container;
    },
    removeFromContainer : function(){
       this.container.removeChild(this.mainNode);
    }
});