<public:attach event="onresize" onevent="border_radius()" />
<public:attach event="oncontentready" onevent="border_radius()" />
<public:attach event="onload" onevent="border_radius()" />

<script type="text/javascript">
  function border_radius() {
    // does nothing when element already has round corners or is not displayed yet (this.offsetWidth == 0)

    if (!this.firstChild || this.firstChild.nodeName == "roundrect" || this.firstChild.nodeName == "V:ROUNDRECT" || this.offsetWidth == 0)
      return;

    if (!document.namespaces.v)
      document.namespaces.add("v", "urn:schemas-microsoft-com:vml");

    // ie6 support "ie-border-radius" and ie7 "-ie-border-radius"
    var radius = parseInt(this.currentStyle["ie-border-radius"]) || parseInt(this.currentStyle["-ie-border-radius"]);

    if (isNaN(radius) || radius == 0)
      return;

    // defines the rounded corners of a rounded rectangle as a percentage of half the smaller dimension of the length and width of a rectangle. 0.0 would have square corners, and 1.0 would form circular corners.
    var arc_size = Math.min(radius / Math.min(this.offsetWidth, this.offsetHeight), 1.0);

    var background_color = this.currentStyle.backgroundColor;
    var background_image = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, "$1");

    // ie6 support "ie-linear-gradient-start" and ie7 "-ie-linear-gradient-start"
    var background_gradient_start = this.currentStyle["ie-linear-gradient-start"] || this.currentStyle["-ie-linear-gradient-start"];
    var background_gradient_end = this.currentStyle["ie-linear-gradient-end"] || this.currentStyle["-ie-linear-gradient-end"];

    var border_color = this.currentStyle.borderColor;
    var border_width = parseInt(this.currentStyle.borderWidth);
    var border_opacity = 1;

    // border is needed for correct placement of vml elements
    // choose border with full transparency
    if (this.currentStyle.borderStyle == "none" || border_width == 0) {
      border_width = 1;
      border_opacity = 0;
    }

    var stroke = document.createElement("v:stroke");
    stroke.color = border_color;
    stroke.opacity = border_opacity;
    stroke.weight = border_width + "px";

    var roundrect = document.createElement("v:roundrect");
    roundrect.arcsize = arc_size;
    roundrect.style.antialias = true;

    roundrect.style.display = "block";
    roundrect.style.width = (this.offsetWidth - border_width) + "px";
    roundrect.style.height = (this.offsetHeight - border_width) + "px";
    roundrect.style.zIndex = this.style.zIndex - 1;

    var fill = document.createElement("v:fill");
    fill.style.display = "block";
    fill.style.width = "100%";
    fill.style.height = "100%";
    fill.type = "gradient";
    fill.color = background_gradient_end || background_color;
    fill.color2 = background_gradient_start || background_color;

    if (background_image != "none") {
      fill.src = background_image;
    }

    var span = document.createElement("span");
    span.style.display = "block";
    span.style.width = "100%";
    span.style.height = "100%";
    span.style.lineHeight = this.offsetHeight + "px"

    var child = this.removeChild(this.firstChild);

    span.appendChild(child);
    fill.appendChild(span);
    roundrect.appendChild(stroke);
    roundrect.appendChild(fill);

    // "hide" orginal element's background and border
    var parent = this.parentNode
    var background_color = "white";

    do {
      var children = parent.childNodes
      var parent_include_sprite_icon = false

      for (i = 0; i < children.length; i++) {
        if (children[i].className == "sprite_icon") {
          parent_include_sprite_icon = true;
          break;
        }
      }
      if ((parent.currentStyle && parent.currentStyle.backgroundImage && parent.currentStyle.backgroundImage != "none") || parent_include_sprite_icon) {
        background_color = "transparent";
        break;
      } else if (parent.currentStyle && parent.currentStyle.backgroundColor && parent.currentStyle.backgroundColor != "transparent") {
        background_color = parent.currentStyle.backgroundColor;
        break;
      }
    } while (parent = parent.parentNode);

    this.style.background = background_color;
    this.style.borderStyle = "none";
    this.style.padding = 0;

    this.appendChild(roundrect);
  }
</script>
