(function($){
	$.widget( "sg.scrollable", {
		options: { 
			wrapper: null,
			content: null,
			scroller: null,
			scrollbar: null,
			centercontent: false,
			mousewheel_step: 50
		},
	 
		_create: function() {
			var $widget = this;
			
			$widget.setOptions();
			$widget.setVars();
			$widget.setDynamicVars();
			
			$widget.resizeScrollbar();
			$widget.setUpScrollbar();
			$widget.setUpMousewheel();
			$widget.moveScrollbar();
			$widget.moveContent();
						
			$(window).resize(function() {
				$widget.onResize();
			});
		},
		
		reSet: function() {
			var $widget = this;
			
			$widget.setDynamicVars();
			$widget.resizeScrollbar();
			$widget.setDynamicVars();
			$widget.moveScrollbar();
			$widget.moveContent();
		},
		
		setOptions: function(){
			var $options = this.options;
			
			//check for safari browser on mac os to lower mousewheel delta 
			var os=navigator.userAgent;
			/*
			if (os.indexOf("Mac")!=-1 && os.indexOf("Safari")!=-1 && os.indexOf("AppleWebKit")!=-1 && os.indexOf("Chrome")==-1){ 
				$options.mousewheel_step = $options.mousewheel_step/5;
			}
			*/
			if(
				(os.indexOf("Mac") != -1) && 
				(os.indexOf("Safari") != -1) && 
				(os.indexOf("AppleWebKit")!= -1) && 
				(os.indexOf("Chrome") == -1)
			){ 
				$options.mousewheel_step = $options.mousewheel_step/5;
			}
		},
		
		setVars: function() {
			if(this.options.wrapper == null){
				this.wrapper = this.element;
			}else{
				this.wrapper = this.element.find(this.options.wrapper);
			}
			this.content = this.element.find(this.options.content);
			this.scroller = this.element.find(this.options.scroller);
			this.scrollbar = this.scroller.find(this.options.scrollbar);
			
			this.per_scrolled = 0;
		},
		
		getPerScrolled: function(){
			return this.per_scrolled;
		},
		
		setPerScrolled: function($per_scrolled){
			this.per_scrolled = $per_scrolled;
			this.reSet();
		},
		
		setDynamicVars: function(){
			this.wrapper_height = this.wrapper.height();
			this.content_height = this.content.height();
			this.scroller_height = this.scroller.height();
			this.scrollbar_height = this.scrollbar.height();
			
			this.per_visible = 100 / this.content_height * this.wrapper_height;
			
			//alert('wrapper: '+this.wrapper_height+' content: '+this.content_height+' per visible: '+this.per_visible);
		},
		
		// limit scrolling to edges (0 - 100 %)
		limitScroll: function(){
			if(this.per_scrolled > 100){
				this.per_scrolled = 100;
			}else if(this.per_scrolled < 0){
				this.per_scrolled = 0;
			}
		},
		
		// on window resize
		onResize: function(){
			this.setDynamicVars();
			this.resizeScrollbar();
			this.setDynamicVars();
			this.moveScrollbar();
			this.moveContent();
		},
		
		// set scrollbar actions (drag scrollbar)
		setUpScrollbar: function(){
			var $widget = this;
			var $scrollbar = this.scrollbar;
			$scrollbar
				.draggable({
						containment: "parent"
					})
				.bind( "drag", function(event, ui){
						$scrollbar_position = $widget.scrollbar.position();
						$widget.per_scrolled = 100 / ($widget.scroller_height - $widget.scrollbar_height) * ($scrollbar_position.top);
						$widget.limitScroll();
						$widget.setDynamicVars();
						$widget.moveContent();
					})
				.bind( "mouseover", function(event, ui){
						$widget.scrollbar.addClass('tmp-hover');
					})
				.bind( "mouseout", function(event, ui){
						$widget.scrollbar.removeClass('tmp-hover');
					});
		},
		
		// set mousewheel actions (scroll on mousewheel)
		setUpMousewheel: function(){
			var $widget = this;
			$widget.setDynamicVars();
			var $wrapper = this.wrapper;
			var $options = this.options;
			
			var $real_wrapper = this.element;
			$real_wrapper
				.mousewheel(function(event, delta, deltaX, deltaY){
					//$('#TEST').html(event+' '+delta+' '+deltaX+' '+deltaY);
					var $content_position = $widget.content.position();
					var $content_top = $content_position.top;
					/*
					if(delta > 0){
						$content_top += Number($options.mousewheel_step);
					}else if(delta < 0){
						$content_top -= Number($options.mousewheel_step);
					}
					*/
					
					$content_top += Number($options.mousewheel_step * deltaY);
					
					$widget.per_scrolled = 100 / ($widget.wrapper_height - $widget.content_height) * $content_top;
										
					$widget.limitScroll();
					$widget.setDynamicVars();
					$widget.moveScrollbar();
					$widget.moveContent();
					
					return false; // prevent default
				});
		},
		
		// resize scrollbar
		resizeScrollbar: function(){
			var $new_height = this.per_visible;
			if($new_height>100){
				$new_height = 100;	
			}
			this.scrollbar.height($new_height+'%');
			if($new_height=='100'){
				this.scrollbar.hide();
			}else{
				this.scrollbar.show();
			}
		},
		
		// move scrollbar (from scrolled %)
		moveScrollbar: function(){
			var $new_top = (this.scroller_height - this.scrollbar_height) / 100 * this.per_scrolled;
			this.scrollbar.css('top', $new_top+'px');
		},
		
		// move content (from scrolled %)
		moveContent: function(){
			if(this.wrapper_height > this.content_height){
				if(this.options.centercontent == true){
					var $new_top = (this.wrapper_height - this.content_height) / 2;
				}else{
					var $new_top = 0;
				}
			}else{
				var $new_top = (this.wrapper_height - this.content_height) / 100 * this.per_scrolled;
			}
			this.content.css('top', $new_top+'px');
		}
		
	});
}(jQuery));