// on doc ready, attach functionality for the faders
$(function() {
  
// paths for images
  var header_path     = "/img/header/";
 
// highlights images and URLs 
  var highlights_images = [$("#highlights-image-element-0").attr('src'),
                                $("#highlights-image-element-1").attr('src'),
                                $("#highlights-image-element-2").attr('src')];

  var highlights_urls = [$("#highlights-image-link-0").attr('href'),
                         $("#highlights-image-link-1").attr('href'),
                         $("#highlights-image-link-2").attr('href')];

// header image sets and set list  
  var set1 = {'1': ['set1-jim-bell.jpg', '195'],
              '2': ['set2-beaver-stadium.jpg', '81'],
              '3': ['set1-amish.jpg', '79'],
              '4': ['set1-pgh-bridge.jpg', '72']};

  var set2 = {'1': ['set2-jim-gettysburg.jpg', '195'],
              '2': ['set1-allegheny.jpg', '80'],
              '3': ['set2-bridge.jpg', '82'],
              '4': ['set2-foundry.jpg', '72']};


  var set_list = {'1': set1, '2': set2};
  
// header max sets and max per set
// do this to save extra processing time, because
// objects dont have .length properties
  var max_per_set     = 4;
  var max_sets        = 2;


// rotation intervals for header & highlights
  var header_rotate_interval      = 1000*7;  // 6 seconds
  var highlights_rotate_interval  = 1000*6; // 10 seconds
  

  // vars for rotating and blocking
  var block_highlights = 0;
  var block_header = 0;
 
 
  // init vars to the first of the sets
  var header_curr_set = 1;
  var highlights_curr_img = 0;




  // set hovering for nav sub menu items and highlights items

  // set up triggers for news fader
  // for each link in the menu, increment item count and
  // set up click and hover functions
  $("#horiz-menu ul li a").each(function(index) {

    // set the onclicks
    $(this).click(function() {
      highlights_curr_img = index-1;
      highlights_fader(index);
    });

    // if the user hovers over the link, dont rotate
    $(this).hover(
      function() {
        $(this).addClass("hovering");
        block_highlights = 1;
      },
      function() {
        $(this).removeClass("hovering");
        block_highlights = 0;
      });
  });

  $(".nav-sub-menu ul li a").hover(
    function() {
      $(this).addClass("hovering");
      block_highlights = 1;
    },
    function() {
      $(this).removeClass("hovering");
      block_highlights = 0;
    }
  );


  // fire header rotater initially
  //header_rotate(header_curr_set, 1);

// header_rotate
// --
// called by setInterval via rotate_header_dispatcher
// and called by itself until images are faded in
  function header_rotate(set_number, index) {
      var curr_div = "#header-rotation-" + index;
      var curr_img = "#header-image-" + index;
      
      var curr_set = set_list[set_number];

      var set_item  = curr_set[index];
      var img_src   = header_path + set_item[0];
      var div_width = set_item[1];
      var next_index = index+1;

      // if the index is 1, dont fade
      // so that we get a more smooth transition
      // once it animates and delays, call header_rotate on the next
      if(index == 1) {  
        $(curr_img).attr('src', img_src);
        
        $("#header-image-1").animate({opacity: 1.0}, 500, function() {
          header_rotate(set_number, next_index);
        });
      }
      else {
        // if not first, set some settings and fade in
        $(curr_div).css({'width': div_width});
        $(curr_img).css({'display': 'none'});
        $(curr_img).attr('src', img_src);


        // fade in, and once finished,
        // keep blocking the highlights fader
        // also show the image
        $(curr_img).fadeIn("def", function() {
          if(index < max_per_set) {
            block_highlights = 1;
            header_rotate(set_number, next_index);
          }
          else {
            block_highlights = 0;
          }
        });
      }
  }


// rotate_header_dispatcher
// --
// called through setInterval
// pick the correct set to use in calling
// header_rotate starting with image 1
// until rotating finishes, block the fader
  function rotate_header_dispatcher() {
    header_curr_set++;

    if(header_curr_set > max_sets) {
      header_curr_set = 1;
    }

    header_rotate(header_curr_set, 1);
  }

  setInterval(rotate_header_dispatcher, header_rotate_interval);


// Highlights Fading
// --
// watch #horiz-menu ul li a items for user clicks
// when clicked, init the fader

  // init the selected css for the first(default) trigger
  $("#trigger-" + highlights_curr_img).css({'background-color': '#fab82d', 'color': '#000'});
  $("#highlights-image-fade").attr('src', highlights_images[highlights_curr_img]);
  $("#highlights-image-fade").css({'display': 'inline'});


  // function to perform the fading
  function highlights_fader(index) {
    // get the image src
    var highlights_img_path = highlights_images[index];


    $("#highlights-image-fade").fadeOut("fast", function() {
      $("#highlights-image-fade").css({'display': 'none'});
      $("#highlights-image-fade").attr('src', highlights_img_path);
      $("#highlights-image-link").attr('href', highlights_urls[index]);

      $(".horiz-menu-trigger").css({'background-color': '#335392', 'color': '#fff'});
      $("#trigger-"+index).css({'background-color': '#fab82d', 'color': '#000'});
      //console.log("fading image in now index " + index);

      // fade in the image
      $("#highlights-image-fade").fadeIn("def");
    });
  }


  // this gets called by the timer, and will 
  // rotate the item if the user isnt viewing it
  // also checks to make sure we dont fade an out of bounds item
  function rotate_highlights_dispatcher() {
    if(block_highlights==0) {
      highlights_curr_img++;
      if(highlights_curr_img >= highlights_images.length) {
        highlights_curr_img = 0;
      }
      if(block_highlights != 1) {
        highlights_fader(highlights_curr_img);
      }
      else {
        highlights_curr_img--;
      }
    }
  }
      
  setInterval(rotate_highlights_dispatcher, highlights_rotate_interval);


});