﻿/*
  JavaScript functions to control:
  Three HTML layers of 'album.htm' - Album, Thumbnail and Large image layers.
  Selection of image folders with Slideshow of images and Enlarge display.
  Automatic resize of images and page with browser window size.
*/
var album = true;
var slideshow_delay = 3000; // delay in milliseconds (3000 = 3 secs)
var resize_delay = 100; // delay in milliseconds (100 = 0.1 secs)
var width = 1020; // Browser window width - pixels
var thumbnails = false;
var large = false;
var page;
var current;
var min;
var max;
var slmin;
var slmax;
var heading;
var imgarray;

//                                          Start of functions called by HTML ' album.htm ' file.

//onclick() img call - img1 to img12 Thumbnail table enlarge call.
function display(n)
{
  if((document.getElementById('control3').style.color != "black") && (n <= slmax))
  {
    thumbnails = false;
    large = true;
    document.getElementById('lay2').style.visibility = "hidden";
    document.getElementById('control3').style.color = "black";
    document.getElementById('myphoto').style.visibility = "visible";
    enlarge(n);
  }
}

// Next > >  - button call control5 - also called by slideshow auto() - display next image or next thumbnail page.
function next()
{
  if(large == true)
  {
    current++;
    if(current > slmax)
    {
      current = slmin;
    }
    enlarge(current);
  }
  else if(thumbnails == true)
  {
    pageup();
  }
}

// < <  Previous - button call control2 - display previous image or previous thumbnail page.
function previous()
{
  if(large == true)
  {
    current--;
    if(current < slmin)
    {
      current = slmax;
    }
    enlarge(current);
  }
  else if(thumbnails == true)
  {
    pagedown();
  }
}

// | < < First - button call control1 - also called by pageup() - displays first image or first thumbnail page.
function begin()
{
  if(large == true)
  {
    current = slmin;
    enlarge(current);
  }
  else if(thumbnails == true)
  {
    min = slmin;
    max = min+11;
    page = 1;
    newpage();
  }
}   

// Last > > | - button call control6 - also called by pagedown() - displays last image or last thumbnail page.
function end()
{
  if(large == true)
  {
    current = slmax;
    enlarge(current);
  }
  else if((thumbnails == true) && (max < slmax))
  {
    while(min <= slmax)
    {
      page++;
      min = min+12;
    }
    page--;
  min = min-12;
  max = slmax;
  newpage();
  }
}

// View Thumbnails - button call control3 - displays thumbnail page.
function thumbs()
{
  if (document.getElementById('control3').style.color == "black")
  {
    document.getElementById('myphoto').style.visibility = "hidden";
    document.getElementById('control3').style.color = "white";
    document.getElementById('control1').style.visibility = "visible";
    document.getElementById('control2').style.visibility = "visible";
    document.getElementById('control5').style.visibility = "visible";
    document.getElementById('control6').style.visibility = "visible";
    document.getElementById('mycaption').innerHTML = "Click on a Photo above to enlarge or use controls below.";
    document.getElementById('lay2').style.visibility = "visible";
    document.getElementById('lay3').style.visibility = "visible";
    thumbnails = true;
    large = false;
  }
}

//External - called on load from body of html code to initialise folder(n) or newalbum().
function initial()
{
  if (single)
  {
    initfolder(folder);
    document.getElementById('control7').value = "Back Page";
  }
  else
  {
    newalbum();
  }
  if (document.compatMode == 'CSS1Compat' && !window.opera)
  {
    getsize();
  }
}

//External - onclick() Image call - Image1 to Image6 Album table call.
function newfolder(n)
{
  if (imgarray0[n][2] != 'blank')
  {
    initfolder(n);
  }
}

//Slideshow - button call contro4 - Slideshow document.getElementById('control.
function slideshow(text)
{
  document.getElementById('control1').style.visibility = "visible";
  document.getElementById('control2').style.visibility = "visible";
  document.getElementById('control5').style.visibility = "visible";
  document.getElementById('control6').style.visibility = "visible";
  if (text == "Stop")
  {
    document.getElementById('control4').value = "Slideshow";
    thumbnails = false;
    document.getElementById('control3').style.color = "black";
  }
  else
  {
    document.getElementById('control4').value = "Stop";
    large = true;
    document.getElementById('control3').style.color = "white";
    document.getElementById('lay2').style.visibility = "hidden";
    document.getElementById('myphoto').style.visibility = "visible";
    auto();
  }
}

// Back to Index - button call control7 - Returns back to Index page window.
function back_win()
{
  if (album || single)
  {
    window.history.back();
  }
  else
  {
    document.getElementById('control1').style.visibility = "hidden";
    document.getElementById('control2').style.visibility = "hidden";
    document.getElementById('control5').style.visibility = "hidden";
    document.getElementById('control6').style.visibility = "hidden";
    document.getElementById('myphoto').style.visibility = "hidden";
    document.getElementById('lay3').style.visibility = "hidden";
    document.getElementById('lay2').style.visibility = "hidden";
    document.getElementById('lay1').style.visibility = "visible";
    album = true;
  }
}

