var DropdownControl = Class.create(BaseControl, {
    attached:null,
    view:null,
    overlay:null,
    content:null,

    initialize: function(element, content)
    {
        this.events = new Array();
        this.attached = $(element);
        this.attached.dropdown = this;
        // :BUG: hoannd004 IE can not return Prototype Element 
        //  Solution: use $
        this.content = content ? $(content) : $(element.getAttribute('drop'));
        var view = this.content.up('.drop_control');
        if (view)
            this.view = view;
        else
        {
            // :BUG: hoannd005 IE can not return Prototype Element 
            //  Solution: use $
            this.view = $(Builder.node('div', {className: 'drop_control', style:'display:none; position:absolute; z-index:98'}));
            this.view.update(this.content);
            document.body.appendChild(this.view);
        }

        this.clickToHideEvent = this.clickToHide.bindAsEventListener(this);
        this.observeEvent();                  
    },

    observeEvent: function()
    {
        var me = this;
        this.attached.observe('click', function(){
            me.show();
        });
    },

    // :BUG: hoannd006 Use overlay can be bug in IE6,7
    // Solution: use document.click
    clickToHide: function(e)
    {  
        var elm = Event.element(e);
        var isHide = true;
        while (elm != null)
        {                 
            if ($(elm) == $(this.view))
            {
                isHide = false;
                break;
            }

            elm = elm.offsetParent;
        }
        
        if (isHide)
        {
            document.stopObserving('click', this.clickToHideEvent);
            this.hide();
        }
    },
    
    stopDocumentClick : function()
    {
        document.stopObserving('click', this.clickToHideEvent);
    },
    
    show: function()                                               
    {
        document.stopObserving('click', this.clickToHideEvent);
        
        var offset = this.attached.cumulativeOffset();
        var left_px = offset[0]+1+'px';
        var top_px = (offset[1]+this.attached.getHeight())+'px';
        this.view.setStyle({left:left_px, top:top_px});
        // :BUG: hoannd006 Use overlay can be bug in IE6,7
        // Solution: use document.click
        this.view.slideDown({duration:0.3, afterFinish: function(){document.observe('click', this.clickToHideEvent);}.bind(this)});
        this.fire('show');
    },

    hide: function()
    {
        this.view.slideUp({duration:0.2});
    }
});