﻿/* HOME TABS */
function cap_tabs(toggles, panels, displayElement) {

    // tests des éléments
    if (toggles && panels) {

        // fonction d'affichage d'un tab
        function displayPanel(index) {
            toggles.each(function(item) { item.removeClass('active'); });
            toggles[index].addClass('active');
            panels.each(function(item) { item.setStyle('display', 'none'); });
            panels[index].setStyle('display', 'block');

            var openFx = new Fx.Morph(panels[index].getParent(), { duration: 400, transition: Fx.Transitions.Pow.easeOut })

            openFx.cancel();
            openFx.start({
                'height': [panels[index].getParent().getDimensions()['height'],panels[index].retrieve('height')]
            });
        }

        // initialisation des éléments HTML (ajouts d'index, hauteurs des panels, suppression des href des tabs)
        toggles.each(function(item, index) {
            item.store('index', index);
            item.removeProperty('href');
        });
        panels.each(function(item, index) {
            item.store('index', index);
            item.store('height', item.getDimensions()['height']);
            if (item.getStyle('display') == 'block') {
                item.getParent().setStyles({
                    'height': item.getDimensions()['height'],
                    'overflow': 'hidden'
                });
            }
        });

        // panel ouvert par défaut
        if (displayElement) displayPanel(displayElement);

        // ouverture d'un panel au passage de la souris, avec un délais + CssClass appropriés
        toggles.addEvents({
            'mouseenter': function() {

                // ajout du cssClass hover
                if (this.hasClass('active')) {
                    this.addClass('activeHover');
                } else {
                    this.addClass('hover');
                }

                // ajout du status pour le delais d'ouverture du panel
                if (!this.hasClass('active')) this.setProperty('status', 'wait');

                // ouverture du panel après un certain delais
                function initDelay() {
                    if (this.getProperty('status') == 'wait') {
                        // ouverture de l'element
                        displayPanel(this.retrieve('index'));
                        // suppression du status pour le delais d'ouverture du contenu
                        this.removeProperty('status');
                    }
                };
                initDelay.bind(this).delay(800);

            },
            'mouseleave': function() {

                // suppression du cssClass hover
                this.removeClass('hover');
                this.removeClass('activeHover');

                // suppression du status pour le delais d'ouverture du panel
                this.removeProperty('status');

            },
            'click': function() {

                // ouverture du contenu correspondant
                if (!this.hasClass('active')) displayPanel(this.retrieve('index'));

            }
        });

        return true;

    } else {
        return false;
    }
}

cap_tabs($$('#home_tabs .togglers td a'), $$('#home_tabs .panel'), 0);
