// dl によってタブを作成するライブラリ

//         <dl id="tab" style="background-color: #fff">
//         <dt rel="tab[hoge]">タブ1</dt>
//         <dd rel="tab[hoge]">
//                 <div class="tab_contents">
//                         タブ1内容
//                 </div>
//         </dd>
//         <dt rel="tab[foo]">タブ2</dt>
//         <dd rel="tab[foo]">
//                 <div class="tab_contents">
//                         タブ2内容
//                 </div>
//         </dd>
//         </dl>
//      <script type="text/javascript">
//      var t = new Tab('tab',{style:{width:100,height:600}}); // サイズに関する指定はここで行う
//      t.set_callback('hoge',function(){タブ1が表示された時に実行する関数(見栄えに関する変更など)});
//      t.set_callback('foo',function(){タブ2が表示された時に実行する関数(見栄えに関する変更など)});
//      t.open('hoge')// hoge を開く

var Tab = Class.create();
Object.extend(Tab.prototype,{
        default_style: {
                base:{
                        'margin': '0px',
                        'padding': '0px',
                        'position':'relative',
                        'top': '20px', // タブheight
                        'height': '400px',
                        'width': '800px'
                },
                tab:{
                        'margin': '0px',
                        'padding': '0px',
                        'position':'relative',
                        'top': '-20px',//タブheight
                        'height': '20px',
                        'display': 'inline',
                        'cursor': 'pointer',
                        'margin-right': '5px',
                        'padding-bottom': '3px',
                        'font-size': '13px',
                        'padding': '3px 10px',
                        'padding-bottom': '0px'
                },
                contents:{
                        'margin':'0px',
                        'padding':'0px',
                        'position':'absolute',
                        'top': '0px',
                        'left': '0px',
                        'display': 'block',
                        'height': '100%',
                        'width': '100%'
                }
        },
        initialize: function(elem,opt){
                var target = $(elem);
                Element.setStyle(target,Object.extend(this.default_style.base,(opt && opt.style ? opt.style : {})));
                this.tab = {};
                this.callback = {};

                $A(target.getElementsByTagName('dd')).each(function(d){
                        var set;
                        if((set = d.getAttribute('rel')) == '' || set.replace(/^tab\[([0-9a-zA-Z_]+)\]/,function(){set=arguments[1]}) && set == ''){return}
                        if(!this.tab[set]){this.tab[set] = {}};
                        set = set.replace(/tab\[(\S+)\]/);
                        this.tab[set]['contents'] = d;
                        Element.setStyle(d,this.default_style.contents);
                        Element.hide(this.tab[set]['contents']);
                }.bind(this));

                $A(target.getElementsByTagName('dt')).each(function(t){
                        var set;
                        if((set = t.getAttribute('rel')) == '' || set.replace(/^tab\[([0-9a-zA-Z_]+)\]/,function(){set= arguments[1]}) && set == ''){return}
                        if(!this.tab[set]){this.tab[set] = {}};
                        this.tab[set]['tab'] = t;
                        Element.setStyle(t,this.default_style.tab);
                        Event.observe(t,'click',this.exec_callback(set).bindAsEventListener(this),true);
                        this.set_callback(set,this.open_tab(set));
                }.bind(this));
                this.target = target;
        },
        exec_callback: function(name){
                return function(){
                        if(!this.callback[name]){return}
                        this.callback[name].each(function(c){ c.bind(this)() })
                };
        },
        set_callback: function(name,callback){
                if(!(this.tab[name] || this.tab[name]['tab'])){
                        return 0;
                }
                if(!this.callback[name]){this.callback[name] = []};
                this.callback[name].push(callback.bindAsEventListener(this));
        },
        open_tab: function(name){
                return function(){
                        if(this.opened == name){ return }
                        if(this.opened){
                                Effect.Fade(this.tab[this.opened]['contents'],{duration:.3,
                                        afterFinish: function(){
                                                Effect.Appear(this.tab[name]['contents'],{duration:.3,afterFinish:function(){
                                                        Element.setOpacity(this.tab[name]['contents'],2);
                                                }.bind(this)});
                                                this.opened = name;
                                        }.bind(this)
                                });
                        }else{
                                Effect.Appear(this.tab[name]['contents'],{duration:.3,afterFinish:function(){
                                        Element.setOpacity(this.tab[name]['contents'],2);
                                }.bind(this)});
                                this.opened = name;
                        }
                };
        },
        open: function(name){
                this.exec_callback(name).bind(this)()
        }
});