/*


Dynamic Application of Functions to DOM
*/
var _debugMode = false;
document.observe('dom:loaded', init);
Event.observe(window, 'load', initAfterImages);


function init () {
  $('main', 'sub').compact().equalizeHeights();
  setupPageTransition();
  setupGalleryInfoAnimation();
  setupGalleryImageActions();
}

function initAfterImages () {
  
}

/*
Background colors used in this design
#0899D7 default 
#C6161D campaign-strategies 
#4D6A78 direct-mail 
#8FAF3E grassroots-advocacy 
#F26640 public-affairs 
#666    gallery

*/

function setupPageTransition() {

  //rather than putting a listener on every single link I am just putting a big ass one on the body
  $(document.body).observe('click', function(e) {
    var pageColors = { 
      'default': '#0899D7',
      'campaign-strategy': '#AD2A21',
      'direct-mail': '#4D6A78',
      'grassroots-advocacy': '#5F9510',
      'public-affairs': '#D96C44',
      'portfolio' : '#666'
    };
    
    //we only want to intercept links that point to pages on the site
    if (!e.element().match('a[href^="/"]')) return;
    e.stop();
    e.element().blur();

    var colorKey = e.element().href.include('galleries') ? 'portfolio' : e.element().href.split('/').pop();
    var color = pageColors[colorKey] || pageColors['default'];
    var href = e.element().href;
    
    new Effect.Morph($(document.body), {
      style: 'background-color: ' + color,
      duration: .25,
      afterFinish: function() {
        document.location = href;
      }
    });
  });
}

function setupGalleryInfoAnimation() {
  var showInfo = $('show-info');
  var hideInfo = $('hide-info');
  var galleryInfo = $('gallery-info');
  
  //make sure neccessary dom objects are there
  if (!showInfo || !hideInfo || !galleryInfo) return;
  
  $('show-info').observe('click', function(e){
    e.stop();
    e.element().blur();
    showInfo.fade({duration: .5, queue: { scope: 'info', limit: 2}});
    galleryInfo.appear({duration: .5, queue: { scope: 'info', limit: 2}});
  });
  
  $('hide-info').observe('click', function(e){
    e.stop();
    e.element().blur();
    galleryInfo.fade({duration: .5, queue: { scope: 'info', limit: 2}});
    showInfo.appear({duration: .5, queue: { scope: 'info', limit: 2}});
  });
}

function setupGalleryImageActions() {
  //no slideshow
  var localSlideshow = slideshow;
  if (!localSlideshow) return;
  var thumbLinks = $('sub-head');
  var feature = $('feature');
  
  //set the first thumbnail as active
  thumbLinks.select('a')[0].addClassName('active');
  
  //updated thumbnails based on the image being shown
  document.observe('SlideShow_feature:transitioned', function(e) {
    thumbLinks.select('.active')[0].removeClassName('active');
    var thumbpath = e.memo.coming.src.split('/').pop().split('.');
    thumbpath[0] += '_thumb';
    thumbpath = thumbpath.join('.');
    $$('img[src$="' + thumbpath + '"]')[0].up().addClassName('active');
  });
  
  thumbLinks.observe('click', function(e) {
    if (!e.element().match('img')) return;
    e.stop();
    e.element().blur();
    thumbLinks.select('.active')[0].removeClassName('active');
    e.element().up().addClassName('active');
    localSlideshow.end();
    feature.select('.currentSlide')[0].fade({duration: .5, queue: 'front'}).removeClassName('currentSlide');
    var thumbpath = e.element().src.split('/').pop().gsub('_thumb', '');
    $$('img[src$="'+ thumbpath + '"]')[0].appear({duration: .5, queue: 'end'}).addClassName('currentSlide');
  });
}