var isIE = navigator.userAgent.toLowerCase().indexOf("msie") > -1; var isMoz = document.implementation && document.implementation.createDocument; var isSafari = ((navigator.userAgent.toLowerCase().indexOf("safari") != -1) && (navigator.userAgent.toLowerCase().indexOf("mac") != -1)) ? true : false; function curvyCorners() { if (typeof (arguments[0]) != "object") { throw newCurvyError("First parameter of curvyCorners() must be an object.") } if (typeof (arguments[1]) != "object" && typeof (arguments[1]) != "string") { throw newCurvyError("Second parameter of curvyCorners() must be an object or a class name.") } if (typeof (arguments[1]) == "string") { var G = 0; var A = getElementsByClass(arguments[1]) } else { var G = 1; var A = arguments } var D = new Array(); if (arguments[0].validTags) { var F = arguments[0].validTags } else { var F = ["div"] } for (var C = G, B = A.length; C < B; C++) { var E = A[C].tagName.toLowerCase(); if (inArray(F, E) !== false) { D[D.length] = new curvyObject(arguments[0], A[C]) } } this.objects = D; this.applyCornersToAll = function() { for (var H = 0, I = this.objects.length; H < I; H++) { this.objects[H].applyCorners() } } } function curvyObject() { this.box = arguments[1]; this.settings = arguments[0]; this.topContainer = null; this.bottomContainer = null; this.masterCorners = new Array(); this.contentDIV = null; var G = get_style(this.box, "height", "height"); var D = get_style(this.box, "width", "width"); var A = get_style(this.box, "borderTopWidth", "border-top-width"); var H = get_style(this.box, "borderTopColor", "border-top-color"); var C = get_style(this.box, "backgroundColor", "background-color"); var E = get_style(this.box, "backgroundImage", "background-image"); var B = get_style(this.box, "position", "position"); var F = get_style(this.box, "paddingTop", "padding-top"); this.boxHeight = parseInt(((G != "" && G != "auto" && G.indexOf("%") == -1) ? G.substring(0, G.indexOf("px")) : this.box.scrollHeight)); this.boxWidth = parseInt(((D != "" && D != "auto" && D.indexOf("%") == -1) ? D.substring(0, D.indexOf("px")) : this.box.scrollWidth)); this.borderWidth = parseInt(((A != "" && A.indexOf("px") !== -1) ? A.slice(0, A.indexOf("px")) : 0)); this.boxColour = format_colour(C); this.boxPadding = parseInt(((F != "" && F.indexOf("px") !== -1) ? F.slice(0, F.indexOf("px")) : 0)); this.borderColour = format_colour(H); this.borderString = this.borderWidth + "px solid " + this.borderColour; this.backgroundImage = ((E != "none") ? E : ""); this.boxContent = this.box.innerHTML; if (B != "absolute") { this.box.style.position = "relative" } this.box.style.padding = "0px"; if (isIE && D == "auto" && G == "auto") { this.box.style.width = "100%" } if (this.settings.autoPad == true && this.boxPadding > 0) { this.box.innerHTML = "" } this.applyCorners = function() { for (var Z = 0; Z < 2; Z++) { switch (Z) { case 0: if (this.settings.tl || this.settings.tr) { var W = document.createElement("DIV"); W.style.width = "100%"; W.style.fontSize = "1px"; W.style.overflow = "hidden"; W.style.position = "absolute"; W.style.paddingLeft = this.borderWidth + "px"; W.style.paddingRight = this.borderWidth + "px"; var R = Math.max(this.settings.tl ? this.settings.tl.radius : 0, this.settings.tr ? this.settings.tr.radius : 0); W.style.height = R + "px"; W.style.top = 0 - R + "px"; W.style.left = 0 - this.borderWidth + "px"; this.topContainer = this.box.appendChild(W) } break; case 1: if (this.settings.bl || this.settings.br) { var W = document.createElement("DIV"); W.style.width = "100%"; W.style.fontSize = "1px"; W.style.overflow = "hidden"; W.style.position = "absolute"; W.style.paddingLeft = this.borderWidth + "px"; W.style.paddingRight = this.borderWidth + "px"; var X = Math.max(this.settings.bl ? this.settings.bl.radius : 0, this.settings.br ? this.settings.br.radius : 0); W.style.height = X + "px"; W.style.bottom = 0 - X + "px"; W.style.left = 0 - this.borderWidth + "px"; this.bottomContainer = this.box.appendChild(W) } break } } if (this.topContainer) { this.box.style.borderTopWidth = "0px" } if (this.bottomContainer) { this.box.style.borderBottomWidth = "0px" } var d = ["tr", "tl", "br", "bl"]; for (var h in d) { if (h > -1 < 4) { var c = d[h]; if (!this.settings[c]) { if (((c == "tr" || c == "tl") && this.topContainer != null) || ((c == "br" || c == "bl") && this.bottomContainer != null)) { var V = document.createElement("DIV"); V.style.position = "relative"; V.style.fontSize = "1px"; V.style.overflow = "hidden"; if (this.backgroundImage == "") { V.style.backgroundColor = this.boxColour } else { V.style.backgroundImage = this.backgroundImage } switch (c) { case "tl": V.style.height = R - this.borderWidth + "px"; V.style.marginRight = this.settings.tr.radius - (this.borderWidth * 2) + "px"; V.style.borderLeft = this.borderString; V.style.borderTop = this.borderString; V.style.left = -this.borderWidth + "px"; break; case "tr": V.style.height = R - this.borderWidth + "px"; V.style.marginLeft = this.settings.tl.radius - (this.borderWidth * 2) + "px"; V.style.borderRight = this.borderString; V.style.borderTop = this.borderString; V.style.backgroundPosition = "-" + (R + this.borderWidth) + "px 0px"; V.style.left = this.borderWidth + "px"; break; case "bl": V.style.height = X - this.borderWidth + "px"; V.style.marginRight = this.settings.br.radius - (this.borderWidth * 2) + "px"; V.style.borderLeft = this.borderString; V.style.borderBottom = this.borderString; V.style.left = -this.borderWidth + "px"; V.style.backgroundPosition = "-" + (this.borderWidth) + "px -" + (this.boxHeight + (X + this.borderWidth)) + "px"; break; case "br": V.style.height = X - this.borderWidth + "px"; V.style.marginLeft = this.settings.bl.radius - (this.borderWidth * 2) + "px"; V.style.borderRight = this.borderString; V.style.borderBottom = this.borderString; V.style.left = this.borderWidth + "px"; V.style.backgroundPosition = "-" + (X + this.borderWidth) + "px -" + (this.boxHeight + (X + this.borderWidth)) + "px"; break } } } else { if (this.masterCorners[this.settings[c].radius]) { var V = this.masterCorners[this.settings[c].radius].cloneNode(true) } else { var V = document.createElement("DIV"); V.style.height = this.settings[c].radius + "px"; V.style.width = this.settings[c].radius + "px"; V.style.position = "absolute"; V.style.fontSize = "1px"; V.style.overflow = "hidden"; var M = parseInt(this.settings[c].radius - this.borderWidth); for (var T = 0, g = this.settings[c].radius; T < g; T++) { if ((T + 1) >= M) { var O = -1 } else { var O = (Math.floor(Math.sqrt(Math.pow(M, 2) - Math.pow((T + 1), 2))) - 1) } if (M != g) { if ((T) >= M) { var L = -1 } else { var L = Math.ceil(Math.sqrt(Math.pow(M, 2) - Math.pow(T, 2))) } if ((T + 1) >= g) { var J = -1 } else { var J = (Math.floor(Math.sqrt(Math.pow(g, 2) - Math.pow((T + 1), 2))) - 1) } } if ((T) >= g) { var I = -1 } else { var I = Math.ceil(Math.sqrt(Math.pow(g, 2) - Math.pow(T, 2))) } if (O > -1) { this.drawPixel(T, 0, this.boxColour, 100, (O + 1), V, -1, this.settings[c].radius) } if (M != g) { for (var S = (O + 1); S < L; S++) { if (this.settings.antiAlias) { if (this.backgroundImage != "") { var K = (pixelFraction(T, S, M) * 100); if (K < 30) { this.drawPixel(T, S, this.borderColour, 100, 1, V, 0, this.settings[c].radius) } else { this.drawPixel(T, S, this.borderColour, 100, 1, V, -1, this.settings[c].radius) } } else { var b = BlendColour(this.boxColour, this.borderColour, pixelFraction(T, S, M)); this.drawPixel(T, S, b, 100, 1, V, 0, this.settings[c].radius, c) } } } if (this.settings.antiAlias) { if (J >= L) { if (L == -1) { L = 0 } this.drawPixel(T, L, this.borderColour, 100, (J - L + 1), V, 0, 0) } } else { if (J >= O) { this.drawPixel(T, (O + 1), this.borderColour, 100, (J - O), V, 0, 0) } } var Q = this.borderColour } else { var Q = this.boxColour; var J = O } if (this.settings.antiAlias) { for (var S = (J + 1); S < I; S++) { this.drawPixel(T, S, Q, (pixelFraction(T, S, g) * 100), 1, V, ((this.borderWidth > 0) ? 0 : -1), this.settings[c].radius) } } } this.masterCorners[this.settings[c].radius] = V.cloneNode(true) } if (c != "br") { for (var Z = 0, f = V.childNodes.length; Z < f; Z++) { var U = V.childNodes[Z]; var e = parseInt(U.style.top.substring(0, U.style.top.indexOf("px"))); var m = parseInt(U.style.left.substring(0, U.style.left.indexOf("px"))); var o = parseInt(U.style.height.substring(0, U.style.height.indexOf("px"))); if (c == "tl" || c == "bl") { U.style.left = this.settings[c].radius - m - 1 + "px" } if (c == "tr" || c == "tl") { U.style.top = this.settings[c].radius - o - e + "px" } switch (c) { case "tr": U.style.backgroundPosition = "-" + Math.abs((this.boxWidth - this.settings[c].radius + this.borderWidth) + m) + "px -" + Math.abs(this.settings[c].radius - o - e - this.borderWidth) + "px"; break; case "tl": U.style.backgroundPosition = "-" + Math.abs((this.settings[c].radius - m - 1) - this.borderWidth) + "px -" + Math.abs(this.settings[c].radius - o - e - this.borderWidth) + "px"; break; case "bl": U.style.backgroundPosition = "-" + Math.abs((this.settings[c].radius - m - 1) - this.borderWidth) + "px -" + Math.abs((this.boxHeight + this.settings[c].radius + e) - this.borderWidth) + "px"; break } } } } if (V) { switch (c) { case "tl": if (V.style.position == "absolute") { V.style.top = "0px" } if (V.style.position == "absolute") { V.style.left = "0px" } if (this.topContainer) { this.topContainer.appendChild(V) } break; case "tr": if (V.style.position == "absolute") { V.style.top = "0px" } if (V.style.position == "absolute") { V.style.right = "0px" } if (this.topContainer) { this.topContainer.appendChild(V) } break; case "bl": if (V.style.position == "absolute") { V.style.bottom = "0px" } if (V.style.position == "absolute") { V.style.left = "0px" } if (this.bottomContainer) { this.bottomContainer.appendChild(V) } break; case "br": if (V.style.position == "absolute") { V.style.bottom = "0px" } if (V.style.position == "absolute") { V.style.right = "0px" } if (this.bottomContainer) { this.bottomContainer.appendChild(V) } break } } } } var Y = new Array(); Y.t = Math.abs(this.settings.tl.radius - this.settings.tr.radius); Y.b = Math.abs(this.settings.bl.radius - this.settings.br.radius); for (z in Y) { if (z == "t" || z == "b") { if (Y[z]) { var l = ((this.settings[z + "l"].radius < this.settings[z + "r"].radius) ? z + "l" : z + "r"); var N = document.createElement("DIV"); N.style.height = Y[z] + "px"; N.style.width = this.settings[l].radius + "px"; N.style.position = "absolute"; N.style.fontSize = "1px"; N.style.overflow = "hidden"; N.style.backgroundColor = this.boxColour; switch (l) { case "tl": N.style.bottom = "0px"; N.style.left = "0px"; N.style.borderLeft = this.borderString; this.topContainer.appendChild(N); break; case "tr": N.style.bottom = "0px"; N.style.right = "0px"; N.style.borderRight = this.borderString; this.topContainer.appendChild(N); break; case "bl": N.style.top = "0px"; N.style.left = "0px"; N.style.borderLeft = this.borderString; this.bottomContainer.appendChild(N); break; case "br": N.style.top = "0px"; N.style.right = "0px"; N.style.borderRight = this.borderString; this.bottomContainer.appendChild(N); break } } var P = document.createElement("DIV"); P.style.position = "relative"; P.style.fontSize = "1px"; P.style.overflow = "hidden"; P.style.backgroundColor = this.boxColour; P.style.backgroundImage = this.backgroundImage; switch (z) { case "t": if (this.topContainer) { if (this.settings.tl.radius && this.settings.tr.radius) { P.style.height = R - this.borderWidth + "px"; P.style.marginLeft = this.settings.tl.radius - this.borderWidth + "px"; P.style.marginRight = this.settings.tr.radius - this.borderWidth + "px"; P.style.borderTop = this.borderString; if (this.backgroundImage != "") { P.style.backgroundPosition = "-" + (R - this.borderWidth) + "px 0px" } this.topContainer.appendChild(P) } this.box.style.backgroundPosition = "0px -" + (R - this.borderWidth) + "px" } break; case "b": if (this.bottomContainer) { if (this.settings.bl.radius && this.settings.br.radius) { P.style.height = X - this.borderWidth + "px"; P.style.marginLeft = this.settings.bl.radius - this.borderWidth + "px"; P.style.marginRight = this.settings.br.radius - this.borderWidth + "px"; P.style.borderBottom = this.borderString; if (this.backgroundImage != "") { P.style.backgroundPosition = "-" + (X - this.borderWidth) + "px -" + (this.boxHeight + (R - this.borderWidth)) + "px" } this.bottomContainer.appendChild(P) } } break } } } if (this.settings.autoPad == true && this.boxPadding > 0) { var a = document.createElement("DIV"); a.style.position = "relative"; a.innerHTML = this.boxContent; a.className = "autoPadDiv"; var n = Math.abs(R - this.boxPadding); var p = Math.abs(X - this.boxPadding); if (R < this.boxPadding) { a.style.paddingTop = n + "px" } if (X < this.boxPadding) { a.style.paddingBottom = X + "px" } a.style.paddingLeft = this.boxPadding + "px"; a.style.paddingRight = this.boxPadding + "px"; this.contentDIV = this.box.appendChild(a) } }; this.drawPixel = function(R, O, I, N, P, Q, K, M) { var J = document.createElement("DIV"); J.style.height = P + "px"; J.style.width = "1px"; J.style.position = "absolute"; J.style.fontSize = "1px"; J.style.overflow = "hidden"; var L = Math.max(this.settings.tr.radius, this.settings.tl.radius); if (K == -1 && this.backgroundImage != "") { J.style.backgroundImage = this.backgroundImage; J.style.backgroundPosition = "-" + (this.boxWidth - (M - R) + this.borderWidth) + "px -" + ((this.boxHeight + L + O) - this.borderWidth) + "px" } else { J.style.backgroundColor = I } if (N != 100) { setOpacity(J, N) } J.style.top = O + "px"; J.style.left = R + "px"; Q.appendChild(J) } } function insertAfter(B, C, A) { B.insertBefore(C, A.nextSibling) } function BlendColour(L, J, G) { var D = parseInt(L.substr(1, 2), 16); var K = parseInt(L.substr(3, 2), 16); var F = parseInt(L.substr(5, 2), 16); var C = parseInt(J.substr(1, 2), 16); var I = parseInt(J.substr(3, 2), 16); var E = parseInt(J.substr(5, 2), 16); if (G > 1 || G < 0) { G = 1 } var H = Math.round((D * G) + (C * (1 - G))); if (H > 255) { H = 255 } if (H < 0) { H = 0 } var B = Math.round((K * G) + (I * (1 - G))); if (B > 255) { B = 255 } if (B < 0) { B = 0 } var A = Math.round((F * G) + (E * (1 - G))); if (A > 255) { A = 255 } if (A < 0) { A = 0 } return "#" + IntToHex(H) + IntToHex(B) + IntToHex(A) } function IntToHex(A) { base = A / 16; rem = A % 16; base = base - (rem / 16); baseS = MakeHex(base); remS = MakeHex(rem); return baseS + "" + remS } function MakeHex(A) { if ((A >= 0) && (A <= 9)) { return A } else { switch (A) { case 10: return "A"; case 11: return "B"; case 12: return "C"; case 13: return "D"; case 14: return "E"; case 15: return "F" } } } function pixelFraction(H, G, A) { var C = 0; var B = new Array(1); var F = new Array(1); var I = 0; var D = ""; var E = Math.sqrt((Math.pow(A, 2) - Math.pow(H, 2))); if ((E >= G) && (E < (G + 1))) { D = "Left"; B[I] = 0; F[I] = E - G; I = I + 1 } var E = Math.sqrt((Math.pow(A, 2) - Math.pow(G + 1, 2))); if ((E >= H) && (E < (H + 1))) { D = D + "Top"; B[I] = E - H; F[I] = 1; I = I + 1 } var E = Math.sqrt((Math.pow(A, 2) - Math.pow(H + 1, 2))); if ((E >= G) && (E < (G + 1))) { D = D + "Right"; B[I] = 1; F[I] = E - G; I = I + 1 } var E = Math.sqrt((Math.pow(A, 2) - Math.pow(G, 2))); if ((E >= H) && (E < (H + 1))) { D = D + "Bottom"; B[I] = E - H; F[I] = 0 } switch (D) { case "LeftRight": C = Math.min(F[0], F[1]) + ((Math.max(F[0], F[1]) - Math.min(F[0], F[1])) / 2); break; case "TopRight": C = 1 - (((1 - B[0]) * (1 - F[1])) / 2); break; case "TopBottom": C = Math.min(B[0], B[1]) + ((Math.max(B[0], B[1]) - Math.min(B[0], B[1])) / 2); break; case "LeftBottom": C = (F[0] * B[1]) / 2; break; default: C = 1 } return C } function rgb2Hex(B) { try { var C = rgb2Array(B); var G = parseInt(C[0]); var E = parseInt(C[1]); var A = parseInt(C[2]); var D = "#" + IntToHex(G) + IntToHex(E) + IntToHex(A) } catch (F) { alert("There was an error converting the RGB value to Hexadecimal in function rgb2Hex") } return D } function rgb2Array(A) { var C = A.substring(4, A.indexOf(")")); var B = C.split(", "); return B } function setOpacity(F, C) { C = (C == 100) ? 99.999 : C; if (isSafari && F.tagName != "IFRAME") { var B = rgb2Array(F.style.backgroundColor); var E = parseInt(B[0]); var D = parseInt(B[1]); var A = parseInt(B[2]); F.style.backgroundColor = "rgba(" + E + ", " + D + ", " + A + ", " + C / 100 + ")" } else { if (typeof (F.style.opacity) != "undefined") { F.style.opacity = C / 100 } else { if (typeof (F.style.MozOpacity) != "undefined") { F.style.MozOpacity = C / 100 } else { if (typeof (F.style.filter) != "undefined") { F.style.filter = "alpha(opacity:" + C + ")" } else { if (typeof (F.style.KHTMLOpacity) != "undefined") { F.style.KHTMLOpacity = C / 100 } } } } } } function inArray(C, B) { for (var A = 0; A < C.length; A++) { if (C[A] === B) { return A } } return false } function inArrayKey(B, A) { for (key in B) { if (key === A) { return true } } return false } function addEvent(E, D, B, A) { if (E.addEventListener) { E.addEventListener(D, B, A); return true } else { if (E.attachEvent) { var C = E.attachEvent("on" + D, B); return C } else { E["on" + D] = B } } } function removeEvent(E, D, B, A) { if (E.removeEventListener) { E.removeEventListener(D, B, A); return true } else { if (E.detachEvent) { var C = E.detachEvent("on" + D, B); return C } else { alert("Handler could not be removed") } } } function format_colour(B) { var A = "#ffffff"; if (B != "" && B != "transparent") { if (B.substr(0, 3) == "rgb") { A = rgb2Hex(B) } else { if (B.length == 4) { A = "#" + B.substring(1, 2) + B.substring(1, 2) + B.substring(2, 3) + B.substring(2, 3) + B.substring(3, 4) + B.substring(3, 4) } else { A = B } } } return A } function get_style(obj, property, propertyNS) { try { if (obj.currentStyle) { var returnVal = eval("obj.currentStyle." + property) } else { if (isSafari && obj.style.display == "none") { obj.style.display = ""; var wasHidden = true } var returnVal = document.defaultView.getComputedStyle(obj, "").getPropertyValue(propertyNS); if (isSafari && wasHidden) { obj.style.display = "none" } } } catch (e) { } return returnVal } function getElementsByClass(G, E, A) { var D = new Array(); if (E == null) { E = document } if (A == null) { A = "*" } var C = E.getElementsByTagName(A); var B = C.length; var F = new RegExp("(^|s)" + G + "(s|$)"); for (i = 0, j = 0; i < B; i++) { if (F.test(C[i].className)) { D[j] = C[i]; j++ } } return D } function newCurvyError(A) { return new Error("curvyCorners Error:\n" + A) };
window.onload = function() {
    settings = {
        tl: { radius: 10 },
        tr: { radius: 10 },
        bl: { radius: 10 },
        br: { radius: 10 },
        antiAlias: true,
        autoPad: true,
        validTags: ["div"]
    }
    var myBoxObject = new curvyCorners(settings, "box");
    myBoxObject.applyCornersToAll();
}