// might need to move this into a proper .js file.
var showHeader = {};

$(document).ready(function() {
  // define showHeader now we're ready
  showHeader = function(name)
  { 
    var w = $("#screenbar_container ul li").width();
    var header = $("#screenbar_container ul li"+name);
    var index = $("#screenbar_container ul li").index(header);
    var p = index*w*-1;
    $("#screenbar_container ul").animate({
      marginLeft: p
    }, { duration: "normal", queue: false });
  }
  
  // see if one of the images is marked as a default, if so we use that
  var defaultImage = $("#screenbar_container ul li").index($("#screenbar_container ul li.default"));
  if (defaultImage == -1)
  {
    defaultImage = 0;
  }
  
  $("#header li").hover(function(event) {
    var l = $(this).position().left;
    var i = ((l - 190) / 150) + 1;
    
    $("#selector").css("visibility", "visible");
    // see if we have an <a> in here and set the href
    if ($(this).children("a")[0])
    {
      $("#selector").attr("href", $(this).children("a:first").attr("href"));
    }
    // move the selector to the right place
    $("#selector").animate({
      "left": l
    }, { duration: "normal", queue: false });
    
    // move the screen bar to the right image
    var p = i*w*-1;
    $("#screenbar_container ul").animate({
      marginLeft: p
    }, { duration: "normal", queue: false });  
  },
  function(event) {
  });
  
  $("#header ul").mouseleave(function (event) {
    var p = defaultImage*w*-1;
    $("#selector").css("visibility", "hidden");
    $("#selector").css("left", "0");
    $("#selector").attr("href", "#");
    $("#screenbar_container ul").animate({
      marginLeft: p
    }, { duration: "normal", queue: false });
  });
  
  $("a.lionlink").hover(function(event) {
    var lionHeader = $("#screenbar_container ul li#lion_header");
    var lion = $("#screenbar_container ul li").index(lionHeader);
    var p = lion*w*-1;
    $("#screenbar_container ul").animate({
      marginLeft: p
    }, { duration: "normal", queue: false });
  },
  function(event) {
    var p = defaultImage*w*-1;
    $("#screenbar_container ul").animate({
      marginLeft: p
    }, { duration: "normal", queue: false })
  });
                  
  var w = $("#screenbar_container ul").width();
  var s = $("li", $("#screenbar_container ul")).length;
  $("#screenbar_container ul").css('width', w*s);
  $("#screenbar_container ul").css('margin-left', defaultImage*w*-1);
});