var LOP = {};

(function($) {
    var W = this, D = this.document;
    
    $(D.documentElement || 'html').attr('id', 'js');
    
    LOP.scrolls = {};
    
    var popinContainer, closeLinkPopins = '<a href="#" class="close box:id:closePopin">' + l10n.generic.close + '</a>';
    
    LOP.processHTMLPopins = function(html) {
        if (html.indexOf('popinInner') > -1) {
            return html.replace(/("?popinInner"?[^>]*>)/, '$1' + closeLinkPopins);
        }
        return html;
    };
    
    var getCoreDimensions = function() {
        LOP.coreHeight = $('div.wrapper')[0].offsetHeight;
        LOP.coreOffset = {top: 0, left: 0};
        LOP.coreOffsetMax = {top: LOP.coreHeight, left: 950};
    };
    
    var reFieldParentCls = /\b(text|radioGroup|select|checkbox)\b/;
    var getFieldParent = function(field) {
        var t = field.parentNode, target;
        while (t.parentNode) {
            if (reFieldParentCls.test(t.className)) {
                return t;
            }
            t = t.parentNode;
        }
    };
    
    var errorImg = '<img id="%id%" class="error box:id:formError" alt="%msg%" src="/img/common/picto/error.gif" />';
    
    var fieldsTypes = {
        'text': 'single',
        'password': 'single',
        'select-one': 'single',
        'radio': 'group',
        'checkbox': 'single'
    };
    
    var addErrorPicto = {
        single: function(p, img) {
            var t = $('label', p);
            if (t.length == 1) {
                t.prepend(img);
            } else {
                $(p).prepend(img);
            }
        },
        group: function(p, img) {
            var t = $('span.legend', p);
            if (t.length == 1) {
                t.prepend(img);
            } else {
                $(p).prepend(img);
            }
        }
    };
    
    var manageFieldError = function(e, msg) {
        if (e.namespace && e.namespace.length == 2) {
            var type = e.namespace[0], name = e.namespace[1], obj = this[type](name), field;
            if (obj.getElement(0)) {
                if (obj.name.indexOf('birthmonth') > -1 || obj.name.indexOf('birthyear') > -1) {
                    field = this.text('birthday').getElement();
                    name = this.text('birthday').name;
                } else {
                    field = obj.getElement(0);
                }
                if (msg) {
                    addFieldError(field, name, msg);
                } else {
                    removeFieldError(field, name);
                }
            }
            obj = field = null;
        }
    };
    LOP.manageFieldError = manageFieldError;
    
    var addFieldError = function(field, id, msg) {
        var p = getFieldParent(field);
        if (field.name.indexOf('birthmonth') > -1 || field.name.indexOf('birthyear') > -1) {
            p = p.parentNode.getElementsByTagName('label')[0];
        }
        $(p).addClass('error');
        id = id + 'Error';
        var img = $('#' + id);
        if (!img.length) {
            var type = fieldsTypes[field.type];
            if (type) {
                addErrorPicto[type](p, errorImg.replace('%id%', id).replace('%msg%', msg));
            }
        } else {
            img.attr('alt', msg);
        }
    };
    
    var removeFieldError = function(field, id) {
        $('#' + id + 'Error').remove();
        var p = getFieldParent(field);
        $(p).removeClass('error');
    };
    
   var addFormError = function(e, formEvent, msg) {
        if(msg) {
            $('#' + this.element.id + 'Error').text(msg).css('display', 'block');
        }
    };
    LOP.addFormError = addFormError;
    
    var removeFormError = function(e, formEvent) {
        $('#' + this.element.id + 'Error').css('display', 'none').empty();
    };
    LOP.removeFormError = removeFormError;
    
    BOX.addFormRule('password', /^.{5,}$/);
    
    var managePopins = (function() {
        var popinInnerTop;
        var nodeNames = '/a/abbr/acronym/code/em/img/span/strong/sub/sup/';
        
        LOP.popinOpeningActions = {
            position: function(id) {
                popinInnerTop = (popinContainer[0].offsetHeight - LOP.popins.currentDOM[0].offsetHeight) / 2;
                LOP.popins.currentDOM.css('top', popinInnerTop + 'px');
            }
        };
        
        LOP.popinClosingActions = {};
        
        var open = function(e, id) {
            // LOP.coreMask.show('coreMaskPopin', {top: LOP.maskTop + 'px', height: LOP.maskHeight + 'px'});
            // popinContainer.css({top: LOP.maskTop + 'px', height: LOP.maskHeight + 'px'});
            if (LOP.popinOpeningActions[id]) {
                LOP.popinOpeningActions[id]();
            }
        };
        
        var close = function(e, id) {
            if (LOP.popinClosingActions[id]) {
                LOP.popinClosingActions[id]();
            }
            LOP.tooltips.close();
            // LOP.coreMask.hide();
        };
        
        return function(action) {
            LOP.popinContainer = popinContainer = $('#popin');
            LOP.popins = new BOX.Popins({
                insertPoint: popinContainer
            });
            LOP.popins.addListeners({
                'open': {
                    fn: open
                },
                'close': {
                    fn: close
                }
            });
            LOP.popins.prepare('#popin', 'div.popinWrapper', l10n.url, LOP.processHTMLPopins);
        };
    })();
    
    var fieldsNames = 'input,textarea,select,span';
    
	// scroll specific execution

    var scrollActions = {

        vertical: function(el, idObj) {

            LOP.scrolls[idObj] = new BOX.SimpleScroll({

                target: el

            });

        },

        horizontal: function(datas) {

            LOP.scrolls[datas.id] = new BOX.SimpleScroll({

                target: datas.node,

                targetScrollBar: datas.scrollTarget,

                from: 'left',

                listeners: {

                    'beforeCompute': {

                        fn: function(e) {

                            var li = $('li', this.sContent);

                            if (datas.visibleOnLine && li.length >= datas.visibleOnLine) {

                                this.sContent.width(Math.ceil(li.length / 2) * datas.itemWidth);

                            } else {

                                this.sContent.width(li.length * datas.itemWidth);

                            }

                            var left = 0;

                            if(datas.scrollOffsetTarget !== null) {

                                left = $(datas.scrollTarget + ' ' + (datas.scrollOffsetTarget || 'h2')).width();

                            }

                            this.sContainer.css({

                                'left': (left + datas.scrollMargin) + 'px',

                                'width': (datas.totalWidth - left - datas.scrollMargin) + 'px'

                            });

                        }

                    }

                }

            });

        },

        filteredProductsList: function(el, id) {

            this.horizontal({

                'node': el,

                'id': id,

                'scrollTarget': '#products',

                'itemWidth': 240,

                'totalWidth': 720,

                'scrollMargin': 10,

                'visibleOnLine': 4

            });

        },

        filteredMediasList: function(el, id) {

            this.horizontal({

                'node': el,

                'id': id,

                'scrollTarget': '#medias',

                'itemWidth': 180,

                'totalWidth': 720,

                'scrollMargin': 10

            });

        },

        diagGroup1List: function(el, id) {

            this.horizontal({

                'node': el,

                'id': id,

                'scrollTarget': '#group1',

                'itemWidth': 240,

                'totalWidth': 720,

                'scrollMargin': 10

            });

        },

        diagGroup2List: function(el, id) {

            this.horizontal({

                'node': el,

                'id': id,

                'scrollTarget': '#group2',

                'itemWidth': 240,

                'totalWidth': 720,

                'scrollMargin': 10

            });

        },

        diagMediasList: function(el, id) {

            this.horizontal({

                'node': el,

                'id': id,

                'scrollTarget': '#medias',

                'itemWidth': 180,

                'totalWidth': 720,

                'scrollMargin': 10

            });

        },

        diagBodyCareProducts: function(el, id) {

            this.horizontal({

                'node': el,

                'id': id,

                'scrollTarget': '#products',

                'scrollOffsetTarget': null,

                'itemWidth': 240,

                'totalWidth': 720,

                'scrollMargin': 0

            });

        }

    };

    LOP.scrollActions = scrollActions;

    

    // prepare and create scroll

    var prepareScroll = function() {

        var id, forceScroll;

        $('body .scroll').each(function() {

            var id = BOX.getStoreId(this);

            var mode = BOX.getStoreId(this, 'mode');

            if (mode != 'delegate') {

                if (scrollActions[id]) {

                    scrollActions[id](this, id);

                } else {

                    scrollActions.vertical(this, id);

                }

            }

        });

    };


	
    var clickActions = {
        label: function(e, t) {
            if ($(t).attr('for')) {
                return;
            }
            var field = $(t).prev()[0];
            if (!field || fieldsNames.indexOf(field.nodeName.toLowerCase()) == -1) {
                field = $(t).next()[0];
            }
            if (field && field.className == 'AnswerClass') {
                field = $(field).children()[0];
            }
            if (field && field.type) {
                switch (field.type) {
                    case 'text':
                    case 'password':
                    case 'select-one':
                    case 'textarea':
                        field.focus();
                        break;
                    case 'radio':
                    case 'checkbox':
                        field.click();
                        field.focus();
                        break;
                }
            }
        },
        a: function(e, t) {
            var id = BOX.getStoreId(t);
            if (id == 'closePopin') {
                e.preventDefault();
                var mode = BOX.getStoreId(t, 'mode');
                if(mode && mode == 'iframe') {
                    W.top.LOP.popins.close();
                } else {
                    LOP.popins.close();
                }
            } else if (t.rel && t.rel.indexOf('popin') > -1) {
                e.preventDefault();
                var action = BOX.getStoreId(t, 'action');
                if (action && LOP.stfDatasActions[action]) {
                    LOP.stfDatas = LOP.stfDatasActions[action]();
                } else {
                    LOP.stfDatas = null;
                }
                LOP.popins.add({
                    url: t.href,
                    id: id,
                    refresh: (BOX.getStoreId(t, 'mode') == 'nocache') ? true : false,
                    processHTML: LOP.processHTMLPopins
                });
            }
        }
    };
    
    var manageClicks = function() {
        $(D).click(function(e) {
            var t = e.target;
            while (t && t != this) {
                var tagName = t.nodeName.toLowerCase();
                if (clickActions[tagName]) {
                    clickActions[tagName](e, t);
                    break;
                }
                t = t.parentNode;
            }
        });
    };
	
    // configure tools immediatly
    BOX.setConfig('scroll', {
        container: '<div class="scrollContent">%content%</div>',
        simpleBar: '<div class="scrollBar" style="visibility:hidden;"><span class="face"></span></div>',
        fullBar: '<div class="scrollBar" style="visibility:hidden;"><span class="up"></span><span class="face"></span><span class="down"></span></div>'
    }).setConfig('slide', {
        prev: '<a href="#" class="prev">' + l10n.simpleSlide.prev + '</a>',
        next: '<a href="#" class="next">' + l10n.simpleSlide.next + '</a>'
    }).setConfig('toolTip', {
        container: '<div class="toolTip" style="left:-10000px;"><div id="toolTipInner"></div></div>'
    }).setConfig('popin', {}).setConfig('fauxFields', {
        checked: 'checked',
        focus: 'focus',
        checkedFocus: 'checkedFocus',
        selected: 'selected',
        hover: 'hover'
    }).setConfig('fauxSelect', {
        container: '<div id="fauxSelect" style="left:-10000px;"></div>',
        mask: '<div id="fauxSelectMask" style="display:none;"></div>'
    });
    
    
    // DOMReady
    $(D).ready(function() {
        getCoreDimensions();
        manageClicks();
		prepareScroll();
        LOP.tooltips = new BOX.ToolTips();
        LOP.tooltips.addListener('beforeOpen', function(e, trigger, triggerOffset, divToolTip, top, left) {
            var width = divToolTip[0].offsetWidth;
            var maxW = left + width;
            var nleft = left;
            if (maxW > LOP.coreOffsetMax.left) {
                nleft = LOP.coreOffsetMax.left - width;
            } else if (nleft < LOP.coreOffset.left) {
                nleft = LOP.coreOffset.left;
            }
            var backgroundPosition = - (1009 / 2 - (width / 2 + left - nleft));
            divToolTip.css('background-position', backgroundPosition + 'px 100%');
            this.setPosition(top, nleft);
        });
        managePopins();
    });
        
})(jQuery);