(function($){
	$.fn.BionicScrollBar = function(options){
		
		if (this.length == 0 ){return;} 
		
		if (this.length > 1){ 
			this.each(function(){$(this).BionicScrollBar(options)}); 
			return this;
		}
		
		var defaults = { 
				axis: 'y',
				wheelInterval: 40,
				wheelScroll: true,
				thumbImage: null,
				thumbColor: '#003D5D',
				thumbW:18,
				thumbH:48,
				thumb_image: '/cms_res/disney-junior/images/scrollHandle.png',
				size:'auto',
				sizethumb:45
		};
		
		var options = $.extend(defaults, options);
		
		/*
		this.generateScaffolding = function(__this__){
			var container = $(__this__);
			var scrollableContent = container.find("*");
			container.empty();
			
			var scrollbar = container.append('<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>');
			var viewport = container.append('<div class="viewport"><div class="overview"></div></div>');
			// can I have a object handle on this and not use a normal selector?
			//$(container).find(".overview").html(scrollableContent);
			//$(container).find(".overview").append(scrollableContent);
			
			//var container = document.getElementById('container');
			//var markup = '<div id="content"><p class="text">Hello world!</p></div>';
			
			//alert(scrollableContent.html());
			var code = innerXHTML($(container).find(".overview").get()[0] ,"<p>"+scrollableContent.html()+"</p>");
			
			
			// set styles
//			var master_w = $(container).css("width");
//			$(container).find(".viewport").css({"position":"relative","width":master_w,"overflow":"hidden"});
//			$(container).find(".overview").css({"list-style":"none","position":"absolute","left":"0px","top":"0px"});
//			$(container).find(".scrollbar").css({"position":"relative","float":"right","width":"15px"});
//			$(container).find(".track").css({"height":"100%","width":options.thumbW,"position":"relative","padding-right":"1px"});
//			if (options.thumb_image!=null){
//				$(container).find(".thumb").css({"background-image":"#url("+options.thumb_image+")"});
//			}else{
//				$(container).find(".thumb").css({"background-color":options.thumbColor});
//			}
//			$(container).find(".thumb").css({"height":options.thumbH,"width":options.thumbW,"cursor":"pointer","overflow":"hidden","position":"absolute","top":"0"});
//			$(container).find(".thumb .end").css({"overflow":"hidden","height":"5px","width":options.thumbW});
//			// hacks so the legacy code works
//			options.size = 'auto';
//			options.sizethumb = options.thumbW;
			
		}(this);
		*/
		
		var oWrapper = $(this);
		var oViewport = { obj: $('.viewport', this) };
		var oContent = { obj: $('.overview', this) };
		var oScrollbar = { obj: $('.scrollbar', this) };
		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 = {};
		
		this.initialize = function(){
			this.update();
			setEvents();
		};
		this.update = function(){
			iScroll = 0;
			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);
			if (oContent.ratio >= 1){
				oScrollbar.obj.css({"display":"none"});
			}
			
			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]);
			setSize();
		};
		function setSize(){
			if(!sAxis)oContent.obj.removeAttr('style'); 
			oThumb.obj.removeAttr('style');		
			iMouse['start'] = oThumb.obj.offset()[sDirection];
			var sCssSize = sSize.toLowerCase(); 
			oScrollbar.obj.css(sCssSize, oTrack[options.axis]);
			oTrack.obj.css(sCssSize, oTrack[options.axis]);
			oThumb.obj.css(sCssSize, oThumb[options.axis]);		
		};		
		
		function setEvents(){
			oThumb.obj.bind('touchstart', ios_start); // IOS
			oThumb.obj.bind('mousedown', start);
			oTrack.obj.bind('mouseup', drag);
			if(options.wheelScroll && this.addEventListener){
				oWrapper[0].addEventListener('DOMMouseScroll', wheel, false);
				oWrapper[0].addEventListener('mousewheel', wheel, false );
			}
			else if(options.wheelScroll){oWrapper[0].onmousewheel = wheel;}
		};
		
		var ios_start = function(oEvent){		
			var touch = oEvent.originalEvent.touches[0]; // Get the information for finger #1
			iMouse.start = sAxis ? touch.pageX : touch.pageY;
			var oThumbDir = parseInt(oThumb.obj.css(sDirection));
			iPosition.start = oThumbDir == 'auto' ? 0 : oThumbDir;
			$(document).bind('touchmove', drag_ios);  // IOS
			$(document).bind('touchend', end_ios);  // IOS
			oThumb.obj.bind('touchend', end_ios);  // IOS
			return false;
		}
		
		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).bind('mouseup', end);
			oThumb.obj.bind('mouseup', end);
			return false;
		};		
		function wheel(oEvent){
			if(!(oContent.ratio >= 1)){
				oEvent = $.event.fix(oEvent || window.event);
				var iDelta = oEvent.wheelDelta ? oEvent.wheelDelta/120 : -oEvent.detail/3;
				iScroll -= iDelta * options.wheelInterval;
				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.preventDefault();
			};
		};
		function end_ios(oEvent){
			$(document).unbind('touchmove', drag);
			$(document).unbind('touchend', end);
			oThumb.obj.unbind('touchend', end);
			return false;
		};
		function end(oEvent){
			$(document).unbind('mousemove', drag);
			$(document).unbind('mouseup', end);
			oThumb.obj.unbind('mouseup', end);
			return false;
		};
		function drag_ios(oEvent){
			var touch = oEvent.originalEvent.touches[0]; // Get the information for finger #1
			if(!(oContent.ratio >= 1)){
				iPosition.now = Math.min((oTrack[options.axis] - oThumb[options.axis]), Math.max(0, (iPosition.start + ((sAxis ? touch.pageX : touch.pageY) - iMouse.start))));
				iScroll = iPosition.now * oScrollbar.ratio;
				oContent.obj.css(sDirection, -iScroll);
				oThumb.obj.css(sDirection, iPosition.now);;
			}
			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;
		};
		return this.initialize();
	};
})(jQuery);