How to detect a click outside the current textarea in prototype?

Question

I have a div that "transforms" into a textarea. Well, it's a hidden textarea that shows up when someone clicks on the div. The div will hide and the textarea will get the innerHTML of the div. The user can edit the text now and after he or she has finished I want them to click outside of the textarea. Now the textarea hides and the div shows up again with the updated html content.

But at the moment it doesn't work as expected. How could I detect when a user clicks outside the textarea? Is there a .not() equivalent to jQuery? The user also should be able to resize the textarea. At the moment it closes after resizing. Any ideas?

Here's a fiddle: http://jsfiddle.net/t3qRL/

Here the HTML:

<div class="media_box">
    <div class="label"> Textfeld:</div>
    <!-- with the property contentEditable the div would be editable but there would be no linebreaks -->
    <div class="txt_area"> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam id nunc quis purus aliquam sollicitudin porta nec dui. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris sagittis eleifend dignissim. Curabitur ligula est, rhoncus eget lobortis accumsan, volutpat et lorem. Suspendisse augue mauris, mollis et lectus at, sodales pellentesque metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In rutrum est vitae justo ullamcorper malesuada.
    </div>
    <textarea class="cright_txtarea" style="display: none">
    </textarea>
</div>

JS:

document.observe('dom:loaded', function () {
    $$('body')[0].on('click', '.txt_area', function (event, element) {
        event.stopPropagation();
        var div_text = element.innerHTML;
        element.hide();
        var text_area = element.next('textarea');
        text_area.show();
        text_area.value = div_text;
        $$('html')[0].on('click', function () {
            element.show();
            element.update(text_area.value);
            text_area.hide();
        });
    });
});

Answer 1

Found a solution but I'm still open for more elegant ones ;)

Here's the new fiddle: http://jsfiddle.net/t3qRL/2/

Updated javascript:

document.observe('dom:loaded', function () {
    $$('body')[0].on('click', '.txt_area', function (event, element) {
        event.stopPropagation();        
        var div_text = element.innerHTML;
        element.hide();
        var text_area = element.next('textarea');
        text_area.show();
        text_area.value = div_text;
        text_area.onmouseover = function () {
            text_area.observe('click', function(event) {
                Event.stop(event);
            });
        }

        text_area.onmouseout = function () {                
            $$('html')[0].on('click', function () {
                console.log(text_area.value);
                element.show();
                element.update(text_area.value);
                text_area.hide();
            });
        }
    });
});

Answer 2

document.on('click', function(evt, elm){
  if(elm.match('.txt_area')){
    // do your textarea magick here
  }else{
    // cancel the textarea etc. if it's open
  }
});

This should get you a much less tortured-looking method.