/**
 * A version of dialog that implements Jooner's look and feel. 
 * Eventually, we plan to replace HtmlDialog completely with this one, 
 * but for now we extend.
 * 
 * 
 * Differences from HtmlDialog: 
 * - reads dialog HTML from file rather then creating in JavaScript
 * - supports postHTMLTemplate for posting in a dialog
 * - 
 */

HJ.DialogTemplate = Class.create();

HJ.DialogTemplate.prototype = {

    initialize: function(copyFrom) {
        if (copyFrom == null) {
            this.loadTemplate();
            return;
        }
        this.dialogContainer = copyFrom.dialogContainer.cloneNode(true);
        this.templateLoaded();
    },

    loadTemplate: function() {
        var url = basePageURL + "HJ_DialogTemplate.htm";
        var div = document.createElement('div');
        if (is_ie) {
            div.style.overflow = "visible";
        } else {
            div.style.overflow = "auto";
        }
        div.className = 'HJ_Dialog_Container';
        // div.className = 'Dialog';
        this.dialogContainer = div;
        this.tl = new Af.TemplateLoader(url, 
                                        null, 
                                        "dialogTemplate", 
                                        this.dialogContainer);
        this.tl.listener = this;
        this.tl.loadTemplate(url);
    },

    templateLoaded: function() {
        var ec = new Af.ElementCollection(this.dialogContainer);
        this.titleElement = ec.getFirstElementById("HJ_Dialog.titleSpan");
        this.titleDragTarget = ec.getFirstElementById("HJ_Dialog.title");
        this.closeButton = ec.getFirstElementById("HJ_Dialog.closeButton");
        this.contentContainer = ec.getFirstElementById("HJ_Dialog.content");
    }, 

    /**
     * Get a dialog template to use in HJ.Dialog below. 
     *
     * @return a dialog template 
     */
    getTemplate: function() {
        // Make a copy.  
        // If this doesn't work on IE 6 or something, we could also 
        // do loadTemplate either cache the set title, etc. or do a
        // callback chain.
        return new HJ.DialogTemplate(this);
    }, 

    /** 
     * @return the top-level container for the template
     */
    getElement: function() {
        return this.dialogContainer;
    }, 

    setTitle: function(title) {
        if (title == null) {
            this.titleElement.innerHTML = "";
            return;
        }
        if (typeof title == "string") {
            this.titleElement.innerHTML = title;
        } else {
            this.titleElement.appendChild(title);
        }
    },

    setCloseListener: function(listener) {
        this.closeButton.onclick = listener;
    }, 

    setContent: function(content) {
        if (content == null) {
            this.contentContainer.innerHTML = "";
            return;
        }
        if (typeof content == "string") {
            this.contentContainer.innerHTML = content;
        } else {
            this.contentContainer.appendChild(content);
        }
    }, 

    getContentContainer: function() {
        return this.contentContainer;
    }, 

    getTitleDragTarget: function() {
        return this.titleDragTarget;
    }
}

HJ.Dialog = Class.create();

HJ.Dialog.prototype = Object.extend(new Af.HtmlDialog(), {

    initialize: function(title, handler, content) {
        // Subclasses must call HJ_Dialog_initialize
        // this.HJ_Dialog_initialize(title, handler, content);
    }, 

    HJ_Dialog_initialize: function(title, handler, content) {
        // XXX: copy instead of 
        var element = 
        // implemented in HtmlDialog
        this._initializeDialog(title, handler, content);
        this.dialogTemplate = HJ.dialogTemplate.getTemplate();
    },

    // override the HtmlDialog version
    createElement: function() {
        var element = this.dialogTemplate.getElement();
        this.setTitle(this.title);
        this.dialogTemplate.setCloseListener(
                this.close.bindAsEventListener(this));
        this.dialogTemplate.setContent(this.content);
        
        // fields in HtmlDialog
        this.titleElement = this.dialogTemplate.getTitleDragTarget();
        this.contentContainer = this.dialogTemplate.getContentContainer();
        // sic: also the same in HtmlDialog
        this.dialogArea = this.dialogTemplate.getContentContainer();
        this.element = this.dialogTemplate.getElement();
        this.setWidth(this.width);
    },

    /**
     * A version of showHTMLTemplate that uses a post request.  
     * The template listener is notified as normal. 
     * 
     * See loadTemplate and requestCompletedTemplateLoad in 
     * TemplateLoader.js and showHTMLTemplate in HtmlDialog.js 
     * 
     * XXX: 
     * - This function is not used any more, but might be useful in the 
     *   future
     * - We should probably add a parameter to 
     *   HtmlDialog.showHTMLTemplate (and something in TemplateLoader) to take
     *   post data.
     *
     * @param url the url to load
     *
     * @param xmlDoc the post data, in the same format as used by 
     *               Af.DataRequest
     */
    postHTMLTemplate: function(url, container, sourceElementId, xmlDoc) {
        this.container = container;
        this.sourceElementId = sourceElementId;
        var tl = new Af.TemplateLoader(url, 
                                       null, 
                                       sourceElementId, 
                                       this.dialogArea);
        this.tl = tl;
        tl.listener = this;
        var req = new Af.DataRequest(url,
                                     tl.requestCompletedTemplateLoad.bind(tl),
                                     requestFailedCommon, 
                                     null, 
                                     requestTimedoutCommon);
        req.xmlDoc = xmlDoc; // make it a post request
        ajaxEngine.processRequest(req);
    },

    /**
     * Set the title text of the dialog
     * 
     * @param title the text to set
     *
     */
    setTitle: function(title) {
        this.title = title;
        this.dialogTemplate.setTitle(title);
    },

    setContent: function(content) {
        this.content = content;
        this.dialogTemplate.setContent(content);
    },
    
    setWidth: function(width) {
        this.width = width;
        if (this.width != -1) {
           this.element.style.width = this.width;
        }
    }

});