var scale = 1;

var width = 260;

var height = 3*154 + 3*6;

var offset = [0,0];

var mill = 6;

var material = 18;

var m = material;

var boorgatDiameter = 6.5;

​

var poleDist = 200;

var poleA = 140;

var poleB = 222;

var poleC = 340;

​

var plankW=254;

var plankH=154;

​

style = {};

style.all     = "fill:none;stroke-width:1;";

style.red     = style.all+"stroke:red;";

style.yellow  = style.all+"stroke:yellow;";

style.noFill  = style.all+"stroke:black;";

style.guide   = style.all+"stroke:red;";

style.circles = style.all+"stroke:blue;";

style.m6      = style.all+"stroke:green;";

style.square  = style.all+"stroke:black;";

style.wheels  = style.all+"stroke:black;";

style.locker  = style.all+"stroke:grey;";

style.path    = style.all+"stroke:black;";

​

svg = new SVGKit(width,height);

root = svg.G();

//svg.translate(root,width/2,height/2);

svg.scale(root,scale,scale);

svg.translate(root,offset[0],offset[1]);

svg.append(root);

​

var cuts = svg.G();

​

//root.appendChild(svg.CIRCLE({r:2,style:style.guide})); //origin

​

//addCircles();

//addWheels();

//addLockers();

//addPole(poleDist/2-m/2,-poleC-m/2);

​

appendChildNodes(

  root,

  addPlankje(0,0),

  addPlankje(0,plankH+mill),

  addPlankje(0,2*(plankH+mill))

  //svg.RECT({x:-width/2,y:-height/2,width:width,height:height,style:style.red}),

  /*addCircles(),

  addWheels(),

  addLockers(),

  addPoleHoles(),

  addPole(poleDist/2-m/2,-poleC-m/2),

  addPole(0,0),*/

  //addPole(149,-109)

);

​

function addPlankje(x,y) {

  var distX=80;  //maten verbeterd

  var distY=80;

  var g = svg.G();

  appendChildNodes(

    g,

    svg.RECT({x:0,y:0,width:plankW+mill,height:plankH+mill,style:style.noFill}),

    boorgat(plankW/2-distX/2,plankH/2-distY/2),

    boorgat(plankW/2+distX/2,plankH/2-distY/2),

    boorgat(plankW/2-distX/2,plankH/2+distY/2),

    boorgat(plankW/2+distX/2,plankH/2+distY/2)

  );

  svg.translate(g,x,y);

  return g;

}

​

function addCircles() {

  //Circles

  var g = svg.G();

  var innerRadius = 322;

  var outerRadius = 390;

  appendChildNodes(g,

    svg.CIRCLE({cx:0, cy:0, r:outerRadius, style:style.circles}),

    svg.CIRCLE({cx:0, cy:0, r:innerRadius, style:style.circles})

  );

  return g;

}

​

//Wheels

function addWheels() {

  var g = svg.G();

  var wheelW=83-mill;

  var wheelH=28-mill;

  var wheelY=-wheelH/2-22;

  var wheelsY=-333;

  var wheelsAngleOffset=0.1; //115;

  var wheelBoldsDist=70;

  appendChildNodes(

    wheels = svg.G(),

    boorgat(-wheelBoldsDist/2,0),

    boorgat(wheelBoldsDist/2,0),

    svg.RECT({style:style.wheels, x:-wheelW/2,y:wheelY,width:wheelW,height:wheelH,rx:wheelH/2,ry:wheelH/2}),        

    svg.RECT({style:style.guide, x:-40,y:0-15/2,width:80,height:15})   //ALU     

  );

  for (i=0; i<6; i++) {

    var wheels2 = wheels.cloneNode(true); //recursive

    svg.rotate(wheels2,i*60+wheelsAngleOffset); //note: never rotate 0 degrees

    svg.translate(wheels2,0,wheelsY);

    appendChildNodes(g,wheels2);

  }

  return g;

}

​

//Lockers

function addLockers() {

  var g = svg.G();

  var lockerY = -338;

  var lockerAngleOffset = 85; //75;

  var holeW=10-mill;

  var holeH=16-mill;

  var holeR=6-mill/2;

  appendChildNodes(locker = svg.G(),

    boorgat(-48/2,0),

    boorgat(48/2,0),

    svg.RECT({style:style.locker, x:-holeW/2,y:-holeH/2,width:holeW,height:holeH,rx:holeR,ry:holeR}),

    svg.RECT({style:style.guide, x:-35,y:-15,width:70,height:30,rx:holeR,ry:holeR}),

    svg.RECT({style:style.guide, x:-35,y:-30,width:70,height:45,rx:holeR,ry:holeR})

  );

  for (i=0; i<3; i++) {

    var locker2 = locker.cloneNode(true); //recursive

    svg.rotate(locker2,i*120+lockerAngleOffset); //note: never rotate 0 degrees

    svg.translate(locker2,0,lockerY);

    appendChildNodes(g,locker2);

  }

  return g;

}

