var canvas = document.getElementById("c");
canvas.width = 456;
canvas.height = 456;
var b2Vec2 = Box2D.Common.Math.b2Vec2,
    b2BodyDef = Box2D.Dynamics.b2BodyDef,
    b2Body = Box2D.Dynamics.b2Body,
    b2FixtureDef = Box2D.Dynamics.b2FixtureDef,
    b2World = Box2D.Dynamics.b2World,
    b2PolygonShape = Box2D.Collision.Shapes.b2PolygonShape,
    b2CircleShape = Box2D.Collision.Shapes.b2CircleShape,
    b2RevoluteJointDef = Box2D.Dynamics.Joints.b2RevoluteJointDef,
    b2DistanceJointDef = Box2D.Dynamics.Joints.b2DistanceJointDef,
    b2RopeJointDef = Box2D.Dynamics.Joints.b2RopeJointDef,
    b2MouseJointDef =  Box2D.Dynamics.Joints.b2MouseJointDef,
    b2DebugDraw = Box2D.Dynamics.b2DebugDraw,
    b2Fixture = Box2D.Dynamics.b2Fixture,
    b2AABB = Box2D.Collision.b2AABB,
    b2Color = Box2D.Common.b2Color;

var world = new b2World(new b2Vec2(0, 10), true);
function update() {
    world.Step(1 / 60, 10, 10);
    world.DrawDebugData();
    world.ClearForces();
};
function createcircle(x, y, r) {
    var box1Def = new b2BodyDef;
    box1Def.type = b2Body.b2_staticBody;
    box1Def.position.Set(x, y);
    var fixDef1 = new b2FixtureDef;
    fixDef1.shape = new b2CircleShape(r);
    var box1 = world.CreateBody(box1Def);
    box1.CreateFixture(fixDef1);
    return box1;
}
function createball(x, y, r) {
    var box1Def = new b2BodyDef;
    box1Def.type = b2Body.b2_dynamicBody;
    box1Def.position.Set(x, y);
    var fixDef1 = new b2FixtureDef;
    fixDef1.density = 0.01;
    fixDef1.friction = 1.0;
    fixDef1.restitution = 0.1;
    fixDef1.shape = new b2CircleShape(r);
    var box1 = world.CreateBody(box1Def);
    box1.CreateFixture(fixDef1);
    return box1;
}
function createbox(angle, x, y, width, height) {
    var box1Def = new b2BodyDef;
    box1Def.type = b2Body.b2_dynamicBody;
    box1Def.position.Set(x, y);
    var fixDef1 = new b2FixtureDef;
    fixDef1.shape = new b2PolygonShape;
    fixDef1.shape.SetAsBox(width, height);
    fixDef1.density = 0.01;
    fixDef1.friction = 1.0;
    fixDef1.restitution = 0.1;
    var box1 = world.CreateBody(box1Def);
    box1.CreateFixture(fixDef1);
    box1.SetAngle(angle * 3.14 / 180);
    return box1;
}
function createWall(x, y, w, h) {
    var bodyDef = new b2BodyDef;
    bodyDef.type = b2Body.b2_staticBody;
    bodyDef.position.x = x + w / 2;
    bodyDef.position.y = y + h / 2;
    var fixDef = new b2FixtureDef;
    fixDef.shape = new b2PolygonShape;
    fixDef.shape.SetAsBox(w / 2, h / 2);
    world.CreateBody(bodyDef).CreateFixture(fixDef);
}

createWall(8.9, 0, 0.1, 8.8);
createWall(11.1, 0, 0.1, 8.8);
var b0 = createcircle(10, 14, 2.9);
var c0 = createball(13, 17, 1);
var p0 = createbox(0, 10, 9, 1, 1);

var joint2 = new b2DistanceJointDef(); 
joint2.Initialize(p0, c0, p0.GetWorldCenter(), c0.GetWorldCenter());
joint2.collideConnected = false; 
joint2.frequencyHz  = 0;
joint2.dampingRatio = 0; 
joint2.length = 9.0; 
world.CreateJoint(joint2);

var joint1 = new b2RevoluteJointDef();
joint1.Initialize(b0, c0, b0.GetPosition());
joint1.enableMotor = true;
joint1.motorSpeed = 5;
joint1.maxMotorTorque = 100;
joint1.enableLimit = false;
world.CreateJoint(joint1);

var debugDraw = new b2DebugDraw();
debugDraw.SetSprite(document.getElementById("c").getContext("2d"));
debugDraw.SetDrawScale(20);  
debugDraw.SetFillAlpha(0.9); 
debugDraw.SetLineThickness(1.0);
debugDraw.SetFlags(b2DebugDraw.e_shapeBit | b2DebugDraw.e_jointBit);
world.SetDebugDraw(debugDraw);
window.setInterval(update, 1000 / 60);