function imageProps(width, height){
	this.width = width;
	this.height = height;
}
function imageText(url, name){
	this.url = url;
	this.name = name;
}
var viewImageArray = new Array();
var firstTime = true;
var leftScrollStopped = true;
var rightScrollStopped = true;
var upScrollStopped = true;
var downScrollStopped = true;

var currentPosition;
var positionRatio;
var myInterval;
var farthestLeft = 0;
var farthestTop = 0;

var delayTime = 0;
var padding = 20;
var infiniteScroll = true;
var moveDistance = 3;
var minSizePercent = 1;
var verticalAlignment = 'middle';
var archUpOrDown = 0; //-1 -> down 0 -> no arch 1 -> up
var archPeak = 0;

var leftSideEnd;
var rightSideEnd;
var horizontalMiddle;

var topSideEnd;
var bottomSideEnd;
var verticalMiddle; 

var origImageProps = new Array();
var imgArray = new Array();
var divLeft = new Array();
var divTop = new Array();
var url = "";
var displayedIndex = 0;
var effectType = 'appear';

function changeViewedPicture(index, effectType) {
	this.displayedIndex = index;
	this.url = viewImageArray[index].url;
	this.name = viewImageArray[index].name;
	this.effectType = effectType;
	new Effect.toggle($('viewedScrollableImageLabel'), effectType, {duration: 1.0, afterFinish: changeLabel});		
	new Effect.toggle($('viewedScrollableImage'), effectType, {duration: 1.0, afterFinish: changePicture});		
}
function changePicture() {	
	$('viewedScrollableImage').src = url;		
	new Effect.toggle($('viewedScrollableImage'), effectType, {duration: 1.0});
}

function changeLabel() {
	$('viewedScrollableImageLabel').innerHTML = name;
	new Effect.toggle($('viewedScrollableImageLabel'), effectType, {duration: 1.0});	
}

function viewPreviousPicture(effectType) {
	for(var i = displayedIndex - 1; i >= 0; i--)
		if(viewImageArray[i].url != null) {
			changeViewedPicture(i, effectType);
			return;
		}
	for(var i = viewImageArray.length - 1; i >= displayedIndex; i--)
		if(viewImageArray[i].url != null) {
			changeViewedPicture(i, effectType);
			return;
		}
}

function viewNextPicture(effectType) {
	for(var i = displayedIndex + 1; i < viewImageArray.length; i++) 
		if(viewImageArray[i].url != null) {
			changeViewedPicture(i, effectType);
			return;
		}
	for(var i = 0; i <= displayedIndex; i++)
		if(viewImageArray[i].url != null) {
			changeViewedPicture(i, effectType);
			return;
		}
}

