(function ($) {
	$.fn.scrollbar = function (parans) {
		var parans = parans || {};
		var sb = {
			parans: false,
			$o: false,
			__construct: function(o, p) {
				this.$o = $(o);
				this.parans = this.defaults(p);
				this.helper();
				this.navbar();
				this.actions();
			},
			helper: function() {
				var	cnt = this.$o.html(),
					html = '<div class="scrollbar-helper-box">'+cnt+'</div>';
				this.$o.html(html);
				$(".scrollbar-helper-box", this.$o).css(this.parans.helperCSS);
			},
			navbar: function() {
				var	html =	'<div class="scrollbar-navbar">'+
							'<span class="scrollbar-navbar-button scrollbar-navbar-up"></span>'+
							'<div class="scrollbar-navbar-rail">'+
								'<span class="scrollbar-navbar-button scrollbar-navbar-scroll"></span>'+
							'</div>'+
							'<span class="scrollbar-navbar-button scrollbar-navbar-down"></span>'+
						'</div>';
				this.$o.prepend(html);
				$(".scrollbar-helper-box, .scrollbar-navbar", this.$o).css({
					display:"block",
					position:"absolute",
					overflow:"hidden",
					padding:0,
					margin:0,
					zIndex:1
				});
				$(".scrollbar-navbar", this.$o).css({
					zIndex:2
				});
				$(".scrollbar-navbar-up, .scrollbar-navbar-down, .scrollbar-navbar-rail, .scrollbar-navbar-scroll", this.$o).css({
					float:"left"
				});
				$(".scrollbar-navbar", this.$o).css(this.parans.navbarCSS);
				$(".scrollbar-navbar-rail", this.$o).css(this.parans.railCSS);
				$(".scrollbar-navbar-button", this.$o).css(this.parans.botsCSS);
			},
			actions: function() {
				var	$box = $(".scrollbar-helper-box", this.$o),
					areaVisivel = (this.parans.horizontal ? $box.width() : $box.height()),
					areaTotal = 0;
				$box.css({overflow:"visible"});
				(this.parans.horizontal ? $box.css({width:"auto"}) : $box.css({height:"auto"}));
				areaTotal = (this.parans.horizontal ? $box.width() : $box.height());
				$box.css({overflow:"hidden"});
				(this.parans.horizontal ? $box.css({width:areaVisivel}) : $box.css({height:areaVisivel}));

				var dataDimensionsStr = "{horizontal:"+(this.parans.horizontal ? "true" : "false")+",rail:"+((this.parans.horizontal ? this.parans.railCSS.width : this.parans.railCSS.height) - this.parans.botsCSS.width)+",areaVisivel:"+areaVisivel+",areaTotal:"+areaTotal+"}";
				var scrollObject = function ($this, animate) {
					var din = false, pos = din, porcento = pos, sc = 0;
					eval("din = "+$this.attr("data-dimensions"));
					pos = (din.horizontal ? $this.position().left : $this.position().top) - 2 - $this.width();
					porcento = ((pos * 100) / din.rail);
					sc = (din.areaTotal - din.areaVisivel);
					sc = sc * (porcento / 100);
					if (animate) {
						(din.horizontal ? $box.animate({scrollLeft:sc},250) : $box.animate({scrollTop:sc},250));
					} else {
						(din.horizontal ? $box.scrollLeft(sc) : $box.scrollTop(sc));
					}
				};
				var reposObject = function($this, din, pos) {
					var stl = (din.horizontal ? "left" : "top");
					pos = (pos < 0 ? 0 : (pos > din.rail ? din.rail : pos));
					$this.css(stl, pos);
					scrollObject($this, true);
				};
				$(".scrollbar-navbar-scroll", this.$o).attr("data-dimensions",dataDimensionsStr).draggable({
					axis:(this.parans.horizontal ? "x" : "y"),
					containment:'parent',
					drag:function(){
						scrollObject($(this));
					}
				});
				$(".scrollbar-navbar-rail", this.$o).click(function(e){
					var $o = $(".scrollbar-navbar-scroll", this);
					eval("var din = "+$o.attr("data-dimensions"));
					//var pos = (din.horizontal ? (e.clientX - $(this).offset().left) - ($o.width() / 2): (e.clientY - $(this).offset().top) - ($o.height() / 2));
					var pos = (din.horizontal ? (e.pageX - $(this).offset().left) - ($o.width() / 2): (e.pageY - $(this).offset().top) - ($o.height() / 2));
					reposObject($o, din, pos);
				});
				$(".scrollbar-navbar-up, .scrollbar-navbar-down", this.$o).click(function(e){
					var	$this = $(this),
						diff = ($this.hasClass("scrollbar-navbar-down") ? 15 : -15),
						$o = $(".scrollbar-navbar-scroll", $this.parent());
					eval("var din = "+$o.attr("data-dimensions"));
					var pos = ((din.horizontal ? $o.position().left: $o.position().top) - ($o.width() + 2)) + diff;
					reposObject($o, din, pos);
					//(din.horizontal ?  $o.css({left:($o.position().left + diff)}) : $o.css({left:($o.position().left + diff)}));
				});
				if (this.$o.mousewheel) {
					this.$o.mousewheel(function(a,direction){
						$o = $(".scrollbar-navbar-scroll", $(this));
						eval("var d = "+$o.attr("data-dimensions"));
						var newPos = (d.horizontal ? $o.position().left : $o.position().top) - $o.width() - (2 + (direction * 10));
						newPos = (newPos < 0 ? 0 : (newPos > d.rail ? d.rail : newPos));
						(d.horizontal ? $o.css({left:newPos}) : $o.css({top:newPos}));
						scrollObject($o);
						return false;
					});
				};
				if (parans.autoHide) {
					var timeout = false, fadeing = false, $this = this, showing = true;
					var showNavBar = function(callback) {
						if (fadeing) {
							return false;
						};
						var callback = callback || function(){};
						fadeing = true;
						$(".scrollbar-navbar", $this.$o).fadeIn(200, function(){
							fadeing = false;
							showing = true;
							callback();
						});
					};
					var makeTimeout = function() {
						if (timeout) {
							clearTimeout(timeout);
							timeout = false;
						};
						timeout = setTimeout(function(){
							fadeing = true;
							$(".scrollbar-navbar", $this.$o).fadeOut(200, function(){
								fadeing = false;
								timeout = false;
								showing = false;
							});
						}, parans.autoHide);
					};
					$this.$o[0].onmouseover = function(){
						if (showing) {
							return makeTimeout();
						};
						showNavBar(function(){
							makeTimeout();
						});
					};
					makeTimeout();
				};
			},
			defaults: function(p) {
				var	autoHide =	p.autoHide || false,
					horizontal =	p.horizontal || false,
					wid =		p.width || (horizontal ? (this.$o.width() - 10) : 15),
					hei =		p.height || (horizontal ? 15 : (this.$o.height() - 10)),
					tp =		p.top || (horizontal ? (this.$o.height() - (hei + 5)) : 5),
					lft =		p.left || (horizontal ? 5 : (this.$o.width() - (wid + 5)));
					navbarCSS = {
						width: wid,
						height: hei,
						marginTop: tp,
						marginLeft: lft
					},
					helperCSS = {
						width: this.$o.width(),
						height: this.$o.height()
					},
					railCSS = {
						margin: (horizontal ? "0 2px" : "2px 0"),
						width: (horizontal ? (navbarCSS.width - (navbarCSS.height * 2) - 4) : "100%"),
						height: (horizontal ? "100%" : (navbarCSS.height - (navbarCSS.width * 2) - 4)),
						//backgroundColor:"#FF812D",
						cursor:"pointer"
					},
					botsCSS = {
						display: "block",
						width: (horizontal ? hei : wid),
						height: (horizontal ? hei : wid),
						//backgroundColor:"#CCC",
						cursor:"pointer"
					}
				return {
					horizontal: horizontal,
					navbarCSS: navbarCSS,
					helperCSS: helperCSS,
					railCSS: railCSS,
					botsCSS: botsCSS
				};
			}
		};
		return this.each(function () {
			sb.__construct(this, parans);
		});
	};
})(jQuery);