(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'
    });
    
    var openPopin = function() {
        box.ui('generic.popinloader').removeFromDOM();
        box.ui('generic.popin')
            .visible(false)
            .addToDOM({target: 'body'})
            .applyStyles({visibility: 'visible', top: 'before', left: 'middle'}, 'viewport')
            .animate({top: 'viewport:middle'}, 500, 'open');
    };
    
    var closePopin = function() {
        box.ui('generic.popin').animate({top: 'viewport:before'}, 500, 'close');
    };
    
    var openMask = function() {
        box.ui('generic.pagemask')
            .addToDOM({target: 'body'})
            .applyStyles({opacity:0, top: 0, left: 0, width: 'viewport', height: 'document'})
            .animate({opacity: 0.5}, 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: 'body'})
            .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({
		'addtodom.generic.popin': function(e) {
			if(W.ie6) {
				e.source.get().correctPNG();
			}
		},'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: 2,
        test: function(e, element) {
            return (element.nodeName.toLowerCase() == 'a' && element.className.indexOf('openPopin') > -1);
        },
        action: function(e, element) {
            e.preventDefault();
            openMask();
            box.ui('generic.popin')
                .setNamespace($(element).getBoxDatas('id'))
                .set({url: element.href});
        }
    });
    
    box.addClick({
        id: 'closePopin',
        deepness: 2,
        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.addClick({
        id: 'pagemask',
        deepness: 1,
        test: function(e, element) {
			return element.id == 'pageMask';
        },
        action: function(e, element) {
            if(box.ui('generic.popin').isInDOM()) {
                closePopin();
            }
        }
    });
 
})();