$(document).ready(function () {

    $(".feature-map img,.map-view-online a").addClass("map-active").colorbox({ width: "996", height: "666", inline: true, href: "#map-container", onOpen: function () { $("#map-container").css({visibility:"visible",display:"block",position:"static"}); }, onClosed: function () { $("#map-container").css("display", "none"); } });
    $mapViewport = $("<div id='map-viewport'/>").appendTo("#map-container");
    $("#map-container").append("<div id='zoom-controls'><label for='in'>Zoom</label><a href='#in' id='in'>+</a><a href='#out' id='out'>-</a></div>");
    imagePath = $(".map-view-online a").attr("href");

    $("#map-viewport").iviewer(
    {
        src: imagePath,
        update_on_resize: false,
        zoom_min: 42,
        zoom_max: 100,
        zoom_delta: 1.2,
        zoom: 50,
        initCallback: function () {
            var object = this;
            $("#in").click(function (e) { object.zoom_by(1); e.preventDefault() });
            $("#out").click(function (e) { object.zoom_by(-1); e.preventDefault() });
            $("#fit").click(function (e) { object.fit(); });
            $("#orig").click(function (e) { object.set_zoom(100); });
            $("#update").click(function (e) { object.update_container_info(); });
        },
        onMouseMove: function (object, coords) { },
        onStartDrag: function (object, coords) { }, //this image will not be dragged
        onDrag: function (object, coords) { }
    });

    var obj = $("#map-viewport").data('viewer');
    obj.moveTo(-1000, -500);
});