// JavaScript Document


$(function(){
  
  // The tab groups to manage.
  var tabs = $( '#page_tabs' ),
    
    // Because the jQuery UI tabs API doesn't allow selecting a tab without
    // also triggering its select event, we need the select event handler to
    // return false when the tab is clicked, but return true when the tab is
    // changed via the fragmentChange event handler. This variable allows the
    // script to keep track.
    in_event;
  
  // Enable tabs (and the select event) on all tab groups.
  tabs.tabs({
	fx: {opacity: 'toggle', duration: 'fast' },
    select: function( event, ui ) {
      
      if ( in_event ) {
        // Any tab "select" event code goes here.
        debug.log( this.id, ui.index );
        
      } else {
        // Update the fragment.
        var obj = {};
        obj[ this.id ] = ui.index; // Set tab_group = index
        $.setFragment( obj );
      }
      
      // Don't return true when clicked, only return true if called via the
      // fragmentChange event handler.
      return in_event;
    }
  });
  
  // Parse the fragment and update all tab groups as necessary.
  function parse_fragment() {
    in_event = true;
    
    // Get the current document fragment, coercing numeric values into numbers.
    var params = $.fragment( true );
    
    // Select the appropriate tabs for each tab group (you could keep track of
    // what tab each group is on using .data, and only select a tab if it has
    // changed).
    tabs.each(function(){
      $(this).tabs( 'select', params[ this.id ] !== undefined ? params[ this.id ] : 0 );
    });
    
    in_event = false;
  };
  
  // Enable the fragmentChange event.
  $.fragmentChange( true );
  
  // Bind parse_fragment to the fragmentChange event (using a namespace in case
  // we need to unbind later).
  $(document).bind( 'fragmentChange.tabs', parse_fragment );
  
  // Call parse_fragment now, in case the page was loaded with a fragment.
  parse_fragment();
  
});




$(function(){
	// Tabs
	/*
	$('#page_tabs').tabs(
		{
		fx: {opacity: 'toggle', duration: 'fast' }
	});
	*/
	$('#extra_tabs').tabs(
		{
			fx: {opacity: 'toggle', duration: 'fast' }
	});
	$('#extra_tabs02').tabs(
		{
			fx: {opacity: 'toggle', duration: 'fast' }
	});
	$('#extra_tabs03').tabs(
		{
			fx: {opacity: 'toggle', duration: 'fast' }
	});
	$('#extra_tabs04').tabs(
		{
			fx: {opacity: 'toggle', duration: 'fast' }
	});
	$('#extra_tabs05').tabs(
		{
			fx: {opacity: 'toggle', duration: 'fast' }
	});
	$('#extra_tabs06').tabs(
		{
			fx: {opacity: 'toggle', duration: 'fast' }
	});
	$('#extra_tabs07').tabs(
		{
			fx: {opacity: 'toggle', duration: 'fast' }
	});
	$('#extra_tabs08').tabs(
		{
			fx: {opacity: 'toggle', duration: 'fast' }
	});
	$('#extra_tabs09').tabs(
		{
			fx: {opacity: 'toggle', duration: 'fast' }
	});
	$('#extra_tabs10').tabs(
		{
			fx: {opacity: 'toggle', duration: 'fast' }
	});
	$('#extra_tabs11').tabs(
		{
			fx: {opacity: 'toggle', duration: 'fast' }
	});
	$('#extra_tabs12').tabs(
		{
			fx: {opacity: 'toggle', duration: 'fast' }
	});
	$('#extra_tabs13').tabs(
		{
			fx: {opacity: 'toggle', duration: 'fast' }
	});
	$('#extra_tabs14').tabs(
		{
			fx: {opacity: 'toggle', duration: 'fast' }
	});
	$('#extra_tabs15').tabs(
		{
			fx: {opacity: 'toggle', duration: 'fast' }
	});
	$('#extra_tabs16').tabs(
		{
			fx: {opacity: 'toggle', duration: 'fast' }
	});
	$('#extra_tabs17').tabs(
		{
			fx: {opacity: 'toggle', duration: 'fast' }
	});
	$('#extra_tabs18').tabs(
		{
			fx: {opacity: 'toggle', duration: 'fast' }
	});
	$('#extra_tabs19').tabs(
		{
			fx: {opacity: 'toggle', duration: 'fast' }
	});
	$('#extra_tabs20').tabs(
		{
			fx: {opacity: 'toggle', duration: 'fast' }
	});
	
});