/**
 * @author romeosa.com
 * 
 * this simple function uses Google exCanvas to make rounded corners around a div element.
 * The background of the element will be a gradient of the color.
 * Just pass the div id to the function.
 * If you don't like gradient color, just specify true after the id.
 */
function makeDivRounded(id,noGradient)
{
	var cd = $(id);
	var cdc = cd.clone();
	cdc.setProperty('id',id+'_content');
	cdc.injectInside(document.body);
	cdc.setStyles({
		position:'absolute',
		top: cd.getPosition().y+10,
		left: cd.getPosition().x+10
	});
	cdc.setStyle('z-index',1);
	cd.setStyle('width',cd.getSize().size.x+20);
	cd.setStyle('height',cd.getSize().size.y+20);
	cd.setStyle('background-color','transparent');
	cd.setHTML('');
	
	var x = cdc.getPosition().x;
	var y = cdc.getPosition().y;
	var width = cdc.getSize().size.x;
	var height = cdc.getSize().size.y;
	var color = cdc.getStyle('background-color');
	
	if(!color || color=='transparent')
		color = "#000";
	
	cdc.setStyle('background-color','transparent');
	
	var canvas = new Element("canvas", {'id':id+'_canvas','width':width+20,'height':height+20});
	canvas.setStyles({
		display:'inline-block',
		overflow:'hidden',
		position: 'absolute',
		top:y-10,
		left:x-10
	});
	canvas.injectInside(document.body);
	
	var ctx;
	if(window.ie)
		ctx = G_vmlCanvasManager.initElement(canvas).getContext('2d');
	else
		ctx = canvas.getContext('2d');
	
	
	var lingrad = ctx.createLinearGradient(0,0,0,height/1.4);
	lingrad.addColorStop(0, color);
	var inerm = new Color('#fff');
	var color2 = inerm.mix(color,58);
	lingrad.addColorStop(1, color2.rgbToHex());
	
	ctx.fillStyle = lingrad;
	if(noGradient)	
		ctx.fillStyle = color;
		
	
	ctx.moveTo(0,10);
	ctx.quadraticCurveTo(0,0,10,0);
	ctx.lineTo(width+10,0);
	ctx.quadraticCurveTo(width+20,0,width+20,10);
	ctx.lineTo(width+20,height+10);
	ctx.quadraticCurveTo(width+20,height+20,width+10,height+20);
	ctx.lineTo(10,height+20);
	ctx.quadraticCurveTo(0,height+20,0,height+10);
	ctx.closePath();
	ctx.fill();		
}