//Pole Holes

function addPoleHoles() {

  var g=svg.G();

  var poles;

  appendChildNodes(

    poles = svg.G(),

    vierkantje(-poleDist/2,-poleA,m,m),

    vierkantje(-poleDist/2,-poleB,m,m),

    vierkantje(-poleDist/2,-poleC,m,m),

    vierkantje(poleDist/2,-poleA,m,m),

    vierkantje(poleDist/2,-poleB,m,m),

    vierkantje(poleDist/2,-poleC,m,m)

  );

  for (i=0; i<3; i++) {

    var poles2 = poles.cloneNode(true); //recursive

    if (i>0) svg.rotate(poles2,i*120); //prevent bug when rotating 0 degrees

    appendChildNodes(g,poles2);

  }

  return g;

}

function addPole(x,y) {

  var g=svg.G();

  //var path = "m 0,0 0,-18 -144,0 0,18 L -"+(1.58*poleDist-3*m)+","+((poleC-poleB)-m) + " l -36,0 0,18 -18,0 0,18 18,0 0," + (poleB-poleA-m) + " -18,0 0,18, 18,0 0,18 36,0 C -240,110 -180,90 0,36 l 0,-18 18,0 0,-18 -18,0";

  var m2 = mill/2;

  var path2 = "m "+m2+","+-m2+" 0,-18 "+(-144-mill)+",0 0,18 L -"+(1.58*poleDist-3*m+m2)+","+((poleC-poleB)-m-m2) + " l -36,0 0,18 -18,0 0,"+(18+mill)+" 18,0 0," + (poleB-poleA-m-mill) + " -18,0 0,"+(18+mill)+", 18,0 0,18 "+(36+mill)+",0 C -240,110 -180,90 "+mill/2+","+(36+mill/2)+" l 0,-18 18,0 0,"+(-18-mill)+" -18,0";

  appendChildNodes(

    paaltje = svg.G(),

    cuts,

    boorgat(0,-3),

    boorgat(0,18+3),

    boorgat(-144,0),

    boorgat(-(1.58*poleDist-3*m)-m2,(poleC-poleB)-m-m2),

    boorgat(-(1.58*poleDist-3*m)-2*m,(poleC-poleB)-3),

    boorgat(-(1.58*poleDist-3*m)-2*m,(poleC-poleB)+3+m),

    boorgat(-(1.58*poleDist-3*m)-2*m,(poleC-poleB)-3+(poleB-poleA)),

    boorgat(-(1.58*poleDist-3*m)-2*m,(poleC-poleB)+3+(poleB-poleA)+m),

    //svg.PATH({d:path,style:style.path}),

    svg.PATH({d:path2,style:style.path})

  ); 

  svg.translate(paaltje,x,y);

  appendChildNodes(g,paaltje);

  return g;

}

​

appendChildNodes('mydiv', svg.htmlElement);

txt.value = txt.innerText = svg.toXML();

​

//Vierkantje

function vierkantje(x,y,w,h) {

  x-=w/2;

  y-=h/2;

  var v = svg.G();

  var p = [];

  p[0] = {style:style.square, x1:x,           y1:y+mill/2,    x2:x+w-mill/2,   y2:y+mill/2};

  p[1] = {style:style.square, x1:x+w-mill/2,  y1:y,           x2:x+w-mill/2,   y2:y+h-mill/2};

  p[2] = {style:style.square, x1:x+w,         y1:y+h-mill/2,  x2:x+mill/2,     y2:y+h-mill/2};

  p[3] = {style:style.square, x1:x+mill/2,    y1:y+h,         x2:x+mill/2,     y2:y+mill/2};

  for (i=0; i<4; i++) {

    appendChildNodes(v,svg.LINE(p[i]));

  }

  return v;

}

​

function boorgat(x,y) {

  return svg.CIRCLE({style:style.m6, r:(boorgatDiameter-mill)/2,cx:x,cy:y});

}

​

​

/*var path = "m 0,0 -143.835,0 0,24 -128,98 -26,0 0,22 -18,0 0,18 18,0 0,64 -18,0 0,18 18,0 0,24 35,0 c 20,-50 0,-150, 263,-202 l 0,-24 18,0 0,-18 -18,0 0,-24";

//c -119.45,14.2724 -219.03,93.2352 -262.705,200.854

​

​

//svg.PATH({"style":"stroke:blue",d:path}),

//console.log(points);

appendChildNodes(

  root,

  cuts

  );

*/

