/*****************************************************
 * b2_popup_div
 *
 * @description: Popup div
 *
 * @html
*  <a href="javascript:;" onclick="b2_popup_div.load('div_id', {title:null, width:400, 'hide_flash' : false, x: null, y:null, content: ''});">Open Popup</a>
 */
var b2_popup_div = {
    popup_id: 'popup_container',
    content_id: 'popup_content',
    hadle_id: 'popup_handle',
    title_id: 'popup_title',
    close_id: 'popup_close',
    drag : null,
    mouse_cords : null,
    options : {width:600, title: null, hide_flash: true, x: null, y: null, content: ""},
    markup :  
        '<div id="popup_container" style="display:none;">' +
            '<div id="popup_close" style="display:none;">' +
                '<a href="javascript:;" onclick="b2_popup_div.close();"><div></div></a>' +
            '</div>' +
            '<table id="popup_body">' +
                '<tr id="popup_handle">' +
                    '<td class="popup_tl"><!--IE--></td>' +
                    '<td class="popup_tm"><div id="popup_title"></div></td>' +
                    '<td class="popup_tr"><!--IE--></td>' +
                '</tr>' +
                '<tr>' +
                    '<td class="popup_ml"><!--IE--></td>' +
                    '<td class="popup_mm"><div id="popup_content"></div></td>' +
                    '<td class="popup_mr"><!--IE--></td>' +
                '</tr>' +
                '<tr>' +
                    '<td class="popup_bl"><!--IE--></td>' +
                    '<td class="popup_bm"><!--IE--></td>' +
                    '<td class="popup_br"><!--IE--></td>' +
                '</tr>' +
            '</table>' +
        '</div>',
    /*****************************************************
          * Public - Load content 
         *
         * @param id: String. Uniqe element identifier that holds content to load
         * @param options: Object. Optional object with attributes to customize the popup (se usage example above). 
         */
    load : function(id, options) {
        if(this.mouse_cords == null) {
            this.mouse_cords = this.getMouseCords.bindAsEventListener(this);
        }
        
        // Initialize options
        this.setOptions(options);
        
        // destroy any previous instance
        this.destroy();

        // create the popup and attach it to body
        var el = $(id) || new Element('div');
        new Insertion.Top(document.body, this.markup);
        var content_el = $(this.content_id);        

        // Set popup content
        content_el.innerHTML = el.innerHTML || this.options.content;
        
        // set popup width
        $(this.popup_id).setStyle({width : parseInt(this.options.width)+'px'});
        
        // set popup titile
        this.setTitle(this.options.title);
        
        // toggle flash and form objects hidden
        if(this.options.hide_flash == true)
            this.toggleVisible(false);
        
        // Make popup draggable
        this.drag = new Draggable(this.popup_id, {
            //handle: $(this.hadle_id), 
            starteffect: null,
            endeffect: null,
            onEnd : this.onDragEnd.bind(this)
        });
        
        // Position  popup
        if(this.options.x != null && this.options.y != null) {
            this.mouseX = this.options.x;
            this.mouseY = this.options.y;
            this.mousePopup();
            Event.observe(document, 'mousemove', this.mouse_cords);
            $(this.popup_id).show();
        } else {
            this.centerPopup();
            Effect.Grow(this.popup_id, {
                duration:.3
            });
            Effect.Appear(this.close_id, {duration:.2,delay: .3});
        }
    },
    /*****************************************************
          * Public - Load wrapper
         */
    open : function(id, options) {
        this.load(id, options);
        correctPNG();
    },    
    /*****************************************************
          * Private - Move popup to mouse position
         */
    getMouseCords : function(e) {
        this.mouseX = Event.pointerX(e);
        this.mouseY = Event.pointerY(e);
        this.mousePopup();
        //if($('debug')) $('debug').innerHTML = "x: " + this.mouseX + " y: " + this.mouseY;
    },
    /*****************************************************
          * Private - Set options
         */
    setOptions : function (options) {
        if(typeof (options) == 'object') {
            this.options.width = options.width ? parseInt(options.width) : this.options.width;
            this.options.title = typeof(options.title) == "string" ? options.title : this.options.title;
            this.options.content = typeof(options.content) == "string" ? options.content : this.options.content;
            this.options.hide_flash = typeof(options.hide_flash) == "boolean" ? options.hide_flash : this.options.hide_flash;
            this.options.x = typeof(options.x) == "number" ? options.x : this.options.x;
            this.options.y = typeof(options.y) == "number" ? options.y : this.options.y;
        }
    },
    /*****************************************************
          * Private - Close popup
         */
    close : function() {
        var content_el = $(this.content_id);
        if(this.options.x != null && this.options.y != null) {
            Event.stopObserving(document, 'mousemove', this.mouse_cords);
            this.destroy();
         } else {
            Effect.Shrink(this.popup_id, {
                duration: .3,
                afterFinish : this.destroy.bind(this)
            });
         }
    },
    /*****************************************************
          * Private - Set title of popup
         */
    setTitle : function(str) {
        if(str && typeof (str) == "string" && str.length > 0)
            $(this.title_id).innerHTML = '<img src="/servlet/fontServlet?text='+str+'&amp;color=4b4b4b&amp;size=14&amp;font=regular" alt="'+str+'" border="0" />';
    },
    /*****************************************************
          * Private - center popup in viewport
         */
    centerPopup : function() {
        var el = $(this.popup_id);
        var vp = {width:800,height:600};
        if (window.innerWidth) {
            vp.width = window.innerWidth;
            vp.height = window.innerHeight;
        } else if(document.documentElement && document.documentElement.clientWidth) {
            vp.width = document.documentElement.clientWidth;
            vp.height = document.documentElement.clientHeight + document.body.scrollTop;
        }
        var pp = el.getDimensions();
        var x = Math.max(20, Math.round((vp.width-pp.width)/2));
        var y = Math.max(20, Math.round((vp.height-pp.height)/2));
        
        if(window.pageYOffset) {
            x += window.pageXOffset;
            y += window.pageYOffset;
        } else if(document.documentElement.scrollTop) {
            x += document.documentElement.scrollLeft;
            y += document.documentElement.scrollTop;
        }
        el.setStyle({top: y+'px', left: x+'px'});
    },
    /*****************************************************
          * Private - Move popup to mouse position
         */
    mousePopup : function(e) {
        var el = $(this.popup_id);
        if(el)
            el.setStyle({top: (this.mouseY + 20)+'px', left: (this.mouseX+20)+'px'});
        
    },
    /*****************************************************
          * Private - toggles visiblitiy on selected elements ie Flash for z-ordering
         */
    toggleVisible : function(state){
        var v = state ? 'visible' : 'hidden';
        var hide = ['select', 'object', 'embed']; // tags to hide
        var els;
        try {
            for(var i = 0; i < hide.length; ++i){
                els = document.getElementsByTagName(hide[i]);
                for(var j = 0, len = els.length; j < len; ++j){
                     var el = Element.extend(els[j]);
                     if(!el.descendantOf($(this.popup_id)))
                        el.style.visibility = v;
                }
            }
        } catch (e) {
            ;
        }
    },
    /*****************************************************
          * Private - ensure that popup stays within viewport
         */
    onDragEnd : function(e) {
        var el = $(this.popup_id);
        var top = parseInt(el.getStyle('top'));
        var left = parseInt(el.getStyle('left'));
        if(top < 0) {
            el.setStyle({'top':'0'});
        }
        var min = -el.getWidth()/2;
        if(left <= min) {
            el.setStyle({'left':min + 'px'});
        }
    },
    /*****************************************************
          * Private - destroys popup adn drag handler
         */
    destroy : function() {
        if(this.drag) this.drag.destroy();
        if($(this.popup_id)) $(this.popup_id).remove();
        if(this.options.hide_flash == true)
            this.toggleVisible(true);
    }
};