function Pan(map, canvas) {
    this.map      = map
    this.canvas   = canvas
    this.baseTop  = this.canvas.offsetTop;
    this.baseLeft = this.canvas.offsetLeft;

    this.mouseStart = new point(0, 0);
    this.startMapPt = new point(0, 0);

    this.start = function start( evt ) {
        this.mouseStart          = agiEventCoordinator.getEventCoords( evt );
        this.startMapPt          = this.map.toMapPoint( this.mouseStart.x, this.mouseStart.y );
        this.isPanning           = true;
        this.canvas.style.cursor = "move";
        this.canvas.style.zIndex = 300;
    }

    this.showDrag = function showDrag( evt ) {
        if (this.isPanning) {
            var coords = agiEventCoordinator.getEventCoords( evt );
            var top    = coords.y - this.mouseStart.y;
            var left   = coords.x - this.mouseStart.x;
            this.moveMapTo( top, left );
        }
    }

    this.end = function end( evt ) {
        if (!this.isPanning)
            return;

        this.map.recenter( this.centerPoint( evt ) );
        this.canvas.style.zIndex = 200;
        this.isPanning           = false;
        resetMouseCursor();
        requestMap();
    }

    this.centerPoint = function centerPoint( evt ) {
        var center   = this.map.getExtent().getCenter();
        var mouseEnd = agiEventCoordinator.getEventCoords( evt );
        var endPt    = agiMapViewer.toMapPoint( mouseEnd.x, mouseEnd.y );
        center.x    += this.startMapPt.x - endPt.x;
        center.y    += this.startMapPt.y - endPt.y;
        return center;
    }

    this.moveMapTo = function moveMapTo( top, left ) {
        this.canvas.style.top  = this.baseTop  + top;
        this.canvas.style.left = this.baseLeft + left;
    }
}