/*        cell round corner JavaScript (see separate css)
  					 by R. Sutcliffe
  					Arjay Enterprises
  					
  				version 1.0    2007 02 12 
   Ideas and even code snippets or logic from the many products, though 
       there isn't much left of such borrowings here once additions and corrections were done.
    Note that the idea of using a "dummy" element to manipoulate corners is a common one
    	employed in many such routines such as nifty and rico. I do not know who thought
    	of it first. Here, we use "span" rather than "b" as more semantically correct.
    	
    Copyright: None is claimed. Neither is any fitness or utility. Use or abuse it without prejudice.
 
 
 Script goals: rounded corners of various sizes with aliasing.
   
   Call with  Round(selector,bk,fcolor,sizeP,border,bdcolor,which)
   where:
	0. all colours must be in # format, either long or short or rgb, any mix of 0-255 or %
	1. selector: is an ID or class name, including a contained one. If a class then
        the function will apply to the entire class.
	2. bk: is the background color, that is at the corners
	3. fcolor: is the fill color, that is inside the cell
	4. sizeP: is the size parameter, and can be "xsmall" "small" "medium" "large" or "xlarge"
		(small is the default)
	  optionally any one of these followed by a space and then "aa" for turning on antialiasing
	  example "large aa" This antialiasing is a bit crude but not bad.
	5. border: is the thickness of the border in pixels. Works ok for 0,1,2,3 though a border of 1
			is hard to make an antialiased corner look good if the border color contrasts sharply 
			with the and background or fill color.
		a positive border means that the border supplied will be applied to the content cell 
		a negative border means that the absolute value will be used for the corners, top and bottom, 
    		but that the content cell is responsible for its own side borders.
	6. bdcolor: is the border color
		If the border colour is specified as "blended" it will become a blend of the background
			and fill colours. Adding antialiasing in this case can be quite effective, especially with 
			sharply contrasting colors.
	7. which: says which corners to round and can be "all "top" "bottom" "left" "right" "tl" "tr" "bl" "br"
	     or any additive combination thereof. Thus "top br" rounds three of the four corners and has
	     the same effect as "right tl" If which is empty, it is taken by default to be "all".
	     	If only some corners are rounded and a border has been applied, the script will correctly
	     square off the corners with the appropriate border.
	8. An inner or wrapped DIV is needed to do the correct side borders, and it should be the first and
		only DIV child of the wrapper being rounded. The appropriate class should be padded as needed, but
		have no margins. If it has borders, they are only used if the border parameter is negative (don't override)
		otherwise they are ignored.
		
 Dependencies: this is part of cellera, and shares its css file but does not depend on its code
   so rounding cn be loaded independently of the equal height provisions in cellera

  */
 
var marg = new Object();
marg ["xsmall"] = new Array (2,1);
marg ["small"] = new Array (5,3,2,1,1);
marg ["medium"] = new Array (10,7,5,4,3,2,2,1,1,1);
marg ["large"] = new Array (14,11,8,6,5,4,3,3,2,2,2,1,1,1);
marg ["xlarge"] = new Array (18,14,11,9,7,6,5,4,4,3,3,2,2,2,1,1,1,1);
marg ["xxlarge"] = new Array (26,20,16,13,11,9,8,7,6,5,5,4,4,3,3,3,2,2,2,2,1,1,1,1,1,1);

// following flag determines return format of colors from the color mix proc
	// currently the only values that matter are "rgb" or "hex" We don't use hsb
var colorPrefFlag = "rgb";

						// The main proc
