Javascript-форум - Изменение ширины дива мышкой

Всем доброго дня. Задумка следующая: есть 2 блока с бэграундами и блок, назовем его ресайз. Нужно чтобы мышкой можно было регулировать ширину и при этом ширина одного блока увеличивалась, а другого уменьшалась.
Вот примерно то что хочу сделать

двигая ползунок можно просматривать то одно изображение целиком, то другое.

Нашел в нэте скрипт подобного, но что то у меня он не совсем правильно работает.

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
    /*Section-9*******************************/
div.sec-9 {
    margin: 0 auto;
    width: 90%;
    height: 757px;
    position: relative;
    background: #fff;
    padding-top: 50px;
}
.sec-9 h1 {
  position: relative;
  text-align: center;
  font-size: 45px;
  color: #fff;
  font-weight: 700;
  z-index: 100;
}
.sec-9 h2 {
  position: relative;
  text-align: center;
  font-size: 20px;
  color: #fff;
  z-index: 100;
}
.sec-9-good-roof h3 {
  margin: 0;
  font-size: 45px;
  color: #fff;
  font-weight: 700;
  line-height: 757px;
  text-align: center;
}
.sec-9-bad-roof h3 {
  margin: 0;
  font-size: 45px;
  color: #fff;
  font-weight: 700;
  line-height: 757px;
  text-align: center;
}
.sec-9-good-roof {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 757px;
  background: url(img/sec-9-img-2.jpg) no-repeat;
  background-position: right center;
}
.sec-9-good-roof div {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 757px;
}
.sec-9-bad-roof {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 757px;
  background: url(img/sec-9-img-1.jpg) no-repeat;
  background-position: left center;
}
.sec-9-ukaz {
  position: absolute;
  top: 0;
  left: 50%;
  width: 61px;
  height: 757px;
  margin-left: -30.5px;
  background: url(img/sec-9-ukaz.png) no-repeat;
  background-position:center;
}
.sec-9-ukaz:hover {
  cursor: pointer;
}
.sec-9-roof-wid {
  width: 70%;
}
.sec-9-ukaz-wid {
  left: 70%;
}
.sec-9-anim {
  -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
}
</style>
</head>
<body>
<div class="sec-9 doit" id="foto">
        <h1>Результат на лицо</h1>
        <h2>Мы успешно завершили десятки проектов<br>по монтажу кровли</h2>
        <div class="sec-9-good-roof" id="block">
                     <div>
            <h3>После</h3>
                     </div>
        </div>
        <div class="sec-9-bad-roof" style="width: 770px;">
            <h3>До</h3>
        </div>
        <div class="sec-9-ukaz" id="block_resize" style="left: 770px;"></div>
    </div>
<script type="text/javascript">
  var ie = 0;
  var op = 0;
  var ff = 0;
  var block; // Основной блок
  var block_r; // Блок для изменения размеров
  var delta_w = 0; // Изменение по ширине
  var delta_h = 0; // Изменение по высоте
  /* После загрузки страницы */
  onload = function () {
    /* Определяем браузер */
    var browser = navigator.userAgent;
    if (browser.indexOf("Opera") != -1) op = 1;
    else {
      if (browser.indexOf("MSIE") != -1) ie = 1;
      else {
        if (browser.indexOf("Firefox") != -1) ff = 1;
      }
    }
    block = document.getElementById("block"); // Получаем основной блок
    block_r = document.getElementById("block_resize"); // Получаем блок для изменения размеров
    document.onmouseup = clearXY; // Ставим обработку на отпускание кнопки мыши
    block_r.onmousedown = saveWH; // Ставим обработку на нажатие кнопки мыши
  }
  /* Функция для получения текущих координат курсора мыши */
  function getXY(obj_event) {
    if (obj_event) {
      x = obj_event.pageX;
      y = obj_event.pageY;
    }
    else {
      x = window.event.clientX;
      y = window.event.clientY;
      if (ie) {
        y -= 2;
        x -= 2;
      }
    }
    return new Array(x, y);
  }
  function saveWH(obj_event) {
    var point = getXY(obj_event);
    w_block = block.clientWidth; // Текущая ширина блока
    h_block = block.clientHeight; // Текущая высота блока
    delta_w = w_block - point[0]; // Измеряем текущую разницу между шириной и x-координатой мыши
    delta_h = h_block - point[1]; // Измеряем текущую разницу между высотой и y-координатой мыши
    /* Ставим обработку движения мыши для разных браузеров */
    document.onmousemove = resizeBlock;
    if (op || ff) document.addEventListener("onmousemove", resizeBlock, false);
    return false; // Отключаем стандартную обработку нажатия мыши
  }
  /* Функция для измерения ширины окна */
  function clientWidth() {
    return document.documentElement.clientWidth == 0 ? document.body.clientWidth : document.documentElement.clientWidth;
  }
  /* Функция для измерения высоты окна */
  function clientHeight() {
    return document.documentElement.clientHeight == 0 ? document.body.clientHeight : document.documentElement.clientHeight;
  }
  /* При отпускании кнопки мыши отключаем обработку движения курсора мыши */
  function clearXY() {
    document.onmousemove = null;
  }
  function resizeBlock(obj_event) {
    var point = getXY(obj_event);
    new_w = delta_w + point[0]; // Изменяем новое приращение по ширине
    block.style.width = new_w + "px"; // Устанавливаем новую ширину блока
    block.style.height = new_h + "px"; // Устанавливаем новую высоту блока
    /* Если блок выходит за пределы экрана, то устанавливаем максимальные значения для ширины и высоты */
    if (block.offsetLeft + block.clientWidth > clientWidth()) block.style.width = (clientWidth() - block.offsetLeft)  + "px";
    if (block.offsetTop + block.clientHeight > clientHeight()) block.style.height = (clientHeight() - block.offsetTop) + "px";
  }
</script>
</body>
</html>

Подскажите что я делаю не так?