$(document).ready(function(){

   //set effect from select menu value
   $("#loginHover").click(function(e) {
      runEffect(e);
      return false;
   });

   $("#login").hide();

   $("#close").click(function() {
      $("#login").hide();
   });

});

//run the currently selected effect
function runEffect(e){
   //g$et effect type from
   var selectedEffect = "slide";

   //most effect types need no options passed by default
   var options = {};

   //run the effect
   //getting height and width of the message box
   var height = $('#login').height();
   var width = $('#login').width();

   if (e.pageX||e.pageY) {
      posx = e.pageX;
      posy = e.pageY;
   }
   else if (e.clientX||e.clientY) {
      posx = e.clientX + document.documentElement.scrollLeft;
      posy = e.clientY + document.documentElement.scrollTop;
   }

   if (window.innerWidth) {
      leftOffset = (window.innerWidth - document.width) / 2;
      topOffset = 10;
   }
   else {
      leftOffset = document.body.offsetLeft;
      topOffset = 10;
   }


   //calculating offset for displaying popup message
   //leftVal=e.pageX-(width/2)+"px";
   leftVal=e.pageX-(width/2)+"px";
   topVal=e.pageY-(height/2)+"px";
   //alert("top: " + (posy + topOffset) + "px\nleft: " + (posx - leftOffset) + 'px');
   
   // make sure the windows will stay on the screen
   if (posx > 600) {
      posx = posx - $('#login').width();
   }
   $("#login").css({
      left:(posx - leftOffset) + 'px',
      top:(posy + topOffset) + 'px'
      }).show(selectedEffect,options,300);

   $("#login").draggable();
   //$("#login").resizable();

}

//callback function to bring a hidden box back
function callback(){
   setTimeout(function(){
      $("#login:visible").removeAttr('style').hide().fadeOut();
   }, 1000);
}