function initHorizontalImageScroller(delayTime, padding, infiniteScroll, moveDistance, minSizePercent, verticalAlignment, archUpOrDown){
	this.delayTime = delayTime;
	this.padding = padding;
	
	this.leftSideEnd = $("scrollableImageDivsBox").style.left;
	if(this.leftSideEnd.indexOf('px') > 0 || this.leftSideEnd.indexOf('pt') > 0)
		this.leftSideEnd = parseInt(this.leftSideEnd.substr(0, this.leftSideEnd.length - 2));
		
	this.rightSideEnd = $("scrollableImageDivsBox").style.width;
	if(this.rightSideEnd.indexOf('px') > 0 || this.rightSideEnd.indexOf('pt') > 0)
		this.rightSideEnd = parseInt(this.rightSideEnd.substr(0, this.rightSideEnd.length - 2));
		
	this.topSideEnd = $("scrollableImageDivsBox").style.top;
	if(this.topSideEnd.indexOf('px') > 0 || this.topSideEnd.indexOf('pt') > 0)
		this.topSideEnd = parseInt(this.topSideEnd.substr(0, this.topSideEnd.length - 2));
		
	this.bottomSideEnd = $("scrollableImageDivsBox").style.height;
	if(this.bottomSideEnd.indexOf('px') > 0 || this.bottomSideEnd.indexOf('pt') > 0)
		this.bottomSideEnd = parseInt(this.bottomSideEnd.substr(0, this.bottomSideEnd.length - 2));

	this.rightSideEnd += this.leftSideEnd;
	this.bottomSideEnd += this.topSideEnd;
	
	this.infiniteScroll = infiniteScroll;
	this.moveDistance = moveDistance;
	this.minSizePercent = minSizePercent;
	this.verticalAlignment = verticalAlignment;
	this.archUpOrDown = archUpOrDown;
	
	if(this.archUpOrDown == 1)
		this.archPeak = this.topSideEnd;	
	else if(this.archUpOrDown == -1)
		this.archPeak = this.bottomSideEnd;
		
	this.horizontalMiddle = (rightSideEnd - leftSideEnd)/2;
	this.verticalMiddle = (bottomSideEnd - topSideEnd)/2;
	
	var index = 0;
	for (var i = 0; i < document.images.length; i++)
		if(document.images[i].id.substr(0, 15) == 'scrollableImage')
			imgArray[index++] = document.images[i];

	for (var i = 0; i < imgArray.length; i++){	
		origImageProps[i] = new imageProps(imgArray[i].width, imgArray[i].height);

		if(i > 0)	
			divLeft[i] = divLeft[i-1] + imgArray[i-1].width + padding;
		else
			divLeft[i] = leftSideEnd;
		
		$("scrollableImageDiv" + i).style.top = resizeAndAlignVertically(i) + 'px';
		$("scrollableImageDiv" + i).style.left = divLeft[i] + 'px';
	}
}

function initVerticalImageScroller(delayTime, padding, infiniteScroll, moveDistance, minSizePercent, verticalAlignment, archUpOrDown){
	this.delayTime = delayTime;
	this.padding = padding;
	
	this.leftSideEnd = $("scrollableImageDivsBox").style.left;
	if(this.leftSideEnd.indexOf('px') > 0 || this.leftSideEnd.indexOf('pt') > 0)
		this.leftSideEnd = parseInt(this.leftSideEnd.substr(0, this.leftSideEnd.length - 2));
		
	this.rightSideEnd = $("scrollableImageDivsBox").style.width;
	if(this.rightSideEnd.indexOf('px') > 0 || this.rightSideEnd.indexOf('pt') > 0)
		this.rightSideEnd = parseInt(this.rightSideEnd.substr(0, this.rightSideEnd.length - 2));
		
	this.topSideEnd = $("scrollableImageDivsBox").style.top;
	if(this.topSideEnd.indexOf('px') > 0 || this.topSideEnd.indexOf('pt') > 0)
		this.topSideEnd = parseInt(this.topSideEnd.substr(0, this.topSideEnd.length - 2));
		
	this.bottomSideEnd = $("scrollableImageDivsBox").style.height;
	if(this.bottomSideEnd.indexOf('px') > 0 || this.bottomSideEnd.indexOf('pt') > 0)
		this.bottomSideEnd = parseInt(this.bottomSideEnd.substr(0, this.bottomSideEnd.length - 2));

	this.rightSideEnd += this.leftSideEnd;
	this.bottomSideEnd += this.topSideEnd;
	
	this.infiniteScroll = infiniteScroll;
	this.moveDistance = moveDistance;
	this.minSizePercent = minSizePercent;
	this.verticalAlignment = verticalAlignment;
	this.archUpOrDown = archUpOrDown;
	
	if(this.archUpOrDown == 1)
		this.archPeak = this.leftSideEnd;	
	else if(this.archUpOrDown == -1)
		this.archPeak = this.rightSideEnd;
		
	this.horizontalMiddle = (rightSideEnd - leftSideEnd)/2;
	this.verticalMiddle = (bottomSideEnd - topSideEnd)/2;
	
	var index = 0;
	for (var i = 0; i < document.images.length; i++)
		if(document.images[i].id.substr(0, 15) == 'scrollableImage')
			imgArray[index++] = document.images[i];

	for (var i = 0; i < imgArray.length; i++){	
		origImageProps[i] = new imageProps(imgArray[i].width, imgArray[i].height);

		if(i > 0)	
			divTop[i] = divTop[i-1] + imgArray[i-1].height + padding;
		else
			divTop[i] = topSideEnd;
			
		$("scrollableImageDiv" + i).style.left = resizeAndAlignHorizontally(i) + 'px';
		$("scrollableImageDiv" + i).style.top = divTop[i] + 'px';
	}
}

