$(document).ready(function(){

  /* *******************************************
  ** Add Events To Control The Login Slider   **
  ******************************************* */

  //We need to start the slider with 0.1 opacity
  $("#loginSlider").css({opacity: "0.1"});

  //Add a click event to the loginButton that slides the loginSlider down and increases the opacity
  $("#loginButton").click(function(){
    //get the position of the loginSlider and only slide down if its in the up position
    var pos = $("#loginSlider").offset();
    if(pos.top <= -75){
    	$("#loginSlider #username").focus();
      $("#loginSlider").animate({opacity: "1.0", top: "+=75"}, 800);
    }
    return false;
  });

  //Add a click event to the closeLoginButton that slides the loginSlider up and decreases the opacity
  $("#closeLoginButton").click(function(){
    //get the position of the loginSlider and only slide up if its in the down position
    var pos = $("#loginSlider").offset();
    if(pos.top > -75){
      $("#loginSlider").animate({opacity: "0.1", top: "-=75"}, 800);
    }
    return false;
  });

  /* ***********************************************
  ** End Add Events To Control The Login Slider   **
  *********************************************** */

});