function Test() {
    this.testOnly = "";
    this.counter = 0;
    this.tests = {
        "TRANSITION - transition position": function(containerId) {
            var stage = new Kinetic.Stage(containerId, 578, 200);
            var layer = new Kinetic.Layer();
            var rect = new Kinetic.Rect({
                x: 10,
                y: 100,
                width: 100,
                height: 50,
                fill: "green",
                stroke: "black",
                strokeWidth: 4
            });

            layer.add(rect);
            stage.add(layer);

            rect.transitionTo({
                x: 400,
                y: 30,
                rotation: Math.PI * 2,
                duration: 1
            });
        },
        "ANIMATION - run animation": function(containerId) {
            var stage = new Kinetic.Stage(containerId, 578, 200);
            var layer = new Kinetic.Layer();
            var rect = new Kinetic.Rect({
                x: 200,
                y: 100,
                width: 100,
                height: 50,
                fill: "green",
                stroke: "black",
                strokeWidth: 4
            });

            layer.add(rect);
            stage.add(layer);

            var amplitude = 150;
            var period = 1000;
            // in ms
            var centerX = stage.width / 2 - 100 / 2;

            stage.onFrame(function(frame) {
                rect.x = amplitude * Math.sin(frame.time * 2 * Math.PI / period) + centerX;
                layer.draw();
            });

            stage.start();
        },
        "EVENTS - mousedown mouseup mouseover mouseout click dblclick / touchstart touchend dbltap": function(containerId) {
            var stage = new Kinetic.Stage(containerId, 578, 200);
            var layer = new Kinetic.Layer();
            var circle = new Kinetic.Circle({
                x: stage.width / 2,
                y: stage.height / 2,
                radius: 70,
                fill: "red",
                stroke: "black",
                strokeWidth: 4,
                draggable: true
            });

            circle.on('mousedown', function() {
                log('mousedown');
            });

            circle.on('mouseup', function() {
                log('mouseup');
            });

            circle.on('touchstart', function() {
                log('touchstart');
            });

            circle.on('touchend', function() {
                log('touchend');
            });

            circle.on('mouseover', function() {
                log('mouseover');
            });

            circle.on('mouseout', function() {
                log('mouseout');
            });

            circle.on('click', function() {
                log('click');
            });

            circle.on('dblclick', function() {
                log('dblclick');
            });

            circle.on('dbltap', function() {
                log('dbltap');
            });

            layer.add(circle);
            stage.add(layer);
        },
        "EVENTS - modify fill stroke and stroke width on hover with circle": function(containerId) {
            var stage = new Kinetic.Stage(containerId, 578, 200);
            var layer = new Kinetic.Layer();
            var circle = new Kinetic.Circle({
                x: 380,
                y: stage.height / 2,
                radius: 70,
                strokeWidth: 4,
                fill: "red",
                stroke: "black"
            });

            circle.on("mouseover", function() {
                this.setFill("yellow");
                this.setStroke("purple");
                this.setStrokeWidth(20);
                layer.draw();
            });

            circle.on("mouseout", function() {
                this.setFill("red");
                this.setStroke("black");
                this.setStrokeWidth(4);
                layer.draw();
            });

            layer.add(circle);
            stage.add(layer);
        },
        "EVENTS - modify fill stroke and stroke width on hover with circle with star": function(containerId) {
            var stage = new Kinetic.Stage(containerId, 578, 200);
            var layer = new Kinetic.Layer();

            var star = new Kinetic.Star({
                x: 200,
                y: 100,
                points: 10,
                innerRadius: 40,
                outerRadius: 70,
                fill: "green",
                stroke: "blue",
                strokeWidth: 5,
                name: "foobar"
            });

            star.on("mouseover", function() {
                this.setFill("yellow");
                this.setStroke("purple");
                this.setStrokeWidth(20);
                layer.draw();
            });

            star.on("mouseout", function() {
                this.setFill("green");
                this.setStroke("blue");
                this.setStrokeWidth(5);
                layer.draw();
            });

            layer.add(star);
            stage.add(layer);
        },
        "EVENTS - modify fill stroke and stroke width on hover with circle with image": function(containerId) {
            var imageObj = new Image();
            imageObj.onload = function() {
                var stage = new Kinetic.Stage(containerId, 578, 200);
                var layer = new Kinetic.Layer();
                var darth = new Kinetic.Image({
                    x: 60,
                    y: 60,
                    image: imageObj
                });

                darth.on("mouseover", function() {
                    this.setFill("yellow");
                    this.setStroke("purple");
                    this.setStrokeWidth(20);
                    layer.draw();
                });

                darth.on("mouseout", function() {
                    this.setFill(undefined);
                    this.setStroke(undefined);
                    this.setStrokeWidth(0);
                    layer.draw();
                });

                layer.add(darth);
                stage.add(layer);
            };
            imageObj.src = "darth-vader.jpg";
        },
        "EVENTS - drag events click": function(containerId) {
            var stage = new Kinetic.Stage(containerId, 578, 200);
            var layer = new Kinetic.Layer();
            var circle = new Kinetic.Circle({
                x: 380,
                y: stage.height / 2,
                radius: 70,
                strokeWidth: 4,
                fill: "red",
                stroke: "black"
            });

            circle.draggable(true);

            circle.on('dragstart', function() {
                log('dragstart');
            });

            circle.on('dragmove', function() {
                log('dragmove');
            });

            circle.on('dragend', function() {
                log('dragend');
            });

            circle.on('click', function() {
                log('click');
            });

            layer.add(circle);
            stage.add(layer);
        },
        "EVENTS - isDragging": function(containerId) {
            var stage = new Kinetic.Stage(containerId, 578, 200);
            var layer = new Kinetic.Layer();
            var circle = new Kinetic.Circle({
                x: 380,
                y: stage.height / 2,
                radius: 70,
                strokeWidth: 4,
                fill: "red",
                stroke: "black"
            });

            //log('not dragging yet before draggable, isDragging: ' + circle.isDragging());
            test(circle.isDragging() === false, "isDragging() should be false");

            circle.draggable(true);

            //log('not dragging yet after draggable, isDragging: ' + circle.isDragging());
            test(circle.isDragging() === false, "isDragging() should be false");

            circle.on('dragstart', function() {
                log('dragstart, isDragging: ' + this.isDragging());
                test(circle.isDragging() === true, "isDragging() should be true");
            });

            circle.on('dragmove', function() {
                log('dragmove, isDragging: ' + this.isDragging());
                test(circle.isDragging() === true, "isDragging() should be true");
            });

            circle.on('dragend', function() {
                log('dragend, isDragging: ' + this.isDragging());
                test(circle.isDragging() === false, "isDragging() should be false");
            });

            layer.add(circle);
            stage.add(layer);
        },
        "EVENTS - mousemove from shape to another shape in same layer": function(containerId) {
            var stage = new Kinetic.Stage(containerId, 578, 200);
            var layer = new Kinetic.Layer();

            var redCircle = new Kinetic.Circle({
                x: 200,
                y: stage.height / 2,
                radius: 70,
                strokeWidth: 4,
                fill: "red",
                stroke: "black"
            });

            redCircle.on("mouseover", function() {
                log('mouseover red circle');
            });
            redCircle.on("mouseout", function() {
                log('mouseout red circle');
            });
            var greenCircle = new Kinetic.Circle({
                x: 280,
                y: stage.height / 2,
                radius: 70,
                strokeWidth: 4,
                fill: "green",
                stroke: "black"
            });

            greenCircle.on("mouseover", function() {
                log('mouseover green circle');
            });
            greenCircle.on("mouseout", function() {
                log('mouseout green circle');
            });

            layer.add(redCircle);
            layer.add(greenCircle);

            stage.add(layer);
        },
        "EVENTS - mousemove from shape in one layer to shape in another layer": function(containerId) {
            var stage = new Kinetic.Stage(containerId, 578, 200);
            var redLayer = new Kinetic.Layer();
            var greenLayer = new Kinetic.Layer();

            var redCircle = new Kinetic.Circle({
                x: 200,
                y: stage.height / 2,
                radius: 70,
                strokeWidth: 4,
                fill: "red",
                stroke: "black"
            });

            redCircle.on("mouseover", function() {
                log('mouseover red circle');
            });
            redCircle.on("mouseout", function() {
                log('mouseout red circle');
            });
            var greenCircle = new Kinetic.Circle({
                x: 280,
                y: stage.height / 2,
                radius: 70,
                strokeWidth: 4,
                fill: "green",
                stroke: "black"
            });

            greenCircle.on("mouseover", function() {
                log('mouseover green circle');
            });
            greenCircle.on("mouseout", function() {
                log('mouseout green circle');
            });

            redLayer.add(redCircle);
            greenLayer.add(greenCircle);

            stage.add(redLayer);
            stage.add(greenLayer);
        },
        "EVENTS - event bubbling": function(containerId) {
            var stage = new Kinetic.Stage(containerId, 578, 200);
            var layer = new Kinetic.Layer();
            var group = new Kinetic.Group();

            layer.on("mouseover", function() {
                log('mouseover layer');
                //console.log(this);
            });
            layer.on("mouseout", function() {
                log('mouseout layer');
                //console.log(this);
            });

            group.on("mouseover", function() {
                log('mouseover group');
                //console.log(this);
            });
            group.on("mouseout", function() {
                log('mouseout group');
                //console.log(this);
            });
            var redCircle = new Kinetic.Circle({
                x: stage.width / 2,
                y: stage.height / 2,
                radius: 80,
                strokeWidth: 4,
                fill: "red",
                stroke: "black"
            });

            redCircle.on("mouseover", function() {
                log('mouseover red circle');
                //console.log(this);
            });
            redCircle.on("mouseout", function() {
                log('mouseout red circle');
                //console.log(this);
            });
            var greenCircle = new Kinetic.Circle({
                x: stage.width / 2,
                y: stage.height / 2,
                radius: 40,
                strokeWidth: 4,
                fill: "green",
                stroke: "black"
            });

            greenCircle.on("mouseover", function() {
                log('mouseover green circle');
                //console.log(this);
            });
            greenCircle.on("mouseout", function() {
                log('mouseout green circle');
                //console.log(this);
            });

            group.add(redCircle);
            group.add(greenCircle);

            layer.add(group);
            stage.add(layer);
        },
        "DRAG AND DROP - draggable true": function(containerId) {
            var stage = new Kinetic.Stage(containerId, 578, 200);
            var layer = new Kinetic.Layer();
            var circle = new Kinetic.Circle({
                x: stage.width / 2,
                y: stage.height / 2,
                radius: 70,
                fill: "red",
                stroke: "black",
                strokeWidth: 4
            });

            circle.draggable(true);

            layer.add(circle);
            stage.add(layer);
        },
        "DRAG AND DROP - draggable true false": function(containerId) {
            var stage = new Kinetic.Stage(containerId, 578, 200);
            var layer = new Kinetic.Layer();
            var circle = new Kinetic.Circle({
                x: stage.width / 2,
                y: stage.height / 2,
                radius: 70,
                fill: "red",
                stroke: "black",
                strokeWidth: 4
            });

            circle.draggable(true);

            layer.add(circle);
            stage.add(layer);

            circle.draggable(false);
        },
        "DRAG AND DROP - scale stage after add layer then drag and drop shape": function(containerId) {
            var stage = new Kinetic.Stage(containerId, 578, 200);
            var layer = new Kinetic.Layer();
            var circle = new Kinetic.Circle({
                x: stage.width / 2,
                y: stage.height / 2,
                radius: 70,
                fill: "red",
                stroke: "black",
                strokeWidth: 4
            });

            circle.draggable(true);

            layer.add(circle);
            stage.add(layer);

            stage.setScale(0.5);

            stage.draw();
        },
        "DRAG AND DROP - scale stage before add shape then drag and drop shape": function(containerId) {
            var stage = new Kinetic.Stage(containerId, 578, 200);
            var layer = new Kinetic.Layer();
            var circle = new Kinetic.Circle({
                x: stage.width / 2,
                y: stage.height / 2,
                radius: 70,
                fill: "red",
                stroke: "black",
                strokeWidth: 4
            });

            circle.draggable(true);

            stage.setScale(0.5);
            layer.add(circle);
            stage.add(layer);
        },
        "DRAG AND DROP - set stage scale to 1.5 after add layer then drag and drop shape": function(containerId) {
            var stage = new Kinetic.Stage(containerId, 578, 200);
            var layer = new Kinetic.Layer();
            var circle = new Kinetic.Circle({
                x: stage.width / 2,
                y: stage.height / 2,
                radius: 70,
                fill: "red",
                stroke: "black",
                strokeWidth: 4
            });

            circle.draggable(true);

            layer.add(circle);
            stage.add(layer);

            stage.setScale(1.5);

            stage.draw();
        },
        "DRAG AND DROP - set stage scale to 1.5 before add layer then drag and drop shape": function(containerId) {
            var stage = new Kinetic.Stage(containerId, 578, 200);
            var layer = new Kinetic.Layer();
            var circle = new Kinetic.Circle({
                x: stage.width / 2,
                y: stage.height / 2,
                radius: 70,
                fill: "red",
                stroke: "black",
                strokeWidth: 4
            });

            circle.draggable(true);

            stage.setScale(1.5);

            layer.add(circle);
            stage.add(layer);
        },
        "DRAG AND DROP - check that green events are ignored when dragging red circle": function(containerId) {
            var stage = new Kinetic.Stage(containerId, 578, 200);
            var layer = new Kinetic.Layer();
            var circle1 = new Kinetic.Circle({
                x: stage.width / 2,
                y: stage.height / 2,
                radius: 70,
                fill: "red",
                stroke: "black",
                strokeWidth: 4
            });

            var circle2 = new Kinetic.Circle({
                x: stage.width / 2 + 50,
                y: stage.height / 2,
                radius: 70,
                fill: "green",
                stroke: "black",
                strokeWidth: 4
            });

            circle1.draggable(true);

            circle2.on("mouseover", function() {
                log("mouseover green circle");
            });

            layer.add(circle1);
            layer.add(circle2);
            stage.add(layer);
        }
    };
}