(function($){
	
	$.tiny = $.tiny || { };
	
	$.tiny.Scrollbar = {
		options: {	
			axis: 'y',
			wheel: 40,
			scroll: true,
			size: 'auto',
			sizethumb: 'auto'
		}
	};	
	
	$.fn.tinyscrollbar = function(options) { 
		var options = $.extend({}, $.tiny.Scrollbar.options, options); 		
		this.each(function(){ $(this).data('tsb', new Scrollbar($(this), options)); });
		return this;
	};
	
	$.fn.tinyscrollbar_update = function(sScroll) {return $(this).data('tsb').update_tween(sScroll); };
	
	$.fn.tinyscrollbar_scroll = function(sScroll) {return $(this).data('tsb').scroll_tween(sScroll); };
	
	function Scrollbar(root, options){
		var oSelf = this;
		var oWrapper = root;
		var oViewport = { obj: $('.Viewport', root) };
		var oContent = { obj: $('.Overview', root) };
		var oScrollbar = { obj: $('.Scrollbar', root) };
		var oTrack = { obj: $('.Track', oScrollbar.obj) };
		var oThumb = { obj: $('.Thumb', oScrollbar.obj) };
		var sAxis = options.axis == 'x', sDirection = sAxis ? 'left' : 'top', sSize = sAxis ? 'Width' : 'Height';
				
		var iScroll, iPosition = { start: 0, now: 0 }, iMouse = {};
		
		
		$('.Container', root).css('height', $('.Viewport', root).height()+($('.Overview', root).height()-$('.Viewport', root).height())*2 );
		$('.Container', root).css('margin-top', -($('.Overview', root).height()-$('.Viewport', root).height()))
		
		$('.Scrollbar', root).css('opacity', 0)
		
		var percentScroll = $('.Viewport', root).height()/$('.Overview', root).height()
		
		$('.Overview', root).draggable({
			axis:'y',
			start:function(){
				$('.White', root).css('display', 'block');
				$('.White', root).stop().animate({"opacity": .8}, 500);
			},
			stop:function(){
				$('.White', root).stop().animate({"opacity": 0}, 500, function(){
					$('.White', root).css('display', 'none');
				});
			},
			drag:function(){
				$('.Thumb', oScrollbar.obj).css("top", $('.Overview', root).position().top*-oContent.ratio+"px");
				iScroll = $('.Overview', root).position().top*-1;
			},
			containment:$('.Container', root)
		});
			
		$(window).resize(function() {
			$('.Viewport', root).css("height", $(window).height()-100);
			
			if($('.Viewport', root).height()>$('.Overview', root).height()){
				$('.Container', root).css('height', $('.Overview', root).height());
				$('.Container', root).css('margin-top', 0);
			}else{
				$('.Container', root).css('height', $('.Viewport', root).height()+($('.Overview', root).height()-$('.Viewport', root).height())*2);
				$('.Container', root).css('margin-top', -($('.Overview', root).height()-$('.Viewport', root).height()));			
			}
			
			return initialize();
		});
	
		ScaleReposition = function() {
			$('.Viewport', root).css("height", $(window).height()-100);
			
			if($('.Viewport', root).height()>$('.Overview', root).height()){
				$('.Container', root).css('height', $('.Overview', root).height());
				$('.Container', root).css('margin-top', 0);
			}else{
				$('.Container', root).css('height', $('.Viewport', root).height()+($('.Overview', root).height()-$('.Viewport', root).height())*2);
				$('.Container', root).css('margin-top', -($('.Overview', root).height()-$('.Viewport', root).height()));			
			}
		};
		function initialize(){
			oSelf.update();
			setEvents();
			return oSelf;
		}
		this.update = function(sScroll){
			oViewport[options.axis] = oViewport.obj[0]['offset'+ sSize];
			oContent[options.axis] = oContent.obj[0]['scroll'+ sSize];
			oContent.ratio = oViewport[options.axis] / oContent[options.axis];
			oScrollbar.obj.toggleClass('disable', oContent.ratio >= 1);
			oTrack[options.axis] = options.size == 'auto' ? oViewport[options.axis] : options.size;
			oThumb[options.axis] = Math.min(oTrack[options.axis], Math.max(0, ( options.sizethumb == 'auto' ? (oTrack[options.axis] * oContent.ratio) : options.sizethumb )));
			oScrollbar.ratio = options.sizethumb == 'auto' ? (oContent[options.axis] / oTrack[options.axis]) : (oContent[options.axis] - oViewport[options.axis]) / (oTrack[options.axis] - oThumb[options.axis]);
			iScroll = (sScroll == 'relative' && oContent.ratio <= 1) ? Math.min((oContent[options.axis] - oViewport[options.axis]), Math.max(0, iScroll)) : 0;
			iScroll = (sScroll == 'bottom' && oContent.ratio <= 1) ? (oContent[options.axis] - oViewport[options.axis]) : isNaN(parseInt(sScroll)) ? iScroll : parseInt(sScroll);
			setSize();
		};
		
		this.scroll_tween = function(sScroll){
			$('.Thumb', oScrollbar.obj).animate({top:$('.Overview', root).position().top*-oContent.ratio+"px"},500, function(){
				iScroll = $('.Overview', root).position().top*-1;
			})
		}
		
		this.update_tween = function(sScroll){
			$('.Viewport', root).css("height", $(window).height()-100);
			
			if($('.Viewport', root).height()>$('.Overview', root).height()){
				$('.Container', root).css('height', $('.Overview', root).height());
				$('.Container', root).css('margin-top', 0);
			}else{
				$('.Container', root).css('height', $('.Viewport', root).height()+($('.Overview', root).height()-$('.Viewport', root).height())*2);
				$('.Container', root).css('margin-top', -($('.Overview', root).height()-$('.Viewport', root).height()));			
			}
			
			
			oViewport[options.axis] = oViewport.obj[0]['offset'+ sSize];
			oContent[options.axis] = oContent.obj[0]['scroll'+ sSize];
			oContent.ratio = oViewport[options.axis] / oContent[options.axis];
			oScrollbar.obj.toggleClass('disable', oContent.ratio >= 1);
			oTrack[options.axis] = options.size == 'auto' ? oViewport[options.axis] : options.size;
			oThumb[options.axis] = Math.min(oTrack[options.axis], Math.max(0, ( options.sizethumb == 'auto' ? (oTrack[options.axis] * oContent.ratio) : options.sizethumb )));
			oScrollbar.ratio = options.sizethumb == 'auto' ? (oContent[options.axis] / oTrack[options.axis]) : (oContent[options.axis] - oViewport[options.axis]) / (oTrack[options.axis] - oThumb[options.axis]);
			iScroll = (sScroll == 'relative' && oContent.ratio <= 1) ? Math.min((oContent[options.axis] - oViewport[options.axis]), Math.max(0, iScroll)) : 0;
			iScroll = (sScroll == 'bottom' && oContent.ratio <= 1) ? (oContent[options.axis] - oViewport[options.axis]) : isNaN(parseInt(sScroll)) ? iScroll : parseInt(sScroll);
			setSizeTween();
		};
		function setSize(){
			oThumb.obj.css(sDirection, iScroll / oScrollbar.ratio);
			oContent.obj.css(sDirection, -iScroll);
			iMouse['start'] = oThumb.obj.offset()[sDirection];
			var sCssSize = sSize.toLowerCase(); 
			oScrollbar.obj.css(sCssSize, oTrack[options.axis]-20);
			oTrack.obj.css(sCssSize, oTrack[options.axis]-20);
			oThumb.obj.css(sCssSize, oThumb[options.axis]-20);		
		};
		
		function setSizeTween(){
			//oThumb.obj.css(sDirection, iScroll / oScrollbar.ratio);
			//oContent.obj.css(sDirection, -iScroll);
			//iMouse['start'] = oThumb.obj.offset()[sDirection];
			var sCssSize = sSize.toLowerCase(); 
			oScrollbar.obj.css(sCssSize, oTrack[options.axis]-20);
			oTrack.obj.css(sCssSize, oTrack[options.axis]-20);
			oThumb.obj.css(sCssSize, oThumb[options.axis]-20);		
		};
		
		function setEvents(){
			oThumb.obj.bind('mousedown', start);
			oThumb.obj[0].ontouchstart = function(oEvent){
				oEvent.preventDefault();
				oThumb.obj.unbind('mousedown');
				start(oEvent.touches[0]);
				return false;
			};	
			oTrack.obj.bind('mouseup', drag);
			if(options.scroll && this.addEventListener){
				oWrapper[0].addEventListener('DOMMouseScroll', wheel, false);
				oWrapper[0].addEventListener('mousewheel', wheel, false );
			}
			else if(options.scroll){oWrapper[0].onmousewheel = wheel;}
		};
		function start(oEvent){
			iMouse.start = sAxis ? oEvent.pageX : oEvent.pageY;
			var oThumbDir = parseInt(oThumb.obj.css(sDirection));
			iPosition.start = oThumbDir == 'auto' ? 0 : oThumbDir;
			$(document).bind('mousemove', drag);
			document.ontouchmove = function(oEvent){
				$(document).unbind('mousemove');
				drag(oEvent.touches[0]);
			};
			$(document).bind('mouseup', end);
			oThumb.obj.bind('mouseup', end);
			oThumb.obj[0].ontouchend = document.ontouchend = function(oEvent){
				$(document).unbind('mouseup');
				oThumb.obj.unbind('mouseup');
				end(oEvent.touches[0]);
			};
			return false;
		};		
		function wheel(oEvent){
			if(!(oContent.ratio >= 1)){
				var oEvent = oEvent || window.event;
				var iDelta = oEvent.wheelDelta ? oEvent.wheelDelta/120 : -oEvent.detail/3;
				iScroll -= iDelta * options.wheel;
				iScroll = Math.min((oContent[options.axis] - oViewport[options.axis]), Math.max(0, iScroll));
				oThumb.obj.css(sDirection, iScroll / oScrollbar.ratio);
				oContent.obj.css(sDirection, -iScroll);
				
				oEvent = $.event.fix(oEvent);
				oEvent.preventDefault();
			}
		};
		function end(oEvent){
			$(document).unbind('mousemove', drag);
			$(document).unbind('mouseup', end);
			oThumb.obj.unbind('mouseup', end);
			document.ontouchmove = oThumb.obj[0].ontouchend = document.ontouchend = null;
			return false;
		};
		function drag(oEvent){
			if(!(oContent.ratio >= 1)){
				iPosition.now = Math.min((oTrack[options.axis] - oThumb[options.axis]), Math.max(0, (iPosition.start + ((sAxis ? oEvent.pageX : oEvent.pageY) - iMouse.start))));
				iScroll = iPosition.now * oScrollbar.ratio;
				oContent.obj.css(sDirection, -iScroll);
				oThumb.obj.css(sDirection, iPosition.now);
			}
			return false;
		};
		
		ScaleReposition();
		return initialize();
	};
})(jQuery);