$(document).ready(function() {
   
   $('#happy_panel_wrap').append('<div id="happy_panel_nav"><h4>Choose a panel</h4><ul id="happy_panel_tabs"></ul><div class="hp_buttons"><a class="hp_prev_button" href="">Previous</a><span class="nav_sep">&nbsp;|&nbsp;</span><a class="hp_next_button" href="">Next</a></div></div>');
   
   var tab_names = ['About ASM', 'Student Activity Center', 'ASM Services'];
   var tab_ids = ['hp_about_asm', 'hp_sac', 'hp_services'];
   
   for(var i in tab_names) { 
       // create input 
       $('<li id="tab-' + i + '-' + tab_ids[i] + '"><a href="#happy_panel_wrap">' + tab_names[i] + '</a></li>').appendTo('#happy_panel_tabs')
           .click(function(e) {
               $('.happy_panel').cycle(parseInt(this.id.substr(4, 1)));
               e.preventDefault();
               return false; 
           });
   }
   
   $('.happy_panel').cycle({
       fx: 'scrollHorz',
       prev: '.hp_prev_button',
       next: '.hp_next_button',
       timeout: 20000,
       pause: 1,
       easing: 'easeInOutBack',
       fit: 1,
       after: cycleAfter
   });
});

function cycleAfter(curr, next, opts) {
    $('#happy_panel_tabs').children().removeClass('current');
    $('#happy_panel_tabs').children().each(function(index) {
        if(this.id == 'tab-' + index + '-' + next.id) $(this).addClass('current');
    });
}