@function pad($radius) {
    $radius: boxmax($radius);
    $radius: parseint($radius);
    @if $radius >= 10 {
        @return $radius;
    }
    @else {
        @return "0" + $radius;
    }
}

@function nopx ($value) {
    @if $value == 0 {
        @return $value;
    }
    @return $value / 1px;
}

@mixin x-frame(
    $cls,
    $ui: null,
    $border-radius: 0px,
    $border-width: 0px,
    $padding: null,
    $background-color: null,
    $background-gradient: null,
    $table: false,
    $background-direction: top,
    $include-frame-rtl: false,
    // an optional ui to use for images
    $img-ui: $ui,
    $background-stretch: null
) {
    $cls-ui: $cls;
    $cls-img-ui: null;
    @if $ui != null {
        $cls-ui: $cls + '-' + $ui;
        $cls-img-ui: $cls + '-' + $img-ui;
    }

    $vertical: false;
    @if $background-gradient != null and ($background-direction == left or $background-direction == right) {
        $vertical: true;
    }

    $background-stretch-position: null;
    @if $background-stretch == null {
        @if $vertical {
            $background-stretch: left;
        } @else {
            $background-stretch: bottom;
        }
    }

    @if $background-stretch == top {
        $background-stretch-position: bottom;
    } @else if $background-stretch == bottom {
        $background-stretch-position: top;
    } @else if $background-stretch == left {
        $background-stretch-position: right;
    } @else if $background-stretch == right {
        $background-stretch-position: left;
    }

    @if $background-gradient != null {
        $stretch: slicer-background-stretch($cls-ui, $background-stretch);
    }

    // We use the border-radius of the two corners on each edge to determine the "edge's
    // border-radius". For IE, the framing elements need to be as large as the larger of
    // the border-radius and the border-width on each edge. These values are passed on to
    // JavaScript using an encoded background-image url and the equivalent operations are
    // handled by Renderable.js.
    //
    $frame-top:    max(top($border-width),    max(top($border-radius),    right($border-radius)));
    $frame-right:  max(right($border-width),  max(right($border-radius),  bottom($border-radius)));
    $frame-bottom: max(bottom($border-width), max(bottom($border-radius), left($border-radius)));
    $frame-left:   max(left($border-width),   max(left($border-radius),   top($border-radius)));
    $frame-max:    max(max($frame-top, $frame-bottom), max($frame-left, $frame-right));

    // For CSS3 browsers, if the border-radius is larger than the border-width, we need to
    // apply padding to inset the content. These values can never be 0 because frame-xxx
    // includes border-xxx in its max.
    //
    $padding-top:    $frame-top    - top($border-width);
    $padding-right:  $frame-right  - right($border-width);
    $padding-bottom: $frame-bottom - bottom($border-width);
    $padding-left:   $frame-left   - left($border-width);

    // If there is additional padding, this is understood to be a request to ensure that
    // the content is **at least** this far from the inside of the border. If the framing
    // requires more padding, that wins. This is the amount of padding you need in CSS3
    // browsers.
    //
    @if $padding != null {
        $padding-top:    max($padding-top,    top($padding));
        $padding-right:  max($padding-right,  right($padding));
        $padding-bottom: max($padding-bottom, bottom($padding));
        $padding-left:   max($padding-left,   left($padding));
    }

    // For IE, the framing elements are sized by frame-xxx and the "-mc" will carry the
    // extra-padding-xxx.
    //
    $extra-padding-top:    max(top($border-width)    + $padding-top    - $frame-top, 0);
    $extra-padding-right:  max(right($border-width)  + $padding-right  - $frame-right, 0);
    $extra-padding-bottom: max(bottom($border-width) + $padding-bottom - $frame-bottom, 0);
    $extra-padding-left:   max(left($border-width)   + $padding-left   - $frame-left, 0);

    // The data is encoded using a "background-image: url('blah#th-1-1-1-1-...')" format.
    // The key to using background-image is to avoid the IE6 idiocy of always requesting
    // background-images - if you just use "#..." it will request the CSS file again!
    // Really - over the net! Not from the cache! Since we don't have a real image to
    // send, we have use "about:blank"!
    //
    $framing-info: '#';

    @if $table == true {
        $framing-info: $framing-info + 't';
    } @else {
        $framing-info: $framing-info + 'd';
    }
    @if $vertical == true {
        $framing-info: $framing-info + 'v';
    } @else {
        $framing-info: $framing-info + 'h';
    }

    $framing-info: $framing-info + '-' +
           nopx(top($border-radius)) + '-' +
           nopx(right($border-radius)) + '-' +
           nopx(bottom($border-radius)) + '-' +
           nopx(left($border-radius)) + '-' +
           nopx(top($border-width)) + '-' +
           nopx(right($border-width)) + '-' +
           nopx(bottom($border-width)) + '-' +
           nopx(left($border-width)) + '-' +
           nopx($padding-top) + '-' +
           nopx($padding-right) + '-' +
           nopx($padding-bottom) + '-' +
           nopx($padding-left);

    .#{$prefix}#{$cls-ui} {
        @if $supports-border-radius {
            @if length($border-radius) == 2 {
                @include border-top-left-radius(nth($border-radius, 1));
                @include border-top-right-radius(nth($border-radius, 2));
            } @else if length($border-radius) == 3 {
                @include border-top-left-radius(nth($border-radius, 1));
                @include border-top-right-radius(nth($border-radius, 2));
                @include border-bottom-right-radius(nth($border-radius, 3));
            } @else if length($border-radius) == 4 {
                @include border-top-left-radius(nth($border-radius, 1));
                @include border-top-right-radius(nth($border-radius, 2));
                @include border-bottom-right-radius(nth($border-radius, 3));
                @include border-bottom-left-radius(nth($border-radius, 4));
            } @else {
                @include border-radius($border-radius);
            }
        }

        padding: $padding-top $padding-right $padding-bottom $padding-left;
        border-width: $border-width;
        border-style: solid;

        @if $background-color != null {
            @if $supports-gradients and $background-gradient != null {
                @include background-gradient($background-color, $background-gradient, $background-direction);
            }
            @else {
                background-color: $background-color;
            }
        }
    }

    @if $include-frame-rtl {
        @if $background-direction == left {
            $background-direction: right;
        } @else if $background-direction == right {
            $background-direction: left;
        }

        @if $background-direction == left or $background-direction == right {
            .#{$prefix}rtl.#{$prefix}#{$cls-ui} {
                @include background-gradient(
                    $background-color,
                    $background-gradient,
                    $background-direction
                );
            }
        }
    }

    @if not $supports-gradients or $compile-all {
        .#{$prefix}#{$cls-ui}-mc {
            @if $background-gradient != null {
                background-image: slicer-frame-background-image($cls-ui, '#{$cls}/#{$cls-img-ui}-fbg');

                @if $vertical {
                    background-position: $background-stretch-position 0;
                } @else {
                    background-position: 0 $background-stretch-position;
                }
            }
            @if $background-color != null {
                background-color: $background-color;
            }
        }
        @if $include-frame-rtl and $background-gradient != null {
            .#{$prefix}rtl.#{$prefix}#{$cls-ui}-mc {
                background-image: slicer-frame-background-image-rtl($cls-ui, '#{$cls}/#{$cls-img-ui}-fbg-rtl');
                background-position: rtl-background-position($background-stretch-position 0);
            }
        }

        @if $background-gradient != null {
            .#{$prefix}nlg {
                .#{$prefix}#{$cls-ui} {
                    background-image: slicer-background-image($cls-ui, '#{$cls}/#{$cls-img-ui}-bg');

                    @if $vertical {
                        background-position: $background-stretch-position 0;
                    } @else {
                        background-position: 0 $background-stretch-position;
                    }
                }

                @if $include-frame-rtl {
                    .#{$prefix}rtl.#{$prefix}#{$cls-ui} {
                        background-image: slicer-background-image-rtl($cls-ui, '#{$cls}/#{$cls-img-ui}-bg-rtl');
                        background-position: rtl-background-position($background-stretch-position 0);
                    }
                }
            }
        }
    }

    @if not $supports-border-radius or $compile-all {
        .#{$prefix}nbr {
            // This rule must be in x-nbr to avoid matching on CSS3 browsers.
            .#{$prefix}#{$cls-ui} {
                padding: 0 !important;
                border-width: 0 !important;
                @include border-radius(0px);
                @if $background-color != null {
                    background-color: transparent;
                }
                @else {
                    background: #fff;
                }

            }
        }

        // This rule must be more specific than other x-nlg rules or else framing will
        // not be applied to the element. This rule must also be in x-nbr to avoid
        // matching on CSS3 browsers.
        //
        body.#{$prefix}nbr {
            .#{$prefix}#{$cls-ui} {
                /* Pass along Div/Table, Horz/Vert, border-radius and border-width: */
                background-image: url('about:blank#{$framing-info}');
            }
        }

        // These rules apply to elements that are not rendered on CSS3 browsers so we do
        // not need to force the browser to walk to the root of the document searching
        // for x-nbr!

        @if $vertical {
            // vertical framing element background positions
            .#{$prefix}#{$cls-ui}-tl {
                background-position: 0 0;
            }

            .#{$prefix}#{$cls-ui}-tr {
                background-position: 0 (-$frame-max);
            }

            .#{$prefix}#{$cls-ui}-bl {
                background-position: 0 (-$frame-max * 2);
            }

            .#{$prefix}#{$cls-ui}-br {
                background-position: 0 (-$frame-max * 3);
            }

            .#{$prefix}#{$cls-ui}-ml {
                background-position: (-$frame-max) 0;
            }

            .#{$prefix}#{$cls-ui}-mr {
                background-position: right 0;
            }

            .#{$prefix}#{$cls-ui}-tc {
                background-position: $background-stretch-position 0;
            }

            .#{$prefix}#{$cls-ui}-bc {
                background-position: $background-stretch-position (-$frame-max);
            }

            @if $include-frame-rtl {
                .#{$prefix}rtl.#{$prefix}#{$cls-ui}-tc {
                    background-position: rtl-background-position($background-stretch-position 0);
                }

                .#{$prefix}rtl.#{$prefix}#{$cls-ui}-bc {
                    background-position: rtl-background-position($background-stretch-position (-$frame-max));
                }
            }
        } @else {
            // horizontal framing element background positions
            .#{$prefix}#{$cls-ui}-tl {
                background-position: 0 (-$frame-max * 2);
            }

            .#{$prefix}#{$cls-ui}-tr {
                background-position: right (-$frame-max * 3);
            }

            .#{$prefix}#{$cls-ui}-bl {
                background-position: 0 (-$frame-max * 4);
            }

            .#{$prefix}#{$cls-ui}-br {
                background-position: right (-$frame-max * 5);
            }

            .#{$prefix}#{$cls-ui}-ml {
                background-position: 0 $background-stretch-position;
            }

            .#{$prefix}#{$cls-ui}-mr {
                background-position: right $background-stretch-position;
            }

            .#{$prefix}#{$cls-ui}-tc {
                background-position: 0 0;
            }

            .#{$prefix}#{$cls-ui}-bc {
                background-position: 0 (-$frame-max);
            }
        }

        .#{$prefix}#{$cls-ui}-tr,
        .#{$prefix}#{$cls-ui}-br,
        .#{$prefix}#{$cls-ui}-mr {
            padding-right: $frame-right;
        }

        .#{$prefix}#{$cls-ui}-tl,
        .#{$prefix}#{$cls-ui}-bl,
        .#{$prefix}#{$cls-ui}-ml {
            padding-left: $frame-left;
        }

        .#{$prefix}#{$cls-ui}-tc {
            height: $frame-top;
        }
        .#{$prefix}#{$cls-ui}-bc {
            height: $frame-bottom;
        }

        .#{$prefix}#{$cls-ui}-tl,
        .#{$prefix}#{$cls-ui}-bl,
        .#{$prefix}#{$cls-ui}-tr,
        .#{$prefix}#{$cls-ui}-br,
        .#{$prefix}#{$cls-ui}-tc,
        .#{$prefix}#{$cls-ui}-bc,
        .#{$prefix}#{$cls-ui}-ml,
        .#{$prefix}#{$cls-ui}-mr {
            zoom:1;

            @if $background-color != transparent {
                background-image: slicer-corner-sprite($cls-ui, '#{$cls}/#{$cls-img-ui}-corners');
            }
        }

        @if $background-color != transparent {
            @if $include-frame-rtl {
                .#{$prefix}rtl {
                    &.#{$prefix}#{$cls-ui}-tl,
                    &.#{$prefix}#{$cls-ui}-ml,
                    &.#{$prefix}#{$cls-ui}-bl,
                    &.#{$prefix}#{$cls-ui}-tr,
                    &.#{$prefix}#{$cls-ui}-mr,
                    &.#{$prefix}#{$cls-ui}-br {
                        background-image: slicer-corner-sprite-rtl($cls-ui, '#{$cls}/#{$cls-img-ui}-corners-rtl');
                    }
                }
            }
        }

        @if $vertical == true {
            .#{$prefix}#{$cls-ui}-tc,
            .#{$prefix}#{$cls-ui}-bc {
                zoom:1;

                @if $background-color != transparent {
                    background-image: slicer-sides-sprite($cls-ui, '#{$cls}/#{$cls-img-ui}-sides');
                    background-repeat: repeat-x;
                }
            }

            @if $include-frame-rtl and $background-color != transparent {
                .#{$prefix}rtl {
                    &.#{$prefix}#{$cls-ui}-tc,
                    &.#{$prefix}#{$cls-ui}-bc {
                        background-image: slicer-sides-sprite-rtl($cls-ui, '#{$cls}/#{$cls-img-ui}-sides-rtl');
                    }
                }
            }
        } @else {
            .#{$prefix}#{$cls-ui}-ml,
            .#{$prefix}#{$cls-ui}-mr {
                zoom:1;

                @if $background-color != transparent {
                    background-image: slicer-sides-sprite($cls-ui, '#{$cls}/#{$cls-img-ui}-sides');
                    @if $background-gradient == null {
                        background-repeat: repeat-y;
                    }
                }
            }
        }

        .#{$prefix}#{$cls-ui}-mc {
            padding: $extra-padding-top $extra-padding-right $extra-padding-bottom $extra-padding-left;
        }

        @if $include-ie {
            // framed components in ie7 strict mode suffer from an obscure bug that causes the tl and bl framing elements to
            // be shrink-wrapped to the width of their contents.  This hack forces the elements' widths to fit to their parent
            .#{$prefix}strict .#{$prefix}ie7 {
                .#{$prefix}#{$cls-ui}-tl,
                .#{$prefix}#{$cls-ui}-bl {
                    position: relative;
                    right: 0;
                }
            }
        }
    }

    @include x-slicer($cls-ui);
}