Image Container Zoom

by onury

HTML

<script src="https://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>
<div id="container">
    <img id="image" width="640" height="480" src="http://blog.weflyspitfires.com/wp-content/uploads/2012/04/World-of-Wacraft-wallpaper.jpg"
    />
    <div id="zoom_wrapper">
        <div id="zoom"></div>
    </div>
</div>

CSS

#container {
    width:400px;
    height:300px;
    border:1px solid black;
    overflow:hidden;
    position:relative;
    background: #151515;
}
#zoom_wrapper {
    position:absolute;
    z-index:1;
    left:30px;
    top:30px;
}
#image {
    margin:auto;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
}

JavaScript

TEST = {
    prevscale: 1,
    scale: 1,
    container: $('#container'),
    zoomer: $('#zoom'),
    image: $('#image'),
    running: false,
    currentY: 0,
    targetY: 0,
    oldY: 0,
    maxScrollTop: 0,
    minScrollTop: null,
    direction: null,
    fricton: 0.9, // higher value for slower deceleration
    vy: 0,
    stepAmt: 10,
    minMovement: 0.05,
    ts: 0.1,
    init: function () {
        var self = this;

        self.currentLocation = {
            x: 0,
            y: 0
        };
        self.mouseLocation = {
            x: 0,
            y: 0
        };
        self.currentscale = 1;
        self.centreimage();
        self.initslider();
        self.initmousewheel();
    },
    centreimage: function () {

        var self = this;
        //set Image dimensions to max 90% of container
        var imageHeight = 480,
            imageWidth = 640,
            container = $('#container'),
            contWidth = self.container.width(),
            contHeight = self.container.height();

        var ratio = Math.min(contWidth * 0.9 / imageWidth, contHeight * 0.9 / imageHeight);

        self.image.css({
            'height': imageHeight * ratio + 'px',
                'width': imageWidth * ratio + 'px'
        });


    },
    initslider: function () {
        var self = this;
        self.zoomer.slider({
            orientation: 'vertical',
            min: 1,
            max: 10,
            step: 0.01
        })
            .on('slide slidechange', function (event, ui) {
            self.zoom(ui.value);
        });

    },
    initmousewheel: function () {
        var self = this;
        
        self.container.on('mousewheel', function (e, delta) {
            
            if (!self.running) {
                self.running = true;
                self.animateLoop();
            }
            self.delta = delta;
            self.smoothWheel(delta);
            return false;
        });
        
        self.container.on('mousemove', function (e)...