/*** Javascrip Util functions that available globally ***/

//Disables text selection on given target elements
function Spoon_DisableSelection(targets) {
    targets.each(function () {
        $jq(this).attr('unselectable', 'on') //Firefox, Webkit, CSS3 compatible browsers
                                .css({
                                    '-moz-user-select': 'none',
                                    '-webkit-user-select': 'none',
                                    'user-select': 'none'
                                })
                                .each(function () {
                                    this.onselectstart = function () { return false; }; //IE case
                                    $jq(this).mousedown(function () { return false; }); //Opera case
                                });
    });
}

// Add shadow with specified parameters on text inside of element
function Spoon_ShadowText(element, top, left, opacity, shadowColor, cssClass) {
    if (typeof (element) == "undefined") {
        return;
    }
    if (typeof (top) == "undefined") {
        var top = 1;
    }
    if (typeof (left) == "undefined") {
        var left = 0;
    }
    if (typeof (opacity) == "undefined") {
        var opacity = .5;
    }
    if (typeof (shadowColor) == "undefined") {
        var shadowColor = '#000000';
    }
    if (typeof (cssClass) == "undefined") {
        var cssClass = '';
    }

    var text = element.html();
    element.html("");
    var container = $jq('<div class="' + cssClass + '" style="width: 100%; ; position: relative;">');
    container.append($jq('<span class="shadow-text" style="display: inline-block; filter: alpha(opacity = ' + opacity * 100 + '); opacity: ' + opacity + '; position: relative; top: ' + top + 'px; left: ' + left + 'px; color: ' + shadowColor + '" onmousedown="return false;" onselectstart="return false;">' + text + '</span>'));
    container.append($jq('<span class="overlay-text" style="position: absolute; top: 0px; left: 0px;">' + text + ' </span>'));
    element.append(container);
}

// Takes in 9 image splices and positions them in a div of the given width/height. The div is returned
// Assumes all corners have the same dimensions
function Spoon_SpliceReconstructor(container, top, topright, right, bottomright, bottom, bottomleft, left, topleft, middle) {
    if (typeof (container) != "object" ||
        typeof (top) != "string" ||
        typeof (topright) != "string" ||
        typeof (right) != "string" ||
        typeof (bottomright) != "string" ||
        typeof (bottom) != "string" ||
        typeof (bottomleft) != "string" ||
        typeof (left) != "string" ||
        typeof (topleft) != "string") {
        return null;
    }
    
    var img = $jq('<img src=' + topright + ' style="visibility: hidden" />');
    img.load(function () { imageLoaded(container, this.width, this.height, top, topright, right, bottomright, bottom, bottomleft, left, topleft, middle) });
    $jq('body').append(img);
}

function imageLoaded(container, width, height, top, topright, right, bottomright, bottom, bottomleft, left, topleft, middle) {
    var imageOffsetX = width;
    var imageOffsetY = height;

    var bgWrap = $jq('<div class="BackgroundWrapper" />');
    var bgTop = $jq('<img class="BackgroundTop" style="position: absolute;" src=' + top + ' />');
    var bgTopRight = $jq('<img class="BackgroundTopRight" style="position: absolute;" src=' + topright + ' />');
    var bgRight = $jq('<img class="BackgroundRight" style="position: absolute;" src=' + right + ' />');
    var bgBottomRight = $jq('<img class="BackgroundBottomRight" style="position: absolute;" src=' + bottomright + ' />');
    var bgBottom = $jq('<img class="BackgroundBottom" style="position: absolute;" src=' + bottom + ' />');
    var bgBottomLeft = $jq('<img class="BackgroundBottomLeft" style="position: absolute;" src=' + bottomleft + ' />');
    var bgLeft = $jq('<img class="BackgroundLeft" style="position: absolute;" src=' + left + ' />');
    var bgTopLeft = $jq('<img class="BackgroundTopLeft" style="position: absolute;" src=' + topleft + ' />');
    var bgMiddle = $jq('<img class="BackgroundMiddle" style="position: absolute;" src=' + middle + ' />');


    container.prepend(bgWrap);
    container.css('position', 'relative');
    bgWrap.css('width', container.width());
    bgWrap.css('height', container.height());
    bgWrap.css('position', 'absolute');

    bgTop.css('left', imageOffsetX);
    bgTop.css('width', bgWrap.width() - 2 * imageOffsetX);
    bgTop.css('height', height);
    bgTopRight.css('right', 0);
    bgRight.css('top', imageOffsetY);
    bgRight.css('right', 0);
    bgRight.css('height', bgWrap.height() - 2 * imageOffsetY);
    bgRight.css('width', width);
    bgBottomRight.css('right', 0);
    bgBottomRight.css('bottom', 0);
    bgBottom.css('bottom', 0);
    bgBottom.css('left', imageOffsetX);
    bgBottom.css('width', bgWrap.width() - 2 * imageOffsetX);
    bgBottom.css('height', height);
    bgBottomLeft.css('bottom', 0);
    bgLeft.css('top', imageOffsetY);
    bgLeft.css('height', bgWrap.height() - 2 * imageOffsetY);
    bgLeft.css('width', width);
    bgMiddle.css('height', bgWrap.height() - 2 * imageOffsetY);
    bgMiddle.css('width', bgWrap.width() - 2 * imageOffsetX);
    bgMiddle.css('left', imageOffsetX);
    bgMiddle.css('top', imageOffsetY);

    bgWrap.append(bgTop);
    bgWrap.append(bgTopRight);
    bgWrap.append(bgRight);
    bgWrap.append(bgBottomRight);
    bgWrap.append(bgBottom);
    bgWrap.append(bgBottomLeft);
    bgWrap.append(bgLeft);
    bgWrap.append(bgTopLeft);
    bgWrap.append(bgMiddle);
}


