//define variables
var track,
trains,
temp;

//start Scrawl
scrawl.init();

//define groups
trains = scrawl.newGroup({ //train group
    name: 'trains',
});

//define sprites
track = scrawl.makeEllipse({ //train track
    name: 'track',
    startX: 300,
    startY: 300,
    radiusX: 230,
    radiusY: 120,
    precision: 100,
});

scrawl.makeEllipse({ //trains
    name: 'Percy',
    radiusX: 30,
    radiusY: 10,
    pathPlace: 0,
    lineWidth: 2,
    fillStyle: 'yellow',
    method: 'fillDraw',
    group: 'trains',
});

scrawl.newBlock({
    name: 'Chica',
    width: 60,
    height: 30,
    handleX: 'center',
    handleY: 'center',
    pathPlace: 0.1,
    lineWidth: 2,
    fillStyle: 'grey',
    method: 'fillDraw',
    group: 'trains',
});

scrawl.makeRegularShape({
    name: 'Hercules',
    sides: 5,
    radius: 30,
    pathPlace: 0.2,
    lineWidth: 2,
    roll: 54,
    fillStyle: 'lightblue',
    method: 'fillDraw',
    group: 'trains',
});

scrawl.makeQuadratic({
    name: 'Typhoon',
    startX: 250,
    startY: 200,
    endX: 350,
    endY: 200,
    controlX: 300,
    controlY: 90,
    pathPlace: 0.3,
    lineWidth: 2,
    group: 'trains',
});

temp = scrawl.makeLine({
    name: 'Hair',
    endY: 150,
    pathPlace: 0.25,
    lineWidth: 2,
    strokeStyle: 'orange',
    group: 'trains',
});
for (var i = 1; i < 10; i++) {
    temp.clone({
        pathPlace: 0.25 + (0.01 * i),
    });
}

temp = scrawl.makeRectangle({
    name: 'Peter',
    width: 60,
    height: 20,
    radius: 10,
    pathPlace: 0.445,
    lineWidth: 2,
    fillStyle: 'red',
    method: 'fillDraw',
    group: 'trains',
});
temp.clone({
    name: 'Ivor',
    pathPlace: 0.5,
    fillStyle: 'blue',
});
temp.clone({
    name: 'Gordon',
    pathPlace: 0.555,
    fillStyle: 'green',
});

scrawl.newPhrase({
    name: 'Steve',
    text: 'Hello, everyone!',
    font: '20pt Arial, sans-serif',
    textAlign: 'center',
    textAlongPath: true,
    pathPlace: 0.6,
    group: 'trains',
})

scrawl.newWheel({
    name: 'Jimmy',
    fillStyle: 'pink',
    radius: 25,
    startAngle: 15,
    endAngle: -15,
    lineWidth: 2,
    method: 'fillDraw',
    includeCenter: true,
    pathPlace: 0.81,
    group: 'trains',
})

scrawl.newAnimSheet({
    name: 'animatedCat',
    running: 'forward',
    loop: 'loop',
    speed: 1.2,
    frames: [{
        x: 0,
        y: 0,
        w: 512,
        h: 256,
        d: 100,
    }, {
        x: 512,
        y: 0,
        w: 512,
        h: 256,
        d: 100,
    }, {
        x: 0,
        y: 256,
        w: 512,
        h: 256,
        d: 100,
    }, {
        x: 512,
        y: 256,
        w: 512,
        h: 256,
        d: 100,
    }, {
        x: 0,
        y: 512,
        w: 512,
        h: 256,
        d: 100,
    }, {
        x: 512,
        y: 512,
        w: 512,
        h: 256,
        d: 100,
    }, {
        x: 0,
        y: 768,
        w: 512,
        h: 256,
        d: 100,
    }, {
        x: 512,
        y: 768,
        w: 512,
        h: 256,
        d: 100,
    }, ],
});
scrawl.newPicture({
    name: 'Charlie',
    width: 128,
    height: 64,
    handleX: 'center',
    handleY: 'bottom',
    method: 'fill',
    url: 'http://scrawl.rikweb.org.uk/img/runningcat.png',
    animSheet: 'animatedCat',
    pathPlace: 0.9,
    group: 'trains',
    callback: function () {
        trains.setSpritesTo({
            path: 'track',
            deltaPathPlace: 0.0015,
            addPathRoll: true,
        });

        //animation object
        scrawl.newAnimation({
            fn: function () {
                track.setDelta({
                    roll: -0.2,
                });
                trains.updateStart();
                scrawl.render();
            },
        });
    },
});