﻿// GESTIONE BOX POPUP ////////////////////////////////////////////////////////////////////////////////////////////////////
var Box = new Class({

    Implements: Options,

    options: {
        width: 300,                 /* larghezza box popup */
        height: 200,                /* altezza box popup */
        top: 0,                     /* top del box definito dall'utente*/
        left: 0,                    /* left del box definito dall'utente */
        positionMode: 0,            /* 0 centrato, 1 definito dall'utente secondo top e left */
        backgroundTrasparency: 0,   /* trasparenza del backgreound */
        popupTrasparency: 0,        /* trasparenza del popup */
        tweenDuration: 700,
        text: ' '                   /* testo tel popup */
    },


    initialize: function (options) {
        this.setOptions(options);

        if (Cookie.read('viewed') == 'true') {
            return;
        }

        // creo sfondo e box di popup
        this.blackLayer = null;
        this.boxLayer = null;

        // inserisco sfondo nero
        if (this.options.backgroundTrasparency > 0) {
            this.blackLayer = new Element('div', { id: 'blackLayer' });
            this.blackLayer.inject(document.body);
        }

        // inserisco box nella pagina
        this.boxLayer = new Element('div', { id: 'boxLayer' });
        this.boxLayer.inject(document.body);

        //aggiungo il testo al box
        this.boxLayer.set('html', unescape(this.options.text));

        var myclass = this;

        if (this.blackLayer != null) {
            // aggiungo la chiusura del box al click
            this.blackLayer.addEvent("click", function () {
                myclass.hideBox();
            });
        }

        // imposto la chiusura del box per ogni <a> interno allo stesso
        this.boxLayer.getElements('a').each(function (el) {
            el.addEvent("click", function (ev) {
                ev.preventDefault();

                var href = el.getProperty('href');

                if (el.getProperty('target') == '_blank') {
                    window.open(href);
                }
                else if (href != null && href.length > 1) {
                    location.href = href;
                }

                myclass.hideBox();

            });
        });

        // se non ci sono link il click del popup lo fa chiudere
        if (this.boxLayer.getElements('a').length <= 0) {
            this.boxLayer.addEvent('click', function () {

                myclass.hideBox();

            });
        }

        // visualizzo il box
        this.showBox();
    },

    showBox: function () {

        if (this.blackLayer != null) {
            this.blackLayer.setStyles({ 'opacity': this.options.backgroundTrasparency / 100, 'display': 'inline', 'background': 'black', 'width': '100%', 'height': '100%', 'position': 'fixed', 'top': '0', 'left': '0', 'z-index': '100000' });
        }

        this.boxLayer.setStyles({ 'opacity': this.options.popupTrasparency / 100, 'display': 'inline', 'background': 'white', 'width': this.options.width, 'height': this.options.height, 'position': 'fixed', 'z-index': '100001' });

        if (this.options.positionMode == 1) {
            // posizionamento definito dall'utente
            this.boxLayer.setStyles({ 'left': this.options.left, 'top': this.options.top });
        }
        else {
            // altrimenti centrato
            this.boxLayer.setStyles({ 'margin-left': (-1) * this.options.width / 2, 'margin-top': (-1) * this.options.height / 2, 'top': '50%', 'left': '50%' });
        }

    },

    hideBox: function () {

        var myclass = this;

        if (this.blackLayer != null) {
            this.blackLayer.set('tween', { duration: this.options.tweenDuration, onComplete: function () {
                myclass.blackLayer.setStyle('display', 'none');
            }
            });
            this.blackLayer.tween('opacity', 0);
        }

        this.boxLayer.set('tween', { duration: this.options.tweenDuration, onComplete: function () {
            myclass.boxLayer.setStyle('display', 'none');
        }
        });
        this.boxLayer.tween('opacity', 0);

        Cookie.write('viewed', 'true');
    }

});