// The watch method will observe a set of properties and invoke the callback functions if any of the properties change. 
// The timeout specifies the milliseconds between checks for unsupported browsers
$jq.fn.watch = function (props, callback, timeout) {
    if (!timeout)
        timeout = 10;
    return this.each(function () {
        var el = $jq(this),
            func = function () { __check.call(this, el) },
            data = { props: props.split(","),
                func: callback,
                vals: []
            };
        $jq.each(data.props, function (i) { data.vals[i] = el.css(data.props[i]); });
        el.data(data);
        if (isDOMAttrModifiedSupported()) { // IE9/FF/Opera
            el.bind("DOMAttrModified", callback);
        } else if (typeof (this.onpropertychange) == "object") { // IE6/7/8
            el.bind("propertychange", callback);
        } else { // Chrome/Safari
            setInterval(func, timeout);
        }
    });
    function __check(el) {
        var data = el.data(),
                    changed = false,
                    temp = "";
        for (var i = 0; i < data.props.length; i++) {
            temp = el.css(data.props[i]);
            if (data.vals[i] != temp) {
                data.vals[i] = temp;
                changed = true;
                break;
            }
        }
        if (changed && data.func) {
            data.func.call(el, data);
        }
    }
}

function isDOMAttrModifiedSupported() {
    var p, flag;

    flag = false;
    p = document.createElement('p');
    if (p.addEventListener) {
        p.addEventListener('DOMAttrModified', callback, false);
    }
    else if (p.attachEvent) {
        p.attachEvent('onDOMAttrModified', callback);
    }
    else {
        // Assume not
        return false;
    }
    p.setAttribute('id', 'target');
    return flag;

    function callback() {
        flag = true;
    }
}

