﻿// Parametri cookie
var cookieName = 'layoutPos';
var cookieDuration = 365; // days

// Percorso immagini per il tree menu
var subImgOpen = '/templates/valledeilaghi/images/list_open.png';
var subImgClose = '/templates/valledeilaghi/images/list_close.png';

var tabOne = null;
var tabTwo = null;
var tabNews = null;
var tabInbank = null;
var tabsContent = null;

var layoutPos = null;

var closeTabsTimer = null;
var closeTabsTime = 2000;

window.addEvent('domready', function () {

    // Apro il cookie
    layoutPos = new Hash.Cookie(cookieName, { autoSave: true, duration: cookieDuration, path: '/' });
    layoutPos.load();

    // News con dissolvenza /////////////////////////////////////////////////////////////////////////////////////////////////////////

    var currentNews = 0;
    var timeTween = 1000;
    var timePeriod = 4000;
    var overItem = false;

    var _fnShowNewstNews = function () {
        if (overItem) { return; }
        var nextNews = (currentNews + 1) % this.length;
        if (this[currentNews]) { this[currentNews].tween('opacity', 0); }
        if (this[currentNews]) { this[nextNews].tween('opacity', 1); }
        currentNews = nextNews;
    }

    var newsItem = $$('.news-item').each(function (el, index) {
        el.setStyles({ 'opacity': '0', 'display': 'block' });
        el.set('tween', { duration: timeTween });
        if (index == 0) { el.tween('opacity', 1); }
        el.addEvent('mouseenter', function () { overItem = true; }).addEvent('mouseleave', function () { overItem = false; });
    });

    _fnShowNewstNews.periodical(timePeriod, newsItem);

    // Box icone a scorrimento
    var iconsForRow = 1;
    var iconsList = $$('.prodotti-item div');
    var iconsCount = iconsList.length;
    var currentIcon = iconsForRow - 1; // Ultima icona mostrata
    var currentIconPos = 0; // Ultimo posto dove è stata mostrata l'icona
    var overIcon = false;
    var timeIconDelay = 4000;
    var timeIconFade = 1200;

    // Cambia icona
    var changeIcon = function () {

        // Se sono sopra un'icona esco
        if (overIcon) {
            return;
        }

        // Calcolo la posizione dove mettere l'immagine
        var cLeft = iconsList[currentIconPos].getStyle('left').toInt();
        // Nascondo l'immagine che sta occupando il posto di quella nuova
        iconsList[currentIconPos].tween('opacity', 0);
        // Aggiorno la postazione
        currentIconPos = (currentIconPos + 1) % iconsCount;
        // Calcolo la nuova immagine di mostrate
        currentIcon = (currentIcon + 1) % iconsCount;
        // Imposto la posizione dell'immagine
        iconsList[currentIcon].setStyle('left', cLeft);
        // Mostro l'immagine corrente
        iconsList[currentIcon].tween('opacity', 1);

    }

    if (iconsCount > iconsForRow) {
        iconsList.each(function (el, i) {

            el.set('tween', {
                duration: timeIconFade
            }).addEvent('mouseenter', function () {
                overIcon = true;
            }).addEvent('mouseleave', function () {
                overIcon = false;
            });

            if (i >= iconsForRow) {
                el.setStyles({
                    'opacity': 0,
                    'display': 'block'
                });
            }

        });

        // Start con il ciclo
        changeIcon.periodical(timeIconDelay + timeIconFade);
    }


    // Gestione tabs inbank, news /////////////////////////////////////////////////////////////////////////////////////////////////////////

    //var closeTab = $$('.tree-navigation').length > 0;
    rTabsButtons = $$('.r-tabs-button-off');
    rTabsItems = $$('.r-tab-item');

    // Init oggetti
    rTabsItems.setStyles({
        'display': 'block',
        'opacity': 0
    });
    rTabsItems.set('tween', { duration: 300 });

    rTabsButtons.set('status', 'close');


    var posTabLeft = layoutPos.get('posTabLeft');

    if (posTabLeft == null) { posTabLeft = 1; }
    if (posTabLeft != 1 && posTabLeft != 2) { posTabLeft = 1; }

    if (rTabsButtons[Number(posTabLeft - 1)] && rTabsItems[Number(posTabLeft - 1)]) {
        rTabsButtons[Number(posTabLeft - 1)].setClass('r-tabs-button-on');
        rTabsItems[Number(posTabLeft - 1)].setStyle('opacity', 1);
    }

    rTabsButtons.each(function (el, index) {
        el.addEvent('click', function () {

            rTabsButtons.setClass('r-tabs-button-off');
            rTabsButtons.set('status', 'close');
            this.setClass('r-tabs-button-on');
            this.set('status', 'open');

            layoutPos.set('posTabLeft', Number(index + 1));
            rTabsItems.tween('opacity', 0);
            rTabsItems[index].tween('opacity', 1);

        });
    });

    // Gestione tabs nelle pagine /////////////////////////////////////////////////////////////////////////////////////////////////////////

    var innerButtons = $$('.tab-button-off');
    var innerContent = $$('.tabs-content-inner');

    if (innerButtons.length > 0 && innerContent.length > 0) {
        var openedIndex = 0;    // Index aperta in questo momento
        var onFlide = 0;        // Semaforo flide in corso

        // Init slidingDiv
        var slidingDiv = $('slidingDiv');
        slidingDiv.setStyles({ 'display': 'block', 'height': 0 });

        // Init container
        var containerTabs = slidingDiv.getFirst('div');
        containerTabs.setStyle('display', 'block');
        var marginTop = Number(-1 * containerTabs.getSize().y);
        containerTabs.setStyles({ 'opacity': 0, 'marginTop': marginTop });
        containerTabs.set('status', 'close');

        innerButtons.each(function (el, index) {
            el.addEvent('click', function () {
                if (containerTabs.get('status') == 'close') {
                    // Apertura della tab
                    slidingDiv.setStyle('height', 338);

                    /* BEGIN FLIDE IN */
                    innerContent[index].setStyle('display', 'block');
                    containerTabs.set('morph', { duration: 600, onComplete: function () { } });
                    containerTabs.morph({ 'opacity': 0.95, 'marginTop': 0 });
                    containerTabs.set('status', 'open');
                    /* END FLIDE IN */

                    if (!ie6) {
                        innerButtons.setClass('tab-button-off');
                        el.setClass('tab-button-on');
                    }
                }
                else {
                    if (index == openedIndex) {
                        // Chiusura della tab

                        /* BEGIN FLIDE OUT */
                        containerTabs.set('morph', {
                            duration: 600,
                            onComplete: function () {
                                // Nascondo la tab aperta
                                innerContent.setStyle('display', 'none');
                                slidingDiv.setStyle('height', 0);
                                if (!ie6) { innerButtons.setClass('tab-button-off'); }
                            }
                        });
                        containerTabs.morph({ 'opacity': 0, 'marginTop': marginTop });
                        containerTabs.set('status', 'close');
                        /* END FLIDE OUT */
                    }
                    else {
                        // Chiusura della tab e apertura di un'altra

                        /* BEGIN FLIDE OUT */
                        containerTabs.set('morph', {
                            duration: 600,
                            onComplete: function () {
                                // Nascondo le tab aperte
                                innerContent.setStyle('display', 'none');
                                innerContent[index].setStyle('display', 'block');
                                /* BEGIN FLIDE IN */
                                containerTabs.set('morph', { duration: 600, onComplete: function () { } });
                                containerTabs.morph({ 'opacity': 0.95, 'marginTop': 0 });
                                containerTabs.set('status', 'open');
                                /* END FLIDE IN */
                            }
                        });
                        containerTabs.morph({ 'opacity': 0, 'marginTop': marginTop });
                        containerTabs.set('status', 'close');
                        /* END FLIDE OUT */

                        if (!ie6) {
                            innerButtons.setClass('tab-button-off');
                            el.setClass('tab-button-on');
                        }
                    }
                }

                // Segnalo l'index aperta in questo momento
                openedIndex = index;
            });
        });
    }

    // Gestione tabs nella homepage /////////////////////////////////////////////////////////////////////////////////////////////////////////

    var tabsButtons = $$('.tab-button-off', '#area-riservata', '#richiesta-info');
    var tabsContent = $$('.tabs-content');

    if (tabsButtons.length > 0 && tabsContent.length > 0) {

        //        // Testo la variabile e la restituisco se esiste
        //        var resultShowRA = $try(function() {
        //            return showRA;
        //        });

        var activeTab = 4; // Default 0
        //        if (resultShowRA) { activeTab = 4; }

        var onFade = 0;     // Semaforo per fade

        // Nascondo di default tutte le tab e mostro la prima
        tabsContent.setStyle('opacity', 0);
        tabsContent.setStyle('display', 'block');
        tabsContent[activeTab].set('tween', { duration: 200 });
        tabsContent[activeTab].tween('opacity', 1);

        // Setto lo stile attivo sul primo bottone
        tabsButtons.each(function (el, index) {

            el.addEvent('click', function () {

                // Semaforo effetto fade
                if (onFade == 1) { return; }
                onFade = 1;

                // Nascondo la tab aperta
                tabsContent[activeTab].set('tween', { duration: 500 });
                tabsContent[activeTab].tween('opacity', 0);

                // Mostro la giusta tab
                tabsContent[index].set('tween', {
                    duration: 500,
                    onComplete: function () { activeTab = index; onFade = 0; }
                });
                tabsContent[index].tween('opacity', 1);

                // Metto tutti quelli diversi dal corrente ad Off
                var changeButtons = tabsButtons.filter(function (item, index) { return index < 4; });

                if (!ie6) {
                    changeButtons.setClass('tab-button-off');
                    changeButtons.empty();
                    if (index < 4) { tabsButtons[index].setClass('tab-button-on'); }
                }
            });
        });
    } // END controllo presenza button e tabs

    // Gestione hover button tabs per IE6 /////////////////////////////////////////////////////////////////////////////////////////////////////////

    if (ie6) {
        var tabsButtons = $$('.tab-button-off');
        tabsButtons.each(function (el, index) {
            el.addEvent('mouseenter', function () {
                setClassIE6(this, index, 1);
            }).addEvent('mouseleave', function () {
                setClassIE6(this, index, 0);
            });
        });
    }

    // Gestione filiali //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    var filDet = $$('div.filialeBox dl');
    filDet.setStyle('opacity', 0);
    filDet.set('tween', {
        duration: 400,
        onComplete: function () { }
    });
    filDet.addEvent('mouseleave', function () {
        filDet.tween('opacity', 0);
    }).addEvent('mouseenter', function () {
        this.tween('opacity', 0.95);
    });

    var filTitle = $$('div.filialeBox h4');
    filTitle.addEvent('mouseleave', function () {
        filDet.tween('opacity', 0);
    }).addEvent('mouseenter', function () {
        filDet.tween('opacity', 0);
        var det = this.getNext('dl');
        if (det) {
            det.setStyle('display', 'block');
            det.tween('opacity', 0.95);
        }
    });

    // Chiusura del DOMREADY
});

