weird behavior with jquery dialog

[dusadrian]

I am trying to make a combination between jQuery-ui and Raphael, and encountering a weird behavior (for me) that don't understand and cannot solve.

What I would like to design is some kind of a user interface, where the dialogs are Raphael papers. This is a Fiddle that demonstrates my problem:

http://jsfiddle.net/dusadrian/f7qk7qj4/2/

Basically, the dialog is triggered by the green object (a Raphael rectangle), where a red object can be moved up and down. 

Everything works fine until closing the dialog, and when it is reopened there are two(?) red objects...!

It looks is like the Raphael object has been redrawn a second time when the dialog was reopened (and many more new red objects appear on each opening of the dialog, just move those objects around).

So this is where I am right now. What I would like is to prevent this behavior and have a single instance of a Raphael object, no matter how many times the dialog is opened.

I would be really grateful for anyone giving at least a clue what is going on (why does it get redrawn each time), and how to prevent this.

Thanks very much in advance,

Adrian