function Scrollbar( divID, classSfx, objName, barWidth, imgWidth, imgHeight )
{
	this.divID = divID;
	this.classSfx = classSfx;
	this.objName = objName;
	this.imgCount = 0;
	this.imgWidth = imgWidth;
	this.imgHeight = imgHeight;
	this.arrowWidth = 25;
	this.barWidth = barWidth;
	this.imgScrollerWidth = this.barWidth - this.arrowWidth * 2;
	this.numImgShown = Math.floor( this.imgScrollerWidth / this.imgWidth );
	this.scrollPos = 0;
	this.loadedImgs = new Array();
	this.imgs = new Array();
	this.addImg = addImg;
	this.loadBar = loadBar;
	this.leftArrowMouseover = leftArrowMouseover;
	this.leftArrowMouseout = leftArrowMouseout;
	this.rightArrowMouseover = rightArrowMouseover;
	this.rightArrowMouseout = rightArrowMouseout;
	this.leftArrowClick = leftArrowClick;
	this.rightArrowClick = rightArrowClick;
	this.loadImgs = loadImgs;
}

function addImg( img, link, title )
{
	this.imgCount++;
	this.imgs[this.imgCount] = new Array();
	this.imgs[this.imgCount]['img'] = img;
	this.imgs[this.imgCount]['link'] = link;
	this.imgs[this.imgCount]['title'] = title;
}

function loadBar()
{
	this.scrollMax = Math.ceil( this.imgCount / this.numImgShown - 1 );
	spacerWidth = this.imgScrollerWidth - this.numImgShown * this.imgWidth;
	spacerWidthLast = ((this.imgScrollerWidth - this.imgCount % this.numImgShown * this.imgWidth) + spacerWidth) / 2;
	lastPageFirstImgNum = this.imgCount - this.imgCount % this.numImgShown;
	html = '<style type="text/css">.bar-thumbs-'+this.objName+'{display:block; float:left; '+
		   'padding:0px !important; width:'+this.imgWidth+'px; height:'+this.imgHeight+'px; margin:0; white-space:normal}'+
		   '.bar-thumbs-spacer-'+this.objName+'{display:block; float:left; padding:0px !important; height:'+this.imgHeight+
		   'px; margin:0; white-space:normal}</style><span class="left-arrow-'+this.objName+'" id="left-arrow-disable'+
		   this.classSfx+'" onmouseover="'+this.objName+'.leftArrowMouseover()" onmouseout="'+
		   this.objName+'.leftArrowMouseout()" onclick="'+this.objName+
		   '.leftArrowClick()"></span><div id="cust-scroller-'+this.objName+'" style="width:'+
		   this.imgScrollerWidth+'px; overflow:hidden; display:inline; float:left; white-space:nowrap; '+
		   'position:relative;"><div class="scroller-background'+this.classSfx+'"><div id="cust-scroller-2-'+this.objName+
		   '" style="z-index:1; white-space:nowrap; width:'+this.imgScrollerWidth+
		   'px; overflow:hidden; position:relative;"><ul id="cust-scroll-'+this.objName+
		   '" style="white-space:nowrap; padding:0px !important; width:10000px; '+
		   'position:relative; left:0px; margin:0;">';
	j = 0;
	html = html+'<li class="bar-thumbs-spacer-'+this.objName+'" style="width:'+spacerWidth/2+'px;"></li>';
	for ( i = 1; i <= this.imgCount; i++ ) {
		j++;
		html = html+'<li class="bar-thumbs-'+this.objName+'"><div class="bar-thumb-imgs-div'+this.classSfx+'" id="bar-thumb-img-div-'+this.objName+'-'+i+'">'+
			   '<a href="'+this.imgs[i]['link']+'" id="bar-thumb-'+this.objName+'-'+i+'">';
			html = html + '<img src="" title="'+this.imgs[i]['title']+
				   '" alt="'+this.imgs[i]['title']+'" class="bar-thumb-imgs'+this.classSfx+
				   '" id="bar-thumb-img-'+this.objName+'-'+i+'"/>';
		html = html+'</a></div></li>';
		if ( j == this.numImgShown ) {
			html = html+'<li class="bar-thumbs-spacer-'+this.objName+'" style="width:'+spacerWidth+'px;"></li>';
			j = 0;
		} else if ( i == lastPageFirstImgNum ) {
			html = html+'<li class="bar-thumbs-spacer-'+this.objName+'" style="width:'+spacerWidthLast+'px;"></li>';
		}
	}
	html = html+'</ul></div></div></div><span class="right-arrow-'+this.objName+'" ';
	if ( this.imgCount <= this.barWidth/120 ) {
		html = html+'id="right-arrow-disable'+this.classSfx+'"';
	} else {
		html = html+'id="right-arrow-default'+this.classSfx+'"';
	}
	html = html+' onmouseover="'+this.objName+'.rightArrowMouseover()" onmouseout="'+this.objName+
		   '.rightArrowMouseout()" onclick="'+this.objName+'.rightArrowClick()"></span>';
	jQuery("#"+this.divID).html(html);
	this.loadImgs(); //Load first visible images.
}

