/*************************************************************************
    $Id: yeti.ui.js 3699 2009-11-05 13:58:03Z jcigar $
**************************************************************************/

Yeti.ui || (function(Yeti) {

Yeti.ui = new Object();

Yeti.ui.getWindowSize = function () {
    var size = {};

    if (typeof(window.innerHeight) == 'number') {
        size['height'] = window.innerHeight;
        size['width'] = window.innerWidth;
    } else {
        if (document.body && document.body.clientHeight) {
            size['height'] = document.body.clientHeight;
            size['width'] = document.body.clientWidth;
        } else {
            if (document.documentElement && document.documentElement.clientHeight) {
                size['height'] = document.documentElement.clientHeight;
                size['width'] = document.documentElement.clientWidth;
            }
        }
    }
    return size;
}

Yeti.ui.Frame = function(params) {
    if (!params) params = {};

    // Create the main <div>, the frame itselfs
    this.frame = document.createElement('div');
    this.frame.className = params.className ? params.className : 'frame';
    this.attached = false;

    // Set geometry
    var width = params.width ? params.width : 700;
    var height = params.height ? params.height : 500;
    var window_size = Yeti.ui.getWindowSize();

    if (width < 0) width = window_size['width'] + width;
    if (height < 0) height = window_size['height'] + height;

    // Set position on the screen (default: centered)

    var alignLeft = params.alignLeft ? 
        params.alignLeft : window_size['width'] / 2 - width / 2;
    var alignTop = params.alignTop ? 
        params.alignTop : window_size['height'] / 2 - height / 2;

    this.frame.style.width = width + 'px';
    this.frame.style.height = height + 'px';
    this.frame.style.left = alignLeft + 'px';
    this.frame.style.top = alignTop + 'px';

    // Header
    if (params.header !== false) {
        this.header = document.createElement('div');
        this.header.className = params.class_frame_header ?
            params.class_frame_header : 'frame_header'
        
        // Icon ?
        if (typeof(params.icon) === 'string') {
            this.icon = new Image();
            this.icon.src = params.icon;
            this.header.appendChild(this.icon);
        }

        // Close button
        this.close = document.createElement('div');
        this.close.appendChild(document.createTextNode('x'));
        this.close.className = 'frame_close';
        this.header.appendChild(this.close);

        if (params.title) {
            this.header.appendChild(document.createTextNode(params.title));
        }

        var self = this;
        
        this.close.onclick = function() {
            self.detach();
        }

        this.frame.appendChild(this.header);
    }

    // Body
    this.body = document.createElement('div');
    this.body.className = 'frame_body';

    this.frame.appendChild(this.body);
}

Yeti.ui.Frame.outerFrame = function(params) {
    if (!params) params = {};

    var div = document.createElement('div');
    var window_size = Yeti.ui.getWindowSize();

    if (params.heigth) {
        div.style.height = params.height + 'px';
    } else {
        div.style.height = document.height > window_size['height'] 
            ? document.height + 'px' : window_size['height'] + 'px';
    }

    if (params.width) {
        div.style.width = params.width + 'px'; 
    } else {
        div.style.width = document.width > window_size['width']
            ? document.width + 'px' : window_size['width'] + 'px';
    }

    div.className = params.className ? params.className : 'frame_shadow';

    return div;
}

Yeti.ui.Frame.prototype.attach = function(params) {
    if (!params) params = {};
    
    // Container
    var container = params.container;

    if (container) {
        if (typeof(container) === 'string') {
            this.container = document.getElementById(container);
        } else {
            this.container = container
        }
    } else {
        this.container = document.body
    }

    // Outerframe
    this.outerFrame = params.outerFrame ? params.outerFrame : false;

    if (this.outerFrame === true) {
        this.outerFrame = Yeti.ui.Frame.outerFrame();
        this.container.appendChild(this.outerFrame);
    }

    this.container.appendChild(this.frame);
    this.attached = true;
}

Yeti.ui.Frame.prototype.detach = function() {
    if (this.outerFrame) { 
        this.container.removeChild(this.outerFrame);
    }

    this.container.removeChild(this.frame);
    this.attached = false;
}

Yeti.ui.Frame.prototype.toggle = function() {
    if (this.frame.parentNode === null) {
        this.attach();
    } else {
        this.detach();
    }
}
})(Yeti)