End of Page Slide Out Box plus Minimize use jQuery

Make end of page slide out box plus minimize using jquery

HTML

blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>blah bleh bloh<br>
<div class='show' id='sticky'>
<div class='sticky-title'>
<span style='float: left;margin: 12px 0 0 15px;'>
DON'T FORGET to FOLLOW!	
</span>
<span>
<a href='javascript:void;' id='sticky-close' title='close'>
<img alt='close button' class='a' src='http://1.bp.blogspot.com/-Ao1pq3WWP80/UYkTi_lThZI/AAAAAAAAYYs/MAnvRxtxcoc/s1600/close.png' title='close'/>
</a>
</span>
<span>
<a href='javascript:void;' id='sticky-minimize' title='minimize'>
<img alt='minimize button' src='http://1.bp.blogspot.com/-GOrrILFH09c/UYkVuWmzk0I/AAAAAAAAYY8/v3FimwutPv0/s1600/minimize.png' title='minimize'/>
</a>
</span>
<span>
<a href='javascript:void;' id='sticky-maximize' title='maximize'>
<img alt='maximize button' src='http://3.bp.blogspot.com/-bJ8cWb-cIn0/UYkV99a2VwI/AAAAAAAAYZE/buv0P0KyM6I/s1600/maximize.png' title='maximize'/>
</a>
</span>
</div>
<div...

CSS

body {background: #debe94}
#sticky {
  background: #f9f9f9;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
  transition: all 0.4s ease-out;
  -webkit-transition: all 0.4s ease-out;
  border-radius: 3px 3px 0px 0px;
  width: 350px;
  height: 200px;
  position: fixed;
  overflow: hidden;
  border: none;
  right: -350px;
  z-index: 9999;
  text-align: left !important;
}
.sticky-title {
  background: #333;
  color: #fff;
  display: block;
  height: 40px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  width: 100%;
  font-size: 14px;
}
.sticky-title span a {
  border-left: 1px solid #555;
  float: right;
  height: 40px;
  width: 40px;
}
.sticky-title span a:hover {
  background: rgba(0, 0, 0, 0.2);
}
.sticky-title span a img {
  margin: 12px;
}
.sticky-container {
  border: none;
  float: left;
  width: 100%;
  height: auto;
  margin: 3px;
}
.sticky-container > div {
  border: none;
  height: 40px;
  margin: 3px;
  padding: 3px;
}
.sticky-container > div > span {
  font-size: 14px;
}
.sticky-container img {
  float: left;
  margin: 3px 5px;
  width: 40px;
}
.show {
  bottom: 35px;
}
.hide {
  bottom: -160px;
}

JavaScript

$(window).scroll(function(){
  if ($(this).scrollTop() > 400) {
    $('#sticky').css({'right':'0px'});
  } else {
    $('#sticky').css({'right':'-350px'});
  }
});
$(document).ready(function(){
    var sticky = $('#sticky');
    var closed  = $('#sticky-close');
    var minimize = $('#sticky-minimize');
    var maximize = $('#sticky-maximize');
        maximize.hide();
            closed.click(function(){
              sticky.css({'right':'-350px'});
                          sticky.fadeOut('slow');
  })
        minimize.click(function(){
              sticky.toggleClass('hide');
$(this).hide();
        maximize.show();
})
        maximize.click(function(){
              sticky.toggleClass('hide');
$(this).hide();
        minimize.show();
})
});