//Instructions for using the Gallery JS
/*
  Add this JS to the html page for the accessible version and to set the JS varibales and initiation:
  <script type="text/javascript" language="JavaScript">
  <!--
    // Total width of your thumbnails (including borders, padding, margins)
    intThumbTotalWidth = 58;
    $(document).ready(function(){galleryStart("#pictureNav li", "#pictureNav a", "#mainImage", "#pictureCaption p");});
  //-->
  </script>
  
  Example of the slider arrows for single thumbnail scrolling: 
  <button onmousedown="scrollPrevious('pictureNav')"  onkeydown="scrollPrevious('pictureNav')" title="Previous"><span class="accessibility">Previous via JavaScript Scrolling</span></button>
  <button onmousedown="scrollNext('pictureNav')" onkeydown="scrollNext('pictureNav')" title="Next" class="next"><span class="accessibility">Next via JavaScript Scrolling</span></button>                    
*/

//The number of black spaces at the end of the slider
var intBlankThumbs = 6;
var intThumbPosition, intNumOfThumb;

//Initialising functions for gallery
//Uses defined variables from HTML of: cssThumbnailSelectors, cssLinkSelectors, cssMainImageSelector, cssCaptionSelector, cssMainImageContainer
function galleryStart() 
{
	$(cssLinkSelectors).each(function() 
  {
		if (this.getAttribute("href"))
    {
			this.onclick = function () 
      {
        $(this).children("img").each(function()
        {
          controlVisualSwitch(this.getAttribute("src"), this.getAttribute("alt"), this.getAttribute("title"));
        });
         $(cssCaptionSelector).html(this.getAttribute("title"));
         clearSlider(cssLinkSelectors);
         $(this).addClass("sel");
				return false;
			}
		}
	});
	var intNumOfThumbnails = $(cssThumbnailSelectors).get(); intScrollWidth = 0; 
	intNumOfThumb = intNumOfThumbnails.length;
}

//Function to clear selected css class from slider
function clearSlider(cssLinkSelectors)
{
  $(cssLinkSelectors).each(function()
  {
    $(this).removeClass("sel");
  });
}

//Scrolls the thumbnails left
function scrollPrevious()
{
	if(intScrollWidth < 0) 
  {
		intScrollWidth = intScrollWidth + intThumbTotalWidth;
    var objThumbnailContainer = eval(document.getElementById(cssThumbnailContainer));
		objThumbnailContainer.style.marginLeft = intScrollWidth + "px";
	}
}

//Scrolls the thumbnails right
function scrollNext() 
{ 
  if(intScrollWidth > ((-intNumOfThumb * intThumbTotalWidth) + (intBlankThumbs * intThumbTotalWidth)))
  {
		intScrollWidth = intScrollWidth - intThumbTotalWidth;
    var objThumbnailContainer = eval(document.getElementById(cssThumbnailContainer));
		objThumbnailContainer.style.marginLeft = intScrollWidth + "px";
	}
}

//Function to change main image via the previous and next on image navigation
function switchImg(strDirection)
{
  //Get the path of current image's matching thumbnail
  var strNewImgPath, bolThumbMatch = false;
  $(cssMainImageSelector).each(function()
  {
    strNewImgPath = this.getAttribute("src")
    strNewImgPath = getBaseImgPath(strNewImgPath, 2);
  });

  //Loops to find current thumbnail image that matches main image
  $(cssLinkSelectors).each(function() 
  {
		if(this.getAttribute("href"))
    {
      $(this).children("img").each (function()
      {
        if(this.getAttribute("src") == strNewImgPath)
        {   
          bolThumbMatch = true;
        }
      });
      if(bolThumbMatch)
      {
        strThumbMatchID = this.getAttribute("id");
        intThumbPosition = strThumbMatchID.substr(5, strThumbMatchID.length);
        bolThumbMatch = false;
      }
		}
	});
  
  switch (strDirection)
  {
    case "previous": 
      if(intThumbPosition > 1){intThumbPosition--;}
      else{return false;}
    break
    case "next":
      if(intThumbPosition < intNumOfThumb){intThumbPosition++;}
      else{return false;}
    break
    default:
      alert(strDirection + " is not supported by this function");
    break
  }
  $("a#thumb" + (intThumbPosition) + " img").each(function()
  {
    controlVisualSwitch(this.getAttribute("src"), this.getAttribute("alt"),  this.getAttribute("title"));
  });
  $("a#thumb" + (intThumbPosition)).each(function()
  {  
    clearSlider(cssLinkSelectors);
    $(this).addClass("sel");
    $(cssCaptionSelector).html(this.getAttribute("title"));
  });
}

//Function to get root of image path
function getBaseImgPath(strImgPath, intSwitch)
{
  switch (intSwitch)
  {
    case 1: //Large image > small image path
      intDotPos = strImgPath.lastIndexOf(".");
      return strImgPath.slice(0, intDotPos) + "_lrg.jpg";
    break
    case 2: //Small image > large image path
      intDotPos = strImgPath.lastIndexOf("_lrg");
      return strImgPath.slice(0, intDotPos) + ".jpg";
    break
    default:
      alert(intSwitch + " is not supported by this function");
    break
  }
}

//Function to control image switching appearance
function controlVisualSwitch (strNewSrc, strNewAlt, strNewTitle)
{
  $(cssMainImageSelector).addClass("notVisible");
  strMainImagePath = getBaseImgPath(strNewSrc, 1);
  $(cssMainImageSelector).attr("src", strMainImagePath);
  $(cssMainImageSelector).attr("alt", strNewAlt);
  $(cssMainImageSelector).attr("title", strNewTitle);
  setTimeout("$('"+ cssMainImageSelector + "').fadeIn('slow');$('" + cssMainImageSelector +"').removeClass('notVisible')",2000)
  
  //var strCssMainImageId = cssMainImageSelector;
  //strCssMainImageId = strCssMainImageId.slice(1);
  //var objNewImage = eval(document.getElementById(strCssMainImageId));
  //while ((objNewImage.naturalWidth == "undefined") || (objNewImage.naturalWidth == 0)){setTomeout(alert("1 second"),1000)}
  /*strMainImagePath = getBaseImgPath(strNewSrc, 1);
  $(cssMainImageContainer).html('<img src="'+ strMainImagePath +'" width="' + intMainImgWidth + '" height="' + intMainImgHeight + '" alt="' + strNewAlt + '" class="pictureNavSimple notVisible" id="' + cssMainImageSelector + '" />');
  var objNewImage = eval(document.getElementById(cssMainImageSelector));
  while (objNewImage.naturalWidth == "undefined" || objNewImage.naturalWidth == 0){}
  $("#mainImage").addClass("notVisible");
 $(cssMainImageSelector).fadeIn("slow");*/
}