MapBox - zoom and pan map with several image layers

MapBox can show a picture of a specific territory. When moving the card to the edge of the picture, it ceases to move, and limited by edge.

All plugin settings:

$("#viewport").mapbox({ 
	zoom: true, // does map zoom? 
	pan: true, // does map move side to side and up to down? 
	defaultLayer: 0, // starting at 0, which layer shows up first 
	layerSplit: 4, // how many times to split each layer as a zoom level 
	mapContent: ".mapcontent", // the name of the class on the content inner layer 
	defaultX: null, // default positioning on X-axis 
	defaultY: null, // default positioning on Y-axis 
	zoomToCursor: true, // if true, position on the map where the cursor is set will stay the same relative distance from the edge when zooming 
	doubleClickZoom: false, // if true, double clicking zooms to mouse position 
	clickZoom: false, // if true, clicking zooms to mouse position 
	doubleClickZoomOut: false, // if true, double clicking zooms out to mouse position 
	clickZoomOut: false, // if true, clicking zooms out to mouse position 
	doubleClickMove: false, // if true, double clicking moves the map to the cursor position 
	clickMove: false, // if true, clicking moves the map to the cursor position 
	doubleClickDistance: 1, // number of positions (determined by layerSplit) to move on a double-click zoom event 
	clickDistance: 1, // number of positions (determined by layerSplit) to move on a click zoom event 
	callBefore: function(layer, xcoord, ycoord, viewport) {}, // this callback happens before dragging of map starts 
	callAfter: function(layer, xcoord, ycoord, viewport) {}, // this callback happens at end of drag after map is released "mouseup" 
	beforeZoom: function(layer, xcoord, ycoord, viewport) {}, // callback before a zoom happens 
	afterZoom: function(layer, xcoord, ycoord, viewport) {}, // callback after zoom has completed 
	mousewheel: false /* requires mousewheel event plugin: http://plugins.jquery.com/project/mousewheel*/ 
});

API methods:

$("#viewport").mapbox("zoom");//zooms in 1 level (determined by layerSplit option) 
$("#viewport").mapbox("zoom", 2);//zooms in 2 levels 
$("#viewport").mapbox("back");//zooms out 1 level 
$("#viewport").mapbox("back", 2);//zooms out 2 levels 
$("#viewport").mapbox("zoomTo", 2);//zooms to the default size of the third layer (0 being the first) 
$("#viewport").mapbox("left");//move the current layer left 10 pixels 
$("#viewport").mapbox("right");//move the current layer right 10 pixels 
$("#viewport").mapbox("up");//move the current layer up 10 pixels 
$("#viewport").mapbox("down");//move the current layer down 10 pixels 
$("#viewport").mapbox("left", 20);//move the current layer left 20 pixels 
$("#viewport").mapbox("right", 20);//move the current layer right 20 pixels 
$("#viewport").mapbox("up", 20);//move the current layer up 20 pixels 
$("#viewport").mapbox("down", 20);//move the current layer down 20 pixels 
$("#viewport").mapbox("center");//centers current layer 
$("#viewport").mapbox("center", { 
	x: 200, 
	y: 400 
});//centers current layer at positions 200px, 400px on the x and y axis