how to move lower z-level element below transparent png
===

I have the following website that lets me scale an image and crop it and stuff.  You can drag and pan the image around:

http://thindery.com/jsfiddle/crop_move.html

I wanted to try to implement a mask over the top, which I did here:

http://thindery.com/jsfiddle/crop_mask1.html

Problem is that because the mask.png covers the whole butterfly.img, I can't drag and pan the image anymore.  I'm trying to think of a way that I can put the mask over the top, but still be able to move the source image around.

Does anybody have some ideas, thoughts, or suggestions of stuff I can look into?