I have the following code which adjusts the size of two panels, one above the other. Move the mouse up and the top panel will get smaller while the bottom panel will get larger. It all seems to work well enough, however, on mouseup although the 'clearInterval' line appears to be executed, 'interval' is not reset and movement of the mouse still alters the panel sizes.

Can anyone point out where I have gone wrong or indeed indicate a better way to do this?

Thanks in advance.

document.addEventListener('DOMContentLoaded',function(event){
  document.querySelector('#partition').onmousedown = function(event){
    //Set a timer to check every millisecond the position of the mouse and asign that position to the panels
    var interval=setInterval(function(){
      onmousemove = function(e){
        document.getElementById('topPanel').style.height = e.clientY;
        document.getElementById('btmPanel').style.height = viewport_height - e.clientY - 10;
      }
      //check for mouse up and cancel timer.
      onmouseup = function(){
        clearInterval(interval); 
      }
    }, 100); // the above code is executed every 100 ms  
  }
});