//************************************************************************************
//  This is the Javascript used to:
//    1.  Display the PopUp Gallery with dimming cover over rest of the page.
//    2.  Facilitate the operation of the Gallery and Gallery Preview.
//  Other than the creation of the object instances, this code can go in a JS file.
//************************************************************************************

//************************************************************************************
//  Variables that configure the Gallery & Preview operation.
//************************************************************************************
var GalCnst_TransitionDelay = 60;    // Millisecond delay between transitions
var GalCnst_TransitionQty = 10;      // Number of transitions required
var GalCnst_PlayDelay = 5000;        // Millisecond delay between images when Playing

//************************************************************************************
//  Define A Gallery Class.
//
//  Is passed a prefix used in the HTML element IDs for Images and Thumbnails...
//  prefix_Img_1         - <img> for each large Image, repeated 1 thru number of images.
//  prefix_ThumbImg_1    - <img> for each Thumbnail, repeated 1 thru number of images.
//  prefix_Thumbs        - <div> containing Thumbnail Images.
//  prefix_Thumb_Marker  - <img> for Marker highlighted selected Thumbnail.
//  prefix_But_PlayPause - <img> for Play/Pause button - optional.
//  2 instances are created for Gallery Preview and main popup Gallery - see below.
//************************************************************************************
function class_Gallery(p_TagPrefix) {
var i_Stop = false;
var i_ImageNo = 0;

  this.ThumbsContainer = document.getElementById(p_TagPrefix + "_Thumbs");
  this.ThumbsMarker = document.getElementById(p_TagPrefix + "_Thumb_Marker");
  this.MarkerScrollMax = Number(this.ThumbsContainer.style.height.replace("px", "")) - 86;
  this.CurrentImageNo = 1;
  this.ImageQty = 0;
  this.Images = new Array();
  this.MarkerTopStart = 0;
  this.MarkerLeftStart = 0;
  this.MarkerTopWanted = 0;
  this.MarkerLeftWanted = 0;
  this.TransitionNo = 0;
  this.TransitionActive = false;
  this.TransitionTimeout = null;
  this.AllowPlay = false;
  this.Play = false;
  this.PlayActive = false;
  this.PlayTimeout = null;
  this.PlayPauseButton = document.getElementById(p_TagPrefix + "_But_PlayPause");

  i_Stop = false;
  i_ImageNo = 0;
  while (i_Stop == false) {
    i_ImageNo = i_ImageNo + 1;
    this.Images[i_ImageNo] = new class_GalleryImage(p_TagPrefix, i_ImageNo);
    if (this.Images[i_ImageNo].valid == false) {
      i_Stop = true; }}
    if (i_ImageNo > 16) {
      alert("It got to 17!");
      i_Stop = true; }
  this.ImageQty = i_ImageNo - 1;

  if (this.PlayPauseButton) {
    this.AllowPlay = true;
    this.Play = true; }
}


function gal_MoveNext() {
var i_NewImgID;

  if (this.CurrentImageNo == this.ImageQty) {
    i_NewImgID = 1; }
  else {
    i_NewImgID = this.CurrentImageNo + 1; }
  this.ImageChange(i_NewImgID);
}


function gal_MovePrev() {
var i_NewImgID;

  if (this.CurrentImageNo == 1) {
    i_NewImgID = this.ImageQty; }
  else {
    i_NewImgID = this.CurrentImageNo - 1; }
  this.ImageChange(i_NewImgID);
}


function gal_PlayPause() {

  if (this.AllowPlay == false) {
    return; }
  if (this.PlayActive == true) {
    this.PlayActive = false;
    clearTimeout(this.PlayTimeout); }

  if (this.Play == true) {
    this.Play = false;
    this.PlayPauseButton.src="images/Gal_But_Play_Over.jpg"; }
  else {
    this.Play = true;
    this.PlayPauseButton.src="images/Gal_But_Pause_Over.jpg";
    if (this.TransitionActive == false) {
      this.MoveNext(); }}
}


function gal_PlayNext() {
  this.PlayActive = false;
  this.MoveNext();
}


