document.observe('paging:complete', setupPagerAnimation);
document.observe('paging:complete', setupImageSwap);
Event.observe(window, 'load', windowLoaded);

//**** This highlights the current page in the main nav

var navPrimary = $('nav-primary');
var pathname = window.location.pathname;
var activeEl = navPrimary.select('a[href='+pathname+']')[0];
if (activeEl) activeEl.up().addClassName('active');
else $('p-link').addClassName('active');

//**********

//********* Center images vertically on the homepage in their frames
function windowLoaded(){
  (function(){
    var imagesToCenter = $$('#gallery-callouts img');
    if (imagesToCenter.length <= 0) return;
    for (var i = imagesToCenter.length - 1; i >= 0; i--){
      var imageCenterPoint = imagesToCenter[i].getWidth() / 2;
      // there is some weird timing thing going on having to do with the cache
      if (!imageCenterPoint) return;
      var frameCenterPoint = 150;
      imagesToCenter[i].setStyle({marginLeft: -(imageCenterPoint - frameCenterPoint) + 'px'})
    };
  })();
}

//activate hompeage slideshow
new SlideShow('slideshow1', { slideDuration: 4, crossFade: true, pauseOnMouseover:false });
new SlideShow('slideshow2', { slideDuration: 4, crossFade: true, pauseOnMouseover:false });
new SlideShow('slideshow3', { slideDuration: 4, crossFade: true, pauseOnMouseover:false });



//**********

//********** on gallery detail page setup paging for thumbnails

(function(){
  var mask = $('mask');
  if (!mask) return;
  document.fire('paging:setup');
  var detailThumbs = $$('.detail-thumbs a').inGroupsOf(8); //page thumbs in groups of 10
  detailThumbs.splice(0,1); //we want to keep the first 10 thumbs there already
  for (var i=0; i < detailThumbs.length; i++) {
    detailThumbs[i].compact().invoke('remove'); //get all the paged thumbs off the page
    var thumbContainer = new Element('div', {'class': 'detail-thumbs'});
    for (var j = detailThumbs[i].length - 1; j >= 0; j--){
      thumbContainer.insert({bottom: detailThumbs[i][j]}); //add the thumbs to the new container
    }
    mask.insert({bottom: thumbContainer}); // add thumb containers to DOM
  }
  document.fire('paging:complete', {maskObj: mask, dThumbs: detailThumbs});
})();

//*************

//************* Setup animation for paging
function setupPagerAnimation(e){
  if ($$('.detail-thumbs').length <= 1) return;
  var pagerBounds = e.memo.dThumbs.length * 225, mask = e.memo.maskObj,
      next = $('next'), back = $('back');
  next.setStyle({visibility: 'visible'});
  next.observe('click', function(e) {
    e.element().blur();
    var leftPos = Number(mask.getStyle('left').gsub('px', ''));
    mask.morph({left: (leftPos - 225) + 'px'});
    if ((leftPos - 225) == -(pagerBounds)) e.element().setStyle({visibility: 'hidden'});
    back.setStyle({visibility: 'visible'});
  });
  back.observe('click', function(e){
    e.element().blur();
    var leftPos = Number(mask.getStyle('left').gsub('px', ''));
    mask.morph({left: (leftPos + 225) + 'px'});
    if ((leftPos + 225) == 0) e.element().setStyle({visibility: 'hidden'});
    next.setStyle({visibility: 'visible'});
  });
}

function setupImageSwap(e) {
  preloadImages();
  var detailPic = $('main-pic');
  var picName = $('pic-name');
  e.memo.maskObj.observe('click', function(e) {
    if (!(e.element().match('img') || e.element().match('a'))) return;
    var el = e.element().match('img') ? e.element() : e.element().down('img');
    var pathToOriginal = el.src.gsub('_thumb', '');
    var imageTitle = el.next('span').innerHTML;
    picName.innerHTML = imageTitle;
    if (Prototype.Browser.IE && !window.XMLHttpRequest) {
      var newImage = new Image();
      newImage.onload = function(){
        $$('#detail-pic img')[0].remove();
        $('detail-pic').insert({bottom: newImage});
        $$('#detail-pic img')[0].setStyle({width: '700px', height: 'auto'});
      }
      newImage.src = pathToOriginal;
    }
    else {
      detailPic.writeAttribute({src: pathToOriginal});
    }
  });
}

function preloadImages() {
  var thumbnailImgs = $$('.detail-thumbs img')
  for (var i = thumbnailImgs.length - 1; i >= 0; i--){
    var src = thumbnailImgs[i].src.gsub('_thumb', '');
    var newImage = new Image();
    newImage.src = src;
  };
}