function Round(selector,bk,fcolor,sizeP,border,bdcolor,which)
{
	var i;
	var v=getElementsBySelector(selector); // get all items designated by this selector
	var l=v.length;
	if (l == 0) return; //nothing to do
	var aalias = false; // pending examining sizeP
	var tlr,blr,tl,tr,bl,br;
	
	if (bdcolor&&bdcolor=="blended")  bdcolor = Mix(bk,.5,fcolor)
	if (!sizeP) size = "small";
	else 
		{
			size = sizeP
			if (sizeP.indexOf(" ")>0)
				{
					var sp=[];
					sp = sizeP.split(" ");
					size = sp[0];
					aalias = (sp[1]=="aa");
				};
		}
	
	// pull off which parameter and translate into four flags
	if (!which) which = "all" // by default do all four corners
	if (which.indexOf("all")>=0) {tl=true;tr=true;bl=true,br=true};
	if (which.indexOf("top")>=0) {tl=true;tr=true};
	if (which.indexOf("bottom")>=0) {bl=true,br=true};
	if (which.indexOf("left")>=0) {tl=true; bl=true};
	if (which.indexOf("right")>=0) {tr=true; br=true};
	if (which.indexOf("tl")>=0) tl=true;
	if (which.indexOf("tr")>=0) tr=true;
	if (which.indexOf("bl")>=0) bl=true;
	if (which.indexOf("br")>=0) br=true;
	// use these flags to set up for our internal calls
	if (tl&&tr) tlr="both";
	else if (tl) tlr = "left";
	else if (tr) tlr = "right";
	if (bl&&br) blr = "both";
	else if (bl) blr = "left";
	else if (br) blr = "right";
	
	if (!border) border = 0;
	var overrideborders = !(border<0);
	border = Math.abs(border);
		// main loop
	for(i=0;i<l;i++) // and apply the rounding to all of them
		{	
			if (tlr) AddTop(v[i],bk,fcolor,size,border,bdcolor,tlr,aalias);
			if (blr) AddBottom(v[i],bk,fcolor,size,border,bdcolor,blr,aalias);
			if (border&&overrideborders)
				{
					if (!tlr) setUpWrappedCell(v[i],border,bdcolor,"top","both");
					if (!blr) setUpWrappedCell(v[i],border,bdcolor,"bottom","both");
					else setUpWrappedCell(v[i],border,bdcolor,"","both");
				}
			v[i].style.backgroundColor=fcolor; // pop in the fill color
		}    
}

