var leftThumb = 0;
var lastLeft = 0;
var lastRight = 4;
var timerID = null;
var direction = "left";
	      
var classes = new Array(5)
classes[0] = "thumbOne";
classes[1] = "thumbTwo";
classes[2] = "thumbThree";
classes[3] = "thumbFour";
classes[4] = "thumbFive";

var thumbs;
var thumblength;

function init() {

thumbs = document.getElementById('thumbImages').getElementsByTagName('img');
thumblength=thumbs.length;
for (var i = 0; i < thumblength; i++) {
var image = thumbs[i];
image.onmouseover =	function() { this.style.border = '1px solid white'; }
image.onmouseout =	function() { this.style.border = '0'; }

image.onclick =		function() { 
	      var imgSrc = this.src;
	      var lastSlash= imgSrc.lastIndexOf("/");
	      var penulSlash= imgSrc.substring(0, lastSlash).lastIndexOf("/");
	      var newPath = imgSrc.substring(0, penulSlash) + imgSrc.substring(lastSlash, imgSrc.length);
	      var currImg = document.getElementById('currentImage');			
	      currImg.style.display = 'none';
	      currImg.src = newPath;	
	      currImg.style.display = 'inline';

}
 }	      
 
var arrowImages = new Array(3);
arrowImages[0] = 'leftArrow'; 
arrowImages[1] = 'rightArrow';
arrowImages[2] =  'folioArrow';

for (var i = 0; i < arrowImages.length; i++) {
    var arrow = document.getElementById(arrowImages[i]);
    arrow.oncontextmenu= function () { return false; }
    arrow.onmouseover=switchArrow;
    arrow.onmouseout=switchArrow; 
if (i == 0) {
    arrow.onclick = function () {
	leftThumb++;
	displayThumbs('left');
    }
    arrow.onmousedown = function() {
	direction = 'left';
	scrollThumbs();
    }
    arrow.onmouseup=terminateTimer;
    
}
else if (i == 1) {
    arrow.onclick = function () {
	leftThumb--;
	displayThumbs('right');
    }
    arrow.onmousedown = function() {
	direction = 'right';
	scrollThumbs();
    }
    arrow.onmouseup=terminateTimer;
}
else {
     arrow.onclick=function() {
        var slideOut = document.getElementById('portfolios');

	if (slideOut.style.display == 'inline') {
          this.src="/images/graphics/arrow_right1.gif";
	  slideOut.style.display = 'none'; 
        }
	else {
          this.src="/images/graphics/arrow_left1.gif";
	  slideOut.style.display = 'inline';
	}
     }
}

 displayThumbs('left');
 
  }
}

function scrollThumbs() {
timerID = window.setTimeout('mainTimer()',200);
}	  

function mainTimer() {
if (direction == 'left') { leftThumb++; } else { leftThumb--; }
displayThumbs(direction);		
timerID = window.setTimeout('mainTimer()', 200);
}

	
function terminateTimer() {
    window.clearTimeout(timerID);
}

function displayThumbs(offset) {

  if (offset == 'left') { thumbs[lastLeft].className='imageOff'; } else { thumbs[lastRight].className='imageOff'; }	
  if (leftThumb < 0) { leftThumb = thumblength - 1; }
  if (leftThumb == thumblength) { leftThumb = 0; }
  var k = leftThumb;	       
  for ( i=0; i < 5; i++) {
    if (k < 0) { k = thumblength - 1; }
    if (k ==  thumblength) { k = 0; }
    thumbs[k].className=classes[i];
    k++;		
  }
 lastLeft = leftThumb;
 lastRight = k-1;
}



function switchArrow() {
    var oldSrc = this.src;
    var dot = oldSrc.lastIndexOf('.');
    var numIndex = dot - 1;
    var oldNum = oldSrc.substring(numIndex, dot);
    var newNum;
    if (oldNum == 2) { newNum = 1; } else { newNum = 2; }
    newSrc=oldSrc.substring(0, numIndex) + newNum + ".gif";
    this.src = newSrc;	       
    terminateTimer();
    }