// Setta l'immagine di sfondo per i button su explorer 6
function setClassIE6(element, index, status) {
    if (index < 4) {
        var btnimg = '';
        if (status == 1) {
            btnimg = 'btn-center-on.png';
            if (index == 0) { btnimg = 'btn-first-on.png'; }
            else if (index == 3) { btnimg = 'btn-last-on.png'; }
        }
        else if (status == 0) {
            btnimg = 'btn-center.png';
            if (index == 0) { btnimg = 'btn-first.png'; }
            else if (index == 3) { btnimg = 'btn-last.png'; }
        }
        element.setStyle('background', 'url(\'/templates/valledeilaghi/images/' + btnimg + '\') 0px 0px no-repeat');
    }
}

window.addEvent('load', function () {

    // Gestione del primo menu dinamico //////////////////////////////////////////////////////////////////////////////////////
    var listVoice = $$('.listVoice');

    listVoice.each(function (el) {
        el.set('tween', { duration: 500 });

        var childs = el.getChildren('div');
        childs[0].addEvent('click', function () {
            var initListHeight = this.getSize().y - 1;
            listVoice.tween('height', initListHeight);
            if (childs[1].getChildren().length > 0) {
                if (el.getStyle('height').toInt() <= initListHeight)
                    el.tween('height', initListHeight + childs[1].getSize().y);
            }
        });
    });

});
