/*
Script: tabswapper.js
Handles the scripting for a common UI layout; the tabbed box.

Author:
  Aaron Newton, <aaron [dot] newton [at] cnet [dot] com>

Arguments:
  options - optional, an object containing options.

Options:
      selectedClass - the class for the tab when it is selected
      deselectedClass - the class for the tab when it isn't selected
      mouseoverClass - the class for the tab when the user mouses over
      tabSelector - the css selector to find all the tabs
      clickSelector - the css selector for all the elements the user clicks
                      optional; if not defined, will use tabSelector
      sectionSelector - the css selector for the content the tabs display
      initPanel - the panel to show on init; 0 is default (optional)
      smooth - use effects to smooth transitions; false is default (optional)
      cookieName - if defined, the browser will remember their previous selection
            using a cookie (optional)
      cookieDays - how many days to remember this? default is 999, but it's
            ignored if cookieName isn't set (optional)
      effectOptions - the options to pass on to the transition effect if the "smooth" option is set to true; defaults to {duration: 500}
      onBackground - callback executed when a section is hidden; passed three arguments: the index of the section, the section, and the tab
      onActive - callback executed when a section is shown; passed three arguments: the index of the section, the section, and the tab
  */

var TabSwapper = new Class({
  options: {
    selectedClass: 'tabSelected',
    mouseoverClass: 'tabOver',
    deselectedClass: '',
    tabSelector: '',
    clickSelector:'',
    sectionSelector:'',
    initPanel: 0,
    smooth: false,
    effectOptions: {
      duration: 500
    },
    cookieName: null,
    cookieDays: 999,
    onActive: Class.empty,
    onBackground: Class.empty
  },
  initialize: function(options){
    this.setOptions(options);
    this.sectionOpacities = [];
    if(!$chk(this.options.clickSelector)) this.options.clickSelector = this.options.tabSelector;
    this.setup();
    if(this.options.cookieName && this.recall()) this.swap(this.recall().toInt());
    else this.swap(this.options.initPanel);
  },
  setup: function(){
    var opt = this.options;
    $$(opt.clickSelector).each(function(lnk, idx){
      lnk.addEvent('click', function(){this.swap(idx)}.bind(this));
    },this);
    this.tabs = $$(opt.tabSelector);
    this.sections = $$(opt.sectionSelector);
    this.tabs.each(function(tab, i){
      tab.addEvent('mouseout',function(){
        tab.removeClass(this.options.mouseoverClass);
      }.bind(this)).addEvent('mouseover', function(){
        tab.addClass(this.options.mouseoverClass);
      }.bind(this));
    }.bind(this));
    this.effects = this.sections.map(function(section){
    });
  },
  swap: function(swapIdx){
    this.tabs.each(function(tab, idx){
      this.hideSection(idx);
    }, this);
    this.showSection(swapIdx);
    if(this.options.cookieName) this.save(swapIdx);
  },
  save: function(index){
    Cookie.write(this.options.cookieName, index, {duration:this.options.cookieDays});
  },
  recall: function(){
    return $pick(Cookie.read(this.options.cookieName), false);
  },
  hideSection: function(idx) {
    if (this.sections[idx]) this.sections[idx].setStyle('display','none');
    this.tabs[idx].removeClass(this.options.selectedClass).addClass(this.options.deselectedClass);
    this.fireEvent('onBackground', [idx, this.sections[idx], this.tabs[idx]]);
  },
  showSection: function(idx) {
    var sect = this.sections[idx];
    if (!sect) sect = this.sections[0];
    if(!sect.isVisible()) {
      if (!this.sectionOpacities[idx])
        this.sectionOpacities[idx] = sect.tween('opacity', this.options.effectOptions);
      sect.setStyles({
        display:'block',
        opacity: 0
      });
      if(this.options.smooth && (!Browser.Engine.trident4 || (Browser.Engine.trident4 && sect.fxOpacityOk())))
        this.sectionOpacities[idx].fade('in');
      else if(sect.getStyle('opacity') < 1) {
        this.sectionOpacities[idx].set(1);
      }
      this.fireEvent('onActive', [idx, sect, this.tabs[idx]]);
    }
    this.tabs[idx].addClass(this.options.selectedClass).removeClass(this.options.deselectedClass);
  }
});
TabSwapper.implement(new Options);
TabSwapper.implement(new Events);
//legacy namespace
var tabSwapper = TabSwapper;
/* do not edit below this line */
/* Section: Change Log

$Source: /cvs/main/flatfile/html/rb/js/global/cnet.global.framework/common/layout.widgets/tabswapper.js,v $
$Log: tabswapper.js,v $
Revision 1.16  2007/06/28 00:33:28  newtona
dangit. typo (extra close paren)

Revision 1.15  2007/06/28 00:31:03  newtona
tweaking the event timing in tabswapper

Revision 1.14  2007/06/28 00:11:21  newtona
typo in tabswapper; index instead of idx

Revision 1.13  2007/06/27 22:56:47  newtona
doc update in tabswapper

Revision 1.12  2007/06/27 22:45:21  newtona
docs update to overfiew.js
tabswapper gets some events action
fixed a typo in the docs for smoothmove

Revision 1.11  2007/05/29 22:01:53  newtona
Split element.cnet.js into seperate files; updated docs in files to note this
Changed element.visible to element.isVisible (left old namespace for legacy support)
Fixed Element.empty in prototype.compatibility.js
Removed as many dependencies in common code to element.*.js as possible (espeically element.shortcuts.js)

Revision 1.10  2007/04/12 23:47:34  newtona
fixed a bug where if you defined tabSelector but not clickSelector, things went whacky; now it acts as it should - if !clickSelector then clickSelector = tabSelector

Revision 1.9  2007/03/28 18:08:35  newtona
tabswapper now uses Element.fxOpacityOk to deal with the IE bug where text gets blurry when you fade an element in and out without a bgcolor set

Revision 1.8  2007/03/23 17:59:39  newtona
tabswapper no longer cmplains about this.recall() on load

Revision 1.7  2007/03/16 17:18:41  newtona
transitions no longer used for ie6

Revision 1.6  2007/02/27 19:40:42  newtona
enforcing element.show to use display block

Revision 1.5  2007/02/07 20:51:55  newtona
implemented Options class
implemented Events class

Revision 1.4  2007/01/26 05:53:33  newtona
syntax update for mootools 1.0
docs update
renamed tabSwapper - > TabSwapper

Revision 1.3  2007/01/22 22:49:48  newtona
updated cookie.set syntax

Revision 1.2  2007/01/22 21:59:19  newtona
updated for mootools 1.0

Revision 1.1  2007/01/09 02:39:35  newtona
renamed addons directory to "common" directory

Revision 1.4  2007/01/09 01:26:49  newtona
changed $S to $$

Revision 1.3  2006/11/21 23:55:56  newtona
optimization update

Revision 1.2  2006/11/02 21:26:42  newtona
checking in commerce release version of global framework.

notable changes here:
cnet.functions.js is the only file really modified, the rest are just getting cvs footers (again).

cnet.functions adds numerous new classes:

$type.isNumber
$type.isSet
$set

*/