$(document).ready(function() {

$('#aboutusbox').hide();
$('#needhelpbox').hide();
$('#signupbox').hide();

function match_topright_botright(fxd_box, move_box) {
  // moves 'move_box' so that it's top right
  // meets with fxd_box's bottom right
  // applies css for move_box

  var offset = fxd_box.offset();  

  var link_width = fxd_box.outerWidth();
  var box_width = move_box.outerWidth();
  var hor_pos = offset.left+link_width-box_width;

  var link_height = fxd_box.outerHeight();
  var box_height = move_box.outerHeight();
  var vert_pos = offset.top+link_height;

  move_box.css({'left':hor_pos, 'top': vert_pos});
}

//var zIndexNumber = 1000;
function addHoverHide(linkClass, layerId) {
    // 'hover' at linkClass or layerId will display layerId
    //
    // why this function is necessary:
    // Earlier, we tried binding layerId's visibility to hover event at
    // linkClass and layerId, but there was a problem...
    // - IE6 would hide layerId box on linkClass's mouseleave event.
    // 
    // this is a reworked function originally found here: 
    // http://groups.google.com/group/jquery-en/browse_thread/thread/bcde37c41df4aa28

    var t;
    $("#" + linkClass).hover(function() {
        clearTimeout(t);
        
        var fxd_box = $('#' + linkClass);
        var move_box = $('#' + layerId); 
        match_topright_botright(fxd_box, move_box);
        
        $("#" + layerId).css({'display':'block'});
        //$("#" + layerId).css({'z-index':zIndexNumber});
        $('#' + linkClass).addClass('hover');
        //zIndexNumber -=5;
    }, function() {
        t = setTimeout(function() {
          $("#" + layerId).css({'display':'none'});
          $('#' + linkClass).removeClass('hover');
        }, 50);
    });

    // if user hovers over the floating layer
    $("#"+layerId).hover(function() {
        clearTimeout(t);
        $("#" + layerId).css({'display':'block'});  
        $('#' + linkClass).addClass('hover');
    }, function() {
        t = setTimeout(function() {
          $("#" + layerId).css({'display':'none'});
          $('#' + linkClass).removeClass('hover');
        }, 50);
    });
}

addHoverHide("needhelp", "needhelpbox");
addHoverHide("aboutus", "aboutusbox");
addHoverHide("signup", "signupbox");


});