topical media & game development

professional-web-02-rounded-corners.js / js

```

```
************************************************************** * 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, "borderTopWidth", "border-top-width");
var borderColour    = get_style(this.box, "borderTopColor", "border-top-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");

// 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.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";

// 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.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.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");

// 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.
*/
{
// 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.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

// 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
{
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
{
// 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
}

/*
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();

{
// FIX for prototype lib
if(z == "t" || z == "b")
{
{
// 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.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.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
{
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
{
// 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;
}
}
}

/*
*/
if(this.settings.autoPad == true && this.boxPadding > 0)
{
// Create content container
var contentContainer = document.createElement("DIV");

// Set contentContainer's properties
contentContainer.style.position = "relative";
contentContainer.innerHTML      = this.boxContent;

// Get padding amounts

// Apply top padding

// Apply Bottom padding

// Apply left and right padding

// Append contentContainer
this.contentDIV = this.box.appendChild(contentContainer);
}
}

/*
This function draws the pixles
*/
this.drawPixel = function(intx, inty, colour, transAmount, height, newCorner, image, cornerRadius)
{
// Create pixel
var pixel = document.createElement("DIV");
pixel.style.height   = height + "px";
pixel.style.width    = "1px";
pixel.style.position = "absolute";
pixel.style.fontSize = "1px";
pixel.style.overflow = "hidden";

// Max Top 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) {
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|$\right)"\right); for \left(i = 0, j = 0; i < elsLen; i++\right) \left\{ if\left(pattern.test\left(els\left[i\right].className\right)\right) \left\{ classElements\left[j\right] = els\left[i\right]; j++; \right\} \right\} return classElements; \right\} // Displays error message function newCurvyError\left(errorMessage\right) \left\{ return new Error\left("curvyCorners Error:\n" + errorMessage\right) \right\}$```

(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.