var Boxify = function(selector, imagePath, cornersOnly) {
    var common = 'position: absolute; ';
    
    if (typeof(cornersOnly) == 'undefined') {
        cornersOnly = false;
    }
    
    var createHtml = function(width, height, left, top, img, attrs) {
        return '<div style="' + common + 'width: ' + width + 'px; height: ' + height + 'px; top: ' + top + 'px; left: ' + left + 'px; background: url(\'' + imagePath + '/' + img + '.png\') ' + attrs + ';"></div>';
    };
    
    $(selector)
        .each(function() {
            var box = $(this);
                        
            if (box.html() == '') {
                box.css('padding', '0px');
                return;
            }
            
            box.css('position', 'relative');
            var leftWidth = Number(box.css('padding-left').replace('px', ''));
            var rightWidth = Number(box.css('padding-right').replace('px', ''));
            var topHeight = Number(box.css('padding-top').replace('px', ''));
            var bottomHeight = Number(box.css('padding-bottom').replace('px', ''));
            
            var leftHeight = box.height();
            var rightHeight = leftHeight;
            var topWidth = box.width();
            var bottomWidth = topWidth;

            var bottomTop;
            var rightLeft;
            
            
            
            if (cornersOnly) {
                box.css('padding', '0px');
            }
            
            // top
            var htmlParts;
            if (cornersOnly) {
                htmlParts = Array(4);
                bottomTop = leftHeight - bottomHeight;
                
                if (box.css('float')=='none') {
                    rightLeft = topWidth + leftWidth;
                }
                else {
                    rightLeft = topWidth - leftWidth;
                }
            }
            else {
                htmlParts = Array(8);
                bottomTop = topHeight + leftHeight;
                rightLeft = leftWidth + topWidth;
            }
            
            htmlParts['topLeftHtml'] = createHtml(leftWidth, topHeight, 0, 0, 'top-left', 'right bottom no-repeat');
            htmlParts['topRightHtml'] = createHtml(rightWidth, topHeight, rightLeft, 0, 'top-right', 'left bottom no-repeat');
            if (!cornersOnly) {
                htmlParts['topMiddleHtml'] = createHtml(topWidth, topHeight, leftWidth, 0, 'top-middle', 'left bottom repeat-x');
            }
            
            // middle
            if (!cornersOnly) {
                htmlParts['middleLeftHtml'] = createHtml(leftWidth, leftHeight, 0, topHeight, 'middle-left', 'right top repeat-y');
                htmlParts['middleRightHtml'] = createHtml(rightWidth, rightHeight, rightLeft, topHeight, 'middle-right', 'left top repeat-y');            
            }
            
            //bottom
            htmlParts['bottomLeftHtml'] = createHtml(leftWidth, bottomHeight, 0, bottomTop, 'bottom-left', 'right bottom no-repeat');
            htmlParts['bottomRightHtml'] = createHtml(rightWidth, bottomHeight, rightLeft, bottomTop, 'bottom-right', 'left bottom no-repeat');
            if (!cornersOnly) {
                htmlParts['bottomMiddleHtml'] = createHtml(bottomWidth, bottomHeight, leftWidth, bottomTop, 'bottom-middle', 'left bottom repeat-x');
            }
            
            if (!$.browser.msie || $.browser.version >= 7) {
                for (var key in htmlParts) {
                    box.append(htmlParts[key]);
                }
            }
        });    
    
};

var Buttonify = function(selector, imgPath) {

    $(selector)
        .each(function() {
        
            var createBackgroundStyle = function(path, position) {
                return "url('" + imgPath + "/" + position + ".png') center " + position + " no-repeat";
            };
            
            var box = $(this);
            box.css('position', 'relative');

            boxHeight = Number(box.css('line-height').replace('px', ''));
            boxLeft = Number(box.css('padding-left').replace('px', ''));
            boxRight = Number(box.css('padding-right').replace('px', ''));
            
            box.wrapInner('<span style="padding-left: ' + boxLeft + 'px; background: ' + createBackgroundStyle(imgPath, 'left') + '; line-height: ' + boxHeight + 'px;"></span>');
            box.wrapInner('<span style="padding-right: ' + boxRight + 'px; background: ' + createBackgroundStyle(imgPath, 'right') + '; line-height: ' + boxHeight + 'px;"></span>');
            
            box.css('background', "url('" + imgPath + "/centre.png') center left repeat-x");
            box.css('padding-left', '0px');
            box.css('padding-right', '0px');
            
        });    

}