(function() {
    
    var W = this, D = this.document;
    
    box.ui('generic').create({
        id: 'pagemask'
    }).set({
        html: '<div id="pageMask"></div>'
    });
    
    box.ui('generic').create({
        id: 'popinloader'
    }).set({
        html: '<div id="popinLoader">' + l10n.loading + '</div>'
    });
    
    box.ui('generic').create({
        id: 'popin'
    });
    
    box.ui('form').configure({
        fauxOptionsScrollbarOffset: 3,
        webbox: true
    });
    
    var openPopin = function() {
        box.ui('generic.popinloader').removeFromDOM();
        box.ui('generic.popin')
            .visible(false)
            .addToDOM({target: 'form'})
            .applyStyles({visibility: 'visible', top: 'before', left: 'middle', 'min-left': 0}, 'viewport')
            .animate({top: 'viewport:middle', 'min-top': 0}, 500, 'open');
    };
    
    var closePopin = function() {
        box.ui('generic.popin').animate({top: 'viewport:before'}, 500, 'close');
    };
    ker.closePopin = closePopin;
    
    var openMask = function() {
        box.ui('generic.pagemask')
            .addToDOM({target: 'form'})
            .applyStyles({opacity:0, top: 0, left: 0, width: 'viewport', height: 'document'})
            .animate({opacity: 0.75}, 180, 'open');
    };
    
    var closeMask = function() {
        box.ui('generic.pagemask').animate({opacity: 0}, 180, 'close');
    };
    
    var openLoader = function() {
        box.ui('generic.popinloader')
            .visible(false)
            .addToDOM({target: 'form'})
            .applyStyles({visibility: 'visible', opacity: 0, top: 'middle', left: 'middle'}, 'viewport')
            .animate({opacity: 0.999}, 300, 'open');
    };
    
    var closeLoader = function() {
        box.ui('generic.popinloader').animate({opacity: 0}, 300, 'close');
    };
    
    box.bind({
        'contentloaded.generic.popin': function() {
            if(!box.ui('generic.pagemask').isBusy() && !box.ui('generic.popinloader').isBusy()) {
                closeLoader();
            }
        },'open.generic.pagemask': function(e) {
            if(box.ui('generic.popin').isContentLoaded()) {
                openPopin();
            } else {
                openLoader();
            }
        },'open.generic.popinloader': function(e) {
            if(box.ui('generic.popin').isContentLoaded()) {
                closeLoader();
            }
        },'close.generic.popinloader': function(e) {
            openPopin();
        },'close.generic.popin': function(e) {
            box.ui('generic.popin').removeFromDOM();
            closeMask();
        },'close.generic.pagemask': function(e) {
            box.ui('generic.pagemask').removeFromDOM();
        },'open.generic.popin': function(e) {
            box.ui('escape').create('popin');
        },'closefromkey.escape.popin': function(e) {
            closePopin();
        }
    });
    
    box.addClick({
        id: 'openPopin',
        deepness: 3,
        test: function(e, element) {
            return (element.nodeName.toLowerCase() == 'a' && element.className.indexOf('openPopin') > -1);
        },
        action: function(e, element) {
            e.preventDefault();
            openMask();
            var id = $(element).getBoxDatas('id'), url = l10n.url.async[id] || element.href;
            box.ui('generic.popin').setNamespace(id).set({url: url, cache: id != 'pressScan'});
        }
    });
    
    box.addClick({
        id: 'closePopin',
        deepness: 1,
        test: function(e, element) {
            return (element.nodeName.toLowerCase() == 'a' && element.className.indexOf('closePopin') > -1);
        },
        action: function(e, element) {
            e.preventDefault();
            var ns = box.dom(element).getBoxDatas('id');
            if(ns == box.ui('generic.popin').getNamespace()) {
                closePopin();
            }
        }
    });
    
    box.dom(document).ready(function() {
        var directAccess = box.getURLHash('popin');
        if(directAccess && l10n.url.async.popins && l10n.url.async.popins[directAccess]) {
            openMask();
            box.ui('generic.popin')
                .setNamespace(directAccess)
                .set({url: l10n.url.async.popins[directAccess]});
        }
    });
    
    // turn off sound when opening discover kerastase
    box.bind({
        'addtodom.generic.popin': function(e) {
            if(e.namespace == 'discoverKerastaseFR' || e.namespace == 'discoverKerastaseEN') {
                var sound = D.getElementById('dispatchSoundFlash');
                if(sound && sound.callSoundControl) {
                     sound.callSoundControl();
                }
            }
        },'removefromdom.generic.popin': function(e) {
            if(e.namespace == 'discoverKerastaseFR' || e.namespace == 'discoverKerastaseEN') {
                var sound = D.getElementById('dispatchSoundFlash');
                if(sound && sound.callSoundControl) {
                     sound.callSoundControl();
                }
            }
        }
    });
    
})();