JavaScript、ウインドウリサイズ

ちまちまとJavaScriptのウインドウの続きを作っていた。
サイズ変更できるようにしようと。
で、できたのがこれ。
今のところ右辺と下辺と右下隅をドラッグすればサイズ変更ができる。
ソースはちなみにこいつ（一部）↓。ScriptaculousのDraggebleクラスみたいにResizableクラスにDIVを登録すると、そのDIVがリサイズ可能になる（というかDraggableを参考に作ってはみた）。 ちなみにPrototypeとかがないと多分動かない。
[javascript]var Sd = { Version: '0.2' };

Sd.Resizable = Class.create(); Sd.Resizable.prototype = { initialize: function(element){ var options = { observer: false // it needs observer.mixW, observer.minH, observer.onChangeSize }.extend(arguments[1] || {});

    this.element      = $(element);
    this.active      = false;
    this.resizingW   = false;
    this.resizingH   = false;
    this.observer     = options.observer;       
    this.minW     = (this.observer.minW) ? this.observer.minW : 40;
    this.minH    = (this.observer.minH) ? this.observer.minH : 40;

    this.resizewindow = document.createElement('div');
    this.resizewindow.id=this.element.id+'_resizewindow';
    var props= {
        border:'1px solid blue',background:'transparent', overflow:'hidden', position:'relative',
        padding:'0px',visibility:'hidden'
    };
    for( i in props ){
        this.resizewindow.style[i]=props[i];
    }
    this.element.parentNode.appendChild(this.resizewindow);

    Event.observe(this.element, "mousedown", this.startResize.bindAsEventListener(this));
    Event.observe(document, "mouseup",      this.endResize.bindAsEventListener(this));
    Event.observe(document, "mousemove",    this.updateResize.bindAsEventListener(this));
},
startResize: function(event){
    if(!Event.isLeftClick(event)) { return ; }

    var cursor=this.element.style.cursor;
    if( cursor=='nwresize'){
        this.resizingW=this.resizingH=true;
    }else if(cursor=='wresize'){
        this.resizingW=true;this.resizingH=false;
    }else if(cursor=='nresize'){
        this.resizingW=false;this.resizingH=true;
    }else{
        return; 
    }

    Position.clone(this.element.id,this.resizewindow.id);
    this.resizewindow.style.zIndex= '10';
    this.element.style.zIndex= '1';
    this.resizewindow.style.visibility='visible';
    this.originalX=event.clientX;
    this.originalY=event.clientY;
    this.originalW=this.resizewindow.clientWidth;
    this.originalH=this.resizewindow.clientHeight;

    Event.stop(event);      
},
endResize: function(event){
    if(this.resizingW || this.resizingH){
        this.resizewindow.style.visibility='hidden';
        if(this.observer.onChangeSize){
            this.observer.onChangeSize(this.resizewindow.clientWidth,this.resizewindow.clientHeight);
        } else {
            this.element.style.width=this.resizewindow.clientWidth+'px';
            this.element.style.height=this.resizewindow.clientHeight+'px';            
        }
        this.resizingH=this.resizingW=false;
        Event.stop(event);      
    }       
},
updateResize:function(event){
    if(this.resizingW || this.resizingH){
        this.draw(event);
        return;
    } 
    var x= ( event.clientX  parseInt(this.element.style.left || 0 ));
    var y= ( event.clientY  parseInt(this.element.style.top || 0 ));
    var cursor;

    if(( x > ( this.element.clientWidth  2 )) && ( y > ( this.element.clientHeight  2 ))){
        cursor='nwresize';
        Event.stop(event);
    } else if( x > ( this.element.clientWidth  2 )){
        cursor='wresize';
        Event.stop(event);
    } else if( y > ( this.element.clientHeight  2 )){
        cursor='nresize';
        Event.stop(event);
    } else {
        cursor='auto';
    }
    this.element.style.cursor=cursor;
},
draw:function(event){
    if(this.resizingW){
        if((this.originalW+(event.clientXthis.originalX))>this.minW)
            this.resizewindow.style.width  = (this.originalW+(event.clientXthis.originalX)) + 'px';             
    }
    if(this.resizingH){
        if((this.originalH+(event.clientYthis.originalY))>this.minH)
            this.resizewindow.style.height = (this.originalH+(event.clientYthis.originalY)) + 'px';
    }
    Event.stop(event);
}

};[/javascript]

上辺と左辺がドラッグできないのがダメ、あと画面のスクロールには対応していないからスクロールするとまともに動かなくなるのがダメとか、まだ全然不完全だったりする。
閉じるボタンとかも欲しいし。
というか、どこかに手頃なUIのフレームワーク転がってないかな？
bindowとかもあるけどタダじゃないでしょ。
xdesktopはIFRAME方式だし、、dojoはサンプルがないからよく分からないし。
つーかこのへんのUI制御って普段は（MFCとか）API使っているんで、あまり得意じゃないのよね。。。
JavaScript得意な人だったら直ぐに作れるのだろうなぁ。