function Vector(x, y)
    {
      this.x = x;
      this.y = y;
  
      this.equal = function(v)
      {
        return this.x == v.getX() && this.y == v.getY();
      }
      this.getX = function()
      {
        return this.x;
      }
      this.getY = function()
      {
        return this.y;
      }
      this.setX = function(x)
      {
        this.x = x;
      }
      this.setY = function(y)
      {
        this.y = y;
      }
      this.addX = function(x)
      {
        this.x += x;
      }
      this.addY = function(y)
      {
        this.y += y;
      }
      this.set = function(v)
      {
        this.x = v.getX();
        this.y = v.getY();
      }
      this.add = function(v)
      {
        this.x += v.getX();
        this.y += v.getY();
      }
      this.sub = function(v)
      {
        this.x -= v.getX();
        this.y -= v.getY();
      }
      this.dotProd = function(v)
      {
        return this.x * v.getX() + this.y * v.getY();
      }
      this.dist = function(v)
      {
        return Math.sqrt((this.x - v.getX()) * (this.x - v.getX()) + (this.y - v.getY()) * (this.y - v.getY()));
      }
      this.length = function()
      {
        return Math.sqrt(this.x * this.x + this.y * this.y);
      }
      this.scale = function(scaleFactor)
      {
        this.x *= scaleFactor;
        this.y *= scaleFactor;
      }
      this.normalize = function()
      {
        var l = this.length();
        this.x /= l;
        this.y /= l;
      }
      this.toString = function()
      {
        return " X: " + this.x + " Y: " + this.y;
      }
    }
  
    function Environment(x, y, w, h)
    {
      this.left = x;
      this.right = x + w;
      this.top = y;
      this.buttom = y + h;
      this.r = new Vector(0.0, 0.0);
  
      this.collision = function(curPos, prevPos)
      {
        var collide = false;
        var i;
  
        if(curPos.getX() < this.left)
        {
          prevPos.setX(curPos.getX());
          curPos.setX(this.left);
          collide = true;
        }
        else if(curPos.getX() > this.right)
        {
          prevPos.setX(curPos.getX());
          curPos.setX(this.right);
          collide = true;
        }
        if(curPos.getY() < this.top)
        {
          prevPos.setY(curPos.getY());
          curPos.setY(this.top);
          collide = true;
        }
        else if(curPos.getY() > this.buttom)
        {
          prevPos.setY(curPos.getY());
          curPos.setY(this.buttom);
          collide = true;
        }
        return collide;
      }
      this.draw = function(ctx, scaleFactor)
      {
        ctx.lineWidth = 2;
        ctx.strokeStyle = '#cccccc';
        ctx.beginPath();
        ctx.moveTo(this.left * scaleFactor, this.top * scaleFactor);
        ctx.lineTo(this.right * scaleFactor, this.top * scaleFactor);
        ctx.lineTo(this.right * scaleFactor, this.buttom * scaleFactor);
        ctx.lineTo(this.left * scaleFactor, this.buttom * scaleFactor);
        ctx.closePath();
        ctx.stroke();
      }
    }
  
    function PointMass(cx, cy, mass)
    {
      this.origpos = new Vector(cx, cy);
      this.cur = new Vector(cx, cy);
      this.prev = new Vector(cx, cy);
      this.mass = mass;
      this.force = new Vector(0.0, 0.0);
      this.result = new Vector(0.0, 0.0);
      this.friction = 0.01;
      this.isSelected = false;
      this.isAnchor = false;
      this.isPaused = true;
  
      this.getXPos = function()
      {
        return this.cur.getX();
      }
      this.getYPos = function()
      {
        return this.cur.getY();
      }
      this.getPos = function()
      {
        return this.cur;
      }
      this.getXPrevPos = function()
      {
        return this.prev.getX();
      }
      this.getYPrevPos = function()
      {
        return this.prev.getY();
      }
      this.getPrevPos = function()
      {
        return this.prev;
      }
      this.addXPos = function(dx)
      {
        this.cur.addX(dx);
      }
      this.addYPos = function(dy)
      {
        this.cur.addY(dy);
      }
      this.setForce = function(force)
      {
        this.force.set(force);
      }
      this.addForce = function(force)
      {
        this.force.add(force);
      }
      this.getMass = function()
      {
        return this.mass;
      }
      this.setMass = function(mass)
      {
        this.mass = mass;
      }
      this.setPos = function(x, y)
      {
        this.cur.setX(x);
        this.cur.setY(y);
      }
      this.move = function(dt)
      {
        if(this.isAnchor)
          return;
  
        var t, a, c, dtdt;
  
        dtdt = dt * dt;
  
        a = this.force.getX() / this.mass;
        c = this.cur.getX();
        t = (2.0 - this.friction) * c - (1.0 - this.friction) * this.prev.getX() + a * dtdt;
        this.prev.setX(c);
        this.cur.setX(t);
  
        a = this.force.getY() / this.mass;
        c = this.cur.getY();
        t = (2.0 - this.friction) * c - (1.0 - this.friction) * this.prev.getY() + a * dtdt;
        this.prev.setY(c);
        this.cur.setY(t);
      }
      this.setFriction = function(friction)
      {
        this.friction = friction;
      }
      this.getVelocity = function()
      {
        var cXpX, cYpY;
  
        cXpX = this.cur.getX() - this.prev.getX();
        cYpY = this.cur.getY() - this.prev.getY();
  
        return cXpX * cXpX + cYpY * cYpY;
      }
      this.draw = function(ctx, scaleFactor)
      {
        ctx.lineWidth = 5;
        ctx.fillStyle = '#000000';
        ctx.strokeStyle = '#000000';
        ctx.beginPath();
        ctx.arc(this.cur.getX() * scaleFactor,
                this.cur.getY() * scaleFactor,
                6.0, 0.0, Math.PI * 2.0, true);
        ctx.fill();
  
        if(this.isSelected)
        {
          ctx.lineWidth = 1;
          ctx.strokeStyle = '#ff0000';
          ctx.beginPath();
          ctx.arc(this.cur.getX() * scaleFactor,
                  this.cur.getY() * scaleFactor,
                  8.0, 0.0, Math.PI * 2.0, true);
          ctx.stroke();
        }
        if(this.isAnchor && this.isPaused)
        {
          ctx.lineWidth = 1;
          ctx.fillStyle = '#ff0000';
          ctx.beginPath();
          ctx.arc(this.cur.getX() * scaleFactor,
                  this.cur.getY() * scaleFactor,
                  2.0, 0.0, Math.PI * 2.0, true);
          ctx.fill();
        }
      }
      this.select = function()
      {
        this.isSelected = true;
      }
      this.unselect = function()
      {
        this.isSelected = false;
      }
      this.moveToOrigPos = function()
      {
        this.cur.setX(this.origpos.getX());
        this.cur.setY(this.origpos.getY());
        this.prev.setX(this.origpos.getX());
        this.prev.setY(this.origpos.getY());
      }
      this.toggleAnchor = function()
      {
        this.isAnchor = !this.isAnchor;
      }
      this.getAnchor = function()
      {
        return this.isAnchor;
      }
      this.setPaused = function(paused)
      {
        this.isPaused = paused;
      }
    }
  
    // this is what is refered to as a constraint in the article
    // it's a bit 'optimized' in comparssion with the artcile code
    // and contain some additional features but does essentialy the same
    function Joint(pointMassA, pointMassB, shortConst, longConst)
    {
      this.pointMassA = pointMassA;
      this.pointMassB = pointMassB;
      this.delta = new Vector(0.0, 0.0);
      this.pointMassAPos = pointMassA.getPos();
      this.pointMassBPos = pointMassB.getPos();
      this.drawState = 1;
      this.prevDrawState = 1;
      this.isVisible = true;
      this.isPaused = true;
      this.isSelectable = false;
  
      this.delta.set(this.pointMassBPos);
      this.delta.sub(this.pointMassAPos);
  
      this.shortConst = this.delta.length() * shortConst;
      this.longConst = this.delta.length() * longConst;
      this.scSquared = this.shortConst * this.shortConst;
      this.lcSquared = this.longConst * this.longConst;
  
      this.middle = new Vector();
      this.t = new Vector();
      this.k = new Vector();
  
      this.setDist = function(shortConst, longConst)
      {
        this.shortConst = shortConst;
        this.longConst = longConst;
        this.scSquared = this.shortConst * this.shortConst;
        this.lcSquared = this.longConst * this.longConst;
      }
      this.scale = function(scaleFactor)
      {
        this.shortConst = this.shortConst * scaleFactor;
        this.longConst = this.longConst * scaleFactor;
        this.scSquared = this.shortConst * this.shortConst;
        this.lcSquared = this.longConst * this.longConst;
      }
      this.sc = function()
      {
        this.delta.set(this.pointMassBPos);
        this.delta.sub(this.pointMassAPos);
  
        var dp = this.delta.dotProd(this.delta);
        if(this.scSquared != 0.0 && dp < this.scSquared)
        {
          var scaleFactor;
          scaleFactor = this.scSquared / (dp + this.scSquared) - 0.5;
          this.delta.scale(scaleFactor);
          if(!this.pointMassA.getAnchor())
            this.pointMassAPos.sub(this.delta);
          if(!this.pointMassB.getAnchor())
            this.pointMassBPos.add(this.delta);
        }
        else if(this.lcSquared != 0.0 && dp > this.lcSquared)
        {
          var scaleFactor;
          scaleFactor = this.lcSquared / (dp + this.lcSquared) - 0.5;
          this.delta.scale(scaleFactor);
          if(!this.pointMassA.getAnchor())
            this.pointMassAPos.sub(this.delta);
          if(!this.pointMassB.getAnchor())
            this.pointMassBPos.add(this.delta);
        }
      }
      this.draw = function(ctx, scaleFactor)
      {
        if(!this.isPaused && !this.isVisible)
          return;
  
        ctx.lineWidth = 2;
        if(this.isPaused && this.isVisible)
          ctx.strokeStyle = '#000000';
        if(!this.isPaused && this.isVisible)
          ctx.strokeStyle = '#000000';
        if(this.isPaused && !this.isVisible)
          ctx.strokeStyle = '#999999';
        ctx.beginPath();
        ctx.moveTo(this.pointMassA.getPos().getX() * scaleFactor, this.pointMassA.getPos().getY() * scaleFactor);
        ctx.lineTo(this.pointMassB.getPos().getX() * scaleFactor, this.pointMassB.getPos().getY() * scaleFactor);
        ctx.stroke();
  
        if(this.isSelectable)
        {
          this.middle = this.getMiddle();
  
          ctx.lineWidth = 5;
          ctx.fillStyle = '#ff0000';
          ctx.strokeStyle = '#ff0000';
          ctx.beginPath();
          ctx.arc(this.middle.getX() * scaleFactor,
                  this.middle.getY() * scaleFactor,
                  4.0, 0.0, Math.PI * 2.0, true);
          ctx.fill();
        }
  
        /*
        else if(this.drawState == 2) // full tjosan mode
        {
          this.middle = this.getMiddle();
  
          this.t.set(this.middle);
          this.t.sub(this.pointMassA.getPos());
  
          ctx.lineWidth = 2;
  
          // long const bar
          this.t.normalize();
          this.t.scale(this.longConst * 0.5);
          var t1 = this.middle.getX() + this.t.getX();
          var t2 = this.middle.getY() + this.t.getY();
          var t3 = this.middle.getX() - this.t.getX();
          var t4 = this.middle.getY() - this.t.getY();
  
          ctx.strokeStyle = '#aaaaaa';
          ctx.beginPath();
          ctx.moveTo(t1 * scaleFactor, t2 * scaleFactor);
          ctx.lineTo(t3 * scaleFactor, t4 * scaleFactor);
          ctx.stroke();
  
          this.k.set(this.t);
          this.k.normalize();
          this.k.scale(0.03);
          var x = -this.k.getY();
          var y = this.k.getX();
          ctx.strokeStyle = '#0000ff';
          ctx.beginPath();
          ctx.moveTo((t1 + x) * scaleFactor, (t2 + y) * scaleFactor);
          ctx.lineTo((t1 - x) * scaleFactor, (t2 - y) * scaleFactor);
          ctx.stroke();
          ctx.beginPath();
          ctx.moveTo((t3 + x) * scaleFactor, (t4 + y) * scaleFactor);
          ctx.lineTo((t3 - x) * scaleFactor, (t4 - y) * scaleFactor);
          ctx.stroke();
  
          // short const bar
          this.t.normalize();
          this.t.scale(this.shortConst * 0.5);
  
          t1 = this.middle.getX() + this.t.getX();
          t2 = this.middle.getY() + this.t.getY();
          t3 = this.middle.getX() - this.t.getX();
          t4 = this.middle.getY() - this.t.getY();
  
          ctx.strokeStyle = '#ff0000';
          ctx.beginPath();
          ctx.moveTo((t1 + x) * scaleFactor, (t2 + y) * scaleFactor);
          ctx.lineTo((t1 - x) * scaleFactor, (t2 - y) * scaleFactor);
          ctx.stroke();
          ctx.beginPath();
          ctx.moveTo((t3 + x) * scaleFactor, (t4 + y) * scaleFactor);
          ctx.lineTo((t3 - x) * scaleFactor, (t4 - y) * scaleFactor);
          ctx.stroke();
        }
        else if(this.drawState == 3) // delete mode
        {
          ctx.lineWidth = 2;
          if(this.isVisible)
            ctx.strokeStyle = '#000000';
          else
            ctx.strokeStyle = '#999999';
          ctx.beginPath();
          ctx.moveTo(this.pointMassA.getPos().getX() * scaleFactor, this.pointMassA.getPos().getY() * scaleFactor);
          ctx.lineTo(this.pointMassB.getPos().getX() * scaleFactor, this.pointMassB.getPos().getY() * scaleFactor);
          ctx.stroke();
  
          this.middle = this.getMiddle();
  
          ctx.lineWidth = 5;
          ctx.fillStyle = '#ff0000';
          ctx.strokeStyle = '#ff0000';
          ctx.beginPath();
          ctx.arc(this.middle.getX() * scaleFactor,
                  this.middle.getY() * scaleFactor,
                  4.0, 0.0, Math.PI * 2.0, true);
          ctx.fill();
        }
        */
      }
      /*
      this.setDrawState = function(drawState)
      {
        this.prevDrawState = this.drawState;
        this.drawState = drawState;
      }
      this.setDrawStatePrevious = function()
      {
        this.drawState = this.prevDrawState;
      }
      */
      /*
      this.hide = function()
      {
        this.isVisible = false;
      }
      this.show = function()
      {
        this.isVisible = true;
      }
      */
      this.setVisible = function(visible)
      {
        this.isVisible = visible;
      }
      this.getVisibility = function()
      {
        return this.isVisible;
      }
      this.setPaused = function(paused)
      {
        this.isPaused = paused;
      }
      this.setSelectable = function(selectable)
      {
        this.isSelectable = selectable;
      }
      this.getMiddle = function()
      {
          this.middle.set(this.pointMassA.getPos());
          this.t.set(this.pointMassB.getPos());
          this.t.sub(this.middle);
          this.t.scale(0.5);
          this.middle.add(this.t);
  
          return this.middle;
      }
      this.getPointmassA = function()
      {
        return this.pointMassA;
      }
      this.getPointmassB = function()
      {
        return this.pointMassB;
      }
    }