function ready(){
	for (var i = 0; i < origImageProps.length; i++)
		if (!document.images[i].complete)
			return false;
	return true;
}

function scrollLeftOuter(){
	for (var i = farthestLeft; i < origImageProps.length; i++)
		scrollLeftInner(i);
	for (var i = 0; i < farthestLeft; i++)
		scrollLeftInner(i);
	
	if(!leftScrollStopped)
		setTimeout("scrollLeftOuter()", delayTime);
}

function scrollLeftInner(i) {
	$("scrollableImageDiv" + i).style.top = resizeAndAlignVertically(i) + 'px';
			
	if(infiniteScroll) {
		moveLeft(i);
		
		//if picture is off the area (to the left)
		//add up rest of pictures lengths and place the picture there (at the end of the right side)
		if (divLeft[i] <= leftSideEnd - imgArray[i].width){ 
			if(i != 0)
				divLeft[i] = divLeft[i-1] + imgArray[i-1].width + padding;
			else
				divLeft[i] = divLeft[origImageProps.length - 1] + imgArray[origImageProps.length - 1].width + padding;
			
			//make sure it goes at least to the end of the div
			if(divLeft[i] < rightSideEnd)
				divLeft[i] = rightSideEnd;
			
			if(i != origImageProps.length - 1)
				farthestLeft = i + 1;
			else
				farthestLeft = 0;
		}
	}
	else {
  		if (divLeft[origImageProps.length - 1] + imgArray[origImageProps.length - 1].width/2 > horizontalMiddle)
			moveLeft(i);
	}
	$("scrollableImageDiv" + i).style.left = divLeft[i] + 'px';
}

function moveLeft(i) {
	if(i != 0) {
		if(divLeft[i] > divLeft[i-1])
			divLeft[i] = divLeft[i-1] + imgArray[i-1].width + padding;
		else
			divLeft[i] -= moveDistance;
	}
	else {
		if(divLeft[i] > divLeft[origImageProps.length - 1])
			divLeft[i] = divLeft[origImageProps.length - 1] + imgArray[origImageProps.length - 1].width + padding;
		else
			divLeft[i] -= moveDistance;
	}	
}

function scrollRightOuter(){
	for (var i = farthestLeft - 1; i >= 0; i--)
		scrollRightInner(i);
	for (var i = origImageProps.length - 1; i >= farthestLeft; i--)
		scrollRightInner(i);
		
	if(!rightScrollStopped)
		setTimeout("scrollRightOuter()", delayTime);
}
		
function scrollRightInner(i){
	$("scrollableImageDiv" + i).style.top = resizeAndAlignVertically(i) + 'px';
					
	if(infiniteScroll) {
		moveRight(i);	
		
		//if picture is off the area (to the right)
		//set image on far left side
		if (divLeft[i] >= rightSideEnd){
			//leftPoint = leftSideEnd -widths[i] - padding;
			if(i != origImageProps.length - 1)
				divLeft[i] = divLeft[i+1] - imgArray[i].width - padding;
			else
				divLeft[i] = divLeft[0] - imgArray[i].width - padding;
			
			//make sure it goes at least to the end of the div before starting to scroll again
			if(divLeft[i] > leftSideEnd - imgArray[i].width)
				divLeft[i] = leftSideEnd - imgArray[i].width;
			
			farthestLeft = i;
		}
	}
	else {
  		if (divLeft[0] + imgArray[0].width/2 < horizontalMiddle)
  			moveRight(i);	  		
	}		
	$("scrollableImageDiv" + i).style.left = divLeft[i] + 'px';
}

