window.addEvent('domready', init);

var lastClick;
var count=1;
var total=0;
var busy=false;
var myEffects;
var whichImage;

function init(){
	$$('td.thumb img').each(function(link, i){
			link.addEvent('click',thumbClick);
			total++;
			if(i==0){
				lastClick=link;
			}
			});
			$('ctl00_arrowleftimg').addEvent('click', leftClick);
			$('ctl00_arrowrightimg').addEvent('click', rightClick);
}

function thumbClick(){
  if(!busy){
    lastClick.removeClass('yellowBorder');
    lastClick.addClass('grayBorder');
    lastClick=this;
    this.addClass("yellowBorder");
    this.removeClass('grayBorder');
    whichImage=this.name;
    myEffects = $('p_image').effects({duration: 300, onComplete:fadeOutComplete});
		myEffects.start({'opacity': 0});
		
    $('ctl00_numberlb').innerHTML=this.getAttribute('picindex');
    count=this.id;
    busy=true;
	}
}

function fadeOutComplete(){
  $('p_image').innerHTML='<img id="ctl00_fullimage" src="../'+whichImage+'" />';
	myEffects = $('p_image').effects({duration: 300,onComplete:finalFadeComplete});
	myEffects.start({'opacity': 1});
}

function finalFadeComplete(){
	busy=false;	
	
}

function rightClick(){
if(!busy){
if(count<total){
  count++;
  }else{
  count=1;
  }
  arrows()
  }
}

function leftClick(){
if(!busy){
if(count>1){
  count--;
  }else{
  count=total
  }
  arrows()
  }
}

function arrows(){

  whichImage=$(String(count)).name;
  myEffects = $('p_image').effects({duration: 300, onComplete:fadeOutComplete});
	myEffects.start({'opacity': 0});
  $('ctl00_numberlb').innerHTML=$(String(count)).getAttribute('picindex');
  
  lastClick.removeClass('yellowBorder');
	lastClick.addClass('grayBorder');
	lastClick=$(String(count));
	$(String(count)).addClass("yellowBorder");
	$(String(count)).removeClass('grayBorder');
	 busy=true;

}