// We could entangle the top and bottom procs, but it seems a lot of extra work
// the AddTop may have more comments
function AddTop(el,bk,fcolor,size,border,bdcolor,lr,aalias)
{
var nextDeltax,prevDeltax,thisDeltain,nextDeltam,thisDeltam;
var lborder,rborder,mborder,lmargin,rmargin;
var ocborder=0; // storage for cborder on previous iteration
var cborder= (border)? (marg [size][0] - marg [size][border]+1):0; //initial margin for first step after top border drawn
var r = marg [size][0];
var lim=r+border; // loop limit; number of slices
var mid = Math.floor ((marg [size][0])/2); // border computation changes after mid point
var midin = Math.floor (lim/2);
var d=document.createElement("span"); // the entire lid assembly
var slice = new Array (); // will use to construct slices for the lid
var j; // layer counter for each slice
var third = false; //flag for third layer of dark border; gets reset later
if (aalias)
	{ //ocolors are "outer" and icolors are inner
	if (border ==0) // only outer aliasing is used in this case and we mix background and fill
		{var aacoloro1 = Mix(bk,.9,fcolor);
		var aacoloro2 =  Mix(bk,.7,fcolor);
		var aacolori2 =  Mix(bk,.5,fcolor);
		var aacolori3 =  Mix(bk,.3,fcolor);
		}
	else 
		{var aacoloro1 = Mix(bk,.8,bdcolor); 
		var aacoloro2 = Mix(bk,.5,bdcolor); 
		var aacoloro3 = Mix(bk,.3,bdcolor);
		var aacolori1 = Mix(bdcolor,.7,fcolor);	
		var aacolori2 = Mix(bdcolor,.5,fcolor);
		var aacolori3 = Mix(bdcolor,.2,fcolor);
		}
	} //if (aalias)
d.style.backgroundColor=bk;
d.style.borderWidth = "0px";
d.className="rtop";

for(i=1;i<=lim;i++)
	{
    j=0;
    // set up the outer peel of the horizontal slice
    slice[0]=document.createElement("span");
    slice[0].style.borderStyle = "solid";
    slice[0].style.borderWidth = 0;
    slice[0].style.borderColor=bdcolor;
    nextDeltam = (i<=r)? marg[size][i-1]-marg [size][i]:0; // outer margin change for next line
    thisDeltam = (i>1&&i<lim)? marg[size][i-2]-marg [size][i-1]:0; // outer margin change for this line

    
    // do any top border slices using border colour as fill color
	if (i<=border) slice[0].style.backgroundColor=bdcolor; //top and bottom borders are made with bordercolor as fill
	else slice[0].style.backgroundColor=fcolor;

    if (border&&i>border+1)  //after top border compute a new cborder width for each slice to apply later
    	{
    	nextDeltax = (i>border+1&&i< r)? thisDeltam:0; // amount of margin change this line
    	prevDeltax = (i>border+1)? marg [size][i-(border+2)]-marg [size][i-(border+1)]:0; //change inside content cell
    	if (i<mid) cborder = cborder + nextDeltax - prevDeltax;
    	else cborder = border + nextDeltax;
    	if (i==r+1) cborder++
    	}
    	
    	// antialias section
	if (aalias)
		{
		mborder = cborder; // make a local mutable copy of the coloured border length
		thisDeltain = (i>border&&i<lim)? marg [size][i-2]-marg [size][i-1]+ocborder-cborder:0 // inner margin change for next line
		ocborder = cborder; // save this border for computing delta in on next round
	// 1. now do outermost antialiasing peel using the border of the outer layer
		lborder = (i<r&&lr!="right")? nextDeltam:0;
		rborder = (i<r&&lr!="left")? nextDeltam:0;
		slice[0].style.borderLeftWidth= lborder+"px"; slice[0].style.borderRightWidth= rborder+"px";
		slice[0].style.borderColor= aacoloro1;
			
	// 2. now do second antialiasing peel, still on the outslde of the actual border with another layer
		j++;
		slice[j]=document.createElement("span");
		slice[j].style.borderWidth = 0;
		slice[j].style.borderStyle = "solid";
		slice[j].style.borderColor=(nextDeltam||i==r)? aacoloro2:aacoloro1;
		lborder = (i<(r+1)&&lr!="right")? 1:0;
		rborder = (i<(r+1)&&lr!="left")? 1:0;
		slice[j].style.borderLeftWidth= lborder+"px"; slice[j].style.borderRightWidth= rborder+"px";
		slice[j-1].appendChild (slice[j]);
		
	// 3. next put in the actual border computed above as a new peel
		if (border)
			{
			// 3a. stage a is the outer aalias portion; replace the first dot in a wide border by a mix
			if ((i==1||i==r+1)||(thisDeltam && cborder>border))
			{j++;
			mborder--;
			slice[j]=document.createElement("span");
			slice[j].style.borderWidth = 0;
			slice[j].style.borderStyle = "solid";
			slice[j].style.borderColor=aacoloro3;
			lborder = (lr!="right")? 1:0;
			rborder = (lr!="left")? 1:0;
			slice[j].style.borderLeftWidth= lborder+"px"; slice[j].style.borderRightWidth= rborder+"px";				
			slice[j-1].appendChild (slice[j]);
			}

			//3b. stage b is the main portion with the full bcolor
			j++;
			slice[j]=document.createElement("span");
			slice[j].style.borderWidth = 0;
			slice[j].style.borderStyle = "solid";
			slice[j].style.borderColor=bdcolor;
			third = (mborder>border&&i>border)||(i==r+1); //see if there will be a third peel in this section
			if (third) mborder-- // and if so, decrement main border one more to allow for it
			lborder = (lr!="right")? mborder:border;
			rborder = (lr!="left")? mborder:border;
			slice[j].style.borderLeftWidth= lborder+"px"; slice[j].style.borderRightWidth= rborder+"px";				
			slice[j-1].appendChild (slice[j]);

			//3c. stage c is the inner aalias peel; replace the last dot in a wide border by a mix
			if (third)//thisDeltam && 
			{j++;
			slice[j]=document.createElement("span");
			slice[j].style.borderWidth = 0;
			slice[j].style.borderStyle = "solid";
			slice[j].style.borderColor=aacolori1;
			lborder = (lr!="right")? 1:0;
			rborder = (lr!="left")? 1:0;
			slice[j].style.borderLeftWidth= lborder+"px"; slice[j].style.borderRightWidth= rborder+"px";				
			slice[j-1].appendChild (slice[j]);
			}
		}//if border
	// 4. now do first antialiasing on the inslde of the actual border for the next peel
			if (i>border&&!(border ==1&&i==lim) ||border == 0)
			{
				j++;
				slice[j]=document.createElement("span");
				slice[j].style.borderWidth = 0;
				slice[j].style.borderStyle = "solid";
				slice[j].style.borderColor=(thisDeltain||(border ==1 && i==lim))? aacolori2:aacolori3;
				lborder = (lr!="right")? 1:0;
				rborder = (lr!="left")? 1:0;
				slice[j].style.borderLeftWidth= lborder+"px"; slice[j].style.borderRightWidth= rborder+"px";
				slice[j-1].appendChild (slice[j]);
			}
	// 5. now do second antialiasing on the innermost side of the actual border as innermost peel
			if (thisDeltain)//when border one don't want two of this color in a row
				{j++;
				slice[j]=document.createElement("span");
				slice[j].style.borderWidth = 0;
				slice[j].style.borderStyle = "solid";
				slice[j].style.borderColor=aacolori3;
				lborder = (lr!="right")? 1:0;
				rborder = (lr!="left")? 1:0;
				slice[j].style.borderLeftWidth= lborder+"px"; slice[j].style.borderRightWidth= rborder+"px";
				slice[j-1].appendChild (slice[j]);
				}
			}

	else // that is, if no aalias just do this
		{
		
		lborder = (lr!="right")? cborder:border; 
		rborder = (lr!="left")? cborder:border;
		slice[0].style.borderLeftWidth= lborder+"px"; slice[0].style.borderRightWidth= rborder+"px";
		}
	if (i>=r) nextDeltam-- 
	lmargin = (lr!="right")? marg [size][i-1] - (aalias?nextDeltam+1:0) :0; //different margin when antialiasing
	rmargin = (lr!="left")? marg [size][i-1] - (aalias?nextDeltam+1:0) :0;
	slice[0].style.margin ="0px "+ rmargin+"px "+"0px "+ lmargin+"px"; 
    d.appendChild(slice[0]); //attach the slice to the lid element
    }
el.insertBefore(d,el.firstChild);// and tack the lid on 
}

