// JavaScript Document
$(document).ready(function() { 
   $("#viewport").mapbox({mousewheel: true});
});

$("#viewport").mapbox({ 
            zoom: true,//is the map zoomable? 
            pan: true,//is the map draggable? 
            defaultLayer: 0,//this is an array type of number (zero being the first layer), which indicates which layer is shown by default 
            layerSplit: 4,//this is how many zoom levels each layer has.  The higher this number is, the smoother the transition will be between each layer 
            mapContent: ".mapcontent",//this is the class that goes on the layer which holds any content you will manually place onto the map 
            defaultX: null,//if not set, the map will be centered on the x-axis.  If set, the left side of the map will be here 
            defaultY: null,//defaultY is the same as defaultX, but for the y-axis 
            callBefore: function(layer, xcoord, ycoord, viewport) {},//callback which happens when the left mouse button is held down, and gives access to the layer node, the x and y coordinates, and the viewport node. 
            callAfter: function(layer, xcoord, ycoord, viewport) {},//callback which happens when the left mouse button is released 
            beforeZoom: function(layer, xcoord, ycoord, viewport) {},//callback which occurs before the map zooms in either direction. 
            afterZoom: function(layer, xcoord, ycoord, viewport) {},//callback which occurs after the map zooms in either direction. 
            mousewheel: false //false by default only because it requires mousewheel event plugin: http://plugins.jquery.com/project/mousewheel 
    } 
);

	$("#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("center");//centers current layer 
    $("#viewport").mapbox("center", { 
        x: 200, 
        y: 400 
    });//centers current layer at positions 200px, 400px on the x and y axis
	
	
	jQuery(document).ready(function() { 
        $("#viewport").mapbox({ 
            mousewheel: true, 
            layerSplit: 4 //smoother transition for mousewheel
        }); 
        jQuery(".map-control a").click(function() {//control panel 
            var viewport = $("#viewport"); 
            //this.className is same as method to be called 
            if(this.className == "zoom" || this.className == "back") { 
                viewport.mapbox(this.className, 2);//step twice 
            } 
            else { 
                viewport.mapbox(this.className); 
            }
            return false; 
        });
    });