// jquery.tabs.js

var tabs_new = function( tabs_id, opts ) {

  // use module pattern (see JavaScript - The Good Parts)
  function _debug( msg )
  {
     if( window.console && window.console.log ) 
       console.log( "[debug] " + msg ); 
  }
  var $tabs,
      $tabsNav,
      $tabsNavItems,
      $tabsPanels;
  var defaults = { };
  var settings;
function _init( tabs_id, opts )
{
  settings = $.extend( {}, defaults, opts );
  // add default style only once to head
  if( $( 'head #tabs-styles-default').length == 0 ) {
    // little hack: by default - use background-color of body
    var bodyBackgroundColor = $('body').css('backgroundColor');
    // _debug( 'body backgroundColor:' + bodyBackgroundColor + " : " + typeof( bodyBackgroundColor ));
    if( bodyBackgroundColor === 'rgba(0, 0, 0, 0)' )
      bodyBackgroundColor = 'white';   // standard white transparent background? use just white
    // todo/fix: possible in css - non transparent background-color using default ??
    //  -- setting opacity: 1.0 tried but was NOT working; anything else to try?
    $( 'head' ).append( "<style id='tabs-styles-default'>\n"+
     ".tabs-nav  { \n"+
     "  margin: 0; \n"+
     "  padding: 0; \n"+
     "  list-style-type: none; \n"+
     "  border-bottom: 1px solid #999; \n"+
     "} \n"+
     ".tabs-nav li { \n"+
     "  display: inline-block; \n"+
     "  margin: 0 0 0 5px; \n"+            // top right bottom left
     "  padding: 5px 15px 3px 15px; \n"+   // top right bottom left
     "  border: 1px solid transparent; \n"+
     "  border-bottom: none;  \n"+
     "  cursor: pointer; \n"+
     "  background-color: "+ bodyBackgroundColor +"; \n"+
     "} \n"+
     ".tabs-nav li.selected { \n"+
     "  padding-bottom: 4px;  \n"+            // note: for bottom use +1px (3px+1px=4px) to overwrite border for "tab" selected effect (1/2)
     "  margin-bottom: -1px;  \n"+            // note: for bottom use -1px (0px-1px=-1px) to overwrite border for "tab" selected effect (2/2)
     "  border: 1px solid #999; \n"+
     "  border-bottom: none;  \n"+
     "} \n"+
     ".tabs-panel { \n"+
     "  padding: 10px; \n"+
     "} \n"+
     "</style>" );
  }
  $tabs         = $( tabs_id );
  $tabsNav      = $tabs.children( 'ul' );    // note: ul must be child of tabs div
  $tabsNavItems = $tabsNav.children( 'li' );  // note: li must be child of tabs div > ul
  $tabsPanels   = $tabs.children( 'div' );  // all div children - note: divs must be child of tabs div
  $tabsNav.addClass( 'tabs-nav' );
  $tabsPanels.addClass( 'tabs-panel' );
  $tabsPanels.hide();
  // when a tab gets clicked; add handler
  $tabsNavItems.each( function( itemIndex, item ) {
     $(item).click( function() {
         // _debug( "itemIndex:" + itemIndex );
         _select( itemIndex );
     });
  });
  // auto-select first tab on init/startup
  _select( 0 );
} // function _init
_init( tabs_id, opts );  
function _select( index ) {
  // step 1) reset selected tab (if present)
  $tabsNavItems.filter( '.selected' ).removeClass( 'selected' );
  $tabsPanels.filter( '.selected' ).removeClass( 'selected' ).hide();
  // step 2) set new selected tab   
  $tabsNavItems.eq( index ).addClass( 'selected' );
  $tabsPanels.eq( index ).addClass( 'selected' ).show(); 
}
  return {
    select: function( index ) {
      _select( index );
      return this;
    }
  };

};

function tabify( tabs_id, opts ) {

var tabs = tabs_new( tabs_id, opts );
return tabs;

}

//////////////////// // wrapper for jquery plugin

(function( $ ) {

function debug( msg ) {
  if( window.console && window.console.log ) {
    window.console.log( "[debug] "+msg );
  }
}
function setup_tabs( tabs_el, opts ) {
  debug( "hello from setup_tabs" );
  var tabs = tabs_new( tabs_el, opts );
  var $tabs = $(tabs_el);
  // NB: attach widget to dom element
  // - use like $('#tabs').data( 'widget' ).select(2); etc.
  $tabs.data( 'widget', tabs );
  return tabs_el;
}
debug( 'add jquery fn tabify' );
$.fn.tabify = function( opts ) {
    debug( "calling tabify" );
    return this.each( function( index, tabs_el ) {
      debug( "before setup_tabs["+ index +"]" );
      setup_tabs( tabs_el, opts );
      debug( "after setup_tabs["+ index +"]" );
    });
};

}( jQuery ));