(function($){
	
	var baseClass = "sg-admin-mapposition",
		selectorClass = "sg-selector";
	
	$.widget( "sg.sg_admin_mapposition", {
		options: {
			img_width: 600,
			img_height: 300,
			width: '100%',
			height: '200px',
			per_largeview: 1,
			
			selper_x: 0.5,
			selper_y: 0.5,
			sel_size: 20,
			positionFunction: function(per_x, per_y){}
		},
		
		_create: function() {
			var $widget = this;
			var $wrapper = this.element;
			var $options = this.options;
			
			$wrapper.addClass( baseClass );
			
			$wrapper.sg_ui_imgzoom({
				img_width: $options.img_width,
				img_height: $options.img_height,
				width: $options.width,
				height: $options.height,
				per_largeview: $options.per_largeview,
				zoomFunction: function(layer, xcoord, ycoord, viewport){
					//alert('ZOOM '+layer);
					$widget.positionSelector();
				}
			});
			
			$tag_mapwrapper = $wrapper.sg_ui_imgzoom('getMapBoxTag');
			$tag_selector = $('<div class="'+selectorClass+'" style="left: 0px, right; 0px"></div>');
			//$tag_mapwrapper.prepend( $tag_selector );
			$tag_mapwrapper.find('.mapcontent').append( $tag_selector );
			
			$tag_selector = $wrapper.find( '.'+selectorClass );
			
			$wrapper.ready(function(){
				$widget.positionSelector();
				$widget.centerMap();
			});
			
			$tag_selector.draggable();
			$tag_selector.bind( "drag", function(e, ui) {
				$widget.setSelectorOptions( ui.position );
			});
			$tag_selector.mousedown(function(e){
				e.stopPropagation();
				//e.preventDefault();
			});
		},
		
		positionSelector: function(){
			var $widget = this;
			var $wrapper = this.element;
			var $options = this.options;
			
			$tag_currentlayer = $wrapper.find('.current-map-layer');
			$tag_selector = $tag_currentlayer.find( '.'+selectorClass );
			$tag_selector.each(function(){
				$(this).css('left', ($tag_currentlayer.width()*$options.selper_x)-($options.sel_size/2)+'px');
				$(this).css('top', ($tag_currentlayer.height()*$options.selper_y)-($options.sel_size/2)+'px');
				//$(this).html($tag_currentlayer.height()+' * '+$options.selper_y+' = '+($tag_currentlayer.height()*$options.selper_y));
			});
		},
		
		setSelectorOptions: function( $position ){
			var $widget = this;
			var $wrapper = this.element;
			var $options = this.options;
			
			if($position.left != null){
				$tag_currentlayer = $wrapper.find('.current-map-layer');
				$tag_selector = $tag_currentlayer.find( '.'+selectorClass );
				
				var $half_selsize = ($options.sel_size / 2);
				$options.selper_x = ( 1 / $tag_currentlayer.width() * ($position.left + $half_selsize) );
				$options.selper_y = ( 1 / $tag_currentlayer.height() * ($position.top + $half_selsize) );
				
				$options.positionFunction($options.selper_x, $options.selper_y);
			}
		},
		
		centerMap: function(){
			var $widget = this;
			var $wrapper = this.element;
			var $options = this.options;
			
			$tag_mapwrapper = $wrapper.sg_ui_imgzoom('getMapBoxTag');
			$tag_selector = $wrapper.find( '.current-map-layer .'+selectorClass );
			$position = $tag_selector.position();
			$tag_mapwrapper.mapbox("center", { 
				x: $position.left, 
				y: $position.top
			});
		}
	});
}(jQuery));