var W = this, D = this.document;
    var isFlashPopin = false;
    
    box.ui('generic').create({
        id: 'pagemask'
    }).set({
        html: '<div id="pageMask" style="background-color:#000000;z-index:100" ></div>'
    });
    
    box.ui('generic').create({
        id: 'popinloader'
    }).set({
        html: '<div id="popinLoader">' + l10n.loading + '</div>'
    });
    
    box.ui('generic').create({
        id: 'popin'
    });
    	
	var openPopin = function() {
		openMask();
        //  box.ui('generic.popinloader').removeFromDOM();
        if (isFlashPopin) {
            var strPopinWidth = "700px";
            /*
            // popin resize according video parameters
            var strPopinHeight = "480px";
            var intPopinPaddings = 60;
            if (strSwfParams != undefined) {
                aSwfParams = strSwfParams.split('&');
                for (i=0; i < aSwfParams.length; i++) {
                    var strParamName = aSwfParams[i].split('=')[0];
                    var strParamVal = aSwfParams[i].split('=')[1];
                    if (strParamName == 'width') {
                        var intPopinWidth = parseInt(strParamVal) + intPopinPaddings;
                        strPopinWidth = intPopinWidth + "px";
                        alert(intPopinWidth + ' ' + strPopinWidth);
                    }
                    if (strParamName == 'height') {
                        var intPopinHeight = parseInt(strParamVal) + intPopinPaddings;
                        strPopinHeight = intPopinHeight + "px";
                    }
                        
                }
            }
            */
            box.ui('generic.popin')
                .visible(false)
                .addToDOM({target: 'body'})
                .applyStyles({visibility: 'visible', top: 'middle', left: '50%', width:strPopinWidth, marginLeft:"-350px"}, 'viewport');
        } else {
            box.ui('generic.popin')
                .visible(false)
                .addToDOM({target: 'body'})
                .applyStyles({visibility: 'visible', top: 'middle', left: '50%', width:0}, 'viewport')
                .animate({width:"700px", marginLeft:"-350px"}, 500 , 'open');
            $("#popin .popinInner")
                .animate({opacity:0},1)
                .animate({opacity:0},500)
                .animate({opacity:1},500);
        }
    };
    
    var closePopin = function() {
		closeMask();
		if (isFlashPopin) {
            box.ui('generic.popin').applyStyles({visibility: 'hidden', width:"0"}, 'close');
        } else {
            $("#popin .popinInner")
                .animate({opacity:0},300);
            box.ui('generic.popin').animate({width: "0", marginLeft:"0"}, 500, 'close');
        }
    };
    
   var openMask = function() {

        box.ui('generic.pagemask')
            .addToDOM({target: 'body'})
            .applyStyles({position:'absolute', opacity:0.4, top: 0, left: 0, width: 'viewport', height: 'document'})
            .animate({opacity: 0.6}, 500, 'open');

    };	

    var closeMask = function() {
        box.ui('generic.pagemask')
			.animate({opacity: 0}, 500, 'close')
			.removeFromDOM();
    };
    
    var openLoader = function() {
		closePopin();
        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({
        'contentloaded.generic.popin': function(e) {
            if(!box.ui('generic.pagemask').isBusy() && !box.ui('generic.popinloader').isBusy()) {
                closeLoader();
            }
        },'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();
            isFlashPopin = false;
        },'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();
        },'addtodom.generic.popin.legal1': function(e) {
            box.ui('scroll').create({
                element: '.popinScrollable',
                buttons: false,
                bar: true // obligatoire quand boutons présents
            });
        },'close.generic.popin.legal1': function(e) {
                box.ui('scroll').destroy('legal1');
        },'addtodom.generic.popin.whereIsSerialNumber1': function(e) {
            box.ui('scroll').create({
                element: '.popinScrollable',
                buttons: false,
                bar: true // obligatoire quand boutons présents
            });
        },'close.generic.popin.whereIsSerialNumber1': function(e) {
                box.ui('scroll').destroy('whereIsSerialNumber1');
        },'open.generic.popin.retailers1': function(e) {
            box.ui('scroll').create({
                element: '.popinScrollable',
                buttons: false,
                bar: true // obligatoire quand boutons présents
            });
            /**
            * @note          Correct a ie6 bug : link unclickable
            */
            if ($('#retailers .scrolled a').length > 0) {
                $('#retailers .scrolled  a').click ( function () {
                   window.open(this.href);
                   return false;
                });
            }
        },'removefromdom.generic.popin.retailers1': function(e) {
                box.ui('scroll').destroy('popinScrollable');
        },
        
        'open.generic.popin.featureLogo1': function(e) {
            box.ui('scroll').create({
                element: '.popinScrollable',
                buttons: false,
                bar: true // obligatoire quand boutons présents
            });
        },'removefromdom.generic.popin.featureLogo1': function(e) {
                box.ui('scroll').destroy('popinScrollable');
        },
        
        'open.generic.popin.featureLogo2': function(e) {
            box.ui('scroll').create({
                element: '.popinScrollable',
                buttons: false,
                bar: true // obligatoire quand boutons présents
            });
        },'removefromdom.generic.popin.featureLogo2': function(e) {
                box.ui('scroll').destroy('popinScrollable');
        },
        
        'open.generic.popin.featureLogo3': function(e) {
            box.ui('scroll').create({
                element: '.popinScrollable',
                buttons: false,
                bar: true // obligatoire quand boutons présents
            });
        },'removefromdom.generic.popin.featureLogo3': function(e) {
                box.ui('scroll').destroy('popinScrollable');
        },
        
        'open.generic.popin.featureLogo4': function(e) {
            box.ui('scroll').create({
                element: '.popinScrollable',
                buttons: false,
                bar: true // obligatoire quand boutons présents
            });
        },'removefromdom.generic.popin.featureLogo4': function(e) {
                box.ui('scroll').destroy('popinScrollable');
        },

        'open.generic.popin.featureLogo5': function(e) {
            box.ui('scroll').create({
                element: '.popinScrollable',
                buttons: false,
                bar: true // obligatoire quand boutons présents
            });
        },'removefromdom.generic.popin.featureLogo5': function(e) {
                box.ui('scroll').destroy('popinScrollable');
        },

        'open.generic.popin.featureLogo6': function(e) {
            box.ui('scroll').create({
                element: '.popinScrollable',
                buttons: false,
                bar: true // obligatoire quand boutons présents
            });
        },'removefromdom.generic.popin.featureLogo6': function(e) {
                box.ui('scroll').destroy('popinScrollable');
        },

        'open.generic.popin.featureLogo7': function(e) {
            box.ui('scroll').create({
                element: '.popinScrollable',
                buttons: false,
                bar: true // obligatoire quand boutons présents
            });
        },'removefromdom.generic.popin.featureLogo7': function(e) {
                box.ui('scroll').destroy('popinScrollable');
        },

        'open.generic.popin.featureLogo8': function(e) {
            box.ui('scroll').create({
                element: '.popinScrollable',
                buttons: false,
                bar: true // obligatoire quand boutons présents
            });
        },'removefromdom.generic.popin.featureLogo8': function(e) {
                box.ui('scroll').destroy('popinScrollable');
        },

        'open.generic.popin.featureLogo9': function(e) {
            box.ui('scroll').create({
                element: '.popinScrollable',
                buttons: false,
                bar: true // obligatoire quand boutons présents
            });
        },'removefromdom.generic.popin.featureLogo9': function(e) {
                box.ui('scroll').destroy('popinScrollable');
        },

        'open.generic.popin.featureLogo10': function(e) {
            box.ui('scroll').create({
                element: '.popinScrollable',
                buttons: false,
                bar: true // obligatoire quand boutons présents
            });
        },'removefromdom.generic.popin.featureLogo10': function(e) {
                box.ui('scroll').destroy('popinScrollable');
        },

        'open.generic.popin.featureLogo11': function(e) {
            box.ui('scroll').create({
                element: '.popinScrollable',
                buttons: false,
                bar: true // obligatoire quand boutons présents
            });
        },'removefromdom.generic.popin.featureLogo11': function(e) {
                box.ui('scroll').destroy('popinScrollable');
        },
        
        'open.generic.popin.featureLogo12': function(e) {
            box.ui('scroll').create({
                element: '.popinScrollable',
                buttons: false,
                bar: true // obligatoire quand boutons présents
            });
        },'removefromdom.generic.popin.featureLogo12': function(e) {
                box.ui('scroll').destroy('popinScrollable');
        },'addtodom.generic.popin.zoomProduct1': function(e) {
            switchView(e,1);
        },'addtodom.generic.popin.zoomProduct2': function(e) {
            switchView(e,2);
        },'addtodom.generic.popin.zoomProduct3': function(e) {
            switchView(e,3);
        },'addtodom.generic.popin.zoomProduct4': function(e) {
            switchView(e,4);
        },'open.generic.popin.sendFriend1': function(e) {
            /*
            if ($('#sendFriendForm .error').length > 1) {
                alert($('#sendFriendForm .error').text());
                $('#sendFriendForm .error').remove();
            }
            */
        }
            
    });
    
    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();*/
			openLoader();
			if (element.nodeName.toLowerCase() == 'a') {
				box.ui('generic.popin')
					.setNamespace($(element).getBoxDatas('id'))
					.set({url: element.href, cache:false});
			} else {
				box.ui('generic.popin')
					.setNamespace($(element).parent().parent().getBoxDatas('id'))
					.set({url: element.parentNode.parentNode.href, cache:false});					
					
			}
        }
    });
    
    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();
            }
        }
    });
    
    $(document).ready(function() {
        /**
        * @description      Open popin sendToFriend if an error was detected server side 
        */
        if ($("body").hasClass("sendFriendFormHasError")) {
            openLoader();
    	    openPopin();
    	    var popinUrl = "";
    	    
            $('.openPopin').each(function(){
                if ($(this).getBoxDatas('id') == "sendFriend1") {
                    popinUrl = $(this).attr("href");
                }
            });
            box.ui('generic.popin').setNamespace('sendFriend1').set({url: popinUrl}); //'/popin.php?popin=sendFriend&boxid=sendFriend1'
        }
        /**
        * @section      Home Carousel
        * @description  Open a flash popin
        */
        if ($(".home #products .text .details").length > 0) {
            $(".home #products .text .details").click(function(){
                if ($(this).hasClass('flash')) {
                    openPopinVideo(this.href);
                    return false;
                }
            });
        }
    });

    /**
     * @section         popin product
     * @description     switch views
     */
    function switchView(e,view){
        $('#zoomProduct .visual li').hide();
        $('#zoomProduct .visual li.view'+view).show();
        $('#zoomProduct .views a.view'+view).parent().addClass('on');
        $('#zoomProduct .views a').click(function () {
            var elmt = $(this);
            var elmtToShow = $('#zoomProduct .visual li.' + $(this).attr("class"));
            $('#zoomProduct .views li').removeClass('on');
            $(this).parent().addClass('on');
            $('#zoomProduct .visual li').hide();
            elmtToShow.fadeIn("slow");
            return false;
        });
    }
    /**
    * @section      Popins Flash
    */
    function openPopinVideo(videoLink){
        isFlashPopin = true;
        var strSwfUrl = videoLink.split('?')[0];
        //strSwfParams = videoLink.split('?')[1];
        openLoader();
        //openPopin();
        var strPopinUrl = "popinFlash.php";
        box.ui('generic.popin').setNamespace('popinFlash').set({url: strPopinUrl});
        box.bind({
            'addtodom.generic.popin': function(e) {
                openSwfPopin();
                setTimeout('writeFlash("'+strSwfUrl+'")',1000);
            },
            'closefromkey.escape.popin': function(e) {
                closePopin();
            }
        });
    }
    
    function openSwfPopin(){
        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();
                }
            }
        });
    
    }
    
    function writeFlash(linkVid){
        var so = new SWFObject(linkVid, "popinFlashVid", "640", "360", "9");
		so.addParam("allowScriptAccess", "always");
		so.write("contentFlashPopin");
    }