<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="style.css">
    <script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
    <script src="script.js"></script>
</head>

<body onLoad="init();">
    <h1 onclick="document.getElementById('log').innerHTML = '-<br>';">CreateJS - EaselJS</h1>
    <canvas id="canvas" width="670" height="470" style="background-color:#ffffff">
        alternate content
    </canvas>
    <div id="log">debug info</div>
</body>

</html>
// Code goes here
var stage, logDiv;
function init() {
    logDiv = document.getElementById("log");
	logDiv.innerHTML = '-<br>';
    
    var canvas = document.getElementById("canvas");
	stage = new createjs.Stage(canvas);
    
    createObjs();

    //Update stage will render next frame
    stage.update();
}

function createObjs() {
    
    // create a stationary object
    aim = new createjs.Shape();
    aim.graphics.beginFill("#ABCDEF").drawCircle(0, 0, 50);
    aim.x = aim.y = 100;
    stage.addChild(aim);
    
    // Create a movable object.
    circle = new createjs.Shape();
    circle.graphics.beginFill("red").drawCircle(0, 0, 40)
        .beginFill("yellow").drawCircle(0, 0, 10);
    //Set position of Shape instance.
    circle.x = circle.y = 50;
    
    circle.addEventListener("mousedown", function(event) {
        var sX = Math.floor(event.stageX);
        var sY = Math.floor(event.stageY);
        circle.dX = sX - circle.x;
        circle.dY = sY - circle.y;
        logDiv.innerHTML += 'dn x:' + sX + ' y:' + sY + ', ';
    });
    circle.addEventListener("pressmove", function(event) {
        var sX = Math.floor(event.stageX);
        var sY = Math.floor(event.stageY);
        circle.x = sX - circle.dX;
        circle.y = sY - circle.dY;
        if (circle.x > 90 && circle.x < 110 && circle.y > 90 && circle.y < 110) {
            circle.x = 100;
            circle.y = 100;
        }
        stage.update();
        logDiv.innerHTML += 'mv x:' + sX + ' y:' + sY + ', ';
    });
    circle.addEventListener("pressup", function(event) {
        var sX = Math.floor(event.stageX);
        var sY = Math.floor(event.stageY);
        logDiv.innerHTML += 'up x:' + sX + ' y:' + sY + '<br>';
    });
    //Add Shape instance to stage display list.
    stage.addChild(circle);
}
/* Styles go here */

body {
    background-color:#D4D4D4;
}
h1 {
    cursor: pointer;
}