(function ($) {
  $.fn.zoomable = function () {
    return this.each(function (index, value) {
      var busy = false;
      var x_fact = 1.2;

      var getScrollLeft = function () {
        return window.pageXOffset || document.documentElement.scrollLeft;
      };

      var getScrollTop = function () {
        return window.pageYOffset || document.documentElement.scrollTop;
      };

      $(value).css('position', 'relative').css('left', '0').css('top', 0).css('margin', '0');

      $(value).draggable();

      // jquery mousewheel not working in FireFox for some reason
      if ($.browser.mozilla) {
        value.addEventListener('DOMMouseScroll', function (e) {
          e.preventDefault();
          zoomDelta(-e.detail);
        }, false);
        $(value.useMap)[0].addEventListener('DOMMouseScroll', function (e) {
          e.preventDefault();
          zoomDelta(-e.detail);
        }, false);
      }
      else {
        $(value).bind('mousewheel', function (e) {
          e.preventDefault();
          zoomDelta(e.wheelDelta);
        });
        $(value.useMap).bind('mousewheel', function (e) {
          e.preventDefault();
          zoomDelta(e.wheelDelta);
        });
      }

      var currentX;
      var currentY;
      $(value).bind('mousemove', function (e) {
        currentX = e.pageX;
        currentY = e.pageY;
      });

      var zoomDelta = function (delta) {

        // zoom out ---------------
        if (delta < 0) {
          zoom(1 / x_fact);
        }

        // zoom in -----------
        else if (delta > 0) {
          zoom(x_fact);
        }
      };

      var zoomMap = function (amount) {
        // resize image map
        var map = document.getElementById(value.useMap.substring(1));
        if (map != null) {
          for (var i = 0; i < map.areas.length; i++) {
            var area = map.areas[i];
            var coords = area.coords.split(',');
            for (var j = 0; j < coords.length; j++) {
              coords[j] = coords[j] * amount;
            }
            var coordsString = "";
            for (var j = 0; j < coords.length; j++) {
              if (j > 0)
                coordsString += ",";
              coordsString += coords[j];
            }
            area.coords = coordsString;
          }
        }
      };

      var zoom = function (fact) {
        if (!busy) {
          busy = true;

          var xi = parseInt($(value).css('left'));
          var yi = parseInt($(value).css('top'));

          var new_h = (value.height * fact);
          var new_w = (value.width * fact);

          // calculate new X and y based on mouse position
          var parent = $(value).parent()[0];
          currentX = currentX - parent.offsetLeft 
          var newImageX = (currentX - xi) * fact;
          xi = currentX - newImageX;

          currentY = currentY - parent.offsetTop
          var newImageY = (currentY - yi) * fact;
          yi = currentY - newImageY;

          $(value).animate({
            left: xi,
            top: yi,
            height: new_h,
            width: new_w
          }, 100, function () {
            busy = false;
          });

          zoomMap(fact);
        }
      };
    });
  };
})(jQuery);