var current_tab;
var current_tab_contents;

Event.observe(window, 'load', function(){

  try{
    available_tabs;
  }catch(e){
    return;
  }

  var tab, tab_title;
  var tabs_html = '<ul id="tabs">';
  var first_tab;

  for(var i = 0; i < available_tabs.length; i++){

    tab = $(available_tabs[i]);
    if(!tab){
      continue;
    }

    tab_title = tab.getElementsBySelector('h3.tab-title')[0].innerHTML;
    tab.addClassName('tab');
    tabs_html += '<li><a href="#' + available_tabs[i] + '"';


    if(first_tab == null){
      tab.addClassName('active-tab');
      first_tab = tab;
      current_tab_contents = tab;
      tabs_html += ' class="active"';
    }
    tabs_html += ' id="' + available_tabs[i] + '-tab">' + tab_title + '</a></li>'
  }
  tabs_html += '</ul>';

  new Insertion.Before(first_tab, tabs_html);

  for(var i = 0; i < available_tabs.length; i++){

    tab = $(available_tabs[i] + '-tab');
    if(!tab){
      continue;
    }

    if(current_tab == null){
      current_tab = tab;
    }

    Event.observe(tab, 'click', function(event){
      tab = Event.element(event);
      handle_tab_click(tab);
      Event.stop(event);
    });

  }

  if(location.hash != '' && location.hash.split('#').length > 0){
    handle_tab_click($(location.hash.split('#')[1] + '-tab'));
    $('tabs').scrollTo();
  }

});

function handle_tab_click(tab){
  tab.blur();
  contents_id = tab.id.split('-');
  contents_id.pop();
  contents_id = contents_id.join('-');
  tab_contents = $(contents_id);

  if(current_tab != null){
    current_tab.removeClassName('active');
    current_tab_contents.removeClassName('active-tab');
  }
  tab.addClassName('active');
  tab_contents.addClassName('active-tab');

  current_tab = tab;
  current_tab_contents = tab_contents;
  return false;
}