/////////////////////////////////////////////////////////////////////////////
//
// Gladiator Components
//
// http://www.gladiatorweb.com
//
// (c) 2006 by Edward H. Trager .  All Rights Reserved
//
// NAME: gladiatorSVG.js
//
// DESCRIPTION: Implements an object which handles the drawing of SVG elements.
//
// AUTHOR: Ritu Khanna & Edward H. Trager
//
// LAST UPDATE: 2006.05.26
//
// NOTE: SEE "LICENSE" FILE FOR LICENSING TERMS
//
//////////////////////////////////////////////////////////////////////////////

var GLADIATOR_SVG_INCLUDED = true;
//
// gSVG : draws SVG elements
//
function gSVG(){
	
	var _content; // elements of the SVG canvas
	var _width;   // width of the SVG canvas
	var _height;  // height of the SVG canvas
	
	////////////////////////////////////////////////
	//
	// Public Methods: 
	//
	////////////////////////////////////////////////
	
	////////////////////////////////////////////////
	//
	// getWidth: get the width of the SVG canvas
	//
	////////////////////////////////////////////////
	this.getWidth = function(){
		return _width;
	}
	
	////////////////////////////////////////////////
	//
	// getHeight: get the height of the SVG canvas
	//
	////////////////////////////////////////////////
	this.getHeight = function(){
		return _height;
	}
	

	////////////////////////////////////////////////
	//
	// render: appends all the SVG canvas elements to the user specified DOM node 
	//	parentNode: DOM node 
	//
	////////////////////////////////////////////////
	this.render = function(parentNode){
		
		var nodes = new DOMParser().parseFromString(_content,'text/xml').documentElement;
		for(var i=0;i<nodes.childNodes.length;i++)
			parentNode.appendChild(document.importNode(nodes.childNodes[i],true));
			
	}
	
	////////////////////////////
	//
	// Drawing Methods: 
	//
	////////////////////////////

	////////////////////////////////////////////////
	//
	// drawHeader: start the canvas
	//	==> width: width of the canvas
	//	==> height: height of the canvas
	//
	////////////////////////////////////////////////
	this.drawHeader = function(width,height){
		
		this.width = width;
		_width = width;
		_height = height;
		//_content = '<div><svg version="1.1" xmlns="' + NS.svg + '" viewBox="0 0 ' + width + ' ' + height + '" >\n';
		_content = '<div><svg version="1.1" xmlns="' + NS.svg + '" width="' + width + '" height="' + height + '" >\n';
		
	}
	
	////////////////////////////////////////////////
	//
	// drawFooter: close the canvas
	//
	////////////////////////////////////////////////
	this.drawFooter = function(){
		_content += '</svg>\n</div>\n';
	}
	
	////////////////////////////////////////////////
	//
	// drawLine: draws a line onto the canvas
	//	==> x1: x co-ordinate of line end point 1
	//	==> y1: y co-ordinate of line end point 1
	//	==> x2: x co-ordinate of line end point 2
	//	==> y2: y co-ordinate of line end point 2
	//	==> class: class of the line
	//
	////////////////////////////////////////////////
	this.drawLine = function(x1,y1,x2,y2,classx){
		
		_content += '<line x1="' + x1 + '" y1="' + y1 + '" x2="' + x2 + '" y2="' + y2 + '"';
		if(classx) _content += ' class="' + classx + '"';
		_content += ' />\n';
		
	}
	
	////////////////////////////////////////////////
	//
	// drawVerticalLine: draws a vertical line onto the canvas
	//	==> x: x co-ordinate of the line
	//	==> y1: y co-ordinate of line endpoint 1
	//	==> y2: y co-ordinate of line endpoint 2
	//	==> class: class of the line
	//
	////////////////////////////////////////////////
	this.drawVerticalLine = function(x,y1,y2,classx){
		
		_content += '<line x1="' + x + '" y1="' + y1 + '" x2="' + x + '" y2="' + y2 + '"';
		if(classx) _content += ' class="' + classx + '"';
		_content += ' />\n';
		
	}
	
	////////////////////////////////////////////////
	//
	// drawHorizontalLine: draws a horizontal line onto the canvas
	//	==> y: y co-ordinate of the line
	//	==> x1: x co-ordinate of line endpoint 1
	//	==> x2: x co-ordinate of line endpoint 2
	//	==> class: class of the line
	//
	////////////////////////////////////////////////
	this.drawHorizontalLine = function(y,x1,x2,classx){
		
		_content += '<line x1="' + x1 + '" y1="' + y + '" x2="' + x2 + '" y2="' + y + '"';
		if(classx) _content += ' class="' + classx + '"';
		_content += ' />\n';
		
	}
	
	////////////////////////////////////////////////
	//
	// drawRect: draws a rectangle onto the canvas
	//	==> x: x co-ordinate of the top-left corner
	//	==> y: y co-ordinate of the top-left corner
	//	==> width: width of the rectangle
	//	==> height: height of the rectangle
	//	==> class: class of the rectangle
	//	
	////////////////////////////////////////////////
	this.drawRect = function(x,y,width,height,classx){
		
		_content += ' <rect x="' + x + '" y="' + y + '" width="' + width + '" height="' + height + '"';
		if(classx) _content += ' class="' + classx + '"';
		_content += ' />\n';
		
	}
	////////////////////////////////////////////////
	//
	// drawCircle: draw a circle onto the canvas
	//	==> x: x co-ordinate of the center
	//	==> y: y co-ordinate of the center
	//	==> r: radius of the circle
	//	==> class: class of the circle
	//
	////////////////////////////////////////////////
	this.drawCircle = function(x,y,r,classx){
		_content += ' <circle cx="' + x + '" cy="' + y + '" r="' + r + '"';
		if(classx) _content += ' class="' + classx + '"';
		_content += ' />\n';
	}	
	
	////////////////////////////////////////////////
	//
	// drawText: draw a text onto the canvas
	//	==> x: x co-ordinate
	//	==> y: y co-ordinate
	//	==> text: text to draw
	//	==> class: class of the text
	//	==> angle: angle of text rotation
	//
	////////////////////////////////////////////////
	this.drawText = function(x,y,text,classx,angle){
		
		_content += ' <text x="' + x + '" y="' + y + '"';
		if(classx) _content += ' class="' + classx + '"';
		if(angle) _content += ' transform="rotate(' + angle + ',' + x + ',' + y + ')"';
		_content += '>' + text + '</text>\n';
		
	}
	////////////////////////////////////////////////
	//
	// drawPolyLine:  draw a polyline onto the canvas
	//	==> points: points of a polyline
	//	==>class: class of the polyline
	//
	////////////////////////////////////////////////
	this.drawPolyLine = function(points,classx){
		
		_content += ' <polyline points="' + points + '"';
		if(classx) _content += ' class="' + classx + '"';
		_content += ' />\n';
	}
	
	////////////////////////////////////////////////
	//
	// startGroupElement: start a new group element tag
	//	==> id: id of the group element 
	//	==> class: class of the group element
	//
	////////////////////////////////////////////////
	this.startGroupElement = function(id,classx){
		_content += ' <g id="' + id + '"';
		if(classx) _content += ' class="' + classx + '"';
		_content += '>\n';
	}
	
	////////////////////////////////////////////////
	//
	// endGroupElement: close the group element tag
	//
	////////////////////////////////////////////////
	this.endGroupElement = function(){
		_content += ' </g>\n';
	}
	
	///////////////////////////////////////////////////////////////
	//
	// addContent: Add any arbitrary SVG to the content string:
	//
	///////////////////////////////////////////////////////////////
	this.addContent = function(svgString){
		
		_content += svgString;
		_content += '\n';
		
	}
	
}