// JavaScript Document

function tabChange(prop){
     this.id = prop.id;
     if(!this.getId(this.id)) return;
     this.link = this.getId(this.id).getElementsByTagName("h3")
     this.inner_link = this.getId(this.id).getElementsByTagName("h4");
     this.target = this.getId(this.id).getElementsByTagName("div");
     this.pre_target = null;
     this.allToggle = prop.allToggle;
     this.current = prop.current;
     this.init();
  }
  tabChange.prototype = {
      init:function (){
        var _this = this.target;
        for (var i=0,j=_this.length ;i<j ;i++ ) {
             _this[i].className = 'hide';
        }
        if(this.current)
        {
           var current_link = this.link[this.current-1]
           current_link.className = 'open';
           this.next(current_link).className = 'show';
         }
       this.events();
       this.innerLink();
     },

     events:function (){
        var _this = this;
        var Links = _this.link;
        for (var i=0,j=Links.length ;i<j ;i++ ) {
             Links[i].onclick = function (){
                  if(_this.allToggle)
                  {
                    if(_this.current)
                     {
                       _this.all(Links[_this.current-1]);
                       _this.current = null;
                     }
                    if(Links.pre_target != this && Links.pre_target)
                      (_this.all(Links.pre_target));
                  }
 
                  this.className = (this.className == 'open') ? '' : 'open';
                  var nextSibling = _this.next(this);
                  nextSibling.className = (nextSibling.className == 'hide') ? 'show' : 'hide';
                  Links.pre_target = this;
             }
        }
     },
     innerLink:function (){
       var _this = this;
       for (var i=0,j=_this.inner_link.length ;i<j ;i++ ) {
          _this.inner_link[i].onclick = function (){
             this.className = (this.className == 'open') ? '' : 'open';
             var nextSibling = _this.next(this);
             nextSibling.className = (nextSibling.className == 'hide') ? 'show' : 'hide';
          }
       }
     },
     all:function (obj){
        obj.className = '';
        this.next(obj).className = 'hide';
     },
     getId:function( elem ) {
         return document.getElementById(elem);
     },
     next:function( elem ) {
        do {
            elem = elem.nextSibling;
        } while ( elem && elem.nodeType != 1 );
        return elem;
     }
  }

  window.onload = function (){
     new tabChange({ id:'config' , allToggle:false , current:1 });
    // new tabChange({ id:'02' , current:1});
    // new tabChange({ id:'03' , allToggle:true , current:2});
  }