$(document).ready(function() {
    $('#container').append('<div id="overlayz"> </div>');
 // hides the slickbox as soon as the DOM is ready
  $('#slickbox').hide();
  $('#overlayz').hide();
 // shows the slickbox on clicking the noted link
  $('#slick-show').click(function() {
    
 $('#slickbox').slideDown('slow');
 return false;
  });
 // hides the slickbox on clicking the noted link
  $('#slick-hide').click(function() {
      
 $('#slickbox').slideUp('medium');
 return false;
  });
 // toggles the slickbox on clicking the noted link
    var over = false;
  $('#slick-toggle').click(function() {
    if(over === false) {
      over = true;
      $('#overlayz').fadeIn('medium');
    } else {
      over = false;
      $('#overlayz').fadeOut('fast');
    }
 $('#slickbox').toggle(400);
 return false;
  });
    $('#overlayz').click( function() {
    if(over === false) {
      over = true;
      $('#overlayz').fadeIn('medium');
    } else {
      over = false;
      $('#overlayz').fadeOut('fast');
    }
 $('#slickbox').toggle(400);
    });
});