//
// BBN Code Base
//
//=======================================================================================================\
//
// Scroll Box v0.1
//
(function($){
	//
	$.extend($.fn, {
		//
		// CONSTRUCTOR
		//
		elementSB : function(params){
			//
			// default values
			var defaults = {
			}
			// set up settings
			var settings = $.extend({}, defaults, params);
			//
			// html source
			var loadCoverHTMLSource = '<div class="scrollLoad"></div>';
			var scrollBarHTMLSource = '<div class="scrollBar"><div class="track"><div class="top"></div><div class="bar"><em class="marker"></em></div><div class="bottom"></div></div></div>';
			var scrollContentHTMLSource = '<div class="scrollContent"><div></div></div>';
			//
			this.each(function(){
				//
				var base = $(this);
				var originalContent = base.html();
				//
				// reference to original object
				base.html('');
				//
				// construct skin
				var loadCover = $(loadCoverHTMLSource);
				var scrollBar = $(scrollBarHTMLSource);
				var scrollContent = $(scrollContentHTMLSource);
				//
				// define elements
				var bar = $('div.bar', scrollBar);
				var marker = $('em.marker', scrollBar);
				var container = $('div.scrollContent', scrollContent);
				var content = $(':first-child', container);
				//
				loadCover.hide();
				//
				// inject behaviors
				marker.draggable({
					axis: 'y',
					containment: 'parent',
					drag: function(event, ui) {$(this).elementSB_scroll();}
				});
				//
				base.append(loadCover);
				base.append(scrollBar);
				base.append(scrollContent);
				//
				if(typeof(settings.content) != 'undefined'){
					//console.log('!!!!!!!');
					base.elementSB_load(settings.content, settings.callback, settings.scrollToBottom);
				}else{
					//console.log('originalContent = '+originalContent);
					base.elementSB_load(originalContent, settings.callback, settings.scrollToBottom);
				}
				//
			});
			//
		},
		//
		elementSB_load : function(content, callback, scrollToBottom){
			//
			var base = $(this);
			var scrollBar = $('div.scrollBar', base);
			//
			var content = $(content);
			//
			// loadContent
			var container = $('div.scrollContent', base);
			var loadCover = $('.scrollLoad', base);
			loadCover.hide();
			//
			container.html(content);
			container.scrollTop(0);
			//
			scrollBar.elementSB_scroll(scrollToBottom);
			//
			if(typeof(callback) == 'function'){
				callback();
			}
			//
		},
		//
		elementSB_update : function(){
			//
			var base = $(this);
			var scrollBar = $('div.scrollBar', base);
			//
			scrollBar.elementSB_scroll();
			//
		},
		//
		/*elementSB_toBottom : function(){
			//
			var base = $(this);
			var scrollBar = $('div.scrollBar', base);
			var bar = $('div.bar', base);
			var marker = $('em.marker', base);
			var xMaxPos = barHeight = bar.height()-marker.height();
			marker.css('top', xMaxPos+'px');
			//
			scrollBar.elementSB_scroll();
			//
		},*/
		//
		elementSB_loading : function(content){
			//
			var base = $(this);
			//
			var loadCover = $('.scrollLoad', base);
			loadCover.show();
			//
		},
		//
		//
		elementSB_scroll : function(scrollToBottom){
			//
			if(!$(this).hasClass('elementSB')){
				//console.log('INNER ITEM');
				var base = $(this).parents('.elementSB');
			}else{
				//console.log('THIS IS THE ITEM');
				//console.log('scrollToBottom'+scrollToBottom);
				var base = $(this);
			}
			//
			// define elements
			var scroller = $('div.scrollBar', base);
			var bar = $('div.bar', base);
			var marker = $('em.marker', base);
			var container = $('div.scrollContent', base);
			var content = $(':first-child', container);
			//
			// scroll it
			var xPos = marker.position().top-marker.parent().position().top;
			var xMaxPos = barHeight = bar.height()-marker.height();
			//
			var posPerc = Math.round((xPos/xMaxPos)*100);
			var posRatio = posPerc/100;
			//
			var scrollArea = container.innerHeight();
			var scrollMax = content.outerHeight()-scrollArea;
			//
			//console.log('scrollMax:'+scrollMax);
			if(scrollMax>0){
				scroller.show();
			}else{
				scroller.hide();
				marker.css('top', '0px');
			}
			//
			var scrollPos = Math.round(scrollMax*posRatio);
			//
			//console.log('scrollToBottom'+scrollToBottom);
			//if(scrollToBottom){
				//console.log('scrollToBottom - scrollMax'+scrollMax + 'posRatio'+posRatio);
				//container.scrollTop(scrollMax);
			//}else{
				container.scrollTop(scrollPos);
			//}
			//
		}
	//
	})
	//
})(jQuery);