var Zoom = null;
var ZoomIn = null;
var ZoomOut = null;

window.addEvent('domready', function() {
    // enable panning
    var panArea = $('pan_area');
    this.drag = new Drag(panArea,
	{
	    handle: $('pan_handle'),
	    style: false,
	    invert: true,
	    modifiers: { x: 'scrollLeft', y: 'scrollTop' }
	});

    // set opacity for backdrop
    $$('#pan_container .backdrop').each(function(e)
    { e.setStyle('opacity', 0.6); });
    var zoomLevel = 1;
    Zoom = function(level) {
        newLevel = Math.min(Math.max(1, level), 3);
        if (newLevel != zoomLevel) {
            var x = (panArea.scrollLeft + (panArea.getWidth() / 2)) / panArea.scrollWidth;
            var y = (panArea.scrollTop + (panArea.getHeight() / 2)) / panArea.scrollHeight;
            zoomLevel = newLevel;
            $('pan_container').setStyle('visibility', 'hidden'); //flicker fix by Jeff
            $('pan_container').removeClass('zoom_1');
            $('pan_container').removeClass('zoom_2');
            $('pan_container').removeClass('zoom_3');
            $('pan_container').addClass('zoom_' + zoomLevel);
            var rezoom = function() {
                panArea.scrollLeft = (panArea.scrollWidth * x) - (panArea.getWidth() / 2.0);
                panArea.scrollTop = (panArea.scrollHeight * y) - (panArea.getHeight() / 2.0);
                $('pan_container').setStyle('visibility', 'visible'); //flicker fix by Jeff
            };
            rezoom.delay(10);
        }

    };

    ZoomIn = function() {
        Zoom(zoomLevel + 1);
    };

    ZoomOut = function() {
        Zoom(zoomLevel - 1);
    };
});