I am trying to get the id of the shape my mouse is currently hovering over.

my shapes are in a container

// creating the layers

gridLayer = new PIXI.DisplayObjectContainer ();

gridLayer.setInteractive(true);

stage.addChild(gridLayer);

and i am creating each shape like this;

function drawHexagon(x,y, size, gap,scale, color, iterI, iterJ, type) {

    var shape = new PIXI.Graphics();

    // set a fill and line style

    shape.beginFill(color);

    shape.lineStyle(1, 0xa0a0a0, 1);

    size = size-gap;



    for (i = 0; i < 7; i++) {

        angle = 2 * Math.PI / 6 * (i + 0.5);

        var x_i = x + size * Math.cos(angle);

        var y_i = y + size * Math.sin(angle);





        if (i === 0) { 

            shape.moveTo(x_i, scale *y_i) 

        }

        else {

            shape.lineTo(x_i, scale * y_i)

        }

    };



    shape.endFill();



    // calculate and save the axial coordinates

    var cX = iterJ - (iterI - (iterI&1)) / 2;

    var cZ = iterI;

    var cY = -1*(cX+cZ);



    shape.hexId = cX + x + cY + y + cZ + z;

    shape.hexPosX = x;

    shape.hexPosY = y;



    shape.setInteractive(true);

    shape.mouseover = function(mouseData){

       console.log(MOUSE OVER  + shape.hexId);

    }

    shape.click = function(mouseData){

       console.log(MOUSE CLICK  + shape.hexId);

    }

    gridLayer.addChild(shape);

}

However, clicking on any shape or hovering over it is not showing me anything in the console. what am i doing wrong?

i have tried both

shape.setInteractive(true)

and

shape.interactive = true

but neither seems to work for me.

EDIT: i have added a jsfiddle. it doesnt works (i dont know how to link things in jsfiddle) but you can see my entire code in there.
http://jsfiddle.net/9aqHz/1/