/*
<!-- Markup -->

<ul id="link_tabpanel">
    <li><a href="#panel1">Link1</a></li>
    <li><a href="#panel2">Link2</a></li>
    <li><a href="#panel3">Link3</a></li>
    <li><a href="#panel4">Link4</a></li>
</ul>

<div id="container_tabpanel">
    <div id="panel1">...</div>
    <div id="panel2">...</div>   <!-- default opened -->
    <div id="panel3">...</div>
    <div id="panel4">...</div>
</div>

<!--
Then create an instance of Tab object at DOMLoad event with this syntax:
var instance_tab = (new Tab()).init(<id_ul_list>, <id_tabpanels_container> [, default_tab_opened : default = 1 ]);

in above example use -->

<script>
DomLoad.load(function() {
    var mytab = (new Tab()).init('link_tabpanel', 'container_tabpanel', 2);
});
</script>

*/

function Tab() {

    this.op         = 1;
    this.lnk        = [];

    function $id(id) { return (document.getElementById)? document.getElementById(id) : document.all[id]; }
    function trim(s) { return s.replace(/(^\s+|\s+$)/g, '');}

    this.tl = [];
    this.tp = [];

    this.getPanels = function(idtabpanel) {
        cp = 0;
        panels = $id(idtabpanel).getElementsByTagName('div');
        for (var i=0; i<panels.length; i++) {
            if ((/tabpanel/).test(panels[i].className)) {
                this.tp.push(panels[i]);
                panels[i].style.display = (++cp == this.op)? 'block':'none';
            }
        }
    }

    this.closeAllPanels = function() {
        for (var i=0; i<this.tp.length; i++)
        this.tp[i].style.display = 'none';
    };


    this.registerPanel = function(element, id) {
        if (!($id(element)) || !($id(id))) return false;
        this.associateRegister(element, id);
    };

    this.setLinkEvt = function(idtablink) {
        this.lnk = $id(idtablink).getElementsByTagName('a');
        for (var i=0; i<this.lnk.length; i++) {
            id = this.lnk[i].hash.replace(/^#/, '');
            this.associateLink(this.lnk[i], id);
            if (i+1 == this.op) this.lnk[i].parentNode.className += ' selected';
        }

        this.tl = $id(idtablink).getElementsByTagName('li');
    };

    this.removeCurrentClass = function() {
        for (var i=0; i<this.tl.length; i++) {
            var ccn = this.tl[i].className;
            if (/selected/.test(ccn))
            this.tl[i].className = trim(ccn.replace(/selected/, ''));
            if (/^\s*$/.test(this.tl[i].className)) this.tl[i].removeAttribute('class');
        }
    };

    this.associateLink = function(l, d) {
        var _self = this;
        l.onclick = function() {
            return function(l) {
                if (!(/selected/.test(l.parentNode.className))) {
                    _self.closeAllPanels();
                    if ($id(d)) {
                        _self.removeCurrentClass();
                        $id(d).style.display = 'block';
                        l.parentNode.className = 'selected';
                    }
                    else alert([d, 'is undefined'].join(' '));
                }
                return false;

            }(l)
        }

        //l = null; // Leak Memory IE (Circular reference)

    };

    this.associateRegister = function(l, d) {
        var _self = this;
        l = $id(l);
        l.onclick = function() {
            return function(l) {
                _self.closeAllPanels();
                _self.removeCurrentClass();
                $id(d).style.display = 'block';
                for (var i=0; i<_self.lnk.length; i++) {
                    if (_self.lnk[i].hash.replace(/^#/, '') == d) _self.lnk[i].parentNode.className += ' selected';
                }
                return false;

            }(l)
        }

        //l = null; // Leak Memory IE (Circular reference)

    }

    this.init = function(idtablink, idtabpanel, openpanel) {
        this.op = openpanel || 1;
        this.getPanels(idtabpanel);
        this.setLinkEvt(idtablink);
    }
}