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

Jenny Holzer Xenon Projection Website, application.js (09/29/2008)
(c) 2008 BuzaMoto. All rights reserved.

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

// ----------------------------------------------------------------------------
// GLOBALS
// ----------------------------------------------------------------------------
var infoBoxTimer = null;
var INFOBOX_DURATION = 5000;
var zoomImages = {};
var zoomImageIds = [];
var zoomImageIndex = 0;
var zoomImageFrameTemplate = '\
  <div id="zoomImageToolbar">\
    <div id="city_year">\
      <div id="city_line">\
        <div class="city_year">\
          <span id="zoomImageCityIndex">City</span>\
        </div>\
      </div><br class="clear" />\
      <div class="city_year">\
        <div style="float: left; width: 100%;">\
          <div style="float: left;">\
            <a id="zoomImageSitesLink" class="zoomImageButton" href="#" onclick="closeZoomFrame(); this.blur(); return false;">Sites</a>\
            <span id="zoomImageNav">\
              <a class="zoomImageButton" href="#" onclick="prevZoomImage(); this.blur(); return false;">&lt;</a>\
              <a class="zoomImageButton" href="#" onclick="nextZoomImage(); this.blur(); return false;">&gt;</a>\
            </span>\
          </div>\
          <div style="float: right;">\
            <a id="zoomImageCreditsLink" class="zoomImageButton" href="credit.php">Credits</a>\
          </div>\
        </div>\
      </div>\
    </div>\
    <div style="float: right;">\
      <a class="zoomImageButton" href="../../list.php">City Index</a>\
    </div>\
  </div><br class="clear" />\
  <table cellspacing="0" cellpadding="0" border="0" style="width: 100%; height: 100%; margin-top: 20px;">\
    <tr valign="top"><td align="center" style="padding-top: 0px;">\
      <div id="zoomImageContainer">\
        <img id="zoomImage" src="" /><br />\
        <div id="zoomImageAnnotation"></div>\
        </div>\
    </td></tr>\
  </table>';
var zoomImageFrameCreditTemplate = '\
  <div id="zoomImageToolbar">\
    <div id="city_year">\
      <div id="city_line">\
        <div class="city_year">\
          <span id="zoomImageCityIndex">City</span>\
        </div>\
      </div><br class="clear" />\
      <div class="city_year">\
        <div style="float: left; width: 100%;">\
          <div style="float: left;">\
            <a id="zoomImageCreditsLink" class="zoomImageButton" href="#" onclick="closeZoomFrame(); this.blur(); return false;">Credits</a>\
            <span id="zoomImageNav">\
              <a class="zoomImageButton" href="#" onclick="prevZoomImage(); this.blur(); return false;">&lt;</a>\
              <a class="zoomImageButton" href="#" onclick="nextZoomImage(); this.blur(); return false;">&gt;</a>\
            </span>\
          </div>\
          <div style="float: right;">\
            <a id="zoomImageSitesLink" class="zoomImageButton" href="index.php">Sites</a>\
          </div>\
        </div>\
      </div>\
    </div>\
    <div style="float: right;">\
      <a class="zoomImageButton" href="../../list.php">City Index</a>\
    </div>\
  </div><br class="clear" />\
  <table cellspacing="0" cellpadding="0" border="0" style="width: 100%; height: 100%; margin-top: 20px;">\
    <tr valign="top"><td align="center" style="padding-top: 0px;">\
      <div id="zoomImageContainer">\
        <img id="zoomImage" src="" /><br />\
        <div id="zoomImageAnnotation"></div>\
        </div>\
    </td></tr>\
  </table>';

Position.getWindowSize = function(w) {
  var width, height;
  w = w ? w : window;
  width = w.innerWidth || (w.document.documentElement.clientWidth || w.document.body.clientWidth);
  height = w.innerHeight || (w.document.documentElement.clientHeight || w.document.body.clientHeight);
  return { width: width, height: height };
}


// ----------------------------------------------------------------------------
// UTILITIES
// ----------------------------------------------------------------------------
function setResize() {
  var frame = $('zoomImageFrame');
  if (frame)
    frame.setStyle({height: Position.getWindowSize().height+'px'});
}

function createFrame() {
  var zoomImageFrame = document.createElement('div');
  zoomImageFrame.setAttribute('id', 'zoomImageFrame');
  zoomImageFrame.setAttribute('style', 'display: none;');
  zoomImageFrame.innerHTML = zoomImageFrameTemplate;
  document.body.appendChild(zoomImageFrame);
  $('zoomImageFrame').hide();
}

function createFrameCredit() {
  var zoomImageFrame = document.createElement('div');
  zoomImageFrame.setAttribute('id', 'zoomImageFrame');
  zoomImageFrame.setAttribute('style', 'display: none;');
  zoomImageFrame.innerHTML = zoomImageFrameCreditTemplate;
  document.body.appendChild(zoomImageFrame);
  $('zoomImageFrame').hide();
}

