var Scrollbar = Class.create({
	initialize : function(container, source, arrow){
		var scrollbar = this;
		this.scrollbarContainer = $(container);
		this.pictureSource = source;
		this.arrow = $(arrow);
		this.scroll = true;
		this.scrollReverse = false;
		this.browserTabActive = true;
		this.scrollbarContainer
			.observe('mouseover', function(){
				scrollbar.scroll = false;
			})
			.observe('mouseout', function(){
				scrollbar.scroll = true;
			});
		if(this.arrow != null){
			this.arrow
				.observe('mouseover', function(){
					scrollbar.scrollReverse = true;
				})
				.observe('mouseout', function(){
					scrollbar.scrollReverse = false;
				});
		}
		// stop scrollbar if tab or window is not focused
		document.observe('mouseover', function(){
				scrollbar.browserTabActive = true;
			})
			.observe('mouseout', function(){
				scrollbar.browserTabActive = false;
			});
		
	},
	loadPics : function(){
		if(this.browserTabActive){
			new Ajax.Updater(this.scrollbarContainer, this.pictureSource, {
				insertion: Insertion.Bottom 
			});
		}
	},
	scrollContainer : function(){
		if(this.browserTabActive && (this.scroll || this.scrollReverse)){
			var oldPos = parseInt(this.scrollbarContainer.getStyle('left'));
			var newPos = oldPos + ((this.scrollReverse)? ((oldPos < 0)? 2: 0) : -1)
			this.scrollbarContainer.setStyle({
				left: newPos + 'px'
			});
		}
	}
});