//
// jQuery code for the front page of 2011
//
// preloading images comes from
// http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

Drupal.behaviors.frontPageAnimation = function (context) {
  var currentPic = -1, lastPic = -1;
  var lastMiddleImage = '';
  var isHovering = false;
  var pathToImage = "/" + Drupal.settings.goldman_custom.pathToTheme + "/images/";
  var goldmanTimeout = 0;
  var imageCache = [];
  var defaultImage = '/sites/goldmanprize.org/themes/goldmanprize/images/Raoul_big.png';

  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var anImage = document.createElement('img');
      anImage.src = arguments[i];
      imageCache.push(anImage);
      }
    }

  jQuery.preLoadImages(pathToImage + "greenBlock0-2011.png", pathToImage + 'greenBlock1-2011.png', pathToImage + 'greenBlock2-2011.png', pathToImage + 'greenBlock3-2011.png', pathToImage + 'greenBlock4-2011.png', pathToImage + 'greenBlock5-2011.png');
  jQuery.preLoadImages(pathToImage + "middleImage0-2011.jpg", pathToImage + "middleImage1-2011.jpg", pathToImage + "middleImage2-2011.jpg", pathToImage + "middleImage3-2011.jpg", pathToImage + "middleImage4-2011.jpg", pathToImage + "middleImage5-2011.jpg");

  if (Drupal.settings.goldman_custom && !goldmanTimeout) {
      // Set timeout function according to the delay passed
      // via the settings in goldman_custom.init().
      goldmanTimeout = setInterval(showNextPicture, Drupal.settings.goldman_custom.picDelay);
      
  }

  // Assign hover functions to all the images

  // == LEFT COLUMN ==
  // == Image 0 ==
  $('#headshot0').hover( function() {
    isHovering = true;
    if (lastPic != 0) { turnOffGreenBlock(lastPic); }
    turnOnGreenBlock(0);
  }, function () {
    // do nothing
  });

  // when hovering over green block, do nothing
  // when moving off then change back to headshot
  // have to split functions over two images otherwise multiple events get
  // triggered alternately and the images "wobble"
  $('#greenBlock0').hover( function() {
    // do nothing
  }, function () {
    turnOffGreenBlock(0);
    // turnOffGreenBlock uses previous middle image but when stopping hovering
    // we always want it to go back to the initial image
    $('#middleimage').attr("src", defaultImage);
    isHovering = false;
  });

  // == Image 1 ==

  $('#headshot1').hover( function() {
    isHovering = true;
    if (lastPic != 1) { turnOffGreenBlock(lastPic); }
    turnOnGreenBlock(1);
  }, function () {
    // do nothing
  });

  $('#greenBlock1').hover( function() {
    // do nothing
  }, function () {
    turnOffGreenBlock(1);
    // turnOffGreenBlock uses previous middle image but when stopping hovering
    // we always want it to go back to the initial image
    $('#middleimage').attr("src", defaultImage);
    isHovering = false;
  });

  // == Image 2 ==

  $('#headshot2').hover( function() {
    isHovering = true;
    if (lastPic != 2) { turnOffGreenBlock(lastPic); }
    turnOnGreenBlock(2);
  }, function () {
    // do nothing
  });

  $('#greenBlock2').hover( function() {
    // do nothing
  }, function () {
    turnOffGreenBlock(2);
    // turnOffGreenBlock uses previous middle image but when stopping hovering
    // we always want it to go back to the initial image
    $('#middleimage').attr("src", defaultImage);
    isHovering = false;
  });

  // == RIGHT COLUMN ==
  // == Image 3 ==
  $('#headshot3').hover( function() {
    isHovering = true;
    if (lastPic != 3) { turnOffGreenBlock(lastPic); }
    turnOnGreenBlock(3);
  }, function () {
    // do nothing
  });

  $('#greenBlock3').hover( function() {
    // do nothing
  }, function () {
    turnOffGreenBlock(3);
    // turnOffGreenBlock uses previous middle image but when stopping hovering
    // we always want it to go back to the initial image
    $('#middleimage').attr("src", defaultImage);
    isHovering = false;
  });

  // == Image 4 ==

  $('#headshot4').hover( function() {
    isHovering = true;
    if (lastPic != 4) { turnOffGreenBlock(lastPic); }
    turnOnGreenBlock(4);
  }, function () {
    // do nothing
  });

  $('#greenBlock4').hover( function() {
    // do nothing
  }, function () {
    turnOffGreenBlock(4);
    // turnOffGreenBlock uses previous middle image but when stopping hovering
    // we always want it to go back to the initial image
    $('#middleimage').attr("src", defaultImage);
    isHovering = false;
  });

  // == Image 5 ==

  $('#headshot5').hover( function() {
    isHovering = true;
    if (lastPic != 5) { turnOffGreenBlock(lastPic); }
    turnOnGreenBlock(5);
  }, function () {
    // do nothing
  });

  $('#greenBlock5').hover( function() {
    // do nothing
  }, function () {
    turnOffGreenBlock(5);
    // turnOffGreenBlock uses previous middle image but when stopping hovering
    // we always want it to go back to the initial image
    $('#middleimage').attr("src", defaultImage);
    isHovering = false;
  });

  function showNextPicture () {
    // If user is hovering, ignore the trigger
    if (isHovering) return;

    // If we have already switched images, turn off current greenBlock, text and middle image
    if (lastPic != -1) {
      turnOffGreenBlock(lastPic);
    }
    // Try random when problem with Safari figured out
    //currentPic = Math.floor(Math.random() * 6);
    currentPic++;
    if (currentPic > 5) currentPic = 0;

    lastPic = currentPic;
    //alert("currentpic:" + currentPic);

    // Show green block and associated middle image
    turnOnGreenBlock(currentPic);
  }

  // Given an image number, swap greenBlock for the headshot
  function turnOnGreenBlock(theBlock) {
    lastMiddleImage = $('#big_middle_image').attr("src");
    $('#big_middle_image').attr("src", pathToImage + "middleImage" + theBlock +"-2011.jpg");
    $('#headshot' + theBlock).hide();		  // hide the headshot
    $('#greenBlock' + theBlock).show();       // turn on green block
  }

  // Given an image number, swap headshot back
  function turnOffGreenBlock(theBlock) {
    // might get sent -1
    if (theBlock >= 0 ) {
      greenBlockName = "#greenBlock" + theBlock;
      headshotName = "#headshot" + theBlock;
      $(greenBlockName).hide();     // turn off green block
      $(headshotName).show();       // turn on headshot
      $('#big_middle_image').attr("src", lastMiddleImage);
    }
  }


}