$(document).ready(function(){

  var dropdown = '<div class="dropdown products"> \
        <h3>Outdoor Power Upgrades <a class="close" href="">Hide</a></h3> \
        <div class="middle"> \
        <ul class="left"> \
          <li><a href="/clean-machine">Clean Machine</a></li> \
          <li><a href="/easy-rider">Easy Rider</a></li> \
          <li><a href="/good-vibrations">Good Vibrations</a></li> \
          <li><a href="/grasshawk">Grass Hawk</a></li> \
          <li><a href="/hitchin-post">Hitchin&rsquo; Post</a></li> \
        </ul> \
        <ul class="right"> \
          <li><a href="/king-pin">King Pin</a></li> \
          <li><a href="/spark-doctor">Spark Doctor</a></li> \
          <li><a href="/start-me-up">Start Me Up</a></li> \
          <li><a href="/wrap-it-up">Wrap It Up</a></li> \
        </ul> \
        </div> \
        <h4></h4> \
      </div>';

  $("#nav").append($(dropdown));

  if ($(".dropdown.products").length > 0 ) { make_dropdown("#mainNav li.products a", ".dropdown.products"); }

  $(".dropdown .close").click(function (event) {
    event.preventDefault();
    $(".dropdown").slideUp();
    $("#main li a").removeClass("dd");
  });

});


function make_dropdown(trigger, container) {

  var t;
  var k;
	
  $(trigger).hover(

    function () {
		if($(container).css("display") == "block") {
			clearTimeout(k);
		} else {
			clearTimeout(k);
			$(".dropdown").hide();
			t = setTimeout(function(){$(container).show()},350);
			$(trigger).click(function(){
			  clearTimeout(t);
			  $(container).hide();
			});	
		}
    }, 

    function () {
		clearTimeout(t);
		$(container).hide();
		$(trigger).removeClass("dd");
    }

  );

  $(container).hover(

    function () {
      $(container).show();
      $(trigger).addClass("dd");
      clearTimeout(k);
    }, 

    function () {
	  $(trigger).removeClass("dd");
      k = setTimeout(function(){
        $(container).fadeOut("fast");
      },500);
    }

  );
}