$(document).ready(function(){

  var dropdown = '<div class="dropdown markets"> \
        <h3>Markets we commonly impact. <a class="close" href="">Hide</a></h3> \
        <div class="middle"> \
        <ul class="left"> \
          <li><a href="/food">Food</a></li> \
          <li><a href="/beverage">Beverage</a></li> \
          <li><a href="/household">Household</a></li> \
          <li><a href="/personal">Personal Care</a></li> \
          <li><a href="/otc">OTC Health</a></li> \
          <li><a href="/medical">Medical</a></li> \
        </ul> \
        <ul class="right"> \
          <li><a href="/wine">Wine &amp; Spirits</a></li> \
          <li><a href="/promotional">Promotional</a></li> \
          <li><a href="/games">Games &amp; Sweepstakes</a></li> \
          <li><a href="/industrial">Industrial</a></li> \
          <li><a href="/tobacco">Tobacco</a></li> \
        </ul> \
        </div> \
        <h4><a href="/markets">View all markets we impact.</a></h4> \
      </div> \
      <div class="dropdown products"> \
        <h3>Innovative products. <a class="close" href="">Hide</a></h3> \
        <div class="middle"> \
        <ul class="left"> \
          <li><a href="/labels">Labels</a></li> \
          <li><a href="/coupons">Coupons &amp; Booklets</a></li> \
          <li><a href="/extendedtext">Extended Text</a></li> \
          <li><a href="/gamepieces">Games</a></li> \
        </ul> \
        <ul class="right"> \
          <li><a href="/folded">Folded Cartons</a></li> \
          <li><a href="/signage">Signage</a></li> \
          <li><a href="/equipment">Application Equipment</a></li> \
          <li><a href="/specialty">Specialty Products</a></li> \
        </ul> \
        </div> \
        <h4><a href="/products">View product overview.</a></h4> \
      </div> \
      <div class="dropdown capabilities"> \
        <h3>Our extensive capabilities. <a class="close" href="">Hide</a></h3> \
        <div class="middle"> \
        <ul class="left"> \
          <li><a href="/printing">Printing</a></li> \
          <li><a href="/constructions">Constructions</a></li> \
        </ul> \
        <ul class="right"> \
          <li><a href="/materials">Materials &amp; Coatings</a></li> \
          <li><a href="/capabilities">Finishing &amp; Packaging</a></li> \
        </ul> \
        </div> \
        <h4><a href="/capabilities">View capabilities overview.</a></h4> \
      </div> \
      <div class="dropdown about"> \
        <h3>About WS Packaging. <a class="close" href="">Hide</a></h3> \
        <div class="middle"> \
        <ul class="left"> \
          <li><a href="/locations">Locations</a></li> \
          <li><a href="/services">Services</a></li> \
          <li><a href="/casestudies">Case Studies</a></li> \
          <li><a href="/history">History</a></li> \
        </ul> \
        <ul class="right"> \
          <li><a href="/news">News</a></li> \
          <li><a href="/careers">Careers</a></li> \
          <li><a href="/legal">Legal</a></li> \
          <li><a href="/partnerships">Partnerships</a></li> \
        </ul> \
        </div> \
        <h4><a href="/about">Company overview.</a></h4> \
      </div>';

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

  if ($(".dropdown.markets").length > 0 ) { make_dropdown("#main li.markets a", ".dropdown.markets"); }
  if ($(".dropdown.markets").length > 0 ) { make_dropdown("#main li.products a", ".dropdown.products"); }
  if ($(".dropdown.markets").length > 0 ) { make_dropdown("#main li.capabilities a", ".dropdown.capabilities"); }
  if ($(".dropdown.markets").length > 0 ) { make_dropdown("#main li.about a", ".dropdown.about"); }

  $(".dropdown .close").click(function (event) {
    event.preventDefault();
    //$(".dropdown").css("display", "none");
    $(".dropdown").fadeOut("fast");
    $("#main li a").removeClass("dd");
  });

  var footernav = '<dl class="first"> \
        <dt><a href="/markets">Markets Served</a></dt> \
        <dd><a href="/food">Food</a></dd> \
        <dd><a href="/beverage">Beverage</a></dd> \
        <dd><a href="/household">Household</a></dd> \
        <dd><a href="/personal">Personal Care</a></dd> \
        <dd><a href="/otc">OTC Health</a></dd> \
        <dd><a href="/medical">Medical</a></dd> \
        <dd><a href="/wine">Wine &amp; Spirits</a></dd> \
        <dd><a href="/promotional">Promotional</a></dd> \
        <dd><a href="/industrial">Industrial</a></dd> \
        <dd><a href="/tobacco">Tobacco</a></dd> \
      </dl> \
      <dl> \
        <dt><a href="/products">Product Groups</a></dt> \
        <dd><a href="/labels">Labels</a></dd> \
        <dd><a href="/coupons">Coupons &amp; Booklets</a></dd> \
        <dd><a href="/extendedtext">Extended Text</a></dd> \
        <dd><a href="/gamepieces">Games</a></dd> \
        <dd><a href="/folded">Folded Cartons</a></dd> \
        <dd><a href="/signage">Signage</a></dd> \
        <dd><a href="/equipment">Application Equipment</a></dd> \
      </dl> \
      <dl> \
        <dt><a href="/specialty">Specialty Products</a></dt> \
        <dd><a href="/webdescrambler">WebDescrambler</a></dd> \
        <dd><a href="/netdescrambler">NetDescrambler</a></dd> \
        <dd><a href="/rfid">RFID</a></dd> \
        <dd><a href="/codestream">CodeStream</a></dd> \
        <dd><a href="/thermal">Stock Thermal Labels</a></dd> \
        <dd><a href="/tape">Industrial &amp; Specialty Tape</a></dd> \
        <dd><a class="ext" href="http://www.magnifistik.com/">Magnifistik</a></dd> \
      </dl> \
      <dl> \
        <dt><a href="/about">About Us</a></dt> \
        <dd><a href="/capabilities">Capabilities</a></dd> \
        <dd><a href="/locations">Locations</a></dd> \
        <dd><a href="/services">Services</a></dd> \
        <dd><a href="/casestudies">Case Studies</a></dd> \
        <dd><a href="/history">History</a></dd> \
        <dd><a href="/careers">Careers</a></dd> \
        <dd><a href="/legal">Legal</a></dd> \
        <dd><a href="/partnerships">Partnerships</a></dd> \
      </dl>';
  if ($("#shoe").length > 0 ) { $("#shoe").prepend($(footernav)); }

});


function make_dropdown(trigger, container) {

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

    function () {
      t = setTimeout(function(){$(container).css("display", "block")},350);
      $(trigger).click(function(){
        clearTimeout(t);
        $(container).css("display", "none");
      });
    }, 

    function () {
      clearTimeout(t);
      $(container).css("display", "none");
    }

  );

  $(container).hover(

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

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

  );
}