// JavaScript Document

var counter = 0;
var counterThumbnail = 0;
var lower = 0;
var upper = numberImages - 1;
var upperThumbnails = parseInt(upper / 4);
var leftOff = Boolean(1);
var rightOff = Boolean(1);
var startOff = Boolean(1);
var leftTOff = Boolean(1);
var rightTOff = Boolean(1);
var thumbnailOn = 0;

function loadThumbnails( num) {
  var limit = 0;
  
  for (ind = 0; ind < 4; ind++) {
    document.getElementById('thumbnailImage'+ind).src = "thumbnails/" + imgArray[num*4 + ind] + ".jpg";
  }

  // Remove uuneeded frame borders
  if (num == upperThumbnails) {
    limit=upper - upperThumbnails*4 + 1;

  for (ind = limit; ind < 4; ind++) {
      document.getElementById('thumbnailImage' + ind).style.border = '0px';
    }
  }
  
  return true;
}

function loadTPhoto(num) {
  var photo = num + counterThumbnail * 4;
  
  if( photo < numberImages ) {
    counter = photo;
    loadArrows( photo );
    loadPhoto( photo );
    borderThumbnails( photo );
  }

  return true;
}

function backSlide() {
  counter = counter - 1;
    
  if (counter < lower)
    counter = lower;
      
  loadArrows(counter);  
  setThumbnails();
  loadPhoto(counter);
  borderThumbnails(counter);
    
  return true;
}

function forwardSlide() {
  counter = counter + 1;
  
  if (counter > upper)
    counter = upper;
  
  loadArrows(counter);
  setThumbnails();
  loadPhoto(counter);
  borderThumbnails(counter);
 
  return true;
}

function startSlide() {
  counter = 0;
  
  if (counter > upper)
    counter = upper;
  
  loadArrows(counter);
  setThumbnails();
  loadPhoto(counter);
  borderThumbnails(counter);
 
  return true;
}

function setThumbnails() {
  if (counter >= (counterThumbnail + 1) * 4 || counter < counterThumbnail * 4 ) {
    counterThumbnail = parseInt(counter / 4);     

    loadTArrows(counterThumbnail);
    loadThumbnails(counterThumbnail);
  }
  
  return true;
}

function borderThumbnails(num) {
  thumbnailOn = num%4;
  thumbOn(num%4);

  if (counterThumbnail == upperThumbnails)
    limit=upper - upperThumbnails*4 + 1;
  else
    limit = 4;
    
  for (ind = 0; ind < limit; ind++) {
    thumbOff(ind);
  }
}

function backThumbnail() {
  counterThumbnail = counterThumbnail - 1;
    
  if (counterThumbnail < 0)
    counterThumbnail = 0;
      
  loadTArrows(counterThumbnail);  
  loadThumbnails(counterThumbnail);
   
  thumbOffOff(thumbnailOn);
  
  return true;
}

function forwardThumbnail() {
  counterThumbnail = counterThumbnail + 1;
  
  if (counterThumbnail > upperThumbnails)
    counterThumbnail = upperThumbnails;

  loadTArrows(counterThumbnail);
  loadThumbnails(counterThumbnail);

  thumbOffOff(thumbnailOn);

  return true;
}

function thumbOff(num) {
  if( num != thumbnailOn )
    document.getElementById('thumbnailImage' + num).style.border = '1px solid #000000';
}

function thumbOn(num) {
  document.getElementById('thumbnailImage' + num).style.border = '1px solid #FF0000';
}

function thumbOffOff(num) {
  document.getElementById('thumbnailImage' + num).style.border = '1px solid #000000';
  thumbnailOn = -1;
}

function loadArrows(num) {
  if (counter == lower ) {
    document.getElementById('imageLeft').src = "../../imagesDesign/arrowLeftOff.png";
    document.getElementById('imageStart').src = "../../imagesDesign/arrowLeftLeftOff.png";
  }
  else {
    if ( startOff )
      document.getElementById('imageStart').src = "../../imagesDesign/arrowLeftLeft.png";
    
		if( leftOff )
      document.getElementById('imageLeft').src = "../../imagesDesign/arrowLeft.png";
  }
  
  if ( counter == upper )
    document.getElementById('imageRight').src = "../../imagesDesign/arrowRightOff.png";
  else {
    if ( rightOff )
      document.getElementById('imageRight').src = "../../imagesDesign/arrowRight.png";
  }
  
  return true;
}

function loadTArrows(num) {
  if (num == 0 )
    document.getElementById('imageTLeft').src = "../../imagesDesign/arrowLeftLeftOff.png";
  else {
    if( leftTOff )
    document.getElementById('imageTLeft').src = "../../imagesDesign/arrowLeftLeft.png";
  }
  
  if ( num == upperThumbnails )
    document.getElementById('imageTRight').src = "../../imagesDesign/arrowRightRightOff.png";
  else {
    if ( rightTOff )
      document.getElementById('imageTRight').src = "../../imagesDesign/arrowRightRight.png";
  }
  
  return true;
}

function imageHover(Ind) {
  if( Ind == "S" ) {
    startOff = 0;
    if ( counter > lower )
      document.getElementById('imageStart').src = "../../imagesDesign/arrowLeftLeftHover.png";
  }
  if ( Ind == 'R' ) {
    rightOff = 0;
    if ( counter == upper )
      return true;
    else  
      document.getElementById('imageRight').src = "../../imagesDesign/arrowRightHover.png";
  }
  else {
    leftOff = 0;
    if ( counter == lower )
      return true;
    else
      document.getElementById('imageLeft').src = "../../imagesDesign/arrowLeftHover.png";
  }

  return true;
}  
  
function imageOff(Ind) {
  if( Ind == "S" ) {
    startOff = 1;
    if ( counter == lower )
		  return true;
		else	
      document.getElementById('imageStart').src = "../../imagesDesign/arrowLeftLeft.png";
  }
  
	if ( Ind == 'R' ) {
     rightOff = 1;
    if ( counter == upper )
      return true;
    else  
      document.getElementById('imageRight').src = "../../imagesDesign/arrowRight.png";
  }
  else {
    leftOff = 1;
    if ( counter == lower )
      return true;
    else
      document.getElementById('imageLeft').src = "../../imagesDesign/arrowLeft.png";
  }
  
  return true;
}  

function imageTHover(Ind) {
  if ( Ind == 'R' ) {
    rightTOff = 0;
    if ( counterThumbnail == upperThumbnails )
      return true;
    else  
     document.getElementById('imageTRight').src = "../../imagesDesign/arrowRightRightHover.png";
  }
  else {
    leftTOff = 0;
    if ( counterThumbnail == 0 )
      return true;
    else
      document.getElementById('imageTLeft').src = "../../imagesDesign/arrowLeftLeftHover.png";
  }

return true;
}  
  
function imageTOff(Ind) {
  if ( Ind == 'R' ) {
     rightTOff = 1;
    if ( counterThumbnail == upperThumbnails )
      return true;
    else  
     document.getElementById('imageTRight').src = "../../imagesDesign/arrowRightRight.png";
  }
  else {
    leftTOff = 1;
    if ( counterThumbnail == 0 )
      return true;
    else
      document.getElementById('imageTLeft').src = "../../imagesDesign/arrowLeftLeft.png";
  }
  
  return true;
}