Ext.onReady(function() {
    var form = Ext.get('cformsform');
    var formSibling = form.prev().prev();
    if(form) {
        
        var floatingDiv = new Ext.Element(document.createElement('div'));
        
        // Create the mask.
        var mask = new Ext.Element(document.createElement('div'));
        mask.addClass('mask');
        mask.setOpacity(0.75);
        mask.hide();
        mask.appendTo(document.body);
        
        // Create the close control.
        var closeDiv = new Ext.Element(document.createElement('div'));
        closeDiv.addClass('closeControl');
        var closeLink = new Ext.Element(document.createElement('a'));
        closeLink.set({'href': '#'});
        closeLink.on('click', hideForm, {'div': floatingDiv, 'mask': mask});
        var closeImage = new Ext.Element(document.createElement('img'));
        closeImage.set({'src': '/cform_popup/close.png'});
        closeLink.appendChild(closeImage);
        closeDiv.appendChild(closeLink);
        
        // Create the floating box and put the form into it.
        floatingDiv.hide();
        floatingDiv.addClass('floatingForm');
        floatingDiv.appendChild(closeDiv);
        floatingDiv.appendChild(Ext.get('usermessagea'));
        floatingDiv.appendChild(form);
        floatingDiv.appendTo(document.body);
        
        // Create the link that will display the floating box.
        var link = new Ext.Element(document.createElement('a'));
        link.set({'href': '#'});
        link.on('click', displayForm, {'div': floatingDiv, 'mask': mask});
        link.insertHtml('beforeEnd', 'Contact UCC');
        link.insertAfter(formSibling);
    }
});

function displayForm() {
    var divX = document.body.clientWidth/2 - this.div.getWidth()/2;
    var divY = document.body.clientHeight/2 - this.div.getHeight()/2;
    this.div.moveTo(divX, divY);
    this.mask.show();
    this.div.show();
}

function hideForm() {
    this.mask.hide();
    this.div.hide();
}