﻿<component lightWeight="true">
<attach event="onpropertychange" onevent="checkPropertyChange()" />
<attach event="ondetach" onevent="restore()" />
<script>
//<![CDATA[


    var doc = element.document;

    function init() {
        updateBorderBoxWidth();
        updateBorderBoxHeight();
    }

    function restore() {
        element.runtimeStyle.width = "";
        element.runtimeStyle.height = "";
    }

    /* border width getters */
    function getBorderWidth(sSide) {
        if (element.currentStyle["border" + sSide + "Style"] == "none")
            return 0;
        var n = parseInt(element.currentStyle["border" + sSide + "Width"]);
        return n || 0;
    }

    function getBorderLeftWidth() { return getBorderWidth("Left"); }
    function getBorderRightWidth() { return getBorderWidth("Right"); }
    function getBorderTopWidth() { return getBorderWidth("Top"); }
    function getBorderBottomWidth() { return getBorderWidth("Bottom"); }
    /* end border width getters */

    /* padding getters */
    function getPadding(sSide) {
        var n = parseInt(element.currentStyle["padding" + sSide]);
        return n || 0;
    }

    function getPaddingLeft() { return getPadding("Left"); }
    function getPaddingRight() { return getPadding("Right"); }
    function getPaddingTop() { return getPadding("Top"); }
    function getPaddingBottom() { return getPadding("Bottom"); }
    /* end padding getters */

    function getBoxSizing() {
        var s = element.style;
        var cs = element.currentStyle

        if (typeof s.boxSizing != "undefined" && s.boxSizing != "")
            return s.boxSizing;
        if (typeof s["box-sizing"] != "undefined" && s["box-sizing"] != "")
            return s["box-sizing"];
        if (typeof cs.boxSizing != "undefined" && cs.boxSizing != "")
            return cs.boxSizing;
        if (typeof cs["box-sizing"] != "undefined" && cs["box-sizing"] != "")
            return cs["box-sizing"];
        return getDocumentBoxSizing();
    }

    function getDocumentBoxSizing() {
        if (doc.compatMode == null || doc.compatMode == "BackCompat")
            return "border-box";
        return "content-box"
    }

    /* width and height setters */
    function setBorderBoxWidth(n) {
        element.runtimeStyle.width = Math.max(0, n - getBorderLeftWidth() -
		getPaddingLeft() - getPaddingRight() - getBorderRightWidth()) + "px";
    }

    function setBorderBoxHeight(n) {
        element.runtimeStyle.height = Math.max(0, n - getBorderTopWidth() -
		getPaddingTop() - getPaddingBottom() - getBorderBottomWidth()) + "px";
    }

    function setContentBoxWidth(n) {
        element.runtimeStyle.width = Math.max(0, n + getBorderLeftWidth() +
		getPaddingLeft() + getPaddingRight() + getBorderRightWidth()) + "px";
    }

    function setContentBoxHeight(n) {
        element.runtimeStyle.height = Math.max(0, n + getBorderTopWidth() +
		getPaddingTop() + getPaddingBottom() + getBorderBottomWidth()) + "px";
    }
    /* end width and height setters */

    function updateBorderBoxWidth() {
        element.runtimeStyle.width = "";
        if (getDocumentBoxSizing() == getBoxSizing()) return;
        if (element.currentStyle.width == 'auto') return;
        var csw = getPixelValue(element, element.currentStyle.width);
        if (getBoxSizing() == "border-box")
            setBorderBoxWidth(csw);
        else
            setContentBoxWidth(csw);
    }

    function updateBorderBoxHeight() {
        element.runtimeStyle.height = "";
        if (getDocumentBoxSizing() == getBoxSizing()) return;
        if (element.currentStyle.height == 'auto') return;
        var csh = getPixelValue(element, element.currentStyle.height);
        if (getBoxSizing() == "border-box")
            setBorderBoxHeight(csh);
        else
            setContentBoxHeight(csh);
    }

    function checkPropertyChange() {
        var pn = event.propertyName;
        var undef;

        if (pn == "style.boxSizing" && element.style.boxSizing == "") {
            element.style.removeAttribute("boxSizing");
            element.runtimeStyle.boxSizing = undef;
        }


        switch (pn) {
            case "style.width":
            case "style.borderLeftWidth":
            case "style.borderLeftStyle":
            case "style.borderRightWidth":
            case "style.borderRightStyle":
            case "style.paddingLeft":
            case "style.paddingRight":
                updateBorderBoxWidth();
                break;

            case "style.height":
            case "style.borderTopWidth":
            case "style.borderTopStyle":
            case "style.borderBottomWidth":
            case "style.borderBottomStyle":
            case "style.paddingTop":
            case "style.paddingBottom":
                updateBorderBoxHeight();
                break;

            case "className":
            case "style.boxSizing":
                updateBorderBoxWidth();
                updateBorderBoxHeight();
                break;
        }
    }

    // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291
    // Dean Edwards
    var PIXEL = /^\d+(px)?$/i;
    function getPixelValue(element, value) {
        if (PIXEL.test(value)) return parseInt(value);
        var style = element.style.left;
        var runtimeStyle = element.runtimeStyle.left;
        element.runtimeStyle.left = element.currentStyle.left;
        element.style.left = value || 0;
        value = element.style.pixelLeft;
        element.style.left = style;
        element.runtimeStyle.left = runtimeStyle;
        return value;
    };

    init();

//]]>
</script>
</component>