$(function(){
    var canvas = document.createElement('canvas');
    canvas.width = 400;
    canvas.height = 400;
    document.body.appendChild(canvas);

    var renderer = PIXI.autoDetectRenderer(canvas.width, canvas.height, {view: canvas, resolution: 1});
    var stage = new PIXI.Container();

    function update () {
        renderer.render(stage);

        window.requestAnimationFrame(update);
    }

    var p0 = [100,100],
        p1 = [100,300],
        p2 = [300,300],
        r = 200;

    var graphics = new PIXI.Graphics();
    graphics.beginFill(0x2B303B);
    graphics.drawRect(0,0,canvas.width, canvas.height);
    graphics.endFill();

    stage.addChild(graphics);

    graphics.lineStyle(5, 0xffffff);
    // moveTo creates a new polygon, wraps it in a graphicsObject,
    // connects it to currentPath then pushes it into the graphicsData array.
    // As of v 3.0.7, a new polygons will always have closed set to true.
    graphics.moveTo(p0[0],p0[1]);
    graphics.arcTo(
        p1[0], p1[1],
        p2[0], p2[1],
        r
    );
    graphics.currentPath.shape.closed = false;


    // lineStyle will initialise the currentPath including the end point of the previous
    // path if there was one.  It also sets the Graphics object line style
    graphics.lineStyle(3, 0xff0000, 0.3);
    // the first point created by lineStyle is removed and the graphicsData object it added
    // is popped off.  A new graphicsData object is created and initialised from the Graphics
    // object line style.
    graphics.moveTo(p0[0],p0[1]);
    graphics.lineTo(p1[0],p1[1]);
    graphics.currentPath.shape.closed = false;
    graphics.currentPath.shape.interactive = true;

    graphics.moveTo(p1[0],p1[1]);
    graphics.lineTo(p2[0],p2[1]);
    graphics.currentPath.shape.closed = false;
    graphics.currentPath.shape.interactive = true;


    [p0, p1, p2].forEach(function(p, i){
        var label = new PIXI.Text(["x"+i,"y"+i]);
        label;
        label.anchor = [{x: 1, y:1}, {x: 1, y:1}, {x: 0, y:1}][i];
        label.x = p[0] - [6, 6, 0][i]; label.y = p[1] - 6;
        stage.addChild(label);
        graphics.drawCircle(p[0], p[1], 3).drag();
        //graphics.drawRect(p[0], p[1], 3, 3);
        //graphics.drawRoundedRect(p[0], p[1], 3, 3, 1);
        //graphics.drawEllipse(p[0], p[1], 6, 3);
    });

    update();
});
(function(PIXI) {
    PIXI.Graphics.prototype.drag = function(remove){
        var g = new PIXI.Graphics(), gd,
            s, i,
            that = this;
        g.graphicsData.push((gd = ( gd = that.graphicsData)[gd.length-1]));
        gd.lineAlpha = 1; gd.lineWidth = 1; gd.lineColor = 0;
        s = new PIXI.Sprite(g.generateTexture(new PIXI.CanvasRenderer()));
        s.interactive = true;
        that.addChild(s);
        drag.call(s, remove);
        if(gd.shape.points){
            
        }
        s.position = {get x() {return gd.shape.x}, get y() {return gd.shape.y}};
        s.anchor.set(0.5);
        Object.defineProperties(s._drag, {
            x: {
                set: function(_) {
                    gd.shape.x = _;
                    that.clearDirty = that.dirty = true;
                }
            },
            y: {
                set: function(_) {
                    gd.shape.y = _
                    that.clearDirty = that.dirty = true;
                }
            }
        });

        return that;

    };
    function drag(remove) {
        var offset,
            container = this.parent,
            that = this;
        [
            {e: "mouseover", l: onMouseOver},
            {e: "mouseout", l: onMouseOut},
            // events for drag start
            {e: 'mousedown', l: onDragStart},
            {e: 'touchstart', l: onDragStart},
            // events for drag end
            {e: 'mouseup', l: onDragEnd},
            {e: 'mouseupoutside', l: onDragEnd},
            {e: 'touchend', l: onDragEnd},
            {e: 'touchendoutside', l: onDragEnd},
            // events for drag move
            {e: 'mousemove', l: onDragMove},
            {e: 'touchmove', l: onDragMove}
        ].forEach(function(event) {
                that.on(event.e, remove ? null : event.l, that)
            });

        if(remove) delete this._drag; else this._drag = {};

        function onMouseOver(event) {
            console.log(myName(arguments))
            this._drag.fixed |= 4;
        }

        function onMouseOut(event) {
            console.log(myName(arguments))
            this._drag.fixed &= ~4;
        }

        function onDragStart(event) {
            //var r = this.__data__.radius;
            offset = event.data.getLocalPosition(this);
            //offset.x *= r / rMax;
            //offset.y *= r / rMax;
            console.log(myName(arguments))
            // store a reference to the _drag
            // the reason for this is because of multitouch
            // we want to track the movement of this particular touch
            this._drag.eventData = event.data;
            this._drag.fixed |= 2;
        }

        function onDragEnd() {
            console.log(myName(arguments))
            this._drag.fixed &= ~6;
            // set the interaction data to null
            this._drag.eventData = null;
        }

        function onDragMove(event) {
            var d;
            if((d = this._drag).fixed & 2) {
                console.log(myName(arguments))
                var newPosition = this._drag.eventData.getLocalPosition(container);
                d.x = this.position.x = newPosition.x - offset.x;
                d.y = this.position.y = newPosition.y - offset.y;
            }
        }

        function myName(args) {
            return /function\s+(\w*)\(/.exec(args.callee)[1];
        }
        return that;
    };
})(PIXI);