jQuery(document).ready(function() {
  
  // Creating the containing #quickbar divs.
  jQuery("body").prepend('<div id=\"quicknav\"><div id=\"quicknav-inner\"></div></div>');
  
  // Adding the necessary content. You could hard code this as well (and thus use PHP for
  // dynamic content), but I might want to include this menu on many different sites in my "network".  
  jQuery("#quicknav-inner").append('<div class=\"toggle\">&laquo; Navigation</div><div class=\"menu\"> \
    <ul> \
      <h2>Navigate this site</h2> \
      <li><a href=\"/\"><span>A big list</span>Select something else to look at.</a></li> \
      <li><a href=\"/about\"><span>About me</span>Want to grab a cup of coffee?</a></li> \
      <li><a href=\"/sketch\"><span>Monsters are people too</span>All of my sketches, from bad to bizarre.</a></li> \
    </ul> \
    <ul> \
      <h2>Support me!</h2> \
      <li><a href=\"https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QWAUCEFRRPPZQ\"><span>Donate via paypal</span>A coffee would be nice. Thanks!</a></li> \
      <li><a href=\"http://wecreatephotos.fonk.se\"><span>We Create Photos</span>Custom photography, just for you.</a></li> \
      <li><a href=\"http://goodold.se\"><span>Good Old</span>Hire the clever web agency I work at.</a></li> \
    </ul> \
  </div>');
  
  // Setting the necessary CSS properties for the animation to work. Unless you mess with these
  // you should be able to style everything else - margins, paddings, borders, you name it.
  jQuery("#quicknav").css("overflow", "hidden").css("position", "fixed").css("top", "0px").css("right", "0px");
  jQuery("#quicknav-inner").css("overflow", "hidden");
  jQuery("#quicknav .toggle").css("float", "left");
  jQuery("#quicknav .menu").css("float", "right").css("overflow", "hidden");
  
  // Remembering the original width in variables, and then setting the starting widths. We need to  
  // keep #quicknav-inner at a constant width and animate the outer #quicknav to avoid jumping floats.
  var menuwidth = jQuery("#quicknav .menu").outerWidth();
  var togglewidth = jQuery("#quicknav .toggle").outerWidth();
  var totalwidth = menuwidth + togglewidth;
  
  jQuery("#quicknav-inner").width(totalwidth);
  jQuery("#quicknav").width(togglewidth);
  
  // Hiding the .menu to avoid a box larger than the .toggle button triggering the animation.
  jQuery("#quicknav .menu").hide();
  
  // Doing the actual animation. Just flipping the width of the outer div and showing/hiding the .menu.
  jQuery("#quicknav").hover(
    function() {
      jQuery("#quicknav .menu").show();
      jQuery("#quicknav").animate({
        width: totalwidth
      }, 300 );
    },
    function() {
      jQuery("#quicknav").animate({
        width: togglewidth
      }, 150, function() { jQuery("#quicknav .menu").hide(); }
      );
    }
  );
  
  // For linusbohman.se:
  // - Removing the hard-coded fallback navbar
  // - Changing z-index on post-meta to avoid those selections overlapping the quicknav
  jQuery("#navbar").remove();
  jQuery(".post-meta").css("z-index", "1");
  jQuery("#quicknav").css("z-index", "200");
  
});