Как настроить размер нескольких соседних текстовых областей, как в jsfiddle.net?

Как настроить размер textarea, проводя мышкой по областям 1, 2 и 3, как на сайте jsfiddle.net?

Мой код:

HTML:

    

        

            A
        
        

        

            B
        
    
    

    

        

            C
        
        

        

            D
        
    

JS:

$(function () {
    window.onresize = resize;
    resize();
});

function resize() {
    var h = (window.innerHeight || (window.document.documentElement.clientHeight || window.document.body.clientHeight));
    var divHight = 20 + $("#div_left").height();//20=body padding:10px
    $("#content").css({ "min-height": h - divHight + "px" });
    $("#div_vertical").css({ "height": h - divHight + "px" });
    $("#LeftPanel").css({ "height": h - divHight + "px" });
    $("#RightPanel").css({
        "height": h - divHight + "px",
        "width": $("#content").width() - $("#LeftPanel").width() - $("#div_vertical").width() + "px"
    });
}

CSS:

body {
    background: none repeat scroll 0 0 #EFEFEF;
    overflow: hidden;
    position: relative;
    margin: 0px;
    padding: 10px;
}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}
fieldset{
    border: 0 none;
}
#LeftPanel
{
    width: 50%;
    float: left;
}
#RightPanel
{
    width: 50%;
    float: right;
}
.handler_vertical {
    cursor: col-resize;
    width: 8px;
    float: left;
}
.handler_horizontal {
    cursor: row-resize;
    height: 8px;
    width: 100%;
    float: left;
}
.window {
    border: 1px solid #ADADAD;
    width: 100%;
    float: left;
}
.top {
    height: 25%;
}
.bottom {
    height: 75%;
}

Вы также можете получить код из:http://jsfiddle.net/xBjnY/