function AddBottom(el,bk,fcolor,size,border,bdcolor,lr,aalias)
{
var nextDeltax,prevDeltax,thisDeltain,nextDeltam,thisDeltam;
var lborder,rborder,mborder,lmargin,rmargin;
var ocborder=0; // storage for cborder on previous iteration
var cborder= (border)? (marg [size][0] - marg [size][border]+1):0; //initial margin for first step after top border drawn
var r = marg [size][0];
var lim=r+border; // loop limit; number of slices
var mid = Math.floor ((marg [size][0])/2); // border computation changes after mid point
var midin = Math.floor (lim/2);
var d=document.createElement("span"); // the entire lid assembly
var slice = new Array (); // will use to construct slices for the lid
var j; // layer counter for each slice
var third = false; //flag for third layer of dark border; gets reset later
if (aalias)
	{ //ocolors are "outer" and icolors are inner
	if (border ==0) // only outer aliasing is used in this case and we mix background and fill
		{var aacoloro1 = Mix(bk,.9,fcolor);
		var aacoloro2 =  Mix(bk,.7,fcolor);
		var aacolori2 =  Mix(bk,.5,fcolor);
		var aacolori3 =  Mix(bk,.3,fcolor);
		}
	else 
		{var aacoloro1 = Mix(bk,.9,bdcolor); 
		var aacoloro2 = Mix(bk,.7,bdcolor); 
		var aacoloro3 = Mix(bk,.4,bdcolor);
		var aacolori1 = Mix(bdcolor,.6,fcolor);	
		var aacolori2 = Mix(bdcolor,.3,fcolor);
		var aacolori3 = Mix(bdcolor,.1,fcolor);
		}
	} //if (aalias)
d.style.backgroundColor=bk;
d.style.borderWidth = "0px";
d.className="rbottom";

for(i=1;i<=lim;i++)
	{
    j=0;
    // set up the outer peel of the horizontal slice
    slice[0]=document.createElement("span");
    slice[0].style.borderStyle = "solid";
    slice[0].style.borderWidth = 0;
    slice[0].style.borderColor=bdcolor;
    nextDeltam = (i<=r)? marg[size][i-1]-marg [size][i]:0; // outer margin change for next line
    thisDeltam = (i>1&&i<lim)? marg[size][i-2]-marg [size][i-1]:0; // outer margin change for this line

    
    // do any top border slices using border colour as fill color
	if (i<=border) slice[0].style.backgroundColor=bdcolor; //top and bottom borders are made with bordercolor as fill
	else slice[0].style.backgroundColor=fcolor;

    if (border&&i>border+1)  //after top border compute a new cborder width for each slice to apply later
    	{
    	nextDeltax = (i>border+1&&i< r)? thisDeltam:0; // amount of margin change this line
    	prevDeltax = (i>border+1)? marg [size][i-(border+2)]-marg [size][i-(border+1)]:0; //change inside content cell
    	if (i<mid) cborder = cborder + nextDeltax - prevDeltax;
    	else cborder = border + nextDeltax;
    	if (i==r+1) cborder++
    	}
    	
    	// antialias section
	if (aalias)
		{
		mborder = cborder; // make a local mutable copy of the coloured border length
		thisDeltain = (i>border&&i<lim)? marg [size][i-2]-marg [size][i-1]+ocborder-cborder:0 // inner margin change for next line
		ocborder = cborder; // save this border for computing delta in on next round
	// 1. now do outermost antialiasing peel using the border of the outer layer
		lborder = (i<r&&lr!="right")? nextDeltam:0;
		rborder = (i<r&&lr!="left")? nextDeltam:0;
		slice[0].style.borderLeftWidth= lborder+"px"; slice[0].style.borderRightWidth= rborder+"px";
		slice[0].style.borderColor= aacoloro1;
			
	// 2. now do second antialiasing peel, still on the outslde of the actual border with another layer
		j++;
		slice[j]=document.createElement("span");
		slice[j].style.borderWidth = 0;
		slice[j].style.borderStyle = "solid";
		slice[j].style.borderColor=(nextDeltam||i==r)? aacoloro2:aacoloro1;
		lborder = (i<(r+1)&&lr!="right")? 1:0;
		rborder = (i<(r+1)&&lr!="left")? 1:0;
		slice[j].style.borderLeftWidth= lborder+"px"; slice[j].style.borderRightWidth= rborder+"px";
		slice[j-1].appendChild (slice[j]);
		
	// 3. next put in the actual border computed above as a new peel
		if (border)
			{
			// 3a. stage a is the outer aalias portion; replace the first dot in a wide border by a mix
			if ((i==1||i==r+1)||(thisDeltam && cborder>border))
			{j++;
			mborder--;
			slice[j]=document.createElement("span");
			slice[j].style.borderWidth = 0;
			slice[j].style.borderStyle = "solid";
			slice[j].style.borderColor=aacoloro3;
			lborder = (lr!="right")? 1:0;
			rborder = (lr!="left")? 1:0;
			slice[j].style.borderLeftWidth= lborder+"px"; slice[j].style.borderRightWidth= rborder+"px";				
			slice[j-1].appendChild (slice[j]);
			}

			//3b. stage b is the main portion with the full bcolor
			j++;
			slice[j]=document.createElement("span");
			slice[j].style.borderWidth = 0;
			slice[j].style.borderStyle = "solid";
			slice[j].style.borderColor=bdcolor;
			third = (mborder>border&&i>border)||(i==r+1); //see if there will be a third peel in this section
			if (third) mborder-- // and if so, decrement main border one more to allow for it
			lborder = (lr!="right")? mborder:border;
			rborder = (lr!="left")? mborder:border;
			slice[j].style.borderLeftWidth= lborder+"px"; slice[j].style.borderRightWidth= rborder+"px";				
			slice[j-1].appendChild (slice[j]);

			//3c. stage c is the inner aalias peel; replace the last dot in a wide border by a mix
			if (third)//thisDeltam && 
			{j++;
			slice[j]=document.createElement("span");
			slice[j].style.borderWidth = 0;
			slice[j].style.borderStyle = "solid";
			slice[j].style.borderColor=aacolori1;
			lborder = (lr!="right")? 1:0;
			rborder = (lr!="left")? 1:0;
			slice[j].style.borderLeftWidth= lborder+"px"; slice[j].style.borderRightWidth= rborder+"px";				
			slice[j-1].appendChild (slice[j]);
			}
		}//if border
	// 4. now do first antialiasing on the inslde of the actual border for the next peel
			if (i>border&&!(border ==1&&i==lim) ||border == 0)
			{
				j++;
				slice[j]=document.createElement("span");
				slice[j].style.borderWidth = 0;
				slice[j].style.borderStyle = "solid";
				slice[j].style.borderColor=(thisDeltain||(border ==1 && i==lim))? aacolori2:aacolori3;
				lborder = (lr!="right")? 1:0;
				rborder = (lr!="left")? 1:0;
				slice[j].style.borderLeftWidth= lborder+"px"; slice[j].style.borderRightWidth= rborder+"px";
				slice[j-1].appendChild (slice[j]);
			}
	// 5. now do second antialiasing on the innermost side of the actual border as innermost peel
			if (thisDeltain)//when border one don't want two of this color in a row
				{j++;
				slice[j]=document.createElement("span");
				slice[j].style.borderWidth = 0;
				slice[j].style.borderStyle = "solid";
				slice[j].style.borderColor=aacolori3;
				lborder = (lr!="right")? 1:0;
				rborder = (lr!="left")? 1:0;
				slice[j].style.borderLeftWidth= lborder+"px"; slice[j].style.borderRightWidth= rborder+"px";
				slice[j-1].appendChild (slice[j]);
				}
			}

	else // that is, if no aalias just do this
		{
		
		lborder = (lr!="right")? cborder:border; 
		rborder = (lr!="left")? cborder:border;
		slice[0].style.borderLeftWidth= lborder+"px"; slice[0].style.borderRightWidth= rborder+"px";
		}
	if (i>=r) nextDeltam-- 
	lmargin = (lr!="right")? marg [size][i-1] - (aalias?nextDeltam+1:0) :0; //different margin when antialiasing
	rmargin = (lr!="left")? marg [size][i-1] - (aalias?nextDeltam+1:0) :0;
	slice[0].style.margin ="0px "+ rmargin+"px "+"0px "+ lmargin+"px"; 
	d.insertBefore(slice[0],d.firstChild); 
    }
el.appendChild(d,el.firstChild);
}// Utility functions
//
// sets up borders on the wrapped DIV child of el using the specified border width and colour.
// The default (null param) means no border, but if any parameter is supplied 
// the default is then both top and bottom, both left and right, unless one of these is specified
// For instance if h is 'left" the right border is not set up and if v is "top" the bottom border is not set up
function setUpWrappedCell(el,border,bdcolor,v,h)
{
    var wrappedEl= el.getElementsByTagName("DIV");
    var t,r,b,l;
    if (wrappedEl)
		{var w=wrappedEl[0]; //get first nested DIV
		if(w)
			{
				t = (v&&v != "bottom")?  border:0;
				b = (v&&v != "top")?  border:0;
				l = (h&&h != "right")?  border:0;
				r = (h&&h != "left")?  border:0;
				w.style.borderWidth=t+"px " +r+"px "+b+"px "+l+"px";
				w.style.borderStyle= "solid";
				w.style.borderColor=bdcolor;
			}
		}
}

