$(document).ready(function() {

$('#how_to_box').hide();
$('#make_up_box').hide();
$('#personal_box').hide();
$('#professional_box').hide();
$('#tanning_box').hide();
$('#why_airbrush_box').hide();

function set_box(fixed_box, move_box, boundary_box) {
  // sets the position of move_box in relation to fixed_box
  // and boundary_box
  //
  // Primary conitions of this function:
  // - move_box's final position must leave move_box fully
  //   withing boundary_box
  // - move_box's final position must be such that move_box
  //   touches fixed_box's far lowest corner
  //
  // where both primary conditions are met, move_box will be
  // position as close to the center of boundary_box as possible
  //
  // function modifies css for move_box
  

  var direction = 1; // direction, 1 (right) or -1 (left)
  var y_int = 0;     // hor_pos of fixed box's farthest corner
  var touch = 1;     // is move_box touching fixed_box's far corner?
  var ctr_pos;       // 'x' coord placing move_box @ center of boundary_box
  
  var move_box_width  = move_box.outerWidth();
  var bound_box_width = boundary_box.outerWidth();
  var fixed_box_width = fixed_box.outerWidth();


  var offset; // note, js offset(), not robust
  offset = fixed_box.offset();
  var fxd_box_lt = offset.left;
  var fxd_box_rt = fxd_box_lt + fixed_box_width;
   
  offset = boundary_box.offset();
  var bnd_box_lt = offset.left;
  var bnd_box_rt = bnd_box_lt + bound_box_width;
   
  var rt_margin = (bnd_box_rt-fxd_box_rt);
  var lt_margin = (fxd_box_lt-bnd_box_lt);
   
  if (lt_margin > rt_margin) {
    y_int = fxd_box_rt;
    direction = 1;
  } else {
    y_int = fxd_box_lt;
    direction = -1;
  }
    
  ctr_pos = bnd_box_lt+((bound_box_width-move_box_width)/2);

  if ((ctr_pos < y_int) && (y_int < (ctr_pos+move_box_width))) {
    touch = 1;
  } else {
    touch = 0;
  }
  
  if (touch == 0) {
    if (direction == 1) {
      // right edge of box meets right edge of fxd box
      hor_pos = fxd_box_rt;   
      hor_pos -= move_box_width;
    } else {
      // left edge of box meets left edge of fxd box
      hor_pos = fxd_box_lt;
    }
  } else {
    hor_pos = ctr_pos;
  }
  
  var link_height = fixed_box.outerHeight();
  var box_height = move_box.outerHeight();
  var vert_pos = offset.top+link_height;

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

function sleep(delay) { 
  var start = new Date().getTime(); 
  while (new Date().getTime() < start + delay); 
}


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 assoc_box = $('#' + layerId);
        var parent_box = $('.main_menu_nav');
        var local_item = $('#' + linkClass);
        set_box(local_item, assoc_box, parent_box);
        
        $("#" + layerId).css({'display':'block'});
        $('#' + linkClass).addClass('hover');
    }, 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("btn_professional", "professional_box");
addHoverHide("btn_how_to", "how_to_box");
addHoverHide("btn_personal", "personal_box");
addHoverHide("btn_tanning", "tanning_box");
addHoverHide("btn_why_airbrush", "why_airbrush_box");
addHoverHide("btn_make_up", "make_up_box");

});