// Assembles the panel background for the given container. The header defines the element in the container that will recieve the header style, and the body defines the element in the container that will recieve the body style
function Spoon_RenderPanel(container, header, body) {
    if ($jq(container).length > 0) {
        var containerWrapper = container;
    } else {
        return;
    }
    if ($jq(header).length > 0) {
        var headerWidth = $jq(header).width();
        var headerHeight = $jq(header).height();
        var imageOffsetLowerX = 5;
        var imageOffsetLowerY = 2;
        var imageOffsetMiddleX = 5;
        var imageOffsetUpper = 5;
        var imgDiv = $jq('<div class="HeaderBackground" style="position: relative;"></div>');
        containerWrapper.prepend(imgDiv)
        imgDiv.css('width', headerWidth);
        imgDiv.css('height', headerHeight);
        imgDiv.css('position', 'absolute');

        imgDiv.append(
                $jq(
                    '<img class="TableHeaderBackgroundLowerLeft" src="/Global/Images/table-header-LowerLeft.png" style="position: absolute; left: 0; bottom: 0; height: ' + imageOffsetLowerY + 'px; width: ' + imageOffsetLowerX + 'px;" /></img>' +
                    '<img class="TableHeaderBackgroundLowerRight" src="/Global/Images/table-header-LowerRight.png" style="position: absolute; right: 0; bottom: 0; height: ' + imageOffsetLowerY + 'px; width: ' + imageOffsetLowerX + 'px;" /></img>' +
                    '<img class="TableHeaderBackgroundRightEdge" src="/Global/Images/table-header-RightEdge.png" style="position: absolute; right: 0; top: ' + imageOffsetUpper + 'px; width: ' + imageOffsetMiddleX + 'px;" /></img>' +
                    '<img class="TableHeaderBackgroundLeftEdge" src="/Global/Images/table-header-LeftEdge.png" style="position: absolute; left: 0; top: ' + imageOffsetUpper + 'px; width: ' + imageOffsetMiddleX + 'px;" /></img>' +
                    '<img class="TableHeaderBackgroundTopEdge" src="/Global/Images/table-header-TopEdge.png" style="position: absolute; left: ' + imageOffsetMiddleX + 'px; top: 0; height: ' + imageOffsetUpper + 'px;" /></img>' +
                    '<img class="TableHeaderBackgroundBottomEdge" src="/Global/Images/table-header-BottomEdge.png" style="position: absolute; left: ' + imageOffsetLowerX + 'px; bottom: 0;  height: 5px;" /></img>' +
                    '<img class="TableHeaderBackgroundUpperLeft" src="/Global/Images/table-header-UpperLeft.png" style="position: absolute; left: 0; top: 0; height: ' + imageOffsetUpper + 'px; width: ' + imageOffsetUpper + 'px;" /></img>' +
                    '<img class="TableHeaderBackgroundUpperRight" src="/Global/Images/table-header-UpperRight.png" style="position: absolute; right: 0; top: 0; height: ' + imageOffsetUpper + 'px; width: ' + imageOffsetUpper + 'px;" /></img>' +
                    '<img class="TableHeaderBackgroundMiddle" src="/Global/Images/table-header-Middle.png" style="position: absolute; left: ' + imageOffsetMiddleX + 'px; top: ' + imageOffsetUpper + 'px;" /></img>'
                )
            );
        containerWrapper.find('.TableHeaderBackgroundLeftEdge').css('height', headerHeight - imageOffsetUpper - imageOffsetLowerY);
        containerWrapper.find('.TableHeaderBackgroundRightEdge').css('height', headerHeight - imageOffsetUpper - imageOffsetLowerY);
        containerWrapper.find('.TableHeaderBackgroundTopEdge').css('width', headerWidth - 2 * imageOffsetUpper);
        containerWrapper.find('.TableHeaderBackgroundBottomEdge').css('width', headerWidth - 2 * imageOffsetLowerX);
        containerWrapper.find('.TableHeaderBackgroundMiddle').css('width', headerWidth - 2 * imageOffsetMiddleX);
        containerWrapper.find('.TableHeaderBackgroundMiddle').css('height', headerHeight - imageOffsetLowerY - imageOffsetUpper);
    }

    if ($jq(body).length > 0) {
        imageOffsetLowerX = 10;
        imageOffsetLowerY = 11;
        imageOffsetUpper = headerHeight;
        var bodyWidth = $jq(body).width();
        var bodyHeight = $jq(body).height();
        var imgDiv = $jq('<div class="BodyBackground" style="position: relative;"></div>');
        containerWrapper.prepend(imgDiv)
        imgDiv.css('width', bodyWidth);
        imgDiv.css('height', bodyHeight);
        imgDiv.css('position', 'absolute');
        imgDiv.css('top', headerHeight);

        imgDiv.append(
                $jq(
                    '<img class="TableBodyBackgroundLowerLeft" src="/Global/Images/table-body-LowerLeft.png" style="position: absolute; left: 0; bottom: 0; height: ' + imageOffsetLowerY + 'px; width: ' + imageOffsetLowerX + 'px;" /></img>' +
                    '<img class="TableBodyBackgroundLowerRight" src="/Global/Images/table-body-LowerRight.png" style="position: absolute; right: 0; bottom: 0; height: ' + imageOffsetLowerY + 'px; width: ' + imageOffsetLowerX + 'px;" /></img>' +
                    '<img class="TableBodyBackgroundRightEdge" src="/Global/Images/table-body-SideEdge.png" style="position: absolute; right: 0; top: 0px; width: 1px;" /></img>' +
                    '<img class="TableBodyBackgroundLeftEdge" src="/Global/Images/table-body-SideEdge.png" style="position: absolute; left: 0; top: 0px; width: 1px;" /></img>' +
                    '<img class="TableBodyBackgroundBottomEdge" src="/Global/Images/table-body-BottomEdge.png" style="position: absolute; left: ' + imageOffsetLowerX + 'px; bottom: 0;  height: 1px;" /></img>'
                )
            );
        containerWrapper.find('.TableBodyBackgroundRightEdge').css('height', bodyHeight - imageOffsetLowerY);
        containerWrapper.find('.TableBodyBackgroundLeftEdge').css('height', bodyHeight - imageOffsetLowerY);
        containerWrapper.find('.TableBodyBackgroundBottomEdge').css('width', bodyWidth - 2 * imageOffsetLowerX);
    }
}

function Spoon_RenderTableHeader(table) {
    var header = $jq(table).find('thead');
    var body = $jq(table).find('tbody');
    table.wrap('<div class="TableWrapper" />');
    var tableWrapper = table.parent();
    Spoon_RenderPanel(tableWrapper, header, body);
}