function displayZoomImage(img_ref) {
  // lets load image
  var img_obj = $(img_ref);
  if (!zoomImages[img_obj.id]) {
    zoomImages[img_obj.id] = new Image();
    var img_name = "";
    if (img_obj.src.match(/thumb/))
      img_name = img_obj.src.substring(0, img_obj.src.length-10);
    else
      img_name = img_obj.src.substring(0, img_obj.src.length-4);
    zoomImages[img_obj.id].src = img_name + '-large.jpg';
    zoomImages[img_obj.id].onload = function() { $('zoomImageContainer').setStyle({width: zoomImages[img_obj.id].width+'px'}) };
  }
  
  // setup frame
  var frame = $('zoomImageFrame');
  frame.setStyle({height: Position.getWindowSize().height+'px'});
  
  // load image
  var imgContainer = $('zoomImageContainer');
  if (imgContainer.visible()) imgContainer.hide();
  var img = $('zoomImage');
  img.onclick = function() { nextZoomImage(); this.blur(); };
  img.src = zoomImages[img_obj.id].src;
  
  // show frame
  zoomImageIndex = zoomImageIds.indexOf(img_ref);
  if (zoomImageIndex >= 0) {
    $('zoomImageContainer').setStyle({width: zoomImages[img_obj.id].width+'px'});
    if (!frame.visible()) {
      Effect.Appear(frame, {
        duration: 0.25,
        afterFinish: function() { loadZoomImage(zoomImages[img_obj.id], imgContainer); }
      });
    } else {
      loadZoomImage(zoomImages[img_obj.id], imgContainer);
    }
  }
}

function loadZoomImage(img, imgContainer) {
  if (img.complete) {
    // new Effect.Parallel([
    //       new Effect.BlindDown(imgContainer, { sync: true}), 
    //       new Effect.Appear(imgContainer, { sync: true }) 
    //     ], { duration: 0.5});
    new Effect.Appear(imgContainer, { duration: 0.5 });
  } else {
    window.setTimeout(function() { loadZoomImage(img, imgContainer); }, 500);
  }
}

function closeZoomFrame() {
  var imgContainer = $('zoomImageContainer');
  var frame = $('zoomImageFrame');
  // new Effect.Parallel([
  //   new Effect.BlindUp(imgContainer, { sync: true}), 
  //   new Effect.Fade(imgContainer, { sync: true }) 
  // ], {
  //   duration: 0.5,
  //   afterFinish: function() { new Effect.Fade(frame, { duration: 0.25} ); }
  // });
  new Effect.Fade(imgContainer, { duration: 0.5, afterFinish: function() { new Effect.Fade(frame, { duration: 0.25} ); } });
}

function nextZoomImage() {
  zoomImageIndex++;
  if (zoomImageIndex >= zoomImageIds.length) zoomImageIndex = 0;
  var imgContainer = $('zoomImageContainer');
  //   new Effect.Parallel([
  //     new Effect.BlindUp(imgContainer, { sync: true}), 
  //     new Effect.Fade(imgContainer, { sync: true }) 
  //   ], {
  //     duration: 0.5,
  //     afterFinish: function() {
  //       displayZoomImage(zoomImageIds[zoomImageIndex]);
  //     }
  //   });
  new Effect.Fade(imgContainer, { duration: 0.25, afterFinish: function() {displayZoomImage(zoomImageIds[zoomImageIndex]);} });
}

function prevZoomImage() {
  zoomImageIndex--;
  if (zoomImageIndex < 0) zoomImageIndex = zoomImageIds.length - 1;
  var imgContainer = $('zoomImageContainer');
  //   new Effect.Parallel([
  //     new Effect.BlindUp(imgContainer, { sync: true}), 
  //     new Effect.Fade(imgContainer, { sync: true }) 
  //   ], {
  //     duration: 0.5,
  //     afterFinish: function() {
  //       displayZoomImage(zoomImageIds[zoomImageIndex]);
  //     }
  //   });
  new Effect.Fade(imgContainer, { duration: 0.25, afterFinish: function() {displayZoomImage(zoomImageIds[zoomImageIndex]);} });
}

function showInfoBox(action) {
  var infoBox = $('footer-popup');
  if (action != 'show' && action != 'hide')
    return;
  else {
    switch(action) {
      case 'show':
        if (infoBoxTimer) {
          window.clearTimeout(infoBoxTimer);
          infoBoxTimer = window.setTimeout(function() {showInfoBox('hide');}, INFOBOX_DURATION);
        } else {
          infoBoxTimer = window.setTimeout(function() {showInfoBox('hide');}, INFOBOX_DURATION);
          if (!infoBox.visible()) {
            new Effect.Parallel([
              new Effect.Morph('footer-wrapper', {
                style: {
                  background: '#efefef'
                },
                synch: true
              }),
              new Effect.BlindDown(infoBox, {synch: true})
            ], { 
              duration: 0.8
            });
          }
        }
        break;
      case 'hide':
        new Effect.Parallel([
          new Effect.Morph('footer-wrapper', {
            style: {
              background: '#fff'
            },
            synch: true
          }),
          new Effect.BlindUp(infoBox, {synch: true})
        ], { 
          duration: 0.8,
          afterFinish: function() { infoBoxTimer = null; }
        });
        break;
    }
  }
}


// ----------------------------------------------------------------------------
// ONLOAD
// ----------------------------------------------------------------------------
Event.observe(window, 'load', function() {
  setResize();
  
  var delay = 0;
  $$(".autoload").each(function(module) {
    window.setTimeout(function() {
      new Effect.Appear(module, {duration: 0.5});
    }, ++delay*50);
  });
  
  // collect zoomImages
  $$(".zoomImage").each(function(img) {
    zoomImageIds.push(img.id);
  });
  
  // initally create frame
  // if (!$('zoomImageFrame'))
  //   createFrame();
  
});

Event.observe(window, 'resize', function() { setResize(); });