Javascript (jQuery) Масштабирование изображения до центральной точки его контейнера

Кажется, это должно быть довольно просто, но по какой-то причине я не могу осмыслить это. У меня есть изображение внутри div "viewport", свойство переполнения которого скрыто.

Я реализовал простое масштабирование и панорамирование с помощью пользовательского интерфейса jQuery, однако у меня возникли проблемы с отображением масштабирования из центра области просмотра. Я сделал небольшой скринкаст из Photoshop, эффект, который я пытаюсь воспроизвести: http://dl.dropbox.com/u/107346/share/reference-point-zoom.mov

В PS вы можете настроить точка отсчета масштабирования, и объект будет масштабироваться от этой точки. Очевидно, что это невозможно с HTML / CSS / JS, поэтому я пытаюсь найти соответствующие левые и верхние значения CSS, чтобы имитировать эффект.

Вот код, о котором идет речь, с удалением нескольких ненужных бит:

html

javascript

$('#zoom-control').slider({
    min: 300,
    max: 1020,
    value: 300,
    step: 24,
    slide: function(event, ui) {
        var old_width = $('#map').width();
        var new_width = ui.value;
        var width_change = new_width - old_width;
        $('#map').css({
            width: new_width,

            // this is where I'm stuck...
            // dividing by 2 makes the map zoom
            // from the center, but if I've panned
            // the map to a different location I'd
            // like that reference point to change.
            // So instead of zooming relative to
            // the map image center point, it would
            // appear to zoom relative to the center
            // of the viewport. 
            left: "-=" + (width_change / 2),
            top: "-=" + (width_change / 2)
        });
    }
});

Вот проект на JSFiddle: http://jsfiddle.net/christiannaths/W4seR/