var Tabs = new Class({
    Implements: Options,
    options: {
        cont: $('tabs'),
        title: 'dt',
        frame: 'dd',
        framename: 'tabsFrame',
        frameclassname: 'tabsFrame',
        titleclassname: 'tabsTitle'
    },
	initialize: function(options)
    {
        this.setOptions(options);
        this.active = 1;
        this.maxheight = 0;
        this.title = this.options.cont.getElements(this.options.title);
        this.frame = this.options.cont.getElements(this.options.frame);
        this.frames();
        this.titles();
	},
	frames: function()
    {
        var heights = new Array();
        this.frame.each(
            function(el, i)
            {
                el.set('id',  this.options.framename + (i + 1));
                el.set('class',  this.options.frameclassname);
                heights[i] = el.getSize().y;
                if (i > 0) el.setStyle('display', 'none');
            }.bind(this)
        );

        this.maxheight = Math.max.apply(Math, heights);
	},
	titles: function()
    {
        this.options.cont.setStyles({
            'position': 'relative',
            'top': 0,
            'left': 0
        });

        var widths = new Array();
        var totwidth = 0;
        var tabslen = 0;
        this.title.each(
            function(el, i)
            {
                el.set('id',  this.options.framename + (i + 1) + 'title');
                el.setStyles({
                    'position': 'absolute',
                    'top': 0,
                    'left': 0,
                    'text-decoration': 'none',
                    'cursor': 'pointer'
                });

                if (i == 0) {

                    var getheight = el.getStyle('width');
                    el.setStyle('width', '100%');
                    tabslen = el.getSize().x;
                    el.setStyle('width', getheight);
                }

                el.addEvents({
                    'click': function()
                    {
                        $(this.options.framename + this.active).setStyle('display', 'none');
                        $(this.options.framename + (i + 1)).setStyle('display', 'block');
                        this.active = i + 1;
                    }.bind(this)
                });

                widths[i] = el.getSize().x;
                totwidth += el.getSize().x;
            }.bind(this)
        );

        var x = 0;
        var widthslen = widths.length;
        var padding = Math.ceil((tabslen - totwidth) / widths.length);
        var leftpadding = Math.floor(padding / 2);
        for (var i = 0; i < widthslen; i++) {

            var len = widths[i] + padding;
            if (i == widthslen - 1 && x + len > tabslen) len = tabslen - x;
            $(this.options.framename + (i + 1) + 'title').setStyles({
                'left': x,
                'width': len - leftpadding,
                'padding-left': leftpadding
            });

            x += len;
        }
	},
    getMaxHeight: function()
    {
        return this.maxheight;
    }
});

window.addEvent('domready',
    function()
    {
        if ($('tabs1') && $('tabs2') && $('tabs3')) {

            $$('.tabs dt').setStyles({
                'font-weight': 'normal',
                'height': 23,
                'padding-top': 5,
                'color': '#888888',
                'background': '#ffffff url(images/tabs_title.png) repeat-x top left'
            });

            var tabs1 = new Tabs({
                cont: $('tabs1').getElement('dl'),
                framename: 'tabs1Frame',
                tabsheight: 28
            });

            var tabs2 = new Tabs({
                cont: $('tabs2').getElement('dl'),
                framename: 'tabs2Frame',
                tabsheight: 28
            });

            var tabs3 = new Tabs({
                cont: $('tabs3').getElement('dl'),
                framename: 'tabs3Frame',
                tabsheight: 28
            });

            var maxheight = Math.max.apply(Math, [
                tabs1.getMaxHeight(),
                tabs2.getMaxHeight(),
                tabs3.getMaxHeight()
            ]);

            $$('.tabsFrame').setStyles({
                'padding-top': 28,
                'height': maxheight - 14
            });

            $$('.tabs dt').addEvents({
                'click': function()
                {
                    $$('#' + this.getParent('div').get('id') + ' dt').setStyle('background-image', 'url(images/tabs_title.png)');
                    this.setStyle('background-image', 'none');
                }
            });

            $('tabs1Frame1title').fireEvent('click');
            $('tabs2Frame1title').fireEvent('click');
            if ($('tabs3').getElement('dl').hasClass('logged')) $('tabs3Frame3title').fireEvent('click');
            else $('tabs3Frame1title').fireEvent('click');
        }
    }
)