​

/*

path2 = pathGrow(path,3);

​

appendChildNodes(cuts,svg.CIRCLE({cx:0,cy:0,r:10,style:style.path}));

​

function pathGrow(path, offset) {

  var points = path.split(' ');

  var cmd = "";

  var coord = "";

  var px = 0;

  var py = 0;

  var res=20;

  console.log(path);

  //console.log(points.length);

  for (var i=0; i<points.length; i++) {

    if ("mclMCL".indexOf(points[i])>-1) { //points[i].length==1) {

      cmd = points[i++];

    }

    if (cmd=='c' || cmd=='C') {

      i+=2;

    }

    coord = points[i].split(",");

    var x = parseFloat(coord[0]);

    var y = parseFloat(coord[1]);

    if (cmd=='l' || cmd=='L' || cmd=='c' || cmd=='C') { 

        //lijn

        var absolute = (cmd=='L' || cmd=='C');

        var x1 = absolute ? x : px;

        var y1 = absolute ? y : py;

        var x2 = x1+x;

        var y2 = y1+y; 

        appendChildNodes(cuts,svg.CIRCLE({style:style.red,cx:x1,cy:y1,r:8})); //begin

        appendChildNodes(cuts,svg.CIRCLE({style:style.yellow,cx:x2,cy:y2,r:3})); //eind

      console.log(i,cmd,x,y,px,py,x1,y1,x2,y2);

    }

    if (cmd=='M' || cmd=='L') {

      px = x;

      py = y;

    } else {

      px += x;

      py += y; 

    }

  }

  return path;

    */

    //if (cmd=='c' || cmd=='C') {

     // 

      /*

      var x0 = px;

      var y0 = py;

      var c1 = {x:parseFloat(points[i].split(",")[0]), y:parseFloat(points[i].split(",")[1])}; i++;

      var c2 = {x:parseFloat(points[i].split(",")[0]), y:parseFloat(points[i].split(",")[1])}; i++;

      var to = {x:parseFloat(points[i].split(",")[0]), y:parseFloat(points[i].split(",")[1])};

      var cx = 3.0 * c1.x;

      var cy = 3.0 * c1.y;

      var bx = 3.0 * (c2.x - c1.x) - cx;

      var by = 3.0 * (c2.y - c1.y) - cy;

      var ax = to.x - cx - bx;

      var ay = to.y - cy - by;

      var pxx = x0;

      var pyy = y0;

      for (var j=0; j<=res; j++) {

        var t = j/res;

        var t2 = t*t;

        var t3 = t*t*t;

        var xx = (ax * t3) + (bx * t2) + (cx * t) + x0;

        var yy = (ay * t3) + (by * t2) + (cy * t) + y0;

        appendChildNodes(cuts,svg.CIRCLE({cx:xx,cy:yy,r:1,style:style.path}));

        appendChildNodes(cuts,svg.LINE({x1:xx,y1:yy,x2:pxx,y2:pyy,style:style.path}));

        pxx = xx;

        pyy = yy;

      }

      px += to.x;

      py += to.y;*/

    //} else {

     /* coord = points[i].split(",");

      x = parseFloat(coord[0]);

      y = parseFloat(coord[1]);

      if (cmd=='l') { 

        //lijn

        var x1 = px;

        var y1 = py;

        var x2 = x1+x;

        var y2 = y1+y;

        appendChildNodes(cuts,svg.CIRCLE({"style":"stroke:yellow",cx:x1,cy:y1,r:2})); //begin

        appendChildNodes(cuts,svg.CIRCLE({"style":"stroke:red",cx:x2,cy:y2,r:3})); //eind

        //richting v.d. lijn

        mid = {};

        mid.x = x1+(x2-x1)/2;

        mid.y = y1+(y2-y1)/2;

        pijl = svg.PATH({"style":"stroke:blue",d:"m 1,-2 -2,2 2,2"});

        svg.translate(pijl,mid.x,mid.y);

        angle = Math.atan2(y,x) - Math.PI;

        svg.rotate(pijl,angle/3.14*180);

        appendChildNodes(cuts,pijl); //eind

        x1 += mill/2*Math.cos(angle);

        y1 += mill/2*Math.sin(angle);

        appendChildNodes(cuts,svg.LINE({"style":"stroke:blue",x1:x1,y1:y1,x2:x2,y2:y2}));

      }

      if (cmd!='M') {

        px += x;

        py += y;

      }

    }

    if (cmd=='m') cmd = 'l';

    if (cmd=='M') cmd = 'L';

    return path;

  } */

//}