/**
 * Dialog.js
 * @author Brian Crescimanno <brian.crescimanno@autotrader.com>
 * @param height - The height of the box
 * @param width - The width of the box
 * @param contentObject - An Element object to be populated into the box.  This parameter is optional and when omitted
 *                        the box will display
 * @requires Prototype >= 1.6.0, Script.aculo.us >= 1.8.0, /inc/css/dialog.css
 *
 * Creates a RnC style dialog box (as seen in both the Config Tool and the Compare Tool) in
 * in a more sane way than the original implementation. 
 *
 */

var DialogBox = Class.create({

    initialize: function(_width, _height, contentObject){

        this.dimensions = {width: _width, height: _height};

        /* Destroy any existing dialogs */
        if($('overlay') && $('lightBox')){
            $('lightBox').remove();
        } else {
            /* show the actual page overlay */
            this.showOverlay();
        }

        /* build the Dialog box and store it for use */
        this.box = this.build();

        /* Populate the box if we have content */
        if(contentObject!=null){
            this.content = contentObject;
            this.populate();
            this.resize();
        }

        /* show the box */
        this.show();
    },

    showOverlay: function(){
        var myHeight = $(document.body).getHeight();
        if(myHeight < document.viewport.getHeight()){
            myHeight = document.viewport.getHeight();
        }

        var overlay = new Element('div', {id: 'overlay'}).setOpacity(0.0).setStyle({height: myHeight+"px"});;
        document.body.insert({bottom: overlay});
        new Effect.Appear('overlay', { duration: 0.4, from: 0.0, to: 0.8, fps: 50 });
    },

    build: function(){
        /* Create the elements for the dialog box */
        var tlc = new Element("div", {'class': 'tlc'});
        var trc = new Element("div", {'class': 'trc'});
        var tb = new Element("div", {'class': 'tb'}).update(tlc)
        var lbLoading = new Element("div", {id: 'lightBox-loading'});
        var rightSide = new Element("div", {'class': 'rs'});
        var putStuffHere = new Element("div", {'class': 'putStuffHere', id: "dialogbox-content"}).update(lbLoading);
        var content = new Element("div", {'class': 'lbcontent'}).update(rightSide).insert({bottom: putStuffHere});
        var blc = new Element("div", {'class': 'blc'});
        var brc = new Element("div", {'class': 'brc'});
        var bb = new Element("div", {'class': 'bb'}).update(blc);

        //Create the inital lightBox
        var lightBox = new Element("div", {id: "lightBox"}).hide();
        var offsets = document.viewport.getScrollOffsets();
        if(offsets.top > 150){
            lightBox.setStyle({top: offsets.top+75+"px"});
        }
        var lbContent = new Element("div", {id: 'lightBox-content'});

        /* Build the dialog box */
        lbContent.insert({bottom: trc}).insert({bottom: tb}).insert({bottom: content}).insert({bottom: brc}).insert({bottom: bb});
        lightBox.insert({top: lbContent});
        $('overlay').insert({after: lightBox});
    },

    addContent: function(contentObject){
        this.content = contentObject;
        this.content.hide();
        this.populate();
    },

    populate: function(){
        var closeButton = new Element("div", {'class': 'lightBox-closebutton'}).observe('click', this.close);
        if(this.content.select('div#lightBox-close').length < 1){
            var lbClose = new Element("div", {id: "lightBox-close"}).update(closeButton);
            this.content.insert({bottom: lbClose});    
        }
        $('dialogbox-content').insert({top: this.content});
    },

    show: function(){
        new Effect.Appear('lightBox', { duration: 0.6, from: 0.0, to: 1.0, delay: 0.5, fps: 50 });
    },

    showContent: function(){
        new Effect.Appear(this.content, { duration: 0.6, from: 0.0, to: 1.0, fps: 50 });        
    },

    close: function(){
        new Effect.Fade('overlay', {duration: 0.4, from: 0.8, to: 0.0, fps: 50});
        new Effect.Fade('lightBox', {duration: 0.4, from: 1.0, to: 0.0, fps: 50, afterFinish: function(){
                $('overlay').remove();
                $('lightBox').remove();
        }});
    },

    expand: function(){
        var showContent = this.showContent.bind(this);
        if(this.dimensions.height<105){ this.dimensions.height=105; }
        var height = this.dimensions.height;
        var width = this.dimensions.width;
        new Effect.Morph('lightBox-content', {style:'height: '+height+'px;', duration: 0.5});
        new Effect.Morph('lightBox-content', {style:'width: '+width+'px;', duration: 0.5, delay: 0.3, afterFinish: showContent});
        new Effect.Fade('lightBox-loading', {duration: 0.4, from: 1.0, to: 0.0});
    },

    resize: function(){
        if(this.dimensions.height<105) this.dimensions.height=105;
        $('lightBox-content').setStyle({height: this.dimensions.height+"px", width: this.dimensions.width+"px"});
        if($('lightBox-loading')) $('lightBox-loading').remove();
    }

});