function Splitter(barID, collapseBarID, leftPanel, rightPanel){
    var Bar = document.getElementById(barID);
	var CollapseBar = document.getElementById(collapseBarID);
    var LeftPanel = document.getElementById(leftPanel);
    var RightPanel = document.getElementById(rightPanel);
    var SpeedRatio = 1;
    var UpperPanel = null;
    var LowerPanel = null;

    var dragStart = false;
    var currentPosition = null;
    var minWidth = 20;
    var barWidth = 5;

    var init      = function(){
	    Bar.onmousedown     = mouseDown;
	    CollapseBar.onclick = CollapseExpand;
    }
    
    init();
    
    function getPosition(e){
	    var left = 0;
	    var top  = 0;

	    while (e.offsetParent){
		    left += e.offsetLeft;
		    top  += e.offsetTop;
		    e     = e.offsetParent;
	    }

	    left += e.offsetLeft;
	    top  += e.offsetTop;

	    return {x:left, y:top};
    }
        
    function mouseCoords(ev){
	    if(ev.pageX || ev.pageY){
		    return {x:ev.pageX, y:ev.pageY};
	    }
	    return {
		    x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
		    y:ev.clientY + document.body.scrollTop  - document.body.clientTop
	    }
    }

    function mouseDown(ev){
     
 	    ev            = ev        || window.event;
	    var target    = ev.target || ev.srcElement;
	    if (target == Bar) {
	        PutCoverLayer();
        
		    dragStart = true;
		    return false;	
        }
    }

    function mouseUp (ev){

	    removeCover();
	    dragStart = false;
	    return true;
    }

    function mouseMove(ev){
	    ev           = ev || window.event;
     
	    if (dragStart){
		    var target   = ev.target || ev.srcElement;

		    currentPosition = mouseCoords(ev);

    		
		    var leftPanelWidth                       = currentPosition.x - getPosition(LeftPanel).x - 2 ;
		    var rightPanelWidth                      = document.body.clientWidth - currentPosition.x ;
    		
		    if (rightPanelWidth < minWidth)
			    LeftPanel.style.width  = document.body.clientWidth - minWidth - barWidth;
		    else
			    LeftPanel.style.width  = Math.max(leftPanelWidth, minWidth);
    			
		    if (LeftPanel.style.width != "" && LeftPanel.style.width != "1pt"){
			    CollapseBar.src = "images/SplitterCollapse.gif";
			    CollapseBar.setAttribute("ExpandSrc", "images/SplitterExpand.gif");
    			
		    }

		    PutCoverLayer();

		    return false;

	    }
    }

    function CollapseExpand(ev){

 	    ev            = ev        || window.event;
	    var target    = ev.target || ev.srcElement;
    	
	    if (target == CollapseBar){

		    var ExpandSrc = target.getAttribute("ExpandSrc");
		    target.setAttribute("ExpandSrc",target.src);
		    target.src = ExpandSrc;
		    if (LeftPanel.style.width == "" || LeftPanel.style.width != "1pt"){
			    target.setAttribute("LeftPanelWidth", LeftPanel.clientWidth);
			    LeftPanel.style.width = "1pt";
		    }
		    else
			    LeftPanel.style.width = target.getAttribute("LeftPanelWidth");

		    dragStart = false;
		    return false;
        }
    }


    function PutCoverLayer(){
	    createCoverLayer();
    	
    }
    function createCoverLayer(){
	    var oDiv 
	    if (document.getElementById("documentCover"))
		    oDiv = document.getElementById("documentCover");
	    else
	    {
		    oDiv    = document.createElement("DIV");
		    oDiv.id = "documentCover";
		    document.body.appendChild(oDiv);
		    document.getElementById("documentCover").onmouseout  = mouseUp;
		    document.getElementById("documentCover").onmouseup   = mouseUp;
		    document.getElementById("documentCover").onmousemove = mouseMove;
	    }
    	
	    with (oDiv.style){
		    backgroundImage = "url(images/None.gif)";
		    position        = "absolute";
		    top				= 0;
		    left			= 0;
		    zIndex			= 99;
		    width			= document.body.clientWidth;
		    height			= document.body.clientHeight;
	    }
    }

    function removeCover(){
	    if (document.getElementById("documentCover"))
		    document.body.removeChild(document.getElementById("documentCover"));
    }
     
    }