function moveRight(i) {
 	if(i != origImageProps.length - 1) {
		if(divLeft[i] < divLeft[i+1])
			divLeft[i] = divLeft[i+1] - imgArray[i].width - padding;
		else
			divLeft[i] += moveDistance;
	}
	else {
		if(divLeft[i] < divLeft[0])
			divLeft[i] = divLeft[0] - imgArray[i].width - padding;
		else
			divLeft[i] += moveDistance;
	}
}

function scrollUpOuter(){
	for (var i = farthestTop; i < origImageProps.length; i++)
		scrollUpInner(i);
	for (var i = 0; i < farthestTop; i++)
		scrollUpInner(i);
	
	if(!upScrollStopped)
		setTimeout("scrollUpOuter()", delayTime);
}

function scrollUpInner(i) {
	$("scrollableImageDiv" + i).style.left = resizeAndAlignHorizontally(i) + 'px';
			
	if(infiniteScroll) {
		moveUp(i);
		
		//if picture is off the area (to the top)
		//add up rest of pictures lengths and place the picture there (at the end of the bottom side)
		if (divTop[i] <= topSideEnd - imgArray[i].height){ 
			if(i != 0)
				divTop[i] = divTop[i-1] + imgArray[i-1].height + padding;
			else
				divTop[i] = divTop[origImageProps.length - 1] + imgArray[origImageProps.length - 1].height + padding;
			
			//make sure it goes at least to the end of the div
			if(divTop[i] < bottomSideEnd)
				divTop[i] = bottomSideEnd;
			
			if(i != origImageProps.length - 1)
				farthestTop = i + 1;
			else
				farthestTop = 0;
		}
	}
	else {
  		if (divTop[origImageProps.length - 1] + imgArray[origImageProps.length - 1].height/2 > verticalMiddle)
			moveUp(i);
	}
	$("scrollableImageDiv" + i).style.top = divTop[i] + 'px';
}

function moveUp(i) {
	if(i != 0) {
		if(divTop[i] > divTop[i-1])
			divTop[i] = divTop[i-1] + imgArray[i-1].height + padding;
		else
			divTop[i] -= moveDistance;
	}
	else {
		if(divTop[i] > divTop[origImageProps.length - 1])
			divTop[i] = divTop[origImageProps.length - 1] + imgArray[origImageProps.length - 1].height + padding;
		else
			divTop[i] -= moveDistance;
	}	
}

function scrollDownOuter(){
	for (var i = farthestTop - 1; i >= 0; i--)
		scrollDownInner(i);
	for (var i = origImageProps.length - 1; i >= farthestTop; i--)
		scrollDownInner(i);
		
	if(!downScrollStopped)
		setTimeout("scrollDownOuter()", delayTime);
}
		
function scrollDownInner(i){
	$("scrollableImageDiv" + i).style.left = resizeAndAlignHorizontally(i) + 'px';
					
	if(infiniteScroll) {
		moveDown(i);	
		
		//if picture is off the area (to the right)
		//set image on far left side
		if (divTop[i] >= bottomSideEnd){
			//leftPoint = leftSideEnd -widths[i] - padding;
			if(i != origImageProps.length - 1)
				divTop[i] = divTop[i+1] - imgArray[i].height - padding;
			else
				divTop[i] = divTop[0] - imgArray[i].height - padding;
			
			//make sure it goes at least to the end of the div before starting to scroll again
			if(divTop[i] > topSideEnd - imgArray[i].height)
				divTop[i] = topSideEnd - imgArray[i].height;
			
			farthestTop = i;
		}
	}
	else {
  		if (divTop[0] + imgArray[0].height/2 < verticalMiddle)
  			moveDown(i);	  		
	}		
	$("scrollableImageDiv" + i).style.top = divTop[i] + 'px';
}

function moveDown(i) {
 	if(i != origImageProps.length - 1) {
		if(divTop[i] < divTop[i+1])
			divTop[i] = divTop[i+1] - imgArray[i].height - padding;
		else
			divTop[i] += moveDistance;
	}
	else {
		if(divTop[i] < divTop[0])
			divTop[i] = divTop[0] - imgArray[i].height - padding;
		else
			divTop[i] += moveDistance;
	}
}