function gal_ImageChange(p_NewImageNo) {

  if (this.PlayActive == true) {
    this.PlayActive = false;
    clearTimeout(this.PlayTimeout); }
  this.CurrentImageNo = p_NewImageNo;
  this.MarkerTopStart = Number(this.ThumbsMarker.style.top.replace("px", ""));
  this.MarkerLeftStart = Number(this.ThumbsMarker.style.left.replace("px", ""));
  this.MarkerTopWanted = this.Images[this.CurrentImageNo].MarkerTop;
  this.MarkerLeftWanted = this.Images[this.CurrentImageNo].MarkerLeft;
//  alert("Tops=" + this.MarkerTopStart + "," + this.MarkerTopWanted + " Lefts=" + this.MarkerLeftStart + "," + this.MarkerLeftWanted);

  this.TransitionNo = 0;
  if (this.TransitionActive == false) {
    this.Transition(); }
}


function gal_Transition() {
var i_ImgNo = 0;
var i_Opacity = 0;
var i_Changed = false;
var i_AnyChanges = false;
var self = this;

  i_AnyChanges = false;
  this.TransitionActive = false;
  this.TransitionNo++;

  for (i_ImgNo=1; i_ImgNo<=this.ImageQty; i_ImgNo++) {
    i_Opacity = this.Images[i_ImgNo].Opacity;
    i_Changed = false;
    if (i_ImgNo == this.CurrentImageNo) {
      if (i_Opacity != 100) {
        i_Changed = true;
        i_Opacity = ((100 / GalCnst_TransitionQty) * this.TransitionNo);
        if (i_Opacity > 100) {
          i_Opacity = 100; }}}
    else {
      if (i_Opacity != 0) {
        i_Changed = true;
        i_Opacity = 100 - ((100 / GalCnst_TransitionQty) * this.TransitionNo);
        if (i_Opacity < 0) {
          i_Opacity = 0; }}}
    if (i_Changed == true) {
      i_AnyChanges = true;
      this.Images[i_ImgNo].SetOpacity(i_Opacity); }}

  if (this.TransitionNo <= GalCnst_TransitionQty) {
    i_AnyChanges = true;
    if (this.TransitionNo == GalCnst_TransitionQty) {
      i_MarkerTop = this.MarkerTopWanted;
      i_MarkerLeft = this.MarkerLeftWanted; }
    else {
      i_MarkerTop = this.MarkerTopStart - ((this.MarkerTopStart - this.MarkerTopWanted) / GalCnst_TransitionQty) * this.TransitionNo;
      i_MarkerLeft = this.MarkerLeftStart - ((this.MarkerLeftStart - this.MarkerLeftWanted) / GalCnst_TransitionQty) * this.TransitionNo; }
    this.ThumbsMarker.style.top = i_MarkerTop + "px";
    this.ThumbsMarker.style.left = i_MarkerLeft + "px";
    if ((this.MarkerTopWanted < this.MarkerTopStart) && (i_MarkerTop < this.ThumbsContainer.scrollTop)) {
      this.ThumbsContainer.scrollTop = i_MarkerTop; }
    if ((this.MarkerTopWanted >= this.MarkerTopStart) && (i_MarkerTop > this.ThumbsContainer.scrollTop + this.MarkerScrollMax)) {
      this.ThumbsContainer.scrollTop = i_MarkerTop - this.MarkerScrollMax; }}

  if (i_AnyChanges == false) {
    if (this.Play == true) {
      this.PlayActive = true;
      this.PlayTimeout = setTimeout(function(){self.PlayNext();}, GalCnst_PlayDelay); }}
  else {
    this.TransitionActive = true;
    this.TransitionTimeout = setTimeout(function(){self.Transition();}, GalCnst_TransitionDelay); }
}


function gal_Suspend() {
var i_ImgID = 0;

  if (this.PlayActive == true) {
    this.PlayActive = false;
    clearTimeout(this.PlayTimeout); }

  if (this.TransitionActive == true) {
    this.TransitionActive = false;
    clearTimeout(this.TransitionTimeout); }

  for (i_ImgID=1; i_ImgID<=this.ImageQty; i_ImgID++) {
    this.Images[i_ImgID].SetOpacity(0); }
}


