(function ($) {
$(function () {
  var num_panels  = 10;
  var cur_panel   = -1;

  var changePanel = function (new_panel) {
    if (cur_panel !== new_panel) {
      $('#nav-panels ul').slideUp();
      if (cur_panel >= 0) {
        $('#panel-' + cur_panel).fadeOut('slow', function () {
          cur_panel = new_panel;
          $('#panel-' + cur_panel).fadeIn('slow');
        });
      }
      else {
        cur_panel = new_panel;
        $('#panel-' + cur_panel).fadeIn('slow');
      }
    }
  };

  var html = ' \
<div id="nav-panels"> \
  <h3><a href="house-cleaning" title="House Cleaning">Topics List <span>&raquo;</span></a></h3> \
  <div id="panel-buttons-container"> \
    <a class="panel-button" id="prev-panel" href="#">&laquo;<span> Previous</span></a> \
    <a class="panel-button" id="next-panel" href="#"><span>Next </span>&raquo;</a> \
  </div> \
</div> \
';
  var $html = $(html)
    .find('#prev-panel')
    .click(function () {
      var panel_before = (cur_panel + num_panels - 1) % num_panels;
      changePanel(panel_before);
      return false;
    })
    .end()
    .find('#next-panel').click(function () {
      var panel_after = (cur_panel + 1) % num_panels;
      changePanel(panel_after);
      return false;
    })
    .end();

  $('#panels-section').prepend($html);

  $('#nav-panels').append($('#panels-intro .menu-panels').clone());

  $('#nav-panels h3').bind('mouseenter', function () {
    $('#nav-panels ul').slideDown();
  });

  $('#nav-panels ul').bind('mouseleave', function () {
    $('#nav-panels ul').slideUp();
  });

  $('.menu-panels a').click(function () {
    $('#panels-intro').fadeOut('slow', function () {
      $('#nav-panels').fadeIn('slow');
      $('#panel-container').fadeIn('slow');
      $('#panel-buttons-container').fadeIn('slow');
    });

    var href = $(this).attr('href');
    var panel_num = parseInt(href.substr(href.indexOf('#panel-') + '#panel-'.length));
    changePanel(panel_num);

    return false;
  });
});
})(jQuery);