/**************************************************************** * * * curvyCorners * * ------------ * * * * This script generates rounded corners for your divs. * * * * Version 1.2.9 * * Copyright (c) 2006 Cameron Cooke * * By: Cameron Cooke and Tim Hutchison. * * * * * * Website: http://www.curvycorners.net * * Email: info@totalinfinity.com * * Forum: http://www.curvycorners.net/forum/ * * * * * * This library is free software; you can redistribute * * it and/or modify it under the terms of the GNU * * Lesser General Public License as published by the * * Free Software Foundation; either version 2.1 of the * * License, or (at your option) any later version. * * * * This library is distributed in the hope that it will * * be useful, but WITHOUT ANY WARRANTY; without even the * * implied warranty of MERCHANTABILITY or FITNESS FOR A * * PARTICULAR PURPOSE. See the GNU Lesser General Public * * License for more details. * * * * You should have received a copy of the GNU Lesser * * General Public License along with this library; * * Inc., 59 Temple Place, Suite 330, Boston, * * MA 02111-1307 USA * * * ****************************************************************/ // Browser detection 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; /* Usage: newCornersObj = new curvyCorners(settingsObj, "classNameStr"); newCornersObj = new curvyCorners(settingsObj, divObj1[, divObj2[, divObj3[, . . . [, divObjN]]]]); */ function curvyCorners() { // Check parameters 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."); // Get object(s) if (typeof (arguments[1]) == "string") { // Get elements by class name var startIndex = 0; var boxCol = getElementsByClass(arguments[1]); } else { // Get objects var startIndex = 1; var boxCol = arguments; } // Create return collection/object var curvyCornersCol = new Array(); // Create array of html elements that can have rounded corners if (arguments[0].validTags) var validElements = arguments[0].validTags; else var validElements = ["div"]; // Default // Loop through each argument for (var i = startIndex, j = boxCol.length; i < j; i++) { // Current element tag name var currentTag = boxCol[i].tagName.toLowerCase(); if (inArray(validElements, currentTag) !== false) { curvyCornersCol[curvyCornersCol.length] = new curvyObject(arguments[0], boxCol[i]); } } this.objects = curvyCornersCol; // Applys the curvyCorners to all objects this.applyCornersToAll = function() { for (var x = 0, k = this.objects.length; x < k; x++) { this.objects[x].applyCorners(); } } } // curvyCorners object (can be called directly) function curvyObject() { // Setup Globals this.box = arguments[1]; this.settings = arguments[0]; this.topContainer = null; this.bottomContainer = null; this.masterCorners = new Array(); this.contentDIV = null; // Get box formatting details var boxHeight = get_style(this.box, "height", "height"); var boxWidth = get_style(this.box, "width", "width"); var borderWidth = get_style(this.box, "borderBottomWidth", "border-Bottom-width"); var borderColour = get_style(this.box, "borderBottomColor", "border-bottom-color"); var boxColour = get_style(this.box, "backgroundColor", "background-color"); var backgroundImage = get_style(this.box, "backgroundImage", "background-image"); var boxPosition = get_style(this.box, "position", "position"); var boxPadding = get_style(this.box, "paddingTop", "padding-top"); // Set formatting propertes this.boxHeight = parseInt(((boxHeight != "" && boxHeight != "auto" && boxHeight.indexOf("%") == -1) ? boxHeight.substring(0, boxHeight.indexOf("px")) : this.box.scrollHeight)); this.boxWidth = parseInt(((boxWidth != "" && boxWidth != "auto" && boxWidth.indexOf("%") == -1) ? boxWidth.substring(0, boxWidth.indexOf("px")) : this.box.scrollWidth)); this.borderWidth = parseInt(((borderWidth != "" && borderWidth.indexOf("px") !== -1) ? borderWidth.slice(0, borderWidth.indexOf("px")) : 0)); this.boxColour = format_colour(boxColour); this.boxPadding = parseInt(((boxPadding != "" && boxPadding.indexOf("px") !== -1) ? boxPadding.slice(0, boxPadding.indexOf("px")) : 0)); this.borderColour = format_colour(borderColour); this.borderString = this.borderWidth + "px" + " solid " + this.borderColour; this.backgroundImage = ((backgroundImage != "none") ? backgroundImage : ""); this.boxContent = this.box.innerHTML; // Make box relative if not already absolute and remove any padding if (boxPosition != "absolute") this.box.style.position = "relative"; this.box.style.padding = "0px"; // If IE and height and width are not set, we need to set width so that we get positioning //if (isIE && boxWidth == "auto" && boxHeight == "auto") this.box.style.width = "100%"; // Resize box so that it stays to the orignal height // Remove content if box is using autoPad if (this.settings.autoPad == true && this.boxPadding > 0) this.box.innerHTML = ""; /* This method creates the corners and applies them to the div element. */ this.applyCorners = function() { /* Create top and bottom containers. These will be used as a parent for the corners and bars. */ for (var t = 0; t < 2; t++) { switch (t) { // Top case 0: // Only build top bar if a top corner is to be draw if (this.settings.tl || this.settings.tr) { var newMainContainer = document.createElement("DIV"); newMainContainer.id = "div1"; newMainContainer.style.width = "100%"; newMainContainer.style.fontSize = "1px"; newMainContainer.style.overflow = "hidden"; newMainContainer.style.position = "absolute"; newMainContainer.style.paddingLeft = this.borderWidth + "px"; newMainContainer.style.paddingRight = this.borderWidth + "px"; var topMaxRadius = Math.max(this.settings.tl ? this.settings.tl.radius : 0, this.settings.tr ? this.settings.tr.radius : 0); newMainContainer.style.height = topMaxRadius + "px"; newMainContainer.style.top = 0 - topMaxRadius + "px"; newMainContainer.style.left = 0 - this.borderWidth + "px"; this.topContainer = this.box.appendChild(newMainContainer); } break; // Bottom case 1: // Only build bottom bar if a top corner is to be draw if (this.settings.bl || this.settings.br) { var newMainContainer = document.createElement("DIV"); newMainContainer.id = "div2"; newMainContainer.style.width = "100%"; newMainContainer.style.fontSize = "1px"; newMainContainer.style.overflow = "hidden"; newMainContainer.style.position = "absolute"; newMainContainer.style.paddingLeft = this.borderWidth + "px"; newMainContainer.style.paddingRight = this.borderWidth + "px"; var botMaxRadius = Math.max(this.settings.bl ? this.settings.bl.radius : 0, this.settings.br ? this.settings.br.radius : 0); newMainContainer.style.height = botMaxRadius + "px"; newMainContainer.style.bottom = 0 - botMaxRadius + "px"; newMainContainer.style.left = 0 - this.borderWidth + "px"; this.bottomContainer = this.box.appendChild(newMainContainer); } break; } } // Turn off current borders if (this.topContainer) this.box.style.borderTopWidth = "0px"; if (this.bottomContainer) this.box.style.borderBottomWidth = "0px"; // Create array of available corners var corners = ["tr", "tl", "br", "bl"]; /* Loop for each corner */ for (var i in corners) { // FIX for prototype lib if (i > -1 < 4) { // Get current corner type from array var cc = corners[i]; // Has the user requested the currentCorner be round? if (!this.settings[cc]) { // No if (((cc == "tr" || cc == "tl") && this.topContainer != null) || ((cc == "br" || cc == "bl") && this.bottomContainer != null)) { // We need to create a filler div to fill the space upto the next horzontal corner. var newCorner = document.createElement("DIV"); newCorner.id = "div3"; // Setup corners properties newCorner.style.position = "relative"; newCorner.style.fontSize = "1px"; newCorner.style.overflow = "hidden"; // Add background image? if (this.backgroundImage == "") newCorner.style.backgroundColor = this.boxColour; else newCorner.style.backgroundImage = this.backgroundImage; switch (cc) { case "tl": newCorner.style.height = topMaxRadius - this.borderWidth + "px"; newCorner.style.marginRight = this.settings.tr.radius - (this.borderWidth * 2) + "px"; newCorner.style.borderLeft = this.borderString; newCorner.style.borderTop = this.borderString; newCorner.style.left = -this.borderWidth + "px"; break; case "tr": newCorner.style.height = topMaxRadius - this.borderWidth + "px"; newCorner.style.marginLeft = this.settings.tl.radius - (this.borderWidth * 2) + "px"; newCorner.style.borderRight = this.borderString; newCorner.style.borderTop = this.borderString; newCorner.style.backgroundPosition = "-" + (topMaxRadius + this.borderWidth) + "px 0px"; newCorner.style.left = this.borderWidth + "px"; break; case "bl": newCorner.style.height = botMaxRadius - this.borderWidth + "px"; newCorner.style.marginRight = this.settings.br.radius - (this.borderWidth * 2) + "px"; newCorner.style.borderLeft = this.borderString; newCorner.style.borderBottom = this.borderString; newCorner.style.left = -this.borderWidth + "px"; newCorner.style.backgroundPosition = "-" + (this.borderWidth) + "px -" + (this.boxHeight + (botMaxRadius + this.borderWidth)) + "px"; break; case "br": newCorner.style.height = botMaxRadius - this.borderWidth + "px"; newCorner.style.marginLeft = this.settings.bl.radius - (this.borderWidth * 2) + "px"; newCorner.style.borderRight = this.borderString; newCorner.style.borderBottom = this.borderString; newCorner.style.left = this.borderWidth + "px" newCorner.style.backgroundPosition = "-" + (botMaxRadius + this.borderWidth) + "px -" + (this.boxHeight + (botMaxRadius + this.borderWidth)) + "px"; break; } } } else { /* PERFORMANCE NOTE: If more than one corner is requested and a corner has been already created for the same radius then that corner will be used as a master and cloned. The pixel bars will then be repositioned to form the new corner type. All new corners start as a bottom right corner. */ if (this.masterCorners[this.settings[cc].radius]) { // Create clone of the master corner var newCorner = this.masterCorners[this.settings[cc].radius].cloneNode(true); } else { // Yes, we need to create a new corner var newCorner = document.createElement("DIV"); newCorner.id = "div4"; newCorner.style.height = this.settings[cc].radius + "px"; newCorner.style.width = this.settings[cc].radius + "px"; newCorner.style.position = "absolute"; newCorner.style.fontSize = "1px"; newCorner.style.overflow = "hidden"; // THE FOLLOWING BLOCK OF CODE CREATES A ROUNDED CORNER // ---------------------------------------------------- TOP // Get border radius var borderRadius = parseInt(this.settings[cc].radius - this.borderWidth); // Cycle the x-axis for (var intx = 0, j = this.settings[cc].radius; intx < j; intx++) { // Calculate the value of y1 which identifies the pixels inside the border if ((intx + 1) >= borderRadius) var y1 = -1; else var y1 = (Math.floor(Math.sqrt(Math.pow(borderRadius, 2) - Math.pow((intx + 1), 2))) - 1); // Only calculate y2 and y3 if there is a border defined if (borderRadius != j) { if ((intx) >= borderRadius) var y2 = -1; else var y2 = Math.ceil(Math.sqrt(Math.pow(borderRadius, 2) - Math.pow(intx, 2))); if ((intx + 1) >= j) var y3 = -1; else var y3 = (Math.floor(Math.sqrt(Math.pow(j, 2) - Math.pow((intx + 1), 2))) - 1); } // Calculate y4 if ((intx) >= j) var y4 = -1; else var y4 = Math.ceil(Math.sqrt(Math.pow(j, 2) - Math.pow(intx, 2))); // Draw bar on inside of the border with foreground colour if (y1 > -1) this.drawPixel(intx, 0, this.boxColour, 100, (y1 + 1), newCorner, -1, this.settings[cc].radius); // Only draw border/foreground antialiased pixels and border if there is a border defined if (borderRadius != j) { // Cycle the y-axis for (var inty = (y1 + 1); inty < y2; inty++) { // Draw anti-alias pixels if (this.settings.antiAlias) { // For each of the pixels that need anti aliasing between the foreground and border colour draw single pixel divs if (this.backgroundImage != "") { var borderFract = (pixelFraction(intx, inty, borderRadius) * 100); if (borderFract < 30) { this.drawPixel(intx, inty, this.borderColour, 100, 1, newCorner, 0, this.settings[cc].radius); } else { this.drawPixel(intx, inty, this.borderColour, 100, 1, newCorner, -1, this.settings[cc].radius); } } else { var pixelcolour = BlendColour(this.boxColour, this.borderColour, pixelFraction(intx, inty, borderRadius)); this.drawPixel(intx, inty, pixelcolour, 100, 1, newCorner, 0, this.settings[cc].radius, cc); } } } // Draw bar for the border if (this.settings.antiAlias) { if (y3 >= y2) { if (y2 == -1) y2 = 0; this.drawPixel(intx, y2, this.borderColour, 100, (y3 - y2 + 1), newCorner, 0, 0); } } else { if (y3 >= y1) { this.drawPixel(intx, (y1 + 1), this.borderColour, 100, (y3 - y1), newCorner, 0, 0); } } // Set the colour for the outside curve var outsideColour = this.borderColour; } else { // Set the coour for the outside curve var outsideColour = this.boxColour; var y3 = y1; } // Draw aa pixels? if (this.settings.antiAlias) { // Cycle the y-axis and draw the anti aliased pixels on the outside of the curve for (var inty = (y3 + 1); inty < y4; inty++) { // For each of the pixels that need anti aliasing between the foreground/border colour & background draw single pixel divs this.drawPixel(intx, inty, outsideColour, (pixelFraction(intx, inty, j) * 100), 1, newCorner, ((this.borderWidth > 0) ? 0 : -1), this.settings[cc].radius); } } } // END OF CORNER CREATION // ---------------------------------------------------- END // We now need to store the current corner in the masterConers array this.masterCorners[this.settings[cc].radius] = newCorner.cloneNode(true); } /* Now we have a new corner we need to reposition all the pixels unless the current corner is the bottom right. */ if (cc != "br") { // Loop through all children (pixel bars) for (var t = 0, k = newCorner.childNodes.length; t < k; t++) { // Get current pixel bar var pixelBar = newCorner.childNodes[t]; // Get current top and left properties var pixelBarTop = parseInt(pixelBar.style.top.substring(0, pixelBar.style.top.indexOf("px"))); var pixelBarLeft = parseInt(pixelBar.style.left.substring(0, pixelBar.style.left.indexOf("px"))); var pixelBarHeight = parseInt(pixelBar.style.height.substring(0, pixelBar.style.height.indexOf("px"))); // Reposition pixels if (cc == "tl" || cc == "bl") { pixelBar.style.left = this.settings[cc].radius - pixelBarLeft - 1 + "px"; // Left } if (cc == "tr" || cc == "tl") { pixelBar.style.top = this.settings[cc].radius - pixelBarHeight - pixelBarTop + "px"; // Top } switch (cc) { case "tr": pixelBar.style.backgroundPosition = "-" + Math.abs((this.boxWidth - this.settings[cc].radius + this.borderWidth) + pixelBarLeft) + "px -" + Math.abs(this.settings[cc].radius - pixelBarHeight - pixelBarTop - this.borderWidth) + "px"; break; case "tl": pixelBar.style.backgroundPosition = "-" + Math.abs((this.settings[cc].radius - pixelBarLeft - 1) - this.borderWidth) + "px -" + Math.abs(this.settings[cc].radius - pixelBarHeight - pixelBarTop - this.borderWidth) + "px"; break; case "bl": pixelBar.style.backgroundPosition = "-" + Math.abs((this.settings[cc].radius - pixelBarLeft - 1) - this.borderWidth) + "px -" + Math.abs((this.boxHeight + this.settings[cc].radius + pixelBarTop) - this.borderWidth) + "px"; break; } } } } if (newCorner) { // Position the container switch (cc) { case "tl": if (newCorner.style.position == "absolute") newCorner.style.top = "0px"; if (newCorner.style.position == "absolute") newCorner.style.left = "0px"; if (this.topContainer) this.topContainer.appendChild(newCorner); break; case "tr": if (newCorner.style.position == "absolute") newCorner.style.top = "0px"; if (newCorner.style.position == "absolute") newCorner.style.right = "0px"; if (this.topContainer) this.topContainer.appendChild(newCorner); break; case "bl": if (newCorner.style.position == "absolute") newCorner.style.bottom = "0px"; if (newCorner.style.position == "absolute") newCorner.style.left = "0px"; if (this.bottomContainer) this.bottomContainer.appendChild(newCorner); break; case "br": if (newCorner.style.position == "absolute") newCorner.style.bottom = "0px"; if (newCorner.style.position == "absolute") newCorner.style.right = "0px"; if (this.bottomContainer) this.bottomContainer.appendChild(newCorner); break; } } } } /* The last thing to do is draw the rest of the filler DIVs. We only need to create a filler DIVs when two corners have diffrent radiuses in either the top or bottom container. */ // Find out which corner has the biiger radius and get the difference amount var radiusDiff = new Array(); radiusDiff["t"] = Math.abs(this.settings.tl.radius - this.settings.tr.radius) radiusDiff["b"] = Math.abs(this.settings.bl.radius - this.settings.br.radius); for (z in radiusDiff) { // FIX for prototype lib if (z == "t" || z == "b") { if (radiusDiff[z]) { // Get the type of corner that is the smaller one var smallerCornerType = ((this.settings[z + "l"].radius < this.settings[z + "r"].radius) ? z + "l" : z + "r"); // First we need to create a DIV for the space under the smaller corner var newFiller = document.createElement("DIV"); newFiller.id = "div6"; newFiller.style.height = radiusDiff[z] + "px"; newFiller.style.width = this.settings[smallerCornerType].radius + "px" newFiller.style.position = "absolute"; newFiller.style.fontSize = "1px"; newFiller.style.overflow = "hidden"; newFiller.style.backgroundColor = this.boxColour; //newFiller.style.backgroundColor = get_random_color(); // Position filler switch (smallerCornerType) { case "tl": newFiller.style.bottom = "0px"; newFiller.style.left = "0px"; newFiller.style.borderLeft = this.borderString; this.topContainer.appendChild(newFiller); break; case "tr": newFiller.style.bottom = "0px"; newFiller.style.right = "0px"; newFiller.style.borderRight = this.borderString; this.topContainer.appendChild(newFiller); break; case "bl": newFiller.style.top = "0px"; newFiller.style.left = "0px"; newFiller.style.borderLeft = this.borderString; this.bottomContainer.appendChild(newFiller); break; case "br": newFiller.style.top = "0px"; newFiller.style.right = "0px"; newFiller.style.borderRight = this.borderString; this.bottomContainer.appendChild(newFiller); break; } } // Create the bar to fill the gap between each corner horizontally var newFillerBar = document.createElement("DIV"); newFillerBar.id = "div7"; newFillerBar.style.position = "relative"; newFillerBar.style.fontSize = "1px"; newFillerBar.style.overflow = "hidden"; newFillerBar.style.backgroundColor = this.boxColour; // newFillerBar.style.backgroundImage = this.backgroundImage; switch (z) { case "t": // Top Bar if (this.topContainer) { // Edit by Asger Hallas: Check if settings.xx.radius is not false if (this.settings.tl.radius && this.settings.tr.radius) { newFillerBar.style.height = topMaxRadius - this.borderWidth + "px"; newFillerBar.style.marginLeft = this.settings.tl.radius - this.borderWidth + "px"; newFillerBar.style.marginRight = this.settings.tr.radius - this.borderWidth + "px"; newFillerBar.style.borderTop = this.borderString; if (this.backgroundImage != "") newFillerBar.style.backgroundPosition = "-" + (topMaxRadius + this.borderWidth) + "px 0px"; this.topContainer.appendChild(newFillerBar); } // // Repos the boxes background image // // this.box.style.backgroundPosition = "0px -" + (topMaxRadius - this.borderWidth) + "px"; } break; case "b": if (this.bottomContainer) { // Edit by Asger Hallas: Check if settings.xx.radius is not false //if (this.settings.bl.radius && this.settings.br.radius) { // Bottom Bar newFillerBar.style.height = botMaxRadius - this.borderWidth + "px"; newFillerBar.style.marginLeft = this.settings.bl.radius - this.borderWidth + "px"; newFillerBar.style.marginRight = this.settings.br.radius - this.borderWidth + "px"; newFillerBar.style.borderBottom = this.borderString; if (this.backgroundImage != "") newFillerBar.style.backgroundPosition = "-" + (botMaxRadius + this.borderWidth) + "px -" + (this.boxHeight + (topMaxRadius + this.borderWidth)) + "px"; this.bottomContainer.appendChild(newFillerBar); //} } break; } } } /* AutoPad! apply padding if set. */ if (this.settings.autoPad == true && this.boxPadding > 0) { // Create content container var contentContainer = document.createElement("DIV"); contentContainer.id = "div9"; // Set contentContainer's properties contentContainer.style.position = "relative"; contentContainer.innerHTML = this.boxContent; contentContainer.className = "autoPadDiv"; // Get padding amounts var topPadding = Math.abs(topMaxRadius - this.boxPadding); var botPadding = Math.abs(botMaxRadius - this.boxPadding); // Apply top padding if (topMaxRadius < this.boxPadding) contentContainer.style.paddingTop = topPadding + "px"; // Apply Bottom padding if (botMaxRadius < this.boxPadding) contentContainer.style.paddingBottom = botMaxRadius + "px"; // Apply left and right padding contentContainer.style.paddingLeft = this.boxPadding + "px"; contentContainer.style.paddingRight = this.boxPadding + "px"; // Append contentContainer this.contentDIV = this.box.appendChild(contentContainer); this.contentDIV.id = "content"; } } /* This function draws the pixles */ this.drawPixel = function(intx, inty, colour, transAmount, height, newCorner, image, cornerRadius) { // Create pixel var pixel = document.createElement("DIV"); pixel.id = "pixel23"; pixel.style.height = height + "px"; pixel.style.width = "1px"; pixel.style.position = "absolute"; pixel.style.fontSize = "1px"; pixel.style.overflow = "hidden"; // Max Top Radius var topMaxRadius = Math.max(this.settings["tr"].radius, this.settings["tl"].radius); // Dont apply background image to border pixels // if (image == -1 && this.backgroundImage != "") { // pixel.style.backgroundImage = this.backgroundImage; // pixel.style.backgroundPosition = "-" + (this.boxWidth - (cornerRadius - intx) + this.borderWidth) + "px -" + ((this.boxHeight + topMaxRadius + inty) - this.borderWidth) + "px"; // } // else { pixel.style.backgroundColor = colour; // } // Set opacity if the transparency is anything other than 100 if (transAmount != 100) setOpacity(pixel, transAmount); // Set the pixels position pixel.style.top = inty + "px"; pixel.style.left = intx + "px"; newCorner.appendChild(pixel); } } // ------------- UTILITY FUNCTIONS // Inserts a element after another function insertAfter(parent, node, referenceNode) { parent.insertBefore(node, referenceNode.nextSibling); } /* Blends the two colours by the fraction returns the resulting colour as a string in the format "#FFFFFF" */ function BlendColour(Col1, Col2, Col1Fraction) { var red1 = parseInt(Col1.substr(1, 2), 16); var green1 = parseInt(Col1.substr(3, 2), 16); var blue1 = parseInt(Col1.substr(5, 2), 16); var red2 = parseInt(Col2.substr(1, 2), 16); var green2 = parseInt(Col2.substr(3, 2), 16); var blue2 = parseInt(Col2.substr(5, 2), 16); if (Col1Fraction > 1 || Col1Fraction < 0) Col1Fraction = 1; var endRed = Math.round((red1 * Col1Fraction) + (red2 * (1 - Col1Fraction))); if (endRed > 255) endRed = 255; if (endRed < 0) endRed = 0; var endGreen = Math.round((green1 * Col1Fraction) + (green2 * (1 - Col1Fraction))); if (endGreen > 255) endGreen = 255; if (endGreen < 0) endGreen = 0; var endBlue = Math.round((blue1 * Col1Fraction) + (blue2 * (1 - Col1Fraction))); if (endBlue > 255) endBlue = 255; if (endBlue < 0) endBlue = 0; return "#" + IntToHex(endRed) + IntToHex(endGreen) + IntToHex(endBlue); } /* Converts a number to hexadecimal format */ function IntToHex(strNum) { base = strNum / 16; rem = strNum % 16; base = base - (rem / 16); baseS = MakeHex(base); remS = MakeHex(rem); return baseS + '' + remS; } /* gets the hex bits of a number */ function MakeHex(x) { if ((x >= 0) && (x <= 9)) { return x; } else { switch (x) { case 10: return "A"; case 11: return "B"; case 12: return "C"; case 13: return "D"; case 14: return "E"; case 15: return "F"; } } } /* For a pixel cut by the line determines the fraction of the pixel on the 'inside' of the line. Returns a number between 0 and 1 */ function pixelFraction(x, y, r) { var pixelfraction = 0; /* determine the co-ordinates of the two points on the perimeter of the pixel that the circle crosses */ var xvalues = new Array(1); var yvalues = new Array(1); var point = 0; var whatsides = ""; // x + 0 = Left var intersect = Math.sqrt((Math.pow(r, 2) - Math.pow(x, 2))); if ((intersect >= y) && (intersect < (y + 1))) { whatsides = "Left"; xvalues[point] = 0; yvalues[point] = intersect - y; point = point + 1; } // y + 1 = Top var intersect = Math.sqrt((Math.pow(r, 2) - Math.pow(y + 1, 2))); if ((intersect >= x) && (intersect < (x + 1))) { whatsides = whatsides + "Top"; xvalues[point] = intersect - x; yvalues[point] = 1; point = point + 1; } // x + 1 = Right var intersect = Math.sqrt((Math.pow(r, 2) - Math.pow(x + 1, 2))); if ((intersect >= y) && (intersect < (y + 1))) { whatsides = whatsides + "Right"; xvalues[point] = 1; yvalues[point] = intersect - y; point = point + 1; } // y + 0 = Bottom var intersect = Math.sqrt((Math.pow(r, 2) - Math.pow(y, 2))); if ((intersect >= x) && (intersect < (x + 1))) { whatsides = whatsides + "Bottom"; xvalues[point] = intersect - x; yvalues[point] = 0; } /* depending on which sides of the perimeter of the pixel the circle crosses calculate the fraction of the pixel inside the circle */ switch (whatsides) { case "LeftRight": pixelfraction = Math.min(yvalues[0], yvalues[1]) + ((Math.max(yvalues[0], yvalues[1]) - Math.min(yvalues[0], yvalues[1])) / 2); break; case "TopRight": pixelfraction = 1 - (((1 - xvalues[0]) * (1 - yvalues[1])) / 2); break; case "TopBottom": pixelfraction = Math.min(xvalues[0], xvalues[1]) + ((Math.max(xvalues[0], xvalues[1]) - Math.min(xvalues[0], xvalues[1])) / 2); break; case "LeftBottom": pixelfraction = (yvalues[0] * xvalues[1]) / 2; break; default: pixelfraction = 1; } return pixelfraction; } // This function converts CSS rgb(x, x, x) to hexadecimal function rgb2Hex(rgbColour) { try { // Get array of RGB values var rgbArray = rgb2Array(rgbColour); // Get RGB values var red = parseInt(rgbArray[0]); var green = parseInt(rgbArray[1]); var blue = parseInt(rgbArray[2]); // Build hex colour code var hexColour = "#" + IntToHex(red) + IntToHex(green) + IntToHex(blue); } catch (e) { alert("There was an error converting the RGB value to Hexadecimal in function rgb2Hex"); } return hexColour; } // Returns an array of rbg values function rgb2Array(rgbColour) { // Remove rgb() var rgbValues = rgbColour.substring(4, rgbColour.indexOf(")")); // Split RGB into array var rgbArray = rgbValues.split(", "); return rgbArray; } /* Function by Simon Willison from sitepoint.com Modified by Cameron Cooke adding Safari's rgba support */ function setOpacity(obj, opacity) { opacity = (opacity == 100) ? 99.999 : opacity; if (isSafari && obj.tagName != "IFRAME") { // Get array of RGB values var rgbArray = rgb2Array(obj.style.backgroundColor); // Get RGB values var red = parseInt(rgbArray[0]); var green = parseInt(rgbArray[1]); var blue = parseInt(rgbArray[2]); // Safari using RGBA support obj.style.backgroundColor = "rgba(" + red + ", " + green + ", " + blue + ", " + opacity / 100 + ")"; } else if (typeof (obj.style.opacity) != "undefined") { // W3C obj.style.opacity = opacity / 100; } else if (typeof (obj.style.MozOpacity) != "undefined") { // Older Mozilla obj.style.MozOpacity = opacity / 100; } else if (typeof (obj.style.filter) != "undefined") { // IE obj.style.filter = "alpha(opacity:" + opacity + ")"; } else if (typeof (obj.style.KHTMLOpacity) != "undefined") { // Older KHTML Based Browsers obj.style.KHTMLOpacity = opacity / 100; } } /* Returns index if the passed value is found in the array otherwise returns false. */ function inArray(array, value) { for (var i = 0; i < array.length; i++) { // Matches identical (===), not just similar (==). if (array[i] === value) return i; } return false; } /* Returns true if the passed value is found as a key in the array otherwise returns false. */ function inArrayKey(array, value) { for (key in array) { // Matches identical (===), not just similar (==). if (key === value) return true; } return false; } // Cross browser add event wrapper function addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); return r; } else { elm['on' + evType] = fn; } } // Cross browser remove event wrapper function removeEvent(obj, evType, fn, useCapture) { if (obj.removeEventListener) { obj.removeEventListener(evType, fn, useCapture); return true; } else if (obj.detachEvent) { var r = obj.detachEvent("on" + evType, fn); return r; } else { alert("Handler could not be removed"); } } // Formats colours function format_colour(colour) { var returnColour = "#ffffff"; // Make sure colour is set and not transparent if (colour != "" && colour != "transparent") { // RGB Value? if (colour.substr(0, 3) == "rgb") { // Get HEX aquiv. returnColour = rgb2Hex(colour); } else if (colour.length == 4) { // 3 chr colour code add remainder returnColour = "#" + colour.substring(1, 2) + colour.substring(1, 2) + colour.substring(2, 3) + colour.substring(2, 3) + colour.substring(3, 4) + colour.substring(3, 4); } else { // Normal valid hex colour returnColour = colour; } } return returnColour; } // Returns the style value for the property specfied function get_style(obj, property, propertyNS) { try { if (obj.currentStyle) { var returnVal = eval("obj.currentStyle." + property); } else { /* Safari does not expose any information for the object if display is set to none is set so we temporally enable it. */ if (isSafari && obj.style.display == "none") { obj.style.display = ""; var wasHidden = true; } var returnVal = document.defaultView.getComputedStyle(obj, '').getPropertyValue(propertyNS); // Rehide the object if (isSafari && wasHidden) { obj.style.display = "none"; } } } catch (e) { // Do nothing } return returnVal; } // Get elements by class by Dustin Diaz. function getElementsByClass(searchClass, node, tag) { var classElements = new Array(); if (node == null) node = document; if (tag == null) tag = '*'; var els = node.getElementsByTagName(tag); var elsLen = els.length; var pattern = new RegExp("(^|\s)" + searchClass + "(\s|$)"); for (i = 0, j = 0; i < elsLen; i++) { if (pattern.test(els[i].className)) { classElements[j] = els[i]; j++; } } return classElements; } // Displays error message function newCurvyError(errorMessage) { return new Error("curvyCorners Error:\n" + errorMessage) } /******************** box des coté de la master ********/ function sideBox() { // Check parameters 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."); // Get object(s) if (typeof (arguments[1]) == "string") { // Get elements by class name var startIndex = 0; var boxCol = getElementsByClass(arguments[1]); } else { // Get objects var startIndex = 1; var boxCol = arguments; } // Create return collection/object var curvyCornersCol = new Array(); // Create array of html elements that can have rounded corners if (arguments[0].validTags) var validElements = arguments[0].validTags; else var validElements = ["div"]; // Default // Loop through each argument for (var i = startIndex, j = boxCol.length; i < j; i++) { // Current element tag name var currentTag = boxCol[i].tagName.toLowerCase(); if (inArray(validElements, currentTag) !== false) { curvyCornersCol[curvyCornersCol.length] = new boxObject(arguments[0], boxCol[i]); } } this.objects = curvyCornersCol; // Applys the curvyCorners to all objects this.applyBoxToAll = function() { for (var x = 0, k = this.objects.length; x < k; x++) { this.objects[x].applyBox(); } } } // curvyCorners object (can be called directly) function boxObject() { // Setup Globals this.box = arguments[1]; this.settings = arguments[0]; this.bottomContainer = null; this.contentDIV = null; // Get box formatting details var boxPosition = get_style(this.box, "position", "position"); // Make box relative if not already absolute and remove any padding if (boxPosition != "absolute") this.box.style.position = "relative"; /* This method creates the box. */ this.applyBox = function() { // Only build bottom bar if a top corner is to be draw var newMainContainer = document.createElement("DIV"); newMainContainer.id = "div2"; newMainContainer.style.width = "100%"; newMainContainer.style.fontSize = "1px"; newMainContainer.style.overflow = "hidden"; newMainContainer.style.position = "absolute"; newMainContainer.className = this.settings.bordureClass; this.bottomContainer = this.box.appendChild(newMainContainer); this.box.style.borderBottomWidth = "0px"; } }