var searchBoxVisible=false;

$(document).ready(function() {
    $("#channels_box_frame").hoverIntent({
     sensitivity: 1, 
     interval: 50,   
     over: showChannelsBox, 
     timeout: 100, 
     out: hideChannelsBox
   });      
   
   $("#search_button").click(function() {
     if (searchBoxVisible==false)
        showSearchBox();
     else
        hideSearchBox();
     return false;
   });
   
});

var hideChannelsBox = function() {
  $("#channels_box").slideUp(100);
}

var showChannelsBox = function() {

  if (searchBoxVisible==true)
    hideSearchBox();

  var pos = $("#channels_button").position();  
  var height = $("#channels_button").height();
  var width = $("#channels_button").width();
  var fwidth = $("#channels_box").width();  

    
  //show the menu directly over the placeholder
  $("#channels_box").css( { "left": Math.round(pos.left+width-fwidth) + "px", "top":(pos.top+height) + "px" } );
  $("#channels_box").slideDown(100);
}

var hideSearchBox = function() {
  searchBoxVisible=false;
  $("#search_box").slideUp(100);
}

var showSearchBox = function() {
  searchBoxVisible=true;
  var pos = $("#search_button").position();  
  var height = $("#search_button").height();
  var width = $("#search_button").width();
  var fwidth = $("#search_box").width();  

    
  //show the menu directly over the placeholder
  $("#search_box").css( { "left": Math.round(pos.left+width-fwidth) + "px", "top":(pos.top+height) + "px" } );
  $("#search_box").slideDown(100);
}