function sqSplitter(elementId, functionOnPositionChange) {
    var thisSplitter = this;
    thisSplitter.rootElement = document.getElementById(elementId);
    thisSplitter.origClasses = thisSplitter.rootElement.className;
    thisSplitter.topElement = thisSplitter.rootElement.children[0];
    thisSplitter.bottomElement = thisSplitter.rootElement.children[1];
    thisSplitter.resizerContainer = document.createElement('div');
    thisSplitter.resizer = document.createElement('div');
    thisSplitter.opener = document.createElement('div');
    thisSplitter.maximizer = document.createElement('div');
    thisSplitter.normalizer = document.createElement('div');
    thisSplitter.rootElement.className = thisSplitter.origClasses + ' sq-splitter';
    thisSplitter.resizerContainer.className = 'resizer-container';
    thisSplitter.resizer.className = 'resizer';
    thisSplitter.opener.className = 'opener';
    thisSplitter.maximizer.className = 'maximizer';
    thisSplitter.normalizer.className = 'normalizer';
    thisSplitter.resizerContainer.appendChild(thisSplitter.maximizer);
    thisSplitter.resizerContainer.appendChild(thisSplitter.resizer);
    thisSplitter.resizerContainer.appendChild(thisSplitter.opener);
    thisSplitter.resizerContainer.appendChild(thisSplitter.normalizer);
    thisSplitter.bottomElement.appendChild(thisSplitter.resizerContainer);
    thisSplitter.resizer.addEventListener('mousedown', function () {
        thisSplitter.splitPaneResizing = true;
    }, false);
    document.addEventListener('mousemove', function (e) {
        if (thisSplitter.splitPaneResizing) {
            var zoomFactor = (window.sqAppZoom != undefined) ? window.sqAppZoom : 1;
            thisSplitter.topElement.style.flexBasis = ((e.clientY / zoomFactor) - thisSplitter.rootElement.offsetTop) + 'px';
            if (functionOnPositionChange != undefined) {
                functionOnPositionChange(true);
            }
        }
    }, false);
    document.addEventListener('mouseup', function () {
        if (thisSplitter.splitPaneResizing) {
            thisSplitter.splitPaneResizing = false;
            window.dispatchEvent(new Event('resize'));
        }
    }, false);
    thisSplitter.opener.addEventListener('click', function (e) {
        e.stopPropagation();
        thisSplitter.splitPaneOpened = !thisSplitter.splitPaneOpened;
        if (thisSplitter.splitPaneOpened) {
            thisSplitter.rootElement.classList.add("active");
        } else {
            thisSplitter.rootElement.classList.remove("active");
        }
        if (splitPaneOpened) {
            thisSplitter.topElement.style.flexBasis = '60%';
        } else {
            thisSplitter.topElement.style.flexBasis = '100%';
        }
        window.dispatchEvent(new Event('resize'));
        if (functionOnPositionChange != undefined) {
            functionOnPositionChange(true);
        }
    }, false);
    thisSplitter.maximizer.addEventListener('click', function (e) {
        e.stopPropagation();
        thisSplitter.rootElement.classList.add("maximised");
        window.dispatchEvent(new Event('resize'));
        if (functionOnPositionChange != undefined) {
            functionOnPositionChange(false);
        }
    }, false);
    thisSplitter.normalizer.addEventListener('click', function (e) {
        e.stopPropagation();
        thisSplitter.rootElement.classList.remove("maximised");
        window.dispatchEvent(new Event('resize'));
        if (functionOnPositionChange != undefined) {
            functionOnPositionChange(false);
        }
    }, false);
    thisSplitter.splitPaneResizing = false;
    thisSplitter.splitPaneOpened = false;
}