KineticJs : puzzle not displaying whole image?

Question

currently i have a problem displaying my whole image with my puzzle and with the "click" rotation it had a bug which when i click one piece other piece also rotates why? Can anyone help me see my fiddle and help me with it? thanks so much

    fillPatternImage:imageObj,
                    x:-pieceWidth*i,
                    y:-pieceHeight*j,
                    stroke: "#000000",
                    strokeWidth: 4,
                    lineCap: "round",
                    rotation : Math.PI * 0.5 * Math.floor(Math.random() * 4),
                    draggable: true,
                    offset: [pieceWidth/2,pieceHeight/2],
                x: pieceWidth*i+pieceWidth/2 + (Math.random()*2)*((stage.getWidth()+pieceWidth)/20),
                y: pieceHeight*j+pieceHeight/2 + (Math.random()*2)*((stage.getHeight()+pieceHeight)/20),
            });
            piecesArray[i][j].shape.on("mousedown", function(){
                this.moveToTop();
                });
            piecesArray[i][j].shape.on("click", function(){
                this.moveToTop();
                this.rotateDeg(90)
                });   

My JsFiddle : http://jsfiddle.net/e70n2693/

Thanks

Answer 1

piecesArray[i][j].shape.on("click", function(){
    this.moveToTop();
    this.rotateDeg(90)
    layer.draw();
});

http://jsfiddle.net/e70n2693/2/