/*
 *--------------------------------------------------------------------------
 *
 *  W W W - T h u m b n a i l s h o w
 *
 *  Thumbnails are added dynamically depending on the scrollbar position
 *  if more than %SCROLLANZ% images (slideShowParams.bat)
 *
 *  made with HTML5, CSS3, and Vanilla JavaScript
 *
 *  peter@danninger.eu                                      18.01.2017
 *
 *--------------------------------------------------------------------------
 */

//----------------------------------------------------------------------------
var thumbShow = thumbShow || {};                // namespace
//----------------------------------------------------------------------------
thumbShow._copyright = "peter@danninger.eu";    // copyright
thumbShow._version = "18.01.2017";              // version
//----------------------------------------------------------------------------

thumbShow.off = 200;              // position of scrollbar to add thumbnails
thumbShow.cnt = 0;                // thumbnail counter
thumbShow.busy = false;           // busy, image loading onscroll
//
// called from index.html   onload | onresize | onscroll
//
thumbShow.scrollPos = function (opts) {
  //
  // opts.iconDir                 // directory with the icons
  // opts.thumbDir                // directory with the thumbnails 
  // opts.imageNam                // name of images without 3 digit sequence at the end
  // opts.slideShow               // slideshow file
  // opts.thumbClass              // className of thumbnails
  // opts.imageNum                // number of images
  // opts.thumbHeight             // thumbnail height
  // opts.scrollDIV               // ID of scrolling DIV
  //
  if (thumbShow.busy == true)     return;
  thumbShow.busy = true;
  window.onscroll = null;
  //
  var i, a, img, cntt, delta, scri, versID;
  var el = document.getElementById (opts.scrollDIV);
  var schgt1 = Math.floor (document.documentElement.scrollHeight);
  var schgt2 = Math.floor (document.body.scrollHeight);
  var schgt = (schgt1 > schgt2) ? schgt1 : schgt2;
  var sctop1 = Math.floor (document.documentElement.scrollTop);
  var sctop2 = Math.floor (document.body.scrollTop);
  var sctop = (sctop1 > sctop2) ? sctop1 : sctop2;
  var wiw = window.innerWidth;
  var wih = window.innerHeight;
  var diff = schgt - sctop - wih;
  var hsp3 = "\u00a0\u00a0\u00a0";            // 3 UTF hardspaces
  //
  // we guess the number of thumbnails on start depending on the screensize
  //
  var guess = Math.floor (wiw * wih / opts.thumbHeight / opts.thumbHeight);
  // guess = Math.floor (guess / 2);          // for scroll icon test
  //
  // add copyright and version
  //
  if (thumbShow.cnt == 0) {
    versID = document.getElementById ("version");
    if (versID != null && (typeof versID == "object" || typeof versID == "function") && versID.firstChild != null) {
      versID.firstChild.data = "Thumbnail Show:" + hsp3 + thumbShow._copyright + hsp3 + thumbShow._version;
    }
  }
  //
  // onscroll add approx. 2 lines of thumbnails
  //
  cntf = Math.floor (wiw / opts.thumbHeight / 1.5 * 2);
  //
  // onload fill the screen with thumbnails
  //
  if (thumbShow.cnt == 0) {
    cntf = guess;
    document.documentElement.scrollTop = 0;
    document.body.scrollTop = 0;
    window.setTimeout (function () {
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
    }, 200);
  }
  //
  // load more thumbnails
  //
  if (diff < thumbShow.off && thumbShow.cnt <= opts.imageNum) {
    scri = document.getElementById ("scroll");      // remove scroll icon if there is one
    if (scri != null && (typeof scri == "object" || typeof scri == "function")) {
      scri.parentNode.removeChild (scri);
    }
    delta = opts.imageNum - thumbShow.cnt;
    if (cntf > delta)               cntf = delta;
    for (i = 0; i < cntf; ++i) {
      thumbShow.cnt++;
      if (thumbShow.cnt > opts.imageNum)    break;
      cntt = ("00" + thumbShow.cnt).slice (-3);
      a = document.createElement ("a");
      a.href = opts.slideShow + "?startNr=" + cntt;
      a.target= "_blank";
      img = document.createElement ("img");
      img.className = opts.thumbClass;
      img.style.height = opts.thumbHeight + "px";
      img.src = opts.thumbDir + opts.imageNam + cntt + ".jpg";
      a.appendChild (img);
      el.appendChild (a);
    }
    delta = opts.imageNum - thumbShow.cnt;
    if (delta > 0) {        // add scroll icon just in case (normally not visible)
      a = document.createElement ("a");
      a.id = "scroll";
      a.href = "Javascript:_scroll()";
      img = document.createElement ("img");
      img.id = "scrollIcon";
      img.style.height = (opts.thumbHeight - 20) + "px";
      img.src = opts.iconDir + "scroll.png";
      a.appendChild (img);
      el.appendChild (a);
    }
  }
  //
  // activate onscroll event
  //
  window.setTimeout (function () {
    thumbShow.busy = false;
    window.onscroll = function () {
      thumbShow.scrollPos (opts);
    }
  }, 100);
}
//
// the end
//
