Помогите разобраться со сплиттером

[Tror]

История такова: мне понадобилось в одном проекте использовать сплиттер. Порывшись в нете, я ничего удовлетворяющего мои потребности не нашел. Решил сам немного повелосипедостроить
пока то что у меня есть очень сырое и только для вертикального сплита. Есть проблемы с выделением текста при передвижении сплиттера. Пытался сделать, но что-то не очень впечатляет. Еще бывает так что в фоксе при отпускании кнопки мыши сплиттер все равно продолжает двигаться.
Был бы рад любым предложениям, помощи и критике. Я только недавно начал постигать яваскрипт, и поэтому могу не знать всех тонкостей.

Заранее благодарен за ответ.

код:

function Splitter(containerId, splitArea1Id, splitArea2Id, options)
{
    this.options = jQuery.extend(
        {
            splitterType: "v",
            oppositeInitSize: 700,
            area1MinSize: 300,
            area1MaxSize: 0,
            area2MinSize: 700,
            area2MaxSize: 0,
            splitterWidth: 8
        }, options);
 
    this.area1 = jQuery("#" + splitArea1Id);
    this.area2 = jQuery("#" + splitArea2Id);
    this.container = jQuery("#" + containerId).css({height: Math.max(this.area1[0].offsetHeight, this.area2[0].offsetHeight) + "px"});
    this.splitterBar = jQuery("<div class='splitterBar' />").insertAfter(this.area1);
    this.active = false;
 
    this.Init();
}
 
Splitter.prototype.Init = function()
{
    if (!this.container)
    {
        return;
    }
 
    if (this.options.splitterType == "v")
    {
        var area1Width = this.area1[0].clientWidth == 0 ? this.options.area1MinSize + 1 : this.area1[0].clientWidth + 1;
        var contHeight = this.container[0].height = this.options.oppositeInitSize;
        var contWidth = this.container[0].clientWidth;
        var area2Width = contWidth - area1Width - this.options.splitterWidth;
 
        this.area1.css({position: "absolute", left: "0px"});
        this.splitterBar
            .css({
                    zIndex: "1000",
                    position: "absolute",
                    left: area1Width + "px",
                    width: this.options.splitterWidth,
                    height: contHeight + "px",
                    backgroundColor: "green",
                    cursor: "e-resize"
                })
            .bind("mouseleave", this, Splitter.MouseOut)
            .bind("mousedown", this, Splitter.MouseDown);
            //.bind("mouseup", function(){ this.active = false; });
        this.area2
            .css({
                    position: "absolute",
                    left: area1Width + this.options.splitterWidth + "px",
                    width: area2Width + "px",
                    height: contHeight + "px"
                });
    }
}
 
Splitter.MouseOut = function(evtArgs)
{
    var splitter = evtArgs.data;
 
    if (!splitter) return;
 
    if (!splitter.active)
    {
        jQuery(document).css({cursor: "arrow"});
    }
    else
    {
        jQuery(document).css({cursor: "e-resize"});
    }
}
 
Splitter.MouseDown = function(evtArgs)
{
    var splitter = evtArgs.data;
 
    if (!splitter) return;
 
    splitter.active = true;
 
    if (window.ActiveXObject)
    {
        document.onselectstart = function(){ return false; };
    } 
    jQuery(document).select(clearSelection);
    jQuery(document)
        .css
            ({
                cursor: "e-resize",
                "user-select": "none",
                //"-webkit-user-select": "none",
                //"-khtml-user-select": "none",
                "-moz-user-select": "none"
            })
        .bind("mousemove", splitter, Splitter.MouseMove)
        .bind("mouseup", splitter, Splitter.MouseUp);
}
 
Splitter.MouseUp = function(evtArgs)
{
    var splitter = evtArgs.data;
 
    if (!splitter) return;
 
    splitter.active = false;
 
//    if (window.ActiveXObject)
//    {
//        jQuery(document).unbind("onselectstart");
//    } 
 
    jQuery(document)
        .css
            ({
                cursor: "arrow",
                //"user-select": "all",
                //"-webkit-user-select": "none",
                //"-khtml-user-select": "none",
                //"-moz-user-select": "text"
            })
        //.unbind("select")
        .unbind("mousemove")
        .unbind("mouseup");
}
 
Splitter.MouseMove = function(evtArgs)
{
//    jQuery("#debug")[0].innerHTML = evtArgs.data.active + "<br />X = " + evtArgs.pageX + "<br />Y = " + evtArgs.pageY;
 
    var splitter = evtArgs.data;
 
    if (!splitter) return;
 
    var area1Width = evtArgs.pageX + 1;
    var contWidth = splitter.container[0].clientWidth;
    var area2Width = contWidth - area1Width - splitter.options.splitterWidth;
 
 
    splitter.area1.css({ width: area1Width });
    splitter.splitterBar.css({ left: area1Width + "px", width: splitter.options.splitterWidth });
    splitter.area2.css({ left: area1Width + splitter.options.splitterWidth + "px", width: area2Width + "px" });
}
 
function clearSelection() {
   var sel ;
   if(document.selection && document.selection.empty)
{
     document.selection.empty() ;
   } 
else if(window.getSelection) 
{
     sel=window.getSelection();
     if(sel && sel.removeAllRanges)
       sel.removeAllRanges() ;
   }
}

[Octane]

Значит тока недавно стали изучать JavaScript, а уже полезли в jQuery? :-)

Когда изменяете ширину:

…
var area1Width = evtArgs.pageX + 1;
…
splitter.area1.css({ width: area1Width });

забыли единицы измерения дописать.

Закачайте куда-нибудь пример, просто голый JavaScript бесполезно смотреть в случае с элементом интерфейса, здесь немаловажную роль играет еще и верстка.