//SVG.js

function SVG(canvas){
    var paint = 0;
    var index = 0;
    var can = document.getElementById(canvas);
    var temp = "";
    
    var color = "#000000";
    var secondaryColor = "#AFAFAF";
    var fillType = "solid";
    
    this.setColor = function(c){
        color = c;
    }//end setColor()
    
    this.getColor = function(){
        return color;
    }//en getColor()
    
    this.setSecondaryColor = function(c){
        secondaryColor = c;
    }//end setSecondaryColor()
    
    this.getSecondaryColor = function(){
        return secondaryColor;
    }//end getSecondaryColor()
    
    this.setFillType = function(ft){
        fillType = ft;
    }//end setFillType()
    
    this.getFillType = function(){
        return fillType;
    }//end getFillType()
    
    this.fillRect = function(x, y, w, h){
        temp += "<svg:rect style='position:absolute;fill:" + color + ";' width='" + w + "' height='" + h + "' x='" + x + "' y='" + y + "' />";
    }//end fillRect()
    
    this.drawRect = function(x, y, w, h){
        temp += "<svg:rect width='" + w + "' height='" + h + "' x='" + x + "' y='" + y + "' style='position:absolute;fill:none;stroke:" + color + ";'/>";
    }//end drawRect()
    
    this.drawLine = function(x, y, x2, y2){
        temp += "<svg:line x1='" + x + "' y1='" + y + "' x2='" + x2 + "' y2='" + y2 + "' color='" + color + "'/>";
    }//end drawLine()
    
    this.drawPolygon = function(xpoints, ypoints){
        var s = "";
        for(var i=0; i<xpoints.length; i++){
            s += xpoints[i] + "," + ypoints[i] + " ";
        }//end for
        
        temp += "<svg:polyline points='" + s + "' style='stroke:" + color + ";fill:none;'></svg:polyline>";
    }//end drawPolygon()
    
    this.fillPolygon = function(xpoints, ypoints){
        var s = "";
        for(var i=0; i<xpoints.length; i++){
            s += xpoints[i] + "," + ypoints[i] + " ";
        }//end for
        
        temp += "<svg:polyline points='" + s + "' style='stroke:" + color + ";fill:" + color + ";'></svg:polyline>";
    }//end fillPolygon()
    
    this.drawOval = function(x, y, w, h){
        temp += "<svg:ellipse cx='" + x + "' cy='" + y + "' rx='" + w + "' ry='" + h + "' style='position:absolute;stroke:" + color + ";fill:none;'/>";
    }//end drawOval()
    
    this.fillOval = function(x, y, w, h){
        temp += "<svg:ellipse cx='" + x + "' cy='" + y + "' rx='" + w + "' ry='" + h + "' style='position:absolute;stroke:" + color + ";'/>";
    }//end fillOval()
    
    this.clear = function(){
        temp = "";
        can.innerHTML = "";
        paint = 0;
    }//end clear()
    
    this.paint = function(){
        index = 0;
        if(paint++)
            can.innerHTML += temp;    
        else
            can.innerHTML += "<svg:svg xml:space='preserve' style='position:absolute;'>" + temp + "</svg:svg>";
    }//end paint()
    
    this.toString = function(){
        return "SVG";
    }//end toString()
}//end SVG()