function leftArrowMouseover()
{
	if ( jQuery(".left-arrow-"+this.objName).attr("id") != 'left-arrow-disable'+this.classSfx ) {
		jQuery(".left-arrow-"+this.objName).attr("id", "left-arrow-over"+this.classSfx);
	}
}

function leftArrowMouseout()
{
	if ( jQuery(".left-arrow-"+this.objName).attr("id") != 'left-arrow-disable'+this.classSfx ) {
		jQuery(".left-arrow-"+this.objName).attr("id", "left-arrow-default"+this.classSfx);
	}
}

function rightArrowMouseover()
{
	if ( jQuery(".right-arrow-"+this.objName).attr("id") != 'right-arrow-disable'+this.classSfx ) {
		jQuery(".right-arrow-"+this.objName).attr("id", "right-arrow-over"+this.classSfx);
	}
}

function rightArrowMouseout()
{
	if ( jQuery(".right-arrow-"+this.objName).attr("id") != 'right-arrow-disable'+this.classSfx ) {
		jQuery(".right-arrow-"+this.objName).attr("id", "right-arrow-default"+this.classSfx);
	}
}

function leftArrowClick()
{
	leftpos = parseInt( jQuery( '#cust-scroll-'+this.objName ).css( "left" ) );
	if ( this.scrollPos > 0 && leftpos == this.scrollPos * -this.imgScrollerWidth ) {
		this.scrollPos = this.scrollPos - 1;
		leftpos = this.scrollPos * -this.imgScrollerWidth;
		if ( this.scrollPos <= 0 ) {
			jQuery( ".left-arrow-"+this.objName ).attr( "id", "left-arrow-disable"+this.classSfx );
		}
		if ( this.scrollPos <= this.scrollMax ) {
			jQuery( ".right-arrow-"+this.objName ).attr( "id", "right-arrow-default"+this.classSfx );
		}
		jQuery( '#cust-scroll-'+this.objName ).animate(
			{left: leftpos},
			{duration: 1300, easing: 'easeInQuad'}
		);
	}
}

function rightArrowClick()
{
	leftpos = parseInt( jQuery( '#cust-scroll-'+this.objName ).css( "left" ) );
	if ( this.scrollPos < this.scrollMax && leftpos == this.scrollPos * -this.imgScrollerWidth ) {
		this.scrollPos = this.scrollPos + 1;
		leftpos = this.scrollPos * -this.imgScrollerWidth;
		if ( this.scrollPos >= this.scrollMax ) {
			jQuery( ".right-arrow-"+this.objName ).attr( "id", "right-arrow-disable"+this.classSfx );
		}
		if ( this.scrollPos >= 0 ) {
			jQuery( ".left-arrow-"+this.objName ).attr( "id", "left-arrow-default"+this.classSfx );
		}
		jQuery( '#cust-scroll-'+this.objName ).animate(
			{left: leftpos},
			{duration: 1300, easing: 'easeInQuad'}
		);
		if ( this.scrollPos <= this.scrollMax ) {
			this.loadImgs(); //Only on right arrow since only new images can come from the right.
		}
	}
}

function loadImgs()
{
	for ( i = this.scrollPos * this.numImgShown + 1; i <= (this.scrollPos + 1) * this.numImgShown && i <= this.imgCount; i++ ) {
		if ( this.loadedImgs[i] === undefined && i <= this.imgCount ) {
			jQuery("#bar-thumb-img-"+this.objName+"-"+i).attr("src", this.imgs[i]['img']);
			this.loadedImgs[i] = true;
		}
	}
}

