$('document').ready(function()
{
  function handleAjaxLoad(eventObject)
  {
    // prevent default anchor behavior
    eventObject.preventDefault();
    // prevent bubbling on parent element
    eventObject.stopPropagation();
    var anchor  = eventObject.target; 
    var hasDiv  = $(anchor).next().is('div');
    // the div must be created before calling...
    if(!hasDiv)
    {
      $(anchor).after('<div/>');
    }
    // ... next()
    var div       = $(anchor).next();
    if(!hasDiv)
    {
      $(anchor).addClass(css_class);
      // add a text while we are at the bar
      $(div).text('Loading...');
      
      // get content via Ajax call
      $.get($(anchor).attr('href'), function(data, textStatus)
      {
        $(div).hide().html(data);
        toggleDiv(anchor, div);
        if(textStatus != 'success')
        {
          alert(textStatus);
        }
        
        $(div).find('p.close span').click(function(){toggleDiv(anchor, div);});
      });
    }
    else
    {
      toggleDiv(anchor, div);
    }
  }
  
  function toggleDiv(anchor, div){
    $(anchor).toggleClass(css_class, $(div).is(':hidden'));
    $(div).slideToggle();
    $(anchor).parent().toggleClass('bg-hover-still', $(anchor).is('.minus'));    
  }

  // define the class name
  var css_class = 'minus';
  $('li a.feature').each(function()
  {
    $(this).bind('click', handleAjaxLoad);
    $(this).parent().bind('mouseenter mouseleave', function(e){
      $(this).toggleClass('bg-hover');
    })
  })
})