(function($){
	
	var baseClass = "sg-ui-imgzoom ui-widget-content ui-corner-all",
		mapWrapperClass = "sg-mapwrapper";
	
	$.widget( "sg.sg_ui_imgzoom", {
		options: {
			buttons: {},
			buttons_setup: {},
			img_width: 600,
			img_height: 300,
			width: '100%',
			height: '200px',
			per_largeview: 1,
			zoomFunction: function(layer, xcoord, ycoord, viewport){}
		},
	 
		_create: function() {			
			var $widget = this;
			var $wrapper = this.element;
			var $options = this.options;
			
			$wrapper.addClass( baseClass );
			
			$tag_img = $wrapper.find('img');
			$tag_img.remove();
			
			$widget.setupMap();
			$widget.setupIconButtons();
			$widget.setupOverlay();
		},
		
		setupMap: function(){
			var $widget = this;
			var $wrapper = this.element;
			var $options = this.options;
			
			$tag_mapwrapper = $('<div class="'+mapWrapperClass+'"></div>');
			$wrapper.append( $tag_mapwrapper );
			
			$tag_mapwrapper.width( $options.width );
			$tag_mapwrapper.height( $options.height );
			
			var $map_smallwidth = $tag_mapwrapper.width();
			var $map_smallheight = $tag_mapwrapper.width() / $options.img_width * $options.img_height;
			if($map_smallheight < $tag_mapwrapper.height()){
				$map_smallheight = $tag_mapwrapper.height();
				$map_smallwidth = $tag_mapwrapper.height() / $options.img_height * $options.img_width;
			}
			
			var $tag_map_layer1 = $('<div style="height: '+$map_smallheight+'px; width: '+$map_smallwidth+'px;"><img src="'+$tag_img.attr('src')+'" /><div class="mapcontent"></div></div>');
			$tag_mapwrapper.append( $tag_map_layer1 );
			
			var $tag_map_layer2 = $('<div style="height: '+$options.img_height*$options.per_largeview+'px; width: '+$options.img_width*$options.per_largeview+'px;"><img src="'+$tag_img.attr('src')+'" /><div class="mapcontent"></div></div>');
			$tag_mapwrapper.append( $tag_map_layer2 );
			
			$tag_mapwrapper.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: 10, // 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: $options.zoomFunction, // callback after zoom has completed 
				mousewheel: true /* requires mousewheel event plugin: http://plugins.jquery.com/project/mousewheel*/ 
			});
			
			$tag_mapwrapper.mapbox("zoomTo", 2);
		},
		
		setupIconButtons: function(){
			var $widget = this;
			var $wrapper = this.element;
			var $options = this.options;
			
			$tag_mapwrapper = $wrapper.find( '.'+mapWrapperClass );
			
			$options.buttons['.sg-button-zoomin'] = function(e){
				$tag_mapwrapper.mapbox("zoom");
				$options.zoomFunction();
			};
			$options.buttons['.sg-button-zoomout'] = function(e){
				$tag_mapwrapper.mapbox("back");
				$options.zoomFunction();
			};
			
			$tag_icons = $wrapper.find('.sg-icons');
			$tag_icons.sg_admin_icons({
				buttons: $options.buttons,
				buttons_setup: $options.buttons_setup
			});
		},
		
		setupOverlay: function(){
			
		},
		
		getMapBoxTag: function(){
			return this.element.find( '.'+mapWrapperClass );
		}
	});
}(jQuery));