// mix the f1 fraction of color c1 with the f2 fraction of color c2
// colors must be in long or short hex or rbg [0-255 OR %] form first
// rgb form can have any mix of 0-255 and %
// logic from several sources, but changed quite a bit here
// to make it more versatile and correct errors.
function Mix(c1,f1,c2,f2)
{
	if (!f2) f2 = 1-f1; // if fraction 2 not specified, it is 1 - fraction1
	var i,step1,step2,x,y,result=new Array(3);
		// check each colour in the mix to see if it an rgb
			//first colour 1
	var c1rbgFlag = (c1.indexOf("rgb(") == 0)
	if (c1rbgFlag) // and if so, chop off the frint end apparatus and split into an array
		{
			colors1 = c1.substring(4, c1.length - 1 );
		 	colorArray1 = colors1.split(",");
		}
			// otherwise check for length and set up steps accordingly
	else if(c1.length==4) step1=1;
		else step1=2;

			//then repeat for colour 2
	var c2rbgFlag = (c2.indexOf("rgb(") == 0)
	if (c2rbgFlag)
		{
			colors2 = c2.substring(4, c2.length - 1 );
			colorArray2 = colors2.split(",");
		}
	else if(c2.length==4) step2=1;
	else step2=2;
	
		// now for the three components of the two colors
	for(i=0;i<3;i++)
	{
		if (c1rbgFlag) // if #1 an rgb, use it directly or as a percent if present
			{
				x = colorArray1[i]
				if (x.indexOf("%") != -1) {x=Math.round (parseInt(x)*255/100)}
			}
		else // or parse out the short or long hex as the case may be
		{
			x=parseInt(c1.substr(1+step1*i,step1),16);
			if(step1==1) x=16*x+x;
		}
			// same for colour two
		if (c2rbgFlag)
			{
				y = colorArray2[i]
				if (y.indexOf("%") != -1) {y=Math.round (parseInt(y)*255/100)}
			}
		else
		{
			y=parseInt(c2.substr(1+step2*i,step2),16);
			if(step2==1) y=16*y+y;
		}
		result[i]=Math.floor((x*f1+y*f2)); //make the mix on this component
	}
		// now, from the array of three numbers, build the string to return,
		// either an rgb string or a long hex string
	if (colorPrefFlag == "rgb") { return("rgb("+result[0]+"," +result[1]+","+ result[2]+")");}
	else return("#"+numTo2HexStr( result[0])+numTo2HexStr( result[1])+numTo2HexStr( result[2]));

} 

// solve the problem that num to str does not prepend a zero to the hex value
// so we must ensure the hex string always two hex digits per colour
function numTo2HexStr (num)
{
	var temp;
	temp = num.toString(16);
	if (num<16) temp = "0"+temp
	return temp
}