$(document).ready(function (){
    // Append a DIV for visual use to the end of the document
    // Could also use $("BODY").append("html code");
    // note that this element is in the CSS file already, so it has absolute positioning etc. before it's created
    $("BODY").html($("BODY").html()+"<div id=\"block\"></div>");
    
  var navObj = $("#nav"); // access the nav object
  var oBlock = $("#block"); // reference the new DIV for visual use
  var followM= true; // follow the mouse?
  var topSet = 0;    // for use later
      oBlock.height(navObj.height()); // set height to nav object's height so it fits vertically inside
      oBlock.hide(); // make sure the block is hidden
    navObj.hover ( // upon hovering over the nav obj
    function (){ // on mouse over ... 
      oBlock.show(); // show the block
      oBlock.fadeTo("fast",0.33); // and fade it to 1/3 opacity
    },
    function (){ // on mouse out ...
      oBlock.animate({
           width: 100 // in 100 milliseconds, animate the width to 100px
        }, 100);
      oBlock.fadeOut("fast"); // then fade out quickly
    });
    $(document).mousemove(function (e){ // track the mouse movement on the document
     if(topSet==0){topSet = $("#nav ul li a:first").offset().top+5}; // distance from top of page correction
     // calculate the mouse location and ensure that the mouse is somewhere within the nav object's dimensions, both x and y
     if(followM==true && (e.clientY > navObj.offset().top) && (e.clientY < navObj.offset().top+navObj.outerHeight({margin:true}))){
        // this part not used anymore
        /*if( Math.abs((e.clientX)-(oBlock.offset().left)) > 200 ){
            oBlock.css({left: e.clientX-(oBlock.width()/2)});
        } else {
            oBlock.animate({
              left: e.clientX-(oBlock.width()/2)
            }, 5);
        }*/
       oBlock.css( // change the css of the block to update its location based on the mouse location
        {"z-index": "-99",
         "left": e.clientX-(oBlock.width()/2),
         "top" : topSet // - (oBlock.height()-1)
        });
     }
    });
   $("#nav ul li a").mouseover(function (e){ // when mousing over individual nav items ...
      followM = false; // stop mouse tracking; this creates a "snap-to" effect for individual nav items
      oBlock.queue("fx", []); // clear effects queue; could also try stop() instead
      if(oBlock.offset().top != topSet){ // make sure it's vertically aligned
         oBlock.css({
          top: topSet
         });
      }
      oBlock.animate({ // produce animation that ...
           width : $(this).outerWidth(), // stretches it to the width of the nav item
           left  : $(this).offset().left // and pushes it all the way to the left
           // this part just for fun...taken off because random heights are useless...
           //height: (Math.floor(Math.random()*100)/5)*10
        }, 50); // animation takes 50 ms
        // the following part produces a "flash"
        // jquery queues effects, so it will slowly fade to 100% opacity
        // then, as soon as that's done, it will quickly fade back to 1/3 opacity
      oBlock.fadeTo("slow", 1);
      oBlock.fadeTo("fast", 0.33);
   });
   $("#nav ul li a").mouseout(function (){ // when we're not pointing at a specific nav item
      followM = true; // start mouse tracking again, so block follows mouse
   });
});