//              ====================================================================================================
//              ======================================== slideshow functions =======================================
//              ====================================================================================================

function playPause()                                            // called from HTML only
{
  var btn = ($('btnPlayPause'))? 'btnPlayPause': 'slideshowPlayPause'; 
  $(btn).toggleClass('play-slides');                            // toggle button state...
  if ($(btn).hasClass('play-slides'))                           // if user has requested slideshow play...
  {
    if (slides.length == 0) {initSlides();}
    showSlides();                                               // start (or restart) slideshow
  }
  else                                                          // user has requested slideshow pause...
  {
    pauseSlides();                                              // pause slideshow
  }
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function initSlides()                                           // called on DOM-ready
{
  // var thumbSize = ($(document.getElement('img[class="enlargeable"]')).src.contains('small'))? 'small': 'large';
  imgIx = -1;
  $$('img[class="enlargeable"]').each(
    function(EN)
    {
      thumbs[++imgIx] = $(EN).src;
     //  slides[imgIx]   = (thumbs[imgIx].indexOf('static') > -1)?
     //                    thumbs[imgIx].replace((thumbSize + "_thumb.jpg"),"original.jpg"):
     //                    thumbs[imgIx].replace(("/" + thumbSize + "_thumb"),"");
     // replacing with code to take second parameter of onclick attribute...
     slides[imgIx]   =  EN.parentNode.innerHTML.split("showThisSlide(this, '")[1].split("')")[0].replace(/&/g,'&');
          
      ids[imgIx] = $(EN).id;
    });
  imgIx  = -1;
  slideN = slides.length - 1;
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function pauseSlides()                                          // called from playPause(); hideTheBigPicture()
{
  slideTimer = $clear(slideTimer);                              // interrupt slideshow
  if ($('btnPlayPause'))
  {
    $('btnPlayPause').className  = '';                          // replace 'pause' button with 'play' button
  }
  if ($('slideshowPlayPause'))
  {
    $('slideshowPlayPause').className  = '';                    // replace 'pause' button with 'play' button
  }
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function showSlides()                                           // called from playPause() and itself
{
// console.log("showSlides 1 :",imgIx);
  slideTimer = $clear(slideTimer);
  showNextSlide();
//  $('bigPhoto').setProperty('src',mtPic);
  slideTimer = showSlides.delay(slideWait);                     // then do it again after slideWait millisecs unless slideTimer cleared
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function showThisSlide(o)                                       // called from HTML
{
  if ($('bigPicture').getStyle('display') == 'block')
  {
    $('bigPicture').setStyle('display','none');                // make currently visible image invisible
  }

  if (slides.length == 0) {initSlides();}
  var thmSrc = (o.get('tag') == 'img')? o.src: o.getElement('img').src;
  imgIx = thumbs.indexOf(thmSrc);

  showNewSlide();
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function showNewSlide()                                        // called from showThisSlide
{
  updateBigPic();
}

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function getOriginalIx(o)                                      // called from showThisSlide
{
// this function is necessary only as long as there are static mock-ups
// for "live", only the else branch will apply

  var thumbSize = ($(document.getElement('img[class="enlargeable"]')).src.contains('small') > -1 )? 'small': 'large';
  if ($(o).getStyle('src').indexOf('static') > -1)
  {
    return slides.indexOf($(o).src.replace((thumbSize + "_thumb.jpg"),"original.jpg"));
  }
  else
  {
    return slides.indexOf($(o).src.replace(("/" + thumbSize + "_thumb"),""));
  }
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function showNextSlide()                                        // called from showSlides, loadNextImg
{
  imgIx = (imgIx<slideN)?++imgIx:0;                             // if last, set to 1st; else ++ 
  updateBigPic();

  $('bigPicture').setStyles({display:'block',position:'fixed',bottom:10,right:25});
  $('slidePrevNext').setStyle('display','block');
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function showPrevSlide()                                        // called from showSlides, loadNextImg
{
  imgIx = (imgIx==0)?slideN:--imgIx;                            // if 1st, set to last; else -- 
//  fadeBigPic();                                                 // show previous slide
  updateBigPic();
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function updateBigPic()                                          // called from HTML only
{
  $('bigPhoto').setProperty('src',slides[imgIx]); 

}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// display big picture
function displayBigPicture()
{
  if ($('photo_data_' + ids[imgIx])) {
    if ($('bodyClass')) {$('bodyClass').addClass('bigpicture')};
      // hide caption and move metadata into bigPic caption
    $('bigCaption').setStyle('display','none');  
    $('bigCaption').innerHTML = $('photo_data_' + ids[imgIx]).innerHTML;
    setFavoriteLink();
    $('bigPicture').setStyles({display:'block',position:'fixed',bottom:10,right:25});
    $('bigCaption').setStyle('display','block');
    if ($('slidePrevNext')) {$('slidePrevNext').setStyle('display','block');
    }
  }
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function setFavoriteLink()                                     // determine how to display favorite link
{
  // set class to control favorites button display
  if ($$('.owner img#' + ids[imgIx]).length > 0) 
    {$$('#bigPicture .fav_button')[0].addClass('owner')}
  else {
    // loop through fav_ids till end or fav_id > the one you seek
    for (var i = 0; i < fav_ids.length & fav_ids[i] <= ids[imgIx]; i++) { 
        // if img id = fav id, then set class to fav         
        if (fav_ids[i] == ids[imgIx]) { 
          $$('#bigPicture .fav_button')[0].addClass('favorite');
          //$('bigPicture').getElement('.fav_button img').setAttribute('src',"/images/buttons/fav_not.png");
          $('bigPicture').getElement('.fav_button img').setAttribute('title',"this photo is in your favorites album");
          $('bigPicture').getElement('.fav_button a').setAttribute('onclick', 'alert("this photo is already in your favorites album");')
          break;
        } 
    } 
  } 

}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function loadNextImg()                                          // called from HTML only
{
  pauseSlides();                                                // interrupt slideshow if it's running
  showNextSlide();
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function loadPrevImg()                                          // called from HTML only
{
  pauseSlides();                                                // interrupt slideshow if it's running
  showPrevSlide();
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function fadeBigPic()                                           // called from showNextSlide, showPrevSlide
{
//console.log('fadeBigPic  1: ',imgIx);
 $('bigPhoto').setProperty('src','images/general/bg.png');     // swap in 1x1 pixel transparent image
 $('bigPicture').setStyles({display: 'none',position:'fixed', bottom: 3000});      // shift (invisible) image from viewport
 
  loadBigPic.delay(100);
  
// the following fade-out code was causing problems. Investigate later...

/*
  var bigFadeOut = new Fx.Style($('bigPicture'),'opacity',
    {
      duration  : 50,
      transition: Fx.Transitions.Quart.easeOut,
      onComplete: function()
        {          
          $('bigPhoto').setProperty('src','images/general/bg.png'); // swap in 1x1 pixel transparent image
          $('bigPicture').setStyle('top',-3000);                // shift (invisible) image from viewport
          loadBigPic.delay(20);
        }
    });
  bigFadeOut.start(1,0);                                       // decrease opacity slowly, fading enlargement
*/
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function loadBigPic()                                           // called from fadeBigPic
{
 //console.log('loadBigPic  1: ',imgIx);

  if ($('bigPhoto').getProperty('src') !='images/general/bg.png')
  {
 //console.log('loadBigPic  2: ',$('bigPhoto').getProperty('src'));
    $('bigPhoto').setProperty('src','images/general/bg.png');   // swap in 1x1 pixel transparent image
    loadBigPic.delay(40);
  }

//console.log('loadBigPic  3: ',$('bigPhoto').getProperty('src'));
  updateBigPic();
//console.log('loadBigPic  4: ',slides[imgIx]);
  wait4Load.delay(80);
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function wait4Load()                                            // called from loadBigPic
{
  //console.log('wait4Load  0: ',$('bigPhoto').src);
  if (imgLoaded($('bigPhoto')))                      // if photo has finished loading...
  {
 //console.log('wait4Load  1: ',$('bigPhoto').src);
    placeBigPic();
  }
  else
  {
 //console.log('wait4Load  2: ',$('bigPhoto').src);
    wait4Load.delay(80);
  }
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function placeBigPic()                                          // called from wait4Load
{
 //console.log('placeBigPic  1: ');
  $('bigPicture').setStyles({display: 'block',position:'fixed',bottom:10,right:10});  // shift image to viewport
  $('slidePrevNext').setStyle('display','block');
 //console.log('placeBigPic  2: ');
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function clearBigPic()                                          // called from HTML
{
  pauseSlides();                                                // if slideshow is running, then... interrupt it
  if ($('bigPicture')){$('bigPicture').setStyle('display','none')}                // make currently visible image invisible
  if ($('bodyClass')) {$('bodyClass').removeClass('bigpicture')}
  if ($('slidePrevNext')){$('slidePrevNext').setStyle('display','none');}
}
// esta vida não é um ensaio
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//
//              ====================================================================================================
//              ========================================   slideshow speed   =======================================
//              ====================================================================================================
function slideSlow()                                                            // called from HTML only
{
  slideBtnReset();   
  slideWait = slowSlides;                                                       // set slideshow to slowest speed [defined in pageInit()]
  $('btnSlideSlow').className  = 'selected-speed';
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function slideMedium()                                                           // called from HTML only
{
  slideBtnReset();
  slideWait = medmSlides;                                                         // set slideshow to medium speed [defined in pageInit()]
  $('btnSlideMedm').className  = 'selected-speed';
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function slideFast()                                                            // called from HTML only
{
  slideBtnReset();
  slideWait = fastSlides;                                                       // set slideshow to slowest speed [defined in pageInit()]
  $('btnSlideFast').className  = 'selected-speed';
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function slideBtnReset()                                                         // called from slideSlow(), slideMedium(), slideFast()
{
  $('btnSlideSlow').className  = '';
  $('btnSlideMedm').className  = '';
  $('btnSlideFast').className  = '';
}
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~