/*
 * A javascript method for drawing SVG shapes to a canvas
 * Copyright (C) Josiah Larson 2008
 */

function drawSVGToCanvas(canvasID,svgXML,textDivId,limit)
{
	var canvas = document.getElementById(canvasID);
	var textDiv = document.getElementById(textDivId);
	var context = canvas.getContext("2d");
	
	context.clearRect(0, 0, 320, 240);
	
	context.fillStyle = "rgb(120,120,120)";
	textDiv.innerHTML = "";
	
	var elementsNode = svgXML.documentElement;
	var numShapes;
	if ( limit <  0 )
		numShapes = elementsNode.childNodes.length;
	else
		numShapes = limit;
	
	if ( numShapes > elementsNode.childNodes.length )
		numShapes = elementsNode.childNodes.length;
		
	//alert("Drawing " + numShapes + " shapes" );
	
	for (i = 0; i < numShapes; i++ )
	{
		if (elementsNode.childNodes[i].nodeType == 1)
		{
			var attributes = elementsNode.childNodes[i].attributes;
			if (elementsNode.childNodes[i].tagName == 'rect' )
			{
				context.fillStyle =  attributes.getNamedItem("fill").value;
				context.lineJoin = 'miter';
				//alert(attributes.getNamedItem("fill-opacity").value);
				context.globalAlpha = attributes.getNamedItem("fill-opacity").value;
				context.fillRect( attributes.getNamedItem("x").value, attributes.getNamedItem("y").value, attributes.getNamedItem("width").value, attributes.getNamedItem("height").value );
				
				context.strokeStyle = attributes.getNamedItem("stroke").value;
				context.globalAlpha = attributes.getNamedItem("stroke-opacity").value;
				context.lineWidth = attributes.getNamedItem("stroke-width").value;
				context.strokeRect( attributes.getNamedItem("x").value, attributes.getNamedItem("y").value, attributes.getNamedItem("width").value, attributes.getNamedItem("height").value );
				
				//alert("Finished Drawing Rect");
			}
			else if (elementsNode.childNodes[i].tagName == 'circle' )
			{
				context.fillStyle =  attributes.getNamedItem("fill").value;
				context.globalAlpha = attributes.getNamedItem("fill-opacity").value;
				
				var endAngle = Math.PI*2;
				context.beginPath();
				context.arc( attributes.getNamedItem("cx").value, attributes.getNamedItem("cy").value, attributes.getNamedItem("r").value, 0, endAngle, true );
				context.fill();
				
				if ( elementsNode.childNodes[i].getAttribute("stroke") != null )
				{
					context.strokeStyle = attributes.getNamedItem("stroke").value;
					context.globalAlpha = attributes.getNamedItem("stroke-opacity").value;
					context.lineWidth = attributes.getNamedItem("stroke-width").value;
					context.stroke();
				}
			}
			else if(elementsNode.childNodes[i].tagName == 'line' )
			{
				context.lineCap = 'butt';
				context.strokeStyle = attributes.getNamedItem("stroke").value;
				context.globalAlpha = attributes.getNamedItem("stroke-opacity").value;
				context.lineWidth = attributes.getNamedItem("stroke-width").value;
				context.beginPath();
				context.moveTo( attributes.getNamedItem("x1").value, attributes.getNamedItem("y1").value );
				context.lineTo( attributes.getNamedItem("x2").value, attributes.getNamedItem("y2").value );
				context.stroke();
			}
			else if(elementsNode.childNodes[i].tagName == 'polygon' )
			{	
				var points = attributes.getNamedItem("points").value;
				var pointsarray = points.split(" ");
				var pointarray = pointsarray[0].split(",");
				
				context.beginPath();
				
				context.moveTo( pointarray[0], pointarray[1] );
				for ( j = 1; j < pointsarray.length ; j++ )
				{
					pointarray = pointsarray[j].split(",");
					context.lineTo( pointarray[0], pointarray[1] );
				}
				context.closePath();
				
				context.fillStyle =  attributes.getNamedItem("fill").value;
				context.globalAlpha = attributes.getNamedItem("fill-opacity").value;
				context.fill();
				
				context.lineJoin = 'miter';
				context.strokeStyle = attributes.getNamedItem("stroke").value;
				context.globalAlpha = attributes.getNamedItem("stroke-opacity").value;
				context.lineWidth = attributes.getNamedItem("stroke-width").value;
				context.stroke();
			}
			else if(elementsNode.childNodes[i].tagName == 'polyline' )
			{	
				var points = attributes.getNamedItem("points").value;
				var pointsarray = points.split(" ");
				var pointarray = pointsarray[0].split(",");
				
				context.beginPath();
				
				context.moveTo( pointarray[0], pointarray[1] );
				for ( j = 1; j < pointsarray.length ; j++ )
				{
					pointarray = pointsarray[j].split(",");
					context.lineTo( pointarray[0], pointarray[1] );
				}
				
				context.lineJoin = 'round';
				context.lineCap = 'round';
				context.strokeStyle = attributes.getNamedItem("stroke").value;
				context.globalAlpha = attributes.getNamedItem("stroke-opacity").value;
				context.lineWidth = attributes.getNamedItem("stroke-width").value;
				context.stroke();
			}
			if (elementsNode.childNodes[i].tagName == 'text' )
			{
				//alert("drawingtext");
				textDivString = '<div style="position:absolute;top:' + ( attributes.getNamedItem("y").value - attributes.getNamedItem("font-size").value )  + ';left:' + attributes.getNamedItem("x").value + ';width:' + (320 - attributes.getNamedItem("x").value) + ';height:' + (240 - ( attributes.getNamedItem("y").value - attributes.getNamedItem("font-size").value ) ) + ';font-family:' + attributes.getNamedItem("font-family").value + ';color:' + attributes.getNamedItem("fill").value + ';font-size:' + attributes.getNamedItem("font-size").value + ';opacity:' + attributes.getNamedItem("fill-opacity").value +  ';overflow:hidden;text-align:left;">' + elementsNode.childNodes[i].firstChild.nodeValue + '</div>';
				//alert(textDivString);
				textDiv.innerHTML += textDivString;
			}
		}
	}
}

function getNumShapes(svgXML)
{
	var elementsNode = svgXML.documentElement;
	
	return elementsNode.childNodes.length;
}