//                                          End of functions called by HTML ' image.htm ' file.

//                                          Start of functions internal to this file called by above.

// Internal - called by pagedown(), pageup(), begin() & end() - displays new thumbnail page.
function newpage()
{
  if (max > slmax)
  {
    max = slmax;
  }
  
  if (min < slmin)
  {
    min = slmin;
  }

  for (n = 1;n <= 12;n++)
  {
    img = "img"+n;
    div = "Div"+n;
    if (n <= max-min+1)
    {
      document.getElementById(img).src = imgarray[n+min-1][0];
      document.getElementById(div).innerHTML = imgarray[n+min-1][1];
    }
    else
    {
      document.getElementById(img).src = blank;
      document.getElementById(div).innerHTML = '   ';
    }
  }
  document.getElementById('text2').innerHTML = page + ". " + heading;
}

// Internal enlarge call - called by display(), next(), previous(), end() & begin().
function enlarge(n)
{
  current = n;
  document.getElementById('myphoto').src = imgarray[n][0];
  document.getElementById('mycaption').innerHTML = imgarray[n][2];
}

// Internal - Called by next() - Display Next Page of thumbnails.
function pageup()
{
  min = min+12;
  if(min > slmax)
  {
    begin();
  }
  else
  {
    max = min+11;
    page++;
    newpage();
  }
}

 // Internal - Called by previous() - Display Previous Page of thumbnails.
function pagedown()
{
  min = min-12;
  if(min < slmin)
  {
    end();
  }
  else
  {
    max = min+11;
    page--;
    newpage();
  }
}

// Internal - Called by slideshow(text).
function auto()
{
  if (document.getElementById('control4').value == "Stop")
  {
    next();
    setTimeout("auto()", slideshow_delay);
  }
}

// Internal - called by initial() - Continuous loop to get window size.
function getsize()
{
  w = document.documentElement.clientWidth;
  if (w > width+20 || w < width-20)
  {
    width = w;
    resize();
  }
  setTimeout("getsize()", resize_delay);
}

// Internal - called by getsize() - resizes window.
function resize()
{
  thheight = Math.round((width/1020)*120); //Thumnail height
  if(!single)
  {
    for (n = 1;n <= maxarray;n++)
    {
      img = "Image"+n;
      div = "capt"+n;
      document.getElementById(img).style.height = thheight; //newalbum thumnail height
    }
    document.getElementById('head1').style.height = Math.round((width/1020)*hdrht); //Album header image height
    document.getElementById('tbl1').style.height = Math.round((width/1020)*620); //newalbum table height
  }
  for (n = 1;n <= 12;n++)
  {
    img = "img"+n;
    div = "Div"+n;
    document.getElementById(img).style.height = thheight; //Thumnail table thumnail height
  }
  document.getElementById('myphoto').style.height = Math.round((width/1020)*560); //Large image height
  document.getElementById('tbl2').style.height = Math.round((width/1020)*560); //Thumnail table height
}

//External - called by initial() and newfolder(n).
function initfolder(n)
{
  if (n == 0)
  {
  }
  else if (n == 1)
  {
    heading = heading1;
    slmin = slmin1;
    slmax = slmax1;
    imgarray = imgarray1;
  }
  else if (n == 2)
  {
    heading = heading2;
    slmin = slmin2;
    slmax = slmax2;
    imgarray = imgarray2;
  }
  else if (n == 3)
  {
    heading = heading3;
    slmin = slmin3;
    slmax = slmax3;
    imgarray = imgarray3;
  }
  else if (n == 4)
  {
    heading = heading4;
    slmin = slmin4;
    slmax = slmax4;
    imgarray = imgarray4;
  }
  else if (n == 5)
  {
    heading = heading5;
    slmin = slmin5;
    slmax = slmax5;
    imgarray = imgarray5;
  }
  else if (n == 6)
  {
    heading = heading6;
    slmin = slmin6;
    slmax = slmax6;
    imgarray = imgarray6;
  }
  page = 1;
  current = slmin-1;
  min = slmin;
  max = min+11;
  album = false;
  thumbnails = false;
  large = true;
  document.getElementById('lay1').style.visibility = "hidden";
  document.getElementById('control3').style.color = "black";
  document.getElementById('control4').style.color = "black";
  document.getElementById('control7').value = "Back to Index";
  document.getElementById('myphoto').style.visibility = "visible";
  document.getElementById('lay3').style.visibility = "visible";
  enlarge(0);
  document.getElementById('mycaption').innerHTML = "Click controls below to select Thumbnails or Slideshow.";
  newpage();
}

// Internal - called by initial() - Initialises and displays new album page.
function newalbum()
{
  album = true;
  for (n = 1;n  <=  maxarray;n++)
  {
    img = "Image"+n;
    div = "capt"+n;
    document.getElementById(img).src = imgarray0[n][0];
    document.getElementById(div).innerHTML = imgarray0[n][1];
  }
  document.getElementById('text1').innerHTML = heading0;
  document.getElementById('head1').src = hdrimg;
}

//                                          End of functions internal to this file.
