TT_Form = Class.create();
TT_Form.prototype = {
  	initialize: function(options) {
        this.title = 'Demo';
        this.content = '';
        this.buttons = [];
        this.zIndex = 11000;
        this.width = undefined;
        this.EnableEffect = false,
        Object.extend(this, options);
        this.tt_create();
  	},

	tt_create: function () {
        var html = '';
        html += '<div class="dlg_shadow"></div>';
        html += '<div class="dlg_frame">';
        html +=     '<div class="dlg_header">';
        html +=         '<div id="dlg_close" class="dlg_close"><span></span></div>';
        html +=         '<div class="dlg_caption">'+this.title+'</div>';
        html +=     '</div>';
        html +=     '<div class="dlg_content">';
        html +=         '<div class="dlg_loading"></div>';
        html +=     '</div>';
        html += '</div>';
        this.overlay = new Element('div', {'class':'src_overlay'});
        this.dialog = new Element('div', {'class':'dlg_window'});
        this.dialog.style['zIndex'] = this.zIndex;
        this.overlay.style['zIndex'] = this.zIndex - 1;
        if (this.EnableEffect) this.dialog.style['opacity'] = '0';
        this.dialog.innerHTML = html;
        this.dlgShadow = this.dialog.childNodes[0];
        this.dlgFrame = this.dialog.childNodes[1];
        this.dlgContent = this.dlgFrame.childNodes[1];
        this.dlgHeader = this.dlgFrame.childNodes[0];
        this.dlgBtnClose = this.dlgHeader.childNodes[0];
        this.dlgTitle = this.dlgHeader.childNodes[1];
        this.dlgContent.style['width'] = '300px';
        document.body.appendChild(this.dialog);
        document.body.appendChild(this.overlay);
        this.tt_loadContent();
        if (this.EnableEffect) this.tt_show();
        this.tt_initObserve();
    },
    
    tt_initObserve: function () {
        var onClose = this.tt_close.bindAsEventListener(this);
        Event.observe(this.dlgBtnClose, 'click', onClose, false);
    },
    
    tt_setPos: function () {
        var _w = this.dlgFrame.getWidth();
        var _h = this.dlgFrame.clientHeight;
        var top = (document.viewport.getHeight() - _h)/2;
        var left = (document.viewport.getWidth() - _w)/2;
        var left = (_WND_W_ - _w)/2 + 133;
        this.dialog.style['top'] = (top < 0 ? 0 : top) + 'px';
        this.dialog.style['left'] = (left < 0 ? 0 : left) + 'px';
        this.dlgShadow.style['width'] = _w + 'px';
        this.dlgShadow.style['height'] = _h + 'px';
    },
    
    tt_hresize: function () {
        var _h = this.dlgFrame.clientHeight;
        this.dlgShadow.style['height'] = _h + 'px';
    },
    
    tt_show: function () {
        new Effect.Fade(this.dialog, {
            from: 0, to: 1, 
            duration: .30,
            afterFinish: function () {
            }.bind(this)
        });
    },

    tt_hide: function () {
        new Effect.toggle(
            this.dialog, 'appear', {
            duration: .50,
            afterFinish: function () {
                this.dialog.remove();
                this.overlay.remove();
            }.bind(this)
        });

    },

    tt_setTitle: function (value) {
        this.title = value;
        this.dlgTitle.innerHTML = value;
    },

    tt_loadContent: function () {
        if (this.content!='') {
            this.dlgContent.innerHTML = this.content;
            if(!this.width) this.width = this.dlgContent.getWidth();
            this.dlgContent.style['width'] = this.width + 'px';
        }
        this.tt_setPos();
    },

    tt_loading: function () {
        var html = '<div class="dlg_loading"></div>';
        this.dlgContent.innerHTML = html;
        this.tt_setPos();
    },
    
    tt_close: function () {
        if (!this.EnableEffect) {
            this.dialog.remove();
            this.overlay.remove();
        } else this.tt_hide();
    }
}