Context Navigation

root/afridex/js/rounded_corners.js @ 1

Revision 1, 46.6 kB (checked in by admin, 18 years ago)

Rev	Line
[1]	1
	2	/****************************************************************
	3	* *
	4	* curvyCorners *
	5	* ------------ *
	6	* *
	7	* This script generates rounded corners for your divs. *
	8	* *
	9	* Version 1.2.9 *
	10	* Copyright (c) 2006 Cameron Cooke *
	11	* By: Cameron Cooke and Tim Hutchison. *
	12	* *
	13	* *
	14	* Website: http://www.curvycorners.net *
	15	* Email: info@totalinfinity.com *
	16	* Forum: http://www.curvycorners.net/forum/ *
	17	* *
	18	* *
	19	* This library is free software; you can redistribute *
	20	* it and/or modify it under the terms of the GNU *
	21	* Lesser General Public License as published by the *
	22	* Free Software Foundation; either version 2.1 of the *
	23	* License, or (at your option) any later version. *
	24	* *
	25	* This library is distributed in the hope that it will *
	26	* be useful, but WITHOUT ANY WARRANTY; without even the *
	27	* implied warranty of MERCHANTABILITY or FITNESS FOR A *
	28	* PARTICULAR PURPOSE. See the GNU Lesser General Public *
	29	* License for more details. *
	30	* *
	31	* You should have received a copy of the GNU Lesser *
	32	* General Public License along with this library; *
	33	* Inc., 59 Temple Place, Suite 330, Boston, *
	34	* MA 02111-1307 USA *
	35	* *
	36	****************************************************************/
	37
	38	// Browser detection
	39	var isIE = navigator.userAgent.toLowerCase().indexOf("msie") > -1;
	40	var isMoz = document.implementation && document.implementation.createDocument;
	41	var isSafari = ((navigator.userAgent.toLowerCase().indexOf('safari')!=-1)&&(navigator.userAgent.toLowerCase().indexOf('mac')!=-1))?true:false;
	42
	43	/*
	44	Usage:
	45
	46	newCornersObj = new curvyCorners(settingsObj, "classNameStr");
	47	newCornersObj = new curvyCorners(settingsObj, divObj1[, divObj2[, divObj3[, . . . [, divObjN]]]]);
	48	*/
	49	function curvyCorners()
	50	{
	51	// Check parameters
	52	if(typeof(arguments[0]) != "object") throw newCurvyError("First parameter of curvyCorners() must be an object.");
	53	if(typeof(arguments[1]) != "object" && typeof(arguments[1]) != "string") throw newCurvyError("Second parameter of curvyCorners() must be an object or a class name.");
	54
	55	// Get object(s)
	56	if(typeof(arguments[1]) == "string")
	57	{
	58	// Get elements by class name
	59	var startIndex = 0;
	60	var boxCol = getElementsByClass(arguments[1]);
	61	}
	62	else
	63	{
	64	// Get objects
	65	var startIndex = 1;
	66	var boxCol = arguments;
	67	}
	68
	69	// Create return collection/object
	70	var curvyCornersCol = new Array();
	71
	72	// Create array of html elements that can have rounded corners
	73	if(arguments[0].validTags)
	74	var validElements = arguments[0].validTags;
	75	else
	76	var validElements = ["div"]; // Default
	77
	78	// Loop through each argument
	79	for(var i = startIndex, j = boxCol.length; i < j; i++)
	80	{
	81	// Current element tag name
	82	var currentTag = boxCol[i].tagName.toLowerCase();
	83
	84	if(inArray(validElements, currentTag) !== false)
	85	{
	86	curvyCornersCol[curvyCornersCol.length] = new curvyObject(arguments[0], boxCol[i]);
	87	}
	88	}
	89
	90	this.objects = curvyCornersCol;
	91
	92	// Applys the curvyCorners to all objects
	93	this.applyCornersToAll = function()
	94	{
	95	for(var x = 0, k = this.objects.length; x < k; x++)
	96	{
	97	this.objects[x].applyCorners();
	98	}
	99	}
	100	}
	101
	102	// curvyCorners object (can be called directly)
	103	function curvyObject()
	104	{
	105	// Setup Globals
	106	this.box = arguments[1];
	107	this.settings = arguments[0];
	108	this.topContainer = null;
	109	this.bottomContainer = null;
	110	this.masterCorners = new Array();
	111	this.contentDIV = null;
	112
	113	// Get box formatting details
	114	var boxHeight = get_style(this.box, "height", "height");
	115	var boxWidth = get_style(this.box, "width", "width");
	116	var borderWidth = get_style(this.box, "borderTopWidth", "border-top-width");
	117	var borderColour = get_style(this.box, "borderTopColor", "border-top-color");
	118	var boxColour = get_style(this.box, "backgroundColor", "background-color");
	119	var backgroundImage = get_style(this.box, "backgroundImage", "background-image");
	120	var boxPosition = get_style(this.box, "position", "position");
	121	var boxPadding = get_style(this.box, "paddingTop", "padding-top");
	122
	123	// Set formatting propertes
	124	this.boxHeight = parseInt(((boxHeight != "" && boxHeight != "auto" && boxHeight.indexOf("%") == -1)? boxHeight.substring(0, boxHeight.indexOf("px")) : this.box.scrollHeight));
	125	this.boxWidth = parseInt(((boxWidth != "" && boxWidth != "auto" && boxWidth.indexOf("%") == -1)? boxWidth.substring(0, boxWidth.indexOf("px")) : this.box.scrollWidth));
	126	this.borderWidth = parseInt(((borderWidth != "" && borderWidth.indexOf("px") !== -1)? borderWidth.slice(0, borderWidth.indexOf("px")) : 0));
	127	this.boxColour = format_colour(boxColour);
	128	this.boxPadding = parseInt(((boxPadding != "" && boxPadding.indexOf("px") !== -1)? boxPadding.slice(0, boxPadding.indexOf("px")) : 0));
	129	this.borderColour = format_colour(borderColour);
	130	this.borderString = this.borderWidth + "px" + " solid " + this.borderColour;
	131	this.backgroundImage = ((backgroundImage != "none")? backgroundImage : "");
	132	this.boxContent = this.box.innerHTML;
	133
	134	// Make box relative if not already absolute and remove any padding
	135	if(boxPosition != "absolute") this.box.style.position = "relative";
	136	this.box.style.padding = "0px";
	137
	138	// If IE and height and width are not set, we need to set width so that we get positioning
	139	if(isIE && boxWidth == "auto" && boxHeight == "auto") this.box.style.width = "100%";
	140
	141	// Resize box so that it stays to the orignal height
	142
	143
	144	// Remove content if box is using autoPad
	145	if(this.settings.autoPad == true && this.boxPadding > 0)
	146	this.box.innerHTML = "";
	147
	148	/*
	149	This method creates the corners and
	150	applies them to the div element.
	151	*/
	152	this.applyCorners = function()
	153	{
	154	/*
	155	Create top and bottom containers.
	156	These will be used as a parent for the corners and bars.
	157	*/
	158	for(var t = 0; t < 2; t++)
	159	{
	160	switch(t)
	161	{
	162	// Top
	163	case 0:
	164
	165	// Only build top bar if a top corner is to be draw
	166	if(this.settings.tl \|\| this.settings.tr)
	167	{
	168	var newMainContainer = document.createElement("DIV");
	169	newMainContainer.style.width = "100%";
	170	newMainContainer.style.fontSize = "1px";
	171	newMainContainer.style.overflow = "hidden";
	172	newMainContainer.style.position = "absolute";
	173	newMainContainer.style.paddingLeft = this.borderWidth + "px";
	174	newMainContainer.style.paddingRight = this.borderWidth + "px";
	175	var topMaxRadius = Math.max(this.settings.tl ? this.settings.tl.radius : 0, this.settings.tr ? this.settings.tr.radius : 0);
	176	newMainContainer.style.height = topMaxRadius + "px";
	177	newMainContainer.style.top = 0 - topMaxRadius + "px";
	178	newMainContainer.style.left = 0 - this.borderWidth + "px";
	179	this.topContainer = this.box.appendChild(newMainContainer);
	180	}
	181	break;
	182
	183	// Bottom
	184	case 1:
	185
	186	// Only build bottom bar if a top corner is to be draw
	187	if(this.settings.bl \|\| this.settings.br)
	188	{
	189	var newMainContainer = document.createElement("DIV");
	190	newMainContainer.style.width = "100%";
	191	newMainContainer.style.fontSize = "1px";
	192	newMainContainer.style.overflow = "hidden";
	193	newMainContainer.style.position = "absolute";
	194	newMainContainer.style.paddingLeft = this.borderWidth + "px";
	195	newMainContainer.style.paddingRight = this.borderWidth + "px";
	196	var botMaxRadius = Math.max(this.settings.bl ? this.settings.bl.radius : 0, this.settings.br ? this.settings.br.radius : 0);
	197	newMainContainer.style.height = botMaxRadius + "px";
	198	newMainContainer.style.bottom = 0 - botMaxRadius + "px";
	199	newMainContainer.style.left = 0 - this.borderWidth + "px";
	200	this.bottomContainer = this.box.appendChild(newMainContainer);
	201	}
	202	break;
	203	}
	204	}
	205
	206	// Turn off current borders
	207	if(this.topContainer) this.box.style.borderTopWidth = "0px";
	208	if(this.bottomContainer) this.box.style.borderBottomWidth = "0px";
	209
	210	// Create array of available corners
	211	var corners = ["tr", "tl", "br", "bl"];
	212
	213	/*
	214	Loop for each corner
	215	*/
	216	for(var i in corners)
	217	{
	218	// FIX for prototype lib
	219	if(i > -1 < 4)
	220	{
	221	// Get current corner type from array
	222	var cc = corners[i];
	223
	224	// Has the user requested the currentCorner be round?
	225	if(!this.settings[cc])
	226	{
	227	// No
	228	if(((cc == "tr" \|\| cc == "tl") && this.topContainer != null) \|\| ((cc == "br" \|\| cc == "bl") && this.bottomContainer != null))
	229	{
	230	// We need to create a filler div to fill the space upto the next horzontal corner.
	231	var newCorner = document.createElement("DIV");
	232
	233	// Setup corners properties
	234	newCorner.style.position = "relative";
	235	newCorner.style.fontSize = "1px";
	236	newCorner.style.overflow = "hidden";
	237
	238	// Add background image?
	239	if(this.backgroundImage == "")
	240	newCorner.style.backgroundColor = this.boxColour;
	241	else
	242	newCorner.style.backgroundImage = this.backgroundImage;
	243
	244	switch(cc)
	245	{
	246	case "tl":
	247	newCorner.style.height = topMaxRadius - this.borderWidth + "px";
	248	newCorner.style.marginRight = this.settings.tr.radius - (this.borderWidth*2) + "px";
	249	newCorner.style.borderLeft = this.borderString;
	250	newCorner.style.borderTop = this.borderString;
	251	newCorner.style.left = -this.borderWidth + "px";
	252	break;
	253
	254	case "tr":
	255	newCorner.style.height = topMaxRadius - this.borderWidth + "px";
	256	newCorner.style.marginLeft = this.settings.tl.radius - (this.borderWidth*2) + "px";
	257	newCorner.style.borderRight = this.borderString;
	258	newCorner.style.borderTop = this.borderString;
	259	newCorner.style.backgroundPosition = "-" + (topMaxRadius + this.borderWidth) + "px 0px";
	260	newCorner.style.left = this.borderWidth + "px";
	261	break;
	262
	263	case "bl":
	264	newCorner.style.height = botMaxRadius - this.borderWidth + "px";
	265	newCorner.style.marginRight = this.settings.br.radius - (this.borderWidth*2) + "px";
	266	newCorner.style.borderLeft = this.borderString;
	267	newCorner.style.borderBottom = this.borderString;
	268	newCorner.style.left = -this.borderWidth + "px";
	269	newCorner.style.backgroundPosition = "-" + (this.borderWidth) + "px -" + (this.boxHeight + (botMaxRadius + this.borderWidth)) + "px";
	270	break;
	271
	272	case "br":
	273	newCorner.style.height = botMaxRadius - this.borderWidth + "px";
	274	newCorner.style.marginLeft = this.settings.bl.radius - (this.borderWidth*2) + "px";
	275	newCorner.style.borderRight = this.borderString;
	276	newCorner.style.borderBottom = this.borderString;
	277	newCorner.style.left = this.borderWidth + "px"
	278	newCorner.style.backgroundPosition = "-" + (botMaxRadius + this.borderWidth) + "px -" + (this.boxHeight + (botMaxRadius + this.borderWidth)) + "px";
	279	break;
	280	}
	281	}
	282	}
	283	else
	284	{
	285	/*
	286	PERFORMANCE NOTE:
	287
	288	If more than one corner is requested and a corner has been already
	289	created for the same radius then that corner will be used as a master and cloned.
	290	The pixel bars will then be repositioned to form the new corner type.
	291	All new corners start as a bottom right corner.
	292	*/
	293	if(this.masterCorners[this.settings[cc].radius])
	294	{
	295	// Create clone of the master corner
	296	var newCorner = this.masterCorners[this.settings[cc].radius].cloneNode(true);
	297	}
	298	else
	299	{
	300	// Yes, we need to create a new corner
	301	var newCorner = document.createElement("DIV");
	302	newCorner.style.height = this.settings[cc].radius + "px";
	303	newCorner.style.width = this.settings[cc].radius + "px";
	304	newCorner.style.position = "absolute";
	305	newCorner.style.fontSize = "1px";
	306	newCorner.style.overflow = "hidden";
	307
	308	// THE FOLLOWING BLOCK OF CODE CREATES A ROUNDED CORNER
	309	// ---------------------------------------------------- TOP
	310
	311	// Get border radius
	312	var borderRadius = parseInt(this.settings[cc].radius - this.borderWidth);
	313
	314	// Cycle the x-axis
	315	for(var intx = 0, j = this.settings[cc].radius; intx < j; intx++)
	316	{
	317	// Calculate the value of y1 which identifies the pixels inside the border
	318	if((intx +1) >= borderRadius)
	319	var y1 = -1;
	320	else
	321	var y1 = (Math.floor(Math.sqrt(Math.pow(borderRadius, 2) - Math.pow((intx+1), 2))) - 1);
	322
	323	// Only calculate y2 and y3 if there is a border defined
	324	if(borderRadius != j)
	325	{
	326	if((intx) >= borderRadius)
	327	var y2 = -1;
	328	else
	329	var y2 = Math.ceil(Math.sqrt(Math.pow(borderRadius,2) - Math.pow(intx, 2)));
	330
	331	if((intx+1) >= j)
	332	var y3 = -1;
	333	else
	334	var y3 = (Math.floor(Math.sqrt(Math.pow(j ,2) - Math.pow((intx+1), 2))) - 1);
	335	}
	336
	337	// Calculate y4
	338	if((intx) >= j)
	339	var y4 = -1;
	340	else
	341	var y4 = Math.ceil(Math.sqrt(Math.pow(j ,2) - Math.pow(intx, 2)));
	342
	343	// Draw bar on inside of the border with foreground colour
	344	if(y1 > -1) this.drawPixel(intx, 0, this.boxColour, 100, (y1+1), newCorner, -1, this.settings[cc].radius);
	345
	346	// Only draw border/foreground antialiased pixels and border if there is a border defined
	347	if(borderRadius != j)
	348	{
	349	// Cycle the y-axis
	350	for(var inty = (y1 + 1); inty < y2; inty++)
	351	{
	352	// Draw anti-alias pixels
	353	if(this.settings.antiAlias)
	354	{
	355	// For each of the pixels that need anti aliasing between the foreground and border colour draw single pixel divs
	356	if(this.backgroundImage != "")
	357	{
	358	var borderFract = (pixelFraction(intx, inty, borderRadius) * 100);
	359
	360	if(borderFract < 30)
	361	{
	362	this.drawPixel(intx, inty, this.borderColour, 100, 1, newCorner, 0, this.settings[cc].radius);
	363	}
	364	else
	365	{
	366	this.drawPixel(intx, inty, this.borderColour, 100, 1, newCorner, -1, this.settings[cc].radius);
	367	}
	368	}
	369	else
	370	{
	371	var pixelcolour = BlendColour(this.boxColour, this.borderColour, pixelFraction(intx, inty, borderRadius));
	372	this.drawPixel(intx, inty, pixelcolour, 100, 1, newCorner, 0, this.settings[cc].radius, cc);
	373	}
	374	}
	375	}
	376
	377	// Draw bar for the border
	378	if(this.settings.antiAlias)
	379	{
	380	if(y3 >= y2)
	381	{
	382	if (y2 == -1) y2 = 0;
	383	this.drawPixel(intx, y2, this.borderColour, 100, (y3 - y2 + 1), newCorner, 0, 0);
	384	}
	385	}
	386	else
	387	{
	388	if(y3 >= y1)
	389	{
	390	this.drawPixel(intx, (y1 + 1), this.borderColour, 100, (y3 - y1), newCorner, 0, 0);
	391	}
	392	}
	393
	394	// Set the colour for the outside curve
	395	var outsideColour = this.borderColour;
	396	}
	397	else
	398	{
	399	// Set the coour for the outside curve
	400	var outsideColour = this.boxColour;
	401	var y3 = y1;
	402	}
	403
	404	// Draw aa pixels?
	405	if(this.settings.antiAlias)
	406	{
	407	// Cycle the y-axis and draw the anti aliased pixels on the outside of the curve
	408	for(var inty = (y3 + 1); inty < y4; inty++)
	409	{
	410	// For each of the pixels that need anti aliasing between the foreground/border colour & background draw single pixel divs
	411	this.drawPixel(intx, inty, outsideColour, (pixelFraction(intx, inty , j) * 100), 1, newCorner, ((this.borderWidth > 0)? 0 : -1), this.settings[cc].radius);
	412	}
	413	}
	414	}
	415
	416	// END OF CORNER CREATION
	417	// ---------------------------------------------------- END
	418
	419	// We now need to store the current corner in the masterConers array
	420	this.masterCorners[this.settings[cc].radius] = newCorner.cloneNode(true);
	421	}
	422
	423	/*
	424	Now we have a new corner we need to reposition all the pixels unless
	425	the current corner is the bottom right.
	426	*/
	427	if(cc != "br")
	428	{
	429	// Loop through all children (pixel bars)
	430	for(var t = 0, k = newCorner.childNodes.length; t < k; t++)
	431	{
	432	// Get current pixel bar
	433	var pixelBar = newCorner.childNodes[t];
	434
	435	// Get current top and left properties
	436	var pixelBarTop = parseInt(pixelBar.style.top.substring(0, pixelBar.style.top.indexOf("px")));
	437	var pixelBarLeft = parseInt(pixelBar.style.left.substring(0, pixelBar.style.left.indexOf("px")));
	438	var pixelBarHeight = parseInt(pixelBar.style.height.substring(0, pixelBar.style.height.indexOf("px")));
	439
	440	// Reposition pixels
	441	if(cc == "tl" \|\| cc == "bl"){
	442	pixelBar.style.left = this.settings[cc].radius -pixelBarLeft -1 + "px"; // Left
	443	}
	444	if(cc == "tr" \|\| cc == "tl"){
	445	pixelBar.style.top = this.settings[cc].radius -pixelBarHeight -pixelBarTop + "px"; // Top
	446	}
	447
	448	switch(cc)
	449	{
	450	case "tr":
	451	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";
	452	break;
	453
	454	case "tl":
	455	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";
	456	break;
	457
	458	case "bl":
	459	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";
	460	break;
	461	}
	462	}
	463	}
	464	}
	465
	466	if(newCorner)
	467	{
	468	// Position the container
	469	switch(cc)
	470	{
	471	case "tl":
	472	if(newCorner.style.position == "absolute") newCorner.style.top = "0px";
	473	if(newCorner.style.position == "absolute") newCorner.style.left = "0px";
	474	if(this.topContainer) this.topContainer.appendChild(newCorner);
	475	break;
	476
	477	case "tr":
	478	if(newCorner.style.position == "absolute") newCorner.style.top = "0px";
	479	if(newCorner.style.position == "absolute") newCorner.style.right = "0px";
	480	if(this.topContainer) this.topContainer.appendChild(newCorner);
	481	break;
	482
	483	case "bl":
	484	if(newCorner.style.position == "absolute") newCorner.style.bottom = "0px";
	485	if(newCorner.style.position == "absolute") newCorner.style.left = "0px";
	486	if(this.bottomContainer) this.bottomContainer.appendChild(newCorner);
	487	break;
	488
	489	case "br":
	490	if(newCorner.style.position == "absolute") newCorner.style.bottom = "0px";
	491	if(newCorner.style.position == "absolute") newCorner.style.right = "0px";
	492	if(this.bottomContainer) this.bottomContainer.appendChild(newCorner);
	493	break;
	494	}
	495	}
	496	}
	497	}
	498
	499	/*
	500	The last thing to do is draw the rest of the filler DIVs.
	501	We only need to create a filler DIVs when two corners have
	502	diffrent radiuses in either the top or bottom container.
	503	*/
	504
	505	// Find out which corner has the biiger radius and get the difference amount
	506	var radiusDiff = new Array();
	507	radiusDiff["t"] = Math.abs(this.settings.tl.radius - this.settings.tr.radius)
	508	radiusDiff["b"] = Math.abs(this.settings.bl.radius - this.settings.br.radius);
	509
	510	for(z in radiusDiff)
	511	{
	512	// FIX for prototype lib
	513	if(z == "t" \|\| z == "b")
	514	{
	515	if(radiusDiff[z])
	516	{
	517	// Get the type of corner that is the smaller one
	518	var smallerCornerType = ((this.settings[z + "l"].radius < this.settings[z + "r"].radius)? z +"l" : z +"r");
	519
	520	// First we need to create a DIV for the space under the smaller corner
	521	var newFiller = document.createElement("DIV");
	522	newFiller.style.height = radiusDiff[z] + "px";
	523	newFiller.style.width = this.settings[smallerCornerType].radius+ "px"
	524	newFiller.style.position = "absolute";
	525	newFiller.style.fontSize = "1px";
	526	newFiller.style.overflow = "hidden";
	527	newFiller.style.backgroundColor = this.boxColour;
	528	//newFiller.style.backgroundColor = get_random_color();
	529
	530	// Position filler
	531	switch(smallerCornerType)
	532	{
	533	case "tl":
	534	newFiller.style.bottom = "0px";
	535	newFiller.style.left = "0px";
	536	newFiller.style.borderLeft = this.borderString;
	537	this.topContainer.appendChild(newFiller);
	538	break;
	539
	540	case "tr":
	541	newFiller.style.bottom = "0px";
	542	newFiller.style.right = "0px";
	543	newFiller.style.borderRight = this.borderString;
	544	this.topContainer.appendChild(newFiller);
	545	break;
	546
	547	case "bl":
	548	newFiller.style.top = "0px";
	549	newFiller.style.left = "0px";
	550	newFiller.style.borderLeft = this.borderString;
	551	this.bottomContainer.appendChild(newFiller);
	552	break;
	553
	554	case "br":
	555	newFiller.style.top = "0px";
	556	newFiller.style.right = "0px";
	557	newFiller.style.borderRight = this.borderString;
	558	this.bottomContainer.appendChild(newFiller);
	559	break;
	560	}
	561	}
	562
	563	// Create the bar to fill the gap between each corner horizontally
	564	var newFillerBar = document.createElement("DIV");
	565	newFillerBar.style.position = "relative";
	566	newFillerBar.style.fontSize = "1px";
	567	newFillerBar.style.overflow = "hidden";
	568	newFillerBar.style.backgroundColor = this.boxColour;
	569	newFillerBar.style.backgroundImage = this.backgroundImage;
	570
	571	switch(z)
	572	{
	573	case "t":
	574	// Top Bar
	575	if(this.topContainer)
	576	{
	577	// Edit by Asger Hallas: Check if settings.xx.radius is not false
	578	if(this.settings.tl.radius && this.settings.tr.radius)
	579	{
	580	newFillerBar.style.height = topMaxRadius - this.borderWidth + "px";
	581	newFillerBar.style.marginLeft = this.settings.tl.radius - this.borderWidth + "px";
	582	newFillerBar.style.marginRight = this.settings.tr.radius - this.borderWidth + "px";
	583	newFillerBar.style.borderTop = this.borderString;
	584
	585	if(this.backgroundImage != "")
	586	newFillerBar.style.backgroundPosition = "-" + (topMaxRadius + this.borderWidth) + "px 0px";
	587
	588	this.topContainer.appendChild(newFillerBar);
	589	}
	590
	591	// Repos the boxes background image
	592	this.box.style.backgroundPosition = "0px -" + (topMaxRadius - this.borderWidth) + "px";
	593	}
	594	break;
	595
	596	case "b":
	597	if(this.bottomContainer)
	598	{
	599	// Edit by Asger Hallas: Check if settings.xx.radius is not false
	600	if(this.settings.bl.radius && this.settings.br.radius)
	601	{
	602	// Bottom Bar
	603	newFillerBar.style.height = botMaxRadius - this.borderWidth + "px";
	604	newFillerBar.style.marginLeft = this.settings.bl.radius - this.borderWidth + "px";
	605	newFillerBar.style.marginRight = this.settings.br.radius - this.borderWidth + "px";
	606	newFillerBar.style.borderBottom = this.borderString;
	607
	608	if(this.backgroundImage != "")
	609	newFillerBar.style.backgroundPosition = "-" + (botMaxRadius + this.borderWidth) + "px -" + (this.boxHeight + (topMaxRadius + this.borderWidth)) + "px";
	610
	611	this.bottomContainer.appendChild(newFillerBar);
	612	}
	613	}
	614	break;
	615	}
	616	}
	617	}
	618
	619	/*
	620	AutoPad! apply padding if set.
	621	*/
	622	if(this.settings.autoPad == true && this.boxPadding > 0)
	623	{
	624	// Create content container
	625	var contentContainer = document.createElement("DIV");
	626
	627	// Set contentContainer's properties
	628	contentContainer.style.position = "relative";
	629	contentContainer.innerHTML = this.boxContent;
	630	contentContainer.className = "autoPadDiv";
	631
	632	// Get padding amounts
	633	var topPadding = Math.abs(topMaxRadius - this.boxPadding);
	634	var botPadding = Math.abs(botMaxRadius - this.boxPadding);
	635
	636	// Apply top padding
	637	if(topMaxRadius < this.boxPadding)
	638	contentContainer.style.paddingTop = topPadding + "px";
	639
	640	// Apply Bottom padding
	641	if(botMaxRadius < this.boxPadding)
	642	contentContainer.style.paddingBottom = botMaxRadius + "px";
	643
	644	// Apply left and right padding
	645	contentContainer.style.paddingLeft = this.boxPadding + "px";
	646	contentContainer.style.paddingRight = this.boxPadding + "px";
	647
	648	// Append contentContainer
	649	this.contentDIV = this.box.appendChild(contentContainer);
	650	}
	651	}
	652
	653	/*
	654	This function draws the pixles
	655	*/
	656	this.drawPixel = function(intx, inty, colour, transAmount, height, newCorner, image, cornerRadius)
	657	{
	658	// Create pixel
	659	var pixel = document.createElement("DIV");
	660	pixel.style.height = height + "px";
	661	pixel.style.width = "1px";
	662	pixel.style.position = "absolute";
	663	pixel.style.fontSize = "1px";
	664	pixel.style.overflow = "hidden";
	665
	666	// Max Top Radius
	667	var topMaxRadius = Math.max(this.settings["tr"].radius, this.settings["tl"].radius);
	668
	669	// Dont apply background image to border pixels
	670	if(image == -1 && this.backgroundImage != "")
	671	{
	672	pixel.style.backgroundImage = this.backgroundImage;
	673	pixel.style.backgroundPosition = "-" + (this.boxWidth - (cornerRadius - intx) + this.borderWidth) + "px -" + ((this.boxHeight + topMaxRadius + inty) -this.borderWidth) + "px";
	674	}
	675	else
	676	{
	677	pixel.style.backgroundColor = colour;
	678	}
	679
	680	// Set opacity if the transparency is anything other than 100
	681	if (transAmount != 100)
	682	setOpacity(pixel, transAmount);
	683
	684	// Set the pixels position
	685	pixel.style.top = inty + "px";
	686	pixel.style.left = intx + "px";
	687
	688	newCorner.appendChild(pixel);
	689	}
	690	}
	691
	692	// ------------- UTILITY FUNCTIONS
	693
	694	// Inserts a element after another
	695	function insertAfter(parent, node, referenceNode)
	696	{
	697	parent.insertBefore(node, referenceNode.nextSibling);
	698	}
	699
	700	/*
	701	Blends the two colours by the fraction
	702	returns the resulting colour as a string in the format "#FFFFFF"
	703	*/
	704	function BlendColour(Col1, Col2, Col1Fraction)
	705	{
	706	var red1 = parseInt(Col1.substr(1,2),16);
	707	var green1 = parseInt(Col1.substr(3,2),16);
	708	var blue1 = parseInt(Col1.substr(5,2),16);
	709	var red2 = parseInt(Col2.substr(1,2),16);
	710	var green2 = parseInt(Col2.substr(3,2),16);
	711	var blue2 = parseInt(Col2.substr(5,2),16);
	712
	713	if(Col1Fraction > 1 \|\| Col1Fraction < 0) Col1Fraction = 1;
	714
	715	var endRed = Math.round((red1 * Col1Fraction) + (red2 * (1 - Col1Fraction)));
	716	if(endRed > 255) endRed = 255;
	717	if(endRed < 0) endRed = 0;
	718
	719	var endGreen = Math.round((green1 * Col1Fraction) + (green2 * (1 - Col1Fraction)));
	720	if(endGreen > 255) endGreen = 255;
	721	if(endGreen < 0) endGreen = 0;
	722
	723	var endBlue = Math.round((blue1 * Col1Fraction) + (blue2 * (1 - Col1Fraction)));
	724	if(endBlue > 255) endBlue = 255;
	725	if(endBlue < 0) endBlue = 0;
	726
	727	return "#" + IntToHex(endRed)+ IntToHex(endGreen)+ IntToHex(endBlue);
	728	}
	729
	730	/*
	731	Converts a number to hexadecimal format
	732	*/
	733	function IntToHex(strNum)
	734	{
	735	base = strNum / 16;
	736	rem = strNum % 16;
	737	base = base - (rem / 16);
	738	baseS = MakeHex(base);
	739	remS = MakeHex(rem);
	740
	741	return baseS + '' + remS;
	742	}
	743
	744
	745	/*
	746	gets the hex bits of a number
	747	*/
	748	function MakeHex(x)
	749	{
	750	if((x >= 0) && (x <= 9))
	751	{
	752	return x;
	753	}
	754	else
	755	{
	756	switch(x)
	757	{
	758	case 10: return "A";
	759	case 11: return "B";
	760	case 12: return "C";
	761	case 13: return "D";
	762	case 14: return "E";
	763	case 15: return "F";
	764	}
	765	}
	766	}
	767
	768
	769	/*
	770	For a pixel cut by the line determines the fraction of the pixel on the 'inside' of the
	771	line. Returns a number between 0 and 1
	772	*/
	773	function pixelFraction(x, y, r)
	774	{
	775	var pixelfraction = 0;
	776
	777	/*
	778	determine the co-ordinates of the two points on the perimeter of the pixel that the
	779	circle crosses
	780	*/
	781	var xvalues = new Array(1);
	782	var yvalues = new Array(1);
	783	var point = 0;
	784	var whatsides = "";
	785
	786	// x + 0 = Left
	787	var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(x,2)));
	788
	789	if ((intersect >= y) && (intersect < (y+1)))
	790	{
	791	whatsides = "Left";
	792	xvalues[point] = 0;
	793	yvalues[point] = intersect - y;
	794	point = point + 1;
	795	}
	796	// y + 1 = Top
	797	var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(y+1,2)));
	798
	799	if ((intersect >= x) && (intersect < (x+1)))
	800	{
	801	whatsides = whatsides + "Top";
	802	xvalues[point] = intersect - x;
	803	yvalues[point] = 1;
	804	point = point + 1;
	805	}
	806	// x + 1 = Right
	807	var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(x+1,2)));
	808
	809	if ((intersect >= y) && (intersect < (y+1)))
	810	{
	811	whatsides = whatsides + "Right";
	812	xvalues[point] = 1;
	813	yvalues[point] = intersect - y;
	814	point = point + 1;
	815	}
	816	// y + 0 = Bottom
	817	var intersect = Math.sqrt((Math.pow(r,2) - Math.pow(y,2)));
	818
	819	if ((intersect >= x) && (intersect < (x+1)))
	820	{
	821	whatsides = whatsides + "Bottom";
	822	xvalues[point] = intersect - x;
	823	yvalues[point] = 0;
	824	}
	825
	826	/*
	827	depending on which sides of the perimeter of the pixel the circle crosses calculate the
	828	fraction of the pixel inside the circle
	829	*/
	830	switch (whatsides)
	831	{
	832	case "LeftRight":
	833	pixelfraction = Math.min(yvalues[0],yvalues[1]) + ((Math.max(yvalues[0],yvalues[1]) - Math.min(yvalues[0],yvalues[1]))/2);
	834	break;
	835
	836	case "TopRight":
	837	pixelfraction = 1-(((1-xvalues[0])*(1-yvalues[1]))/2);
	838	break;
	839
	840	case "TopBottom":
	841	pixelfraction = Math.min(xvalues[0],xvalues[1]) + ((Math.max(xvalues[0],xvalues[1]) - Math.min(xvalues[0],xvalues[1]))/2);
	842	break;
	843
	844	case "LeftBottom":
	845	pixelfraction = (yvalues[0]*xvalues[1])/2;
	846	break;
	847
	848	default:
	849	pixelfraction = 1;
	850	}
	851
	852	return pixelfraction;
	853	}
	854
	855
	856	// This function converts CSS rgb(x, x, x) to hexadecimal
	857	function rgb2Hex(rgbColour)
	858	{
	859	try{
	860
	861	// Get array of RGB values
	862	var rgbArray = rgb2Array(rgbColour);
	863
	864	// Get RGB values
	865	var red = parseInt(rgbArray[0]);
	866	var green = parseInt(rgbArray[1]);
	867	var blue = parseInt(rgbArray[2]);
	868
	869	// Build hex colour code
	870	var hexColour = "#" + IntToHex(red) + IntToHex(green) + IntToHex(blue);
	871	}
	872	catch(e){
	873
	874	alert("There was an error converting the RGB value to Hexadecimal in function rgb2Hex");
	875	}
	876
	877	return hexColour;
	878	}
	879
	880	// Returns an array of rbg values
	881	function rgb2Array(rgbColour)
	882	{
	883	// Remove rgb()
	884	var rgbValues = rgbColour.substring(4, rgbColour.indexOf(")"));
	885
	886	// Split RGB into array
	887	var rgbArray = rgbValues.split(", ");
	888
	889	return rgbArray;
	890	}
	891
	892	/*
	893	Function by Simon Willison from sitepoint.com
	894	Modified by Cameron Cooke adding Safari's rgba support
	895	*/
	896	function setOpacity(obj, opacity)
	897	{
	898	opacity = (opacity == 100)?99.999:opacity;
	899
	900	if(isSafari && obj.tagName != "IFRAME")
	901	{
	902	// Get array of RGB values
	903	var rgbArray = rgb2Array(obj.style.backgroundColor);
	904
	905	// Get RGB values
	906	var red = parseInt(rgbArray[0]);
	907	var green = parseInt(rgbArray[1]);
	908	var blue = parseInt(rgbArray[2]);
	909
	910	// Safari using RGBA support
	911	obj.style.backgroundColor = "rgba(" + red + ", " + green + ", " + blue + ", " + opacity/100 + ")";
	912	}
	913	else if(typeof(obj.style.opacity) != "undefined")
	914	{
	915	// W3C
	916	obj.style.opacity = opacity/100;
	917	}
	918	else if(typeof(obj.style.MozOpacity) != "undefined")
	919	{
	920	// Older Mozilla
	921	obj.style.MozOpacity = opacity/100;
	922	}
	923	else if(typeof(obj.style.filter) != "undefined")
	924	{
	925	// IE
	926	obj.style.filter = "alpha(opacity:" + opacity + ")";
	927	}
	928	else if(typeof(obj.style.KHTMLOpacity) != "undefined")
	929	{
	930	// Older KHTML Based Browsers
	931	obj.style.KHTMLOpacity = opacity/100;
	932	}
	933	}
	934
	935	/*
	936	Returns index if the passed value is found in the
	937	array otherwise returns false.
	938	*/
	939	function inArray(array, value)
	940	{
	941	for(var i = 0; i < array.length; i++){
	942
	943	// Matches identical (===), not just similar (==).
	944	if (array[i] === value) return i;
	945	}
	946
	947	return false;
	948	}
	949
	950	/*
	951	Returns true if the passed value is found as a key
	952	in the array otherwise returns false.
	953	*/
	954	function inArrayKey(array, value)
	955	{
	956	for(key in array){
	957
	958	// Matches identical (===), not just similar (==).
	959	if(key === value) return true;
	960	}
	961
	962	return false;
	963	}
	964
	965	// Cross browser add event wrapper
	966	function addEvent(elm, evType, fn, useCapture) {
	967	if (elm.addEventListener) {
	968	elm.addEventListener(evType, fn, useCapture);
	969	return true;
	970	}
	971	else if (elm.attachEvent) {
	972	var r = elm.attachEvent('on' + evType, fn);
	973	return r;
	974	}
	975	else {
	976	elm['on' + evType] = fn;
	977	}
	978	}
	979
	980	// Cross browser remove event wrapper
	981	function removeEvent(obj, evType, fn, useCapture){
	982	if (obj.removeEventListener){
	983	obj.removeEventListener(evType, fn, useCapture);
	984	return true;
	985	} else if (obj.detachEvent){
	986	var r = obj.detachEvent("on"+evType, fn);
	987	return r;
	988	} else {
	989	alert("Handler could not be removed");
	990	}
	991	}
	992
	993	// Formats colours
	994	function format_colour(colour)
	995	{
	996	var returnColour = "#ffffff";
	997
	998	// Make sure colour is set and not transparent
	999	if(colour != "" && colour != "transparent")
	1000	{
	1001	// RGB Value?
	1002	if(colour.substr(0, 3) == "rgb")
	1003	{
	1004	// Get HEX aquiv.
	1005	returnColour = rgb2Hex(colour);
	1006	}
	1007	else if(colour.length == 4)
	1008	{
	1009	// 3 chr colour code add remainder
	1010	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);
	1011	}
	1012	else
	1013	{
	1014	// Normal valid hex colour
	1015	returnColour = colour;
	1016	}
	1017	}
	1018
	1019	return returnColour;
	1020	}
	1021
	1022	// Returns the style value for the property specfied
	1023	function get_style(obj, property, propertyNS)
	1024	{
	1025	try
	1026	{
	1027	if(obj.currentStyle)
	1028	{
	1029	var returnVal = eval("obj.currentStyle." + property);
	1030	}
	1031	else
	1032	{
	1033	/*
	1034	Safari does not expose any information for the object if display is
	1035	set to none is set so we temporally enable it.
	1036	*/
	1037	if(isSafari && obj.style.display == "none")
	1038	{
	1039	obj.style.display = "";
	1040	var wasHidden = true;
	1041	}
	1042
	1043	var returnVal = document.defaultView.getComputedStyle(obj, '').getPropertyValue(propertyNS);
	1044
	1045	// Rehide the object
	1046	if(isSafari && wasHidden)
	1047	{
	1048	obj.style.display = "none";
	1049	}
	1050	}
	1051	}
	1052	catch(e)
	1053	{
	1054	// Do nothing
	1055	}
	1056
	1057	return returnVal;
	1058	}
	1059
	1060	// Get elements by class by Dustin Diaz.
	1061	function getElementsByClass(searchClass, node, tag)
	1062	{
	1063	var classElements = new Array();
	1064
	1065	if(node == null)
	1066	node = document;
	1067	if(tag == null)
	1068	tag = '*';
	1069
	1070	var els = node.getElementsByTagName(tag);
	1071	var elsLen = els.length;
	1072	var pattern = new RegExp("(^\|\s)"+searchClass+"(\s\|$)");
	1073
	1074	for (i = 0, j = 0; i < elsLen; i++)
	1075	{
	1076	if(pattern.test(els[i].className))
	1077	{
	1078	classElements[j] = els[i];
	1079	j++;
	1080	}
	1081	}
	1082
	1083	return classElements;
	1084	}
	1085
	1086	// Displays error message
	1087	function newCurvyError(errorMessage)
	1088	{
	1089	return new Error("curvyCorners Error:\n" + errorMessage)
	1090	}

Note: See TracBrowser for help on using the browser.

Download in other formats: