Both tab & hover triggered popups problem

Question

I am trying to display divs when hovering over thumb-nails and/or both when tabbing onto them. If I stick to my mouse, the popups seem to work OK - if I start with a tab press

I can show the popops also (foward only - no shift + tab yet). Any help getting them to play well together?

// Note:  the below is being run from an onmouseover on a asp:HyperLink at the moment

function onhovering_and_tabbingon2() {

        var active_hover = 0;
        var num_of_thumb;

            // set the default focus onto the first thumb-nail and make its popup display
            document.getElementById('link_no' + active_hover).focus(); // set focus on the first thumb
            $('#pop' + active_hover).toggleClass('popup'); // show its popup as it is hidden


        // for when hovering over the thumbs
            $(".box img").hover(  // so as to effect only images/thumb-nails within divs of class=box when hovering over them
  function () {

      // test for if the image is a thumb-entry and not a popup image - of class=thumbs2
        thumb = $(this).attr('class');
       if (thumb != "thumbs2") { 

      // I need to add/toggle the class here to a "div" and not to the image being hovered on, a div with text that corrosponds to the hovered on image though
      // so grab the number of the thumb_entry -  to use to id the div. 
  num_of_thumb = $(this).attr('id').replace('thumb_entry_No', '');
      // find the div with id 'pop' + num_of_thumb, and toggleClass on it
      $('#pop' + num_of_thumb).toggleClass('popup'); // shows the hovered on pic's popup

      // move the focus to the hovered on pic's a tag ??????
  document.getElementById('link_no' + num_of_thumb).focus();


      // if the previous popup that was showing was in box2.. 
      if (active_hover == 1 || active_hover% 2 == 1) { 
          $('#pop' + active_hover).toggleClass('popup4_line2');
      }

      else {
      // remove/toggle the previous active popup's visibility 
          $('#pop' + active_hover).toggleClass('popup'); 
     }

      // set the new active_hover to num_of_thumb
      active_hover = num_of_thumb;


 }
  },
  function () {

  }

);

// same thing again - but for my second row/line of entries/thumb-nails...
  $(".box2 img").hover(  // so as to effect only images/thumbs within divs of class=box2
  function () {
      // test if the image is a thumb-entry and not a popup image
      thumb = $(this).attr('class');
      if (thumb != "thumbs2") {


         // I need to add the class here to a "div" and not to the image being hovered on, a div that corrosponds to the hovered on image though
          // so grab the number of the thumb_entry being hovered on, so as to id the div. 
          num_of_thumb = $(this).attr('id').replace('thumb_entry_No', '');
          // find the div with id='pop' + num_of_thumb, and toggleClass on it
          $('#pop' + num_of_thumb).toggleClass('popup4_line2');

          // move the focus to the hovered on pic's a tag ??
          document.getElementById('link_no' + num_of_thumb).focus();

          // if the previous popup that was showing was in box..  // or if the active_hover is even (modulus)
          if (active_hover == 0 || active_hover % 2 == 0) { 
              $('#pop' + active_hover).toggleClass('popup');
          }

          else {

              // remove the previous active visible popup
              $('#pop' + active_hover).toggleClass('popup4_line2');

          }
          // set the new active_hover to num_of_thumb
          active_hover = num_of_thumb;

      }
 },
  function () {
  }
 );


  // todo: I would like to try to show the popups when tabbing through the thumb-nails also
 // but am lost...

document.onkeyup = keypress; // ????

function keypress() {
   //  alert("The key pressed was: " + window.event.keyCode);
    if (window.event.keyCode == "9") { 
    //alert("The tab key was pressed!");


        active_hover = active_hover + 1;

        // for tabbing into box 2 (odd numbers) 
        if (active_hover == 1 || active_hover % 2 == 1) {  

        // toggle visibility of previous popup
           $('#pop' + (active_hover - 1)).toggleClass('popup');
         // toggle visibility of current popup
            $('#pop' + active_hover).toggleClass('popup4_line2');

            //
         }

        else {
        // for tabbing into box from box2 
        // toggle visibility of previous popup
        $('#pop' + (active_hover - 1)).toggleClass('popup4_line2');
        // toggle visibility of current popup
        $('#pop' + active_hover).toggleClass('popup');

  //
        }

        // ??????
      //

        // if (window.event.keyCode == "shift&9") { }
    }
}


}