function resizeAndAlignVertically(i) {
	currentPosition = divLeft[i] + imgArray[i].width/2;

	if(currentPosition > horizontalMiddle) 
		currentPosition = 2*horizontalMiddle - currentPosition;
	 	
	positionRatio = currentPosition/horizontalMiddle;

	imgArray[i].width = origImageProps[i].width * (positionRatio * (1 - minSizePercent) + minSizePercent);
	imgArray[i].height = origImageProps[i].height * (positionRatio * (1 - minSizePercent) + minSizePercent);	
	
	if(archUpOrDown == 1) {	
		if(positionRatio > 0)
			return archPeak + (1 - Math.sqrt(positionRatio)) * (bottomSideEnd - archPeak);
		else
			return archPeak + bottomSideEnd;
	}
	else if(archUpOrDown == -1) {	
		if(positionRatio > 0)
			return archPeak - (1 - Math.sqrt(positionRatio)) * (archPeak - topSideEnd) - imgArray[i].height;
		else
			return archPeak - bottomSideEnd - imgArray[i].height;
	}
	else {
		if(verticalAlignment == "top");
		else if(verticalAlignment == "bottom")
			return bottomSideEnd - imgArray[i].height;
		else
			return verticalMiddle - imgArray[i].height/2;
	}
}

function resizeAndAlignHorizontally(i) {
	currentPosition = divTop[i] + imgArray[i].height/2;

	if(currentPosition > verticalMiddle) 
		currentPosition = 2*verticalMiddle - currentPosition;
	 	
	positionRatio = currentPosition/verticalMiddle;

	imgArray[i].width = origImageProps[i].width * (positionRatio * (1 - minSizePercent) + minSizePercent);
	imgArray[i].height = origImageProps[i].height * (positionRatio * (1 - minSizePercent) + minSizePercent);	

	if(archUpOrDown == 1) {	
		if(positionRatio > 0)
			return archPeak + (1 - Math.sqrt(positionRatio)) * (rightSideEnd - archPeak);
		else
			return archPeak + rightSideEnd;
	}
	else if(archUpOrDown == -1) {	
		if(positionRatio > 0)
			return archPeak - (1 - Math.sqrt(positionRatio)) * (archPeak - leftSideEnd) - imgArray[i].width;
		else
			return archPeak - rightSideEnd - imgArray[i].width;
	}
	else {
		if(verticalAlignment == "left");
		else if(verticalAlignment == "right")
			return rightSideEnd - imgArray[i].width;
		else
			return horizontalMiddle - imgArray[i].width/2;
	}
}

function stopHorizontalScroll(){
	rightScrollStopped = true;
	leftScrollStopped = true;
}

function stopVerticalScroll(){
	upScrollStopped = true;
	downScrollStopped = true;
}

function startScrollLeft(){
	rightScrollStopped = true;
	
	if(!firstTime) {
		leftScrollStopped = false;
		scrollLeftOuter();
	}
	else if(ready()){
		firstTime = false;
		leftScrollStopped = false;
		scrollLeftOuter();
	}
}

function startScrollRight(){
	leftScrollStopped = true;
	
	if(!firstTime) {
		rightScrollStopped = false;
		scrollRightOuter();
	}
	else if(ready()){
		firstTime = false;
		rightScrollStopped = false;
		scrollRightOuter();
	}
}

function startScrollUp(){
	downScrollStopped = true;
	
	if(!firstTime) {
		upScrollStopped = false;
		scrollUpOuter();
	}
	else if(ready()){
		firstTime = false;
		upScrollStopped = false;
		scrollUpOuter();
	}
}

function startScrollDown(){
	upScrollStopped = true;
	
	if(!firstTime) {
		downScrollStopped = false;
		scrollDownOuter();
	}
	else if(ready()){
		firstTime = false;
		downScrollStopped = false;
		scrollDownOuter();
	}
}
//myPause = setInterval("startScrollingLeft()", 0);