var Q = Q || {};

/**
 * User Interface functions
 */
Q.UI = {

    /**
     * Takes two elements and sets the height of the shorter one to the
     * height of the taller one
     */
    equalHeight: function(a, b) {
        if (!($('#' + a).length && $('#' + b).length)) {
            return false;
        }
        var elms = Q.UI.getTallest(a, b);
        $('#' + elms[1]).height($('#' + elms[0]).height());
    },
    
    /**
     * Finds the tallest of two page elements
     *
     * @param string id of element one
     * @param string id of element two
     * @return array the elements in the order of tallest first
     */
    getTallest: function(a, b) {
        var heightA = $('#' + a).height();
        var heightB = $('#' + b).height();
        if (heightB > heightA) {
            return [b, a];
        }
        return [a, b];
    },
    
    /**
     * Takes an input element and checks to see if mouse clicks occur on 
     * the element or off it. If off it, it hides the element
     */
    clickOff: function(elm) {
        $('body').click(function(e){
            var last;
            $(e.target).parentsUntil(elm).each(function(){
                last = this.tagName;
            });
            if (last === 'HTML') {
                $(elm).hide();
            }
        });
    },
      
    checkFirst: function(message, callback, params) {
        Q.UI.Overlay.mask(params);
        $('body').append("<div id='q-confirm'><p></p><button id='ok'>OK</button><button id='cancel'>Cancel</button></div>");
        $('#q-confirm p').text(message);
        $('#q-confirm #ok').click(function() {
            $('#q-confirm p').text("");
            $('#q-confirm').remove();
            callback(1);
            Q.UI.Overlay.unmask();
        });
        $('#q-confirm #cancel').click(function() {
            $('#q-confirm p').text("");
            $('#q-confirm').remove();
            callback(0);
            Q.UI.Overlay.unmask();
        });
        return false;
    },
      
    alert: function(message, params) {
        Q.UI.Overlay.mask(params);
        $('body').append("<div id='q-confirm'><p></p><button id='ok'>OK</button></div>");
        $('#q-confirm p').text(message);
        $('#q-confirm #ok').click(function() {
            $('#q-confirm p').text("");
            $('#q-confirm').remove();
            Q.UI.Overlay.unmask();
        });
        return false;
    }
    
};

/**
 * Overlay manager for creating overlay elements that sit over the 
 * top of other elements and mask them.
 */
Q.UI.Overlay = {
    
    /**
     * The current z-index of the top most mask
     */
    curIndex: 10000,
    
    /**
     * An array to hold all current masks
     */
    masks: null,

    /**
     * Creates a mask over the page or elements
     *
     * @params object initialisation parameters
     */
    mask: function(params) {
        if (!this.masks) {
            this.masks = new Array;
        }
        params ? null : params = {};
        params.elm ? null : params.elm = 'body';
        params.id ? null : params.id = 'q-mask';
        params.color ? null : params.color = '#000';
        params.opacity ? null : params.opacity = 0.85;
        params.zindex ? this.curIndex = params.zindex : null;
        if (params.elm === 'body') {
            $('body').append("<div id='" + params.id + "'></div>");
        } else if ($('#' + params.elm).length) {
            $('#' + params.elm).append("<div id='" + params.id + "'></div>");
        }
        var parent = $('#' + params.id).parent();
        $('#' + params.id).css({
            display: 'block',
            height: parent.height(),
            width: parent.width(),
            position: 'fixed',
            left: parent.position().left,
            top: parent.position().top,
            'z-index': Q.UI.Overlay.curIndex,
            opacity: params.opacity,
            background: params.color
        });
        Q.UI.Overlay.curIndex++;
        if ($('body').height() < $(window).height()) {
            $('#' + params.id).height($(window).height());
        }
        return this.masks[params.elm] = params.id;
    },

    /**
     * Removes a given mask from the page
     *
     * @params object initialisation parameters
     */
    unmask: function(params) {
        params ? null : params = {};
        if (!params.elm) {
            $('#' + this.masks['body']).remove();
            delete this.masks['body'];
        } else {
            $('#' + params.id).remove();
            delete this.masks[params.elm];
        }
    }

};

Q.UI.confirm = {

    

};