//************************************************************************************
//  Define An Image Class used by Gallery class above.
//************************************************************************************
function class_GalleryImage(p_TagPrefix, p_ID) {

  this.valid = true;
  if (!document.getElementById(p_TagPrefix +"_Img_" + p_ID)) {
    this.valid = false;
    return; }
  this.Image = document.getElementById(p_TagPrefix +"_Img_" + p_ID);
  this.Thumb = document.getElementById(p_TagPrefix +"_ThumbImg_" + p_ID);
  this.MarkerTop = Number(this.Thumb.style.top.replace("px", "")) - 5;
  this.MarkerLeft = Number(this.Thumb.style.left.replace("px", "")) - 5;
  this.UseFilter = (document.getElementById(p_TagPrefix + "_Img_" + p_ID).filters) ? true : false;
  this.Opacity = 0;

  if (this.UseFilter == true) {
    this.Opacity = this.Image.filters.alpha.opacity; }
  else {
    this.Opacity = this.Image.style.opacity * 100; }
}

function galImg_SetOpacity(p_Opacity) {

  if (this.UseFilter) {
    this.Image.filters.alpha.opacity = p_Opacity; }
  else {
    this.Image.style.opacity = p_Opacity / 100; }
  this.Opacity = p_Opacity;
}

//************************************************************************************
//  Add Methods to Gallery and Gallery Image classes
//************************************************************************************
class_GalleryImage.prototype.SetOpacity = galImg_SetOpacity;
class_Gallery.prototype.MoveNext = gal_MoveNext;
class_Gallery.prototype.MovePrev = gal_MovePrev;
class_Gallery.prototype.PlayPause = gal_PlayPause;
class_Gallery.prototype.PlayNext = gal_PlayNext;
class_Gallery.prototype.ImageChange = gal_ImageChange;
class_Gallery.prototype.Transition = gal_Transition;
class_Gallery.prototype.Suspend = gal_Suspend;


//************************************************************************************
//  Helper functions.
//
//  These functions popup the hidden Gallery etc.
//  Possible Enhancements:
//    1.  Pass the Dimmer and PopUp Div IDs as parameters to enable multiple popups.
//    2.  Separate Displaying PopUp and Setting ImageNo so PopUps can be for any purpose.
//************************************************************************************

function Gallery_Show(p_InitialImageID)
{
var i_DocWidth = 0;
var i_DocHeight = 0;
var i_WinWidth = 0;
var i_WinHeight = 0;
var i_Top = 0;
var i_Sub = 0;

  i_DocWidth = Math.max(
        Math.max(document.body.scrollWidth, document.documentElement.scrollWidth),
        Math.max(document.body.offsetWidth, document.documentElement.offsetWidth),
        Math.max(document.body.clientWidth, document.documentElement.clientWidth));
  i_DocHeight = Math.max(
        Math.max(document.body.scrollHeight, document.documentElement.scrollHeight),
        Math.max(document.body.offsetHeight, document.documentElement.offsetHeight),
        Math.max(document.body.clientHeight, document.documentElement.clientHeight));

  if (typeof( window.innerWidth ) == 'number' ) {  //Non-IE
    i_WinWidth = window.innerWidth;
    i_WinHeight = window.innerHeight; }
  else {
    if (document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight)) {  //IE 6+ in 'standards compliant mode'
      i_WinWidth = document.documentElement.clientWidth;
      i_WinHeight = document.documentElement.clientHeight; }
    else {
      i_WinWidth = document.body.clientWidth;
      i_WinHeight = document.body.clientHeight; }}

  if (i_DocWidth > i_WinWidth) { i_WinWidth = i_DocWidth; }
  if (i_DocHeight > i_WinHeight) { i_WinHeight = i_DocHeight; }

  i_Top = Math.max(Math.max(document.body.scrollTop, document.documentElement.scrollTop)) + 10;

  document.getElementById('Gallery_Dimmer').style.width = i_WinWidth + "px";
  document.getElementById('Gallery_Dimmer').style.height = i_WinHeight + "px";
  document.getElementById('Gallery').style.top = i_Top + "px";
  document.getElementById('Gallery_Dimmer').style.visibility = "visible";

  Gallery.ImageChange(p_InitialImageID);
}


function Gallery_Hide() {

  document.getElementById('Gallery_Dimmer').style.visibility='hidden';
  document.getElementById("Gallery_But_Exit").src="images/Gal_But_Exit.jpg";
  Gallery.Suspend();
}


function Gallery_PreviewClick(p_ImageNo) {

  if (GalleryPreview.CurrentImageNo == p_ImageNo) {
    Gallery_Show(p_ImageNo); }
  else {
    GalleryPreview.ImageChange(p_ImageNo); }
}