//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(formatHTMLTitle(this.getAttribute("title")));
         clearSlider(cssLinkSelectors);
         $(this).addClass("sel");
				return false;
			}
		}
	});
	var intNumOfThumbnails = $(cssThumbnailSelectors).get(); intScrollWidth = 0; 
	intNumOfThumb = intNumOfThumbnails.length;
}
function formatHTMLTitle(strTitle)
{
	titleElements = strTitle.split("|");
	strFormatted = "";
	titleElements[0] = titleElements[0].replace(/^\s+|\s+$/g, '') ;
	titleElements[1] = titleElements[1].replace(/^\s+|\s+$/g, '') ;
	titleElements[2] = titleElements[2].replace(/^\s+|\s+$/g, '') ;
	if(titleElements[0] != "")
	{
		strFormatted += "<strong>" + titleElements[0] + "</strong>";
	}
	if(titleElements[1] != "")
	{
		strFormatted += "<br />Pet: " + titleElements[1];
	}
	else
	{
		strFormatted += "<br />&nbsp;";
	}
	if(titleElements[2] != "")
	{
		strFormatted += "<br />Owner: " + titleElements[2];
	}
	else
	{
		strFormatted += "<br />&nbsp;";
	}
	return strFormatted;
}
//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(formatHTMLTitle(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)
}