/*

	Copyright Artlogic Media - http://www.artlogic.net/
	All rights reserved.

*/


var FL_CustomScrollBars = Class.create();

FL_CustomScrollBars.prototype = {
	initialize: function(el, params) {
		this.author = "Peter Chater, Artlogic Media Limited, http://www.artlogic.net/";
		this.version = "1.0.072229a";
		this.requires = "prototype, scriptaculous";
		this.el = (el) ? $(el) : false;
		this.content = this.el.innerHTML;
		this.params = (params) ? params : {};
		this.instance = fl_customScrollBars.length;
		fl_customScrollBars[this.instance] = this;
		this.obj = fl_customScrollBars[this.instance];
		
		//	DEFAULTS (all of these params may be overridden in the function using the 'params' object)
			
			this.width = (this.el.style.width) ? this.el.style.width : 350; // getDimensions() is a prototype function
			this.height = (this.el.style.height) ? this.el.style.height : 200;
			this.contentPadding = 10;
			this.noTrackImage = false;
			this.trackBgImage = (!this.noTrackImage) ? "url(/flgui/images/flscrollbox/track_bg_wide.gif) repeat-y" : "";
			this.handleWidth = 11;
			this.handleHeight = 35;
			this.handleMargin = 0;
			this.handleImage = '/flgui/images/flscrollbox/aol/slider_handle_blue_11x35.gif';
			this.handleColor = ""; // eg. #f00
			this.borderWidth = 1;
			this.borderType = "solid";
			this.borderColor = "#ccf";
			this.border = this.borderWidth + "px " + this.borderType + " " + this.borderColor;
			this.borderLeftWidth = this.borderWidth;
			this.borderLeftType = this.borderType;
			this.borderLeftColor = this.borderColor;
			this.borderLeft = this.borderLeftWidth + "px " + this.borderLeftType + " " + this.borderLeftColor;
			this.trackWidth = this.handleWidth + (2 * this.handleMargin) + this.borderLeftWidth - this.borderWidth;
			this.contentWidth = this.width - this.handleWidth - (2 * this.handleMargin) - (2 * this.borderWidth) - this.borderLeftWidth;
			this.upDownIcons = true;
			this.upIconBgImage = '/flgui/images/flscrollbox/scroll_up.gif';
			this.downIconBgImage = '/flgui/images/flscrollbox/scroll_down.gif';
		
		//	OVERRIDE DEFAULTS
		
			for (var item in this.params) {
				this[item] = this.params[item];
			}
			this.upDownIconDimensions = (this.upDownIcons) ? 11 : 0; // e.g. 10 x 10 pixels
		this.sliderValue = 0;
		this.init();
		this.update();
	},
	Version: function() {
		return this.version;
	},
	init: function() {
		this.el.innerHTML = this.updateHTML(this.content);
		if (this.upDownIcons) this.setButtons();
	},
	update: function() {
		if (this.noTrackImage) this.trackBgImage = "";
		this.removeAllStyles();
		this.trackEl = $('fl_customScrollBars_track' + this.instance); 
		this.contentEl = $('fl_customScrollBars_scrollcontent' + this.instance);
		this.contentInnerEl = $('fl_customScrollBars_scrollcontentinner' + this.instance);
		this.containerHeight = $('fl_customScrollBars_scrollcontainer' + this.instance).getDimensions().height;
		this.innerContentHeight = this.contentInnerEl.getDimensions().height;
		this.trackHeight = parseInt(this.trackEl.style.height);
		// set scroll to 0
		if (navigator.userAgent.indexOf('Safari') > -1) {
			this.contentInnerEl.style.top = 0;
		} else {
			this.contentInnerEl.style.marginTop = 0;
		}
		if (this.upDownIcons) {
			this.trackHeight = this.trackHeight - (2 * this.upDownIconDimensions);
		}
		this.contentHeight = this.contentInnerEl.scrollHeight;
		this.slider = new Control.Slider(
			'fl_customScrollBars_handle' + this.instance, 
			'fl_customScrollBars_track' + this.instance,
			{
				axis:'vertical',
				instance: this.instance,
				containerEl: $('fl_customScrollBars_scrollcontainer' + this.instance), 
				trackEl: this.trackEl, 
				contentEl: this.contentEl, 
				contentInnerEl: this.contentInnerEl, 
				containerHeight: this.containerHeight,
				onSlide: function(v) {
					fl_customScrollBars[this.instance].sliderValue = v;
					var trackH = parseInt(this.trackEl.style.height);
					var contentH = this.contentInnerEl.scrollHeight;
					var ratio = (contentH - trackH + 10) / trackH;
					if (navigator.userAgent.indexOf('Safari') > -1) {
						this.contentEl.style.position = 'relative';
						this.contentInnerEl.style.position = 'absolute';
						this.contentInnerEl.style.top = ((v * ratio * trackH * (-1))) + "px";
					} else {
						this.contentInnerEl.style.marginTop = ((v * ratio * trackH * (-1))) + "px";
					}
				}, 
				onChange: function(v) {
					fl_customScrollBars[this.instance].sliderValue = v;
					var trackH = parseInt(this.trackEl.style.height);
					var contentH = this.contentInnerEl.scrollHeight;
					var ratio = (contentH - trackH + 10) / trackH;
					if (navigator.userAgent.indexOf('Safari') > -1) {
						this.contentEl.style.position = 'relative';
						this.contentInnerEl.style.position = 'absolute';
						this.contentInnerEl.style.top = ((v * ratio * trackH * (-1))) + "px";
					} else {
						this.contentInnerEl.style.marginTop = ((v * ratio * trackH * (-1))) + "px";
					}
				}, 
				sliderValue: 0
			}
		);
		if (this.trackHeight >= this.innerContentHeight) { // hide track
			$('js_scrollbars_runner' + this.instance).style.visibility = "hidden";
		} else {
			$('js_scrollbars_runner' + this.instance).style.visibility = "visible";
		}
	},
	updateHTML: function() {
		var html = '';
		// n.b. using a css 'background' url on the handle image causes flickering on IE6, so an img tag is used instead.
		// using img tags also solves spacing problems on IE within empty elements
		html += '<div id="fl_customScrollBars_scrollcontainer' + this.instance + '" class="flsb_scrollContainer" style="height: ' + this.height + 'px; width: ' + this.width + 'px; \
			border-top: ' + this.borderWidth + 'px ' + this.borderType + ' ' + this.borderColor + '; \
			border-bottom: ' + this.borderWidth + 'px ' + this.borderType + ' ' + this.borderColor + ';\
			overflow: hidden;">\
			<div style="border-left: ' + this.borderWidth + 'px ' + this.borderType + ' ' + this.borderColor + '; \
			border-right: ' + this.borderWidth + 'px ' + this.borderType + ' ' + this.borderColor + ';">\
				<div id="fl_customScrollBars_scrollable' + this.instance + '" class="flsb_scrollable">\
					<table cellpadding="0" cellspacing="0" border="0" style="width: ' + (this.width - 2) + 'px;">\
						<tr>\
							<td valign="top">\
								<div id="fl_customScrollBars_scrollcontent' + this.instance + '" class="flsb_scrollContent" style="height: ' + this.height + 'px; width: auto;">\
									<div id="fl_customScrollBars_scrollcontentinner' + this.instance + '" class="flsb_scrollContentInner" style="padding: ' + this.contentPadding + 'px">\
										' + this.content + '\
									<\/div>\
								<\/div>\
							<\/td>\
							<td id="js_scrollbars_runner' + this.instance + '" valign="top" style="width: ' + this.trackWidth + 'px; height: ' + this.height + 'px; \
								background: ' + ((this.noTrackImage) ? "" : ((this.trackBgImage) ? 'url(' + this.trackBgImage + ') repeat-y;' : 'url(/flgui/images/flscrollbox/track_bg_wide.gif) repeat-y')) + '; border-left: ' + this.borderLeftWidth + 'px ' + this.borderLeftType + ' ' + this.borderLeftColor + ';">\
								<table cellpadding="0" cellspacing="0" border="0">\
									<tr><td><div id="fl_customScrollBars_upIcon' + this.instance + '" \
										onmousedown="fl_customScrollBars[' + this.instance + '].scrollUp()"\
										onmouseup="fl_customScrollBars[' + this.instance + '].stopScroll()"\
										onmouseout="fl_customScrollBars[' + this.instance + '].stopScroll()"\
										><img src="/flgui/images/shim.gif" width="' + this.upDownIconDimensions + '" \
											height="' + this.upDownIconDimensions + '" border="0" /></div></td></tr>\
									<tr><td><div id="fl_customScrollBars_track' + this.instance + '" \
										class="flsb_scrollbar-v-track" style="width: ' + this.trackWidth + 'px; height: ' + (this.height - ((document.all) ? 2 : 0) - (2 * this.upDownIconDimensions)) + 'px;">\
										<div style="padding: ' + this.handleMargin + 'px;">\
											<div id="fl_customScrollBars_handle' + this.instance + '" class="flsb_scrollbar-v-handle" style="width: ' + this.handleWidth + 'px; \
												height: ' + this.handleHeight + 'px; "><img src="' + this.handleImage + '" width="' + this.handleWidth + '" \
													height="' + this.handleHeight + '" border="0" /><\/div>\
										<\/div>\
									<\/div></td></tr>\
									<tr><td><div id="fl_customScrollBars_downIcon' + this.instance + '" \
										onmousedown="fl_customScrollBars[' + this.instance + '].scrollDown()"\
										onmouseup="fl_customScrollBars[' + this.instance + '].stopScroll()"\
										onmouseout="fl_customScrollBars[' + this.instance + '].stopScroll()"\
										><img src="/flgui/images/shim.gif" width="' + this.upDownIconDimensions + '" \
											height="' + this.upDownIconDimensions + '" border="0" /></div></td></tr>\
								</table>\
							<\/td>\
						<\/tr>\
					<\/table>\
					<div class="clear"><\/div>\
				<\/div>\
			<\/div>\
		<\/div>\
		';
		return html;
	},
	setButtons: function() {
		if (this.upDownIcons) {
			// scroll up button
			this.upIcon = $('fl_customScrollBars_upIcon' + this.instance);
			this.upIcon.style.width = this.upDownIconDimensions + 'px';
			this.upIcon.style.height = this.upDownIconDimensions + 'px';
			this.upIcon.style.background = ((this.upIconBgImage != '') ? ' url(' + this.upIconBgImage + ') top left no-repeat' : '');
			// scroll down button
			this.downIcon = $('fl_customScrollBars_downIcon' + this.instance);
			this.downIcon.style.width = this.upDownIconDimensions + 'px';
			this.downIcon.style.height = this.upDownIconDimensions + 'px';
			this.downIcon.style.background = ((this.downIconBgImage != '') ? ' url(' + this.downIconBgImage + ') top left no-repeat' : '');
		}
	},
	removeAllStyles: function() {
		var el = this.el;
		el.style.overflow = "hidden";
		el.style.border = "0";
		var attributes = ["width", "height"];
		for (var i = 0; i < attributes.length; i ++) {
			el.style[attributes[i]] = "";
		}
		el.style.border = "";		
	},
	setContent: function(t) { // set the content of the scrolling object
		var el = $('fl_customScrollBars_scrollcontentinner' + this.instance);
		el.innerHTML = t;
		if (navigator.userAgent.indexOf('Safari') > -1) {
			el.style.top = 0;
		} else {
			el.style.marginTop = 0;
		}
		this.update();
	},
	scrollUp: function() {
		if (this.slider) {
			window.fl_currentScrollbarObj = this;
			if (fl_currentScrollbarObj.sliderValue > 0) {
				window.fl_currentScroll = window.setTimeout("window.fl_currentScrollbarObj.slider.setValue(window.fl_currentScrollbarObj.sliderValue - 0.05);window.fl_currentScrollbarObj.scrollUp();", 30);
			}
		}
	},
	scrollDown: function() {
		if (this.slider) {
			window.fl_currentScrollbarObj = this;
			if (fl_currentScrollbarObj.sliderValue < 1) {
				window.fl_currentScroll = window.setTimeout("window.fl_currentScrollbarObj.slider.setValue(window.fl_currentScrollbarObj.sliderValue + 0.05);window.fl_currentScrollbarObj.scrollDown();", 30);
			}
		}
	},
	stopScroll: function() {
		if (window.fl_currentScroll) {
			window.clearTimeout(window.fl_currentScroll);
		}
	}
}

var fl_customScrollBars = new Array();