jQuery.noConflict();
jQuery(document).ready(function ($) {
   
 	
	$("#panel").hide();

 var a = $("<a>toggle header</a>").attr('href','#').addClass("btn-slide");
 $('#wrapper').before(a);
 
 jQuery.fn.extend({
  slideRightShow: function() {
    return this.each(function() {
        $(this).show('slide', {direction: 'right'}, 1000);
    });
  },
  slideLeftHide: function() {
    return this.each(function() {
      $(this).hide('slide', {direction: 'left'}, 1000);
    });
  },
  slideRightHide: function() {
    return this.each(function() {
      $(this).hide('slide', {direction: 'right'}, 1000);
    });
  },
  slideLeftShow: function() {
    return this.each(function() {
      $(this).show('slide', {direction: 'left'}, 1000);
    });
  }
});

 
   $(".btn-slide").click(function(){

      if ($("#panel").is(":hidden")) {
	          $("#panel").slideRightShow();
	$(this).addClass("active");
        $.cookie('showTop', 'collapsed');
	return false;
	
      } else {
        $("#panel").slideRightHide();
	$(this).removeClass("active");
         $.cookie('showTop', 'expanded');
	return false;

      }
	
   });

// COOKIES
    // Header State
    var showTop = $.cookie('showTop');

    // Set the user's selection for the Header State
    if (showTop == 'collapsed') {
	$("#panel").show();
	$(".btn-slide").addClass("active");
	
    };
 
});