function renderPolygon(config,first_time){

    var lineData = calc(config);
    if (lineData == null){
        return;}

    //This is the accessor function we talked about above
    var lineFunction = d3.svg.line()
                             .x(function(d) { return d.x; })
                             .y(function(d) { return d.y; })
                             .interpolate("linear");

    if(first_time){
        var svg = d3.select(config.dom_element).append("svg")
        .style("width", config.width + config.margin.left + config.margin.right)
        .style("height", config.height + config.margin.top + config.margin.bottom);


        //The line SVG Path we draw
        var lineGraph = svg.append("path")
                            .attr("d", lineFunction(lineData))
                            .style("fill",config.fill_color)
                            .style("stroke",config.stroke_color)
                            .style("stroke-width",config.stroke_width)


        $("#x").val(config.x);
        $("#y").val(config.y);
        $("#radius").val(config.radius);
        $("#noOfSides").val(config.no_of_sides);
        $("#startAngle").val(config.start_angle);
        $("#width").val(config.width);
        $("#height").val(config.height);
        $("#strokeColor").val(config.stroke_color);
        $("#strokeWidth").val(config.stroke_width);
        $("#fillColor").val(config.fill_color);

    }else{
        var dom_element = d3.select("svg")
        .style("width", config.width + config.margin.left + config.margin.right)
        .style("height", config.height + config.margin.top + config.margin.bottom);

        dom_element.select("path")
                    .attr("d", lineFunction(lineData))
                    .style("fill",config.fill_color)
                    .style("stroke",config.stroke_color)
                    .style("stroke-width",config.stroke_width)

    }
}

  function calc()
  {   //collect inputs
      var ang;

      var cx = config.x;
	  if(isNaN(cx)) { alert("Center X must be a number");  return null; }

      var cy = config.y;
	  if(isNaN(cy)) { alert("Center Y must be a number");  return null; }

	  var n =  config.no_of_sides;
	  if(isNaN(n) || n<3) { alert("Number of sides must be a number greater than 2");  return null; }
	  n = Math.round(n);
	  var centerAng = 2*Math.PI / n;

	  var r =  config.radius;
	  if(isNaN(r) || r<1) { alert("Radius must be a number greater than 0");  return null; }

	  var startAng = toRadians(config.start_angle);
	  if(isNaN(startAng)) { alert("Starting angle must be a number");  return null; }

      //create a vertex array
	  var vertex = new Array();
	  for(var i=0 ; i<n ; i++)
			{ ang = startAng + (i*centerAng);
			  vx = Math.round(cx + r*Math.cos(ang));
			  vy = Math.round(cy - r*Math.sin(ang));
			  vertex.push( {x:vx , y:vy} );
			}

      vertex.push(vertex[0])//so that first one is the last one too (to complete the loop)
      return vertex;
  }

    function toRadians(degs){
        return Math.PI*degs/180;
    }



  function isOdd(n){
    return (n%2 == 1);
    }