﻿function PanedView(objectName, horizontal, separator_position, divPanedViewID, divPane1ID, divPane2ID, divSeparatorID, divHandleID, divHandleCoverID)
{
    var divPanedView = document.getElementById(divPanedViewID);
    var divPane1 = document.getElementById(divPane1ID);
    var divPane2 = document.getElementById(divPane2ID);
    var divSeparator = document.getElementById(divSeparatorID);
    var divHandle = document.getElementById(divHandleID);
    var divHandleCover = document.getElementById(divHandleCoverID);
    
    var m_SeparatorPosition = separator_position; // value between 0 and 1 indicating the position of the pane separator
    var m_SeparatorGrabbed = false;
    var m_SeparatorGrabbedOrigin = 0;
    var m_SeparatorGrabbedMousePos = 0;
    
    this.construct = function()
    {
        this.PositionElements();
    }
    
    this.SetSeparatorPosition = function(value)
    {
        m_SeparatorPosition = value;
        this.PositionElements();
    }
    this.GetSeparatorPosition = function() { return m_SeparatorPosition; }
    
    // Sets the dimensions of the pane/separator elements depending on the value of m_SeparatorPosition.
    this.PositionElements = function()
    {
        if(horizontal) {
            var sep_left = (divPanedView.offsetWidth * m_SeparatorPosition) - (divSeparator.offsetWidth / 2);
            if(sep_left < 0)
                sep_left = 0;
            else if(sep_left + divSeparator.offsetWidth >= divPanedView.offsetWidth)
                sep_left = divPanedView.offsetWidth - divSeparator.offsetWidth;
            var sep_right = sep_left + divSeparator.offsetWidth;
            
            divSeparator.style.left = sep_left + "px";
            divPane1.style.width = sep_left + "px";
            divPane2.style.width = (divPanedView.offsetWidth - sep_right) + "px";
            divPane2.style.left = sep_right + "px";
        } else {
            var sep_top = (divPanedView.offsetHeight * m_SeparatorPosition) - (divSeparator.offsetHeight / 2);
            if(sep_top < 0)
                sep_top = 0;
            else if(sep_top + divSeparator.offsetHeight >= divPanedView.offsetHeight)
                sep_top = divPanedView.offsetHeight - divSeparator.offsetHeight;
            var sep_bottom = sep_top + divSeparator.offsetHeight;
            
            divSeparator.style.top = sep_top + "px";
            divHandle.style.top = (sep_top - 4) + "px";
            divHandleCover.style.top = (sep_top - 4) + "px";
            divPane1.style.height = sep_top + "px";
            divPane2.style.height = (divPanedView.offsetHeight - sep_bottom) + "px";
            divPane2.style.top = sep_bottom + "px";
        }
    }
    
    function MouseX(e)
    {
        if(e.pageX)
            return e.pageX;
        else
            return e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    }
    
    function MouseY(e)
    {
        if(e.pageY)
            return e.pageY;
        else
            return e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    
    // Called when the handle between the two panes is grabbed.
    this.HandleGrabbed = function(e)
    {
        if(!e)
            e = window.event;
            
        divSeparator.className = (horizontal ? "H" : "V") + "SeparatorGrabbed";
        m_SeparatorGrabbed = true;
        m_SeparatorGrabbedOrigin = horizontal ? divSeparator.offsetLeft : divSeparator.offsetTop;
        m_SeparatorGrabbedMousePos = horizontal ? MouseX(e) : MouseY(e);
        
        document.onselectstart = new Function("return false");
        document.onmouseup = new Function(objectName + ".HandleReleased()");
        
        return false;
    }
    
    // Called when the handle between the two panes is released.
    this.HandleReleased = function()
    {
        divSeparator.className = (horizontal ? "H" : "V") + "Separator";
        m_SeparatorGrabbed = false;
        
        document.onselectstart = null;
        document.onmouseup = null;
    }
    
    // Called when the mouse is moved over the pane view.
    this.MouseMoved = function(e)
    {
        if(!e)
            e = window.event;
            
        if(m_SeparatorGrabbed == false)
            return;
        
        if(horizontal) {
            var xrel = MouseX(e) - m_SeparatorGrabbedMousePos;
            var x = m_SeparatorGrabbedOrigin + xrel + (divSeparator.offsetWidth / 2);
            m_SeparatorPosition = x / divPanedView.offsetWidth;
        } else {
            var yrel = MouseY(e) - m_SeparatorGrabbedMousePos;
            var y = m_SeparatorGrabbedOrigin + yrel + (divSeparator.offsetHeight / 2);
            m_SeparatorPosition = y / divPanedView.offsetHeight;
        }
        
        if(m_SeparatorPosition < 0)
            m_SeparatorPosition = 0;
        else if(m_SeparatorPosition > 1)
            m_SeparatorPosition = 1;
        
        this.PositionElements();
    }
    
    this.construct();
}
