Event.observe(window, 'load', initOnLoad, false);

var tabs = [];
var active_tab = [];
var row_end_id = [];

function initOnLoad() {

  Cookie.init( { name: 'tabs' } );

  var data, row, id;
  $$('ul.tabs a[rel]').each( function( tab ) {
    
		tab.onclick = tabEvent.onClick.bind( tabEvent, tab );
    
    data = tab.rel.split( "_" );
    row = parseInt( data[1] );
    id  = parseInt( data[2] );
    
    row_end_id[row] = id;

    if ( tabs[row] == undefined ) { tabs[row] = []; }
    tabs[row][id] = tab;
	} );
  
  for ( row_id in row_end_id ) { if ( typeof row_end_id[row_id] != 'function' ) {
  
    var a = Cookie.getData( 'active_' + row_id );

    if ( a == undefined ) {
      active_tab[row_id] = tabs[row_id][0];
      Cookie.setData( 'active_' + row_id, 0 );
    } else {
      active_tab[row_id] = tabs[row_id][a];
      setTabClasses( row_id, a );
    }

    $(active_tab[row_id].rel + "_text").show();
    
  } }
}

var tabEvent = {};

tabEvent.onClick = function( clicked_tab ) {

  var data = clicked_tab.rel.split( "_" );
  var clicked_row = parseInt( data[1] );
  var clicked_id  = parseInt( data[2] );
  
  $(active_tab[clicked_row].rel + "_text").hide();
  $(clicked_tab.rel + "_text").show();
  Cookie.setData( 'active_' + clicked_row, clicked_id );
  
  active_tab[clicked_row] = clicked_tab;
  
  setTabClasses( clicked_row, clicked_id );
  
  return false;
}

function setTabClasses( clicked_row, clicked_id ) {
  
  var data, row, id;
  tabs[clicked_row].each( function( tab ) {
    
    data = tab.rel.split( "_" );
    row = parseInt( data[1] );
    id  = parseInt( data[2] );
    
    if ( id == clicked_id - 1 ) {
      // Tab direkt links vom aktiven
      if ( id == 0 ) {
        tab.className = 'start_left_of_active';
      } else {
        tab.className = 'inter_left_of_active';
      }
    } else if ( id == clicked_id ) {
      // aktiver Tab
      if ( id == 0 ) {
        tab.className = 'start_active';
      } else if ( id == row_end_id[row] ) {
        tab.className = 'end_active';
      } else {
        tab.className = 'inter_active';
      }
    } else if ( id == clicked_id + 1 ) {
      // Tab direkt rechts vom aktiven
      if ( id == row_end_id[row] ) {
        tab.className = 'end_right_of_active';
      } else {
        tab.className = 'inter_right_of_active';
      }
    } else {
      // normaler Tab weit links vom aktiven        
      if ( id == 0 ) {
        tab.className = 'start';
      } else if ( id == row_end_id[row] ) {
        tab.className = 'end';
      } else {
        tab.className = 'inter';
      }
    }

  } );
}