const field = {
    'parser' : '|||',
    
    
    'textarea' : function($textarea){
        var textarea = $textarea[0];
        
        $textarea.removeClass('height');
        textarea.style.height = '1px';
        
        var textarea_new_height = parseInt($textarea.css('min-height').replace('px',''));
        
        if(textarea.scrollHeight > textarea_new_height){
            $textarea.addClass('height');
            textarea_new_height = textarea.scrollHeight;
        }
        
        textarea.style.height = textarea_new_height+"px";
    },
    
    
    'value'  : function($field){
        var type = $field.attr('data-field');
        
        var $input = $field.find('[name]');
        var $label = $field.find('.label');
        
        switch(type){
            case 'text'   : 
            case 'date'   : 
            case 'select' : 
            case 'file'   : {
                if($input != undefined){
                    var val = $input.val();
                    
                    if(type == 'file'){
                        val = [];
                        var files = $input[0].files;
                        for (var i = 0; i < files.length; i++){
                            val.push(files[i].name);
                        }
                    }
                    
                    if(Array.isArray(val) && val[0] == ''){
                        val = '';
                    }
                    
                    if($input[0].localName == 'textarea'){
                        field.textarea($input);
                    }
                    
                    if(val.length > 0){
                        $field.addClass('fill');
                        
                        if(type !== 'select'){
                            $input.attr('value', val);
                        }
                        
                        if(type !== 'date'){
                            if(Array.isArray(val)){
                                var separator = [', '];
                                var separator_last = separator;
                                
                                if($field.find('.input').attr('data-separator') !== undefined){
                                    separator = $field.find('.input').attr('data-separator').split(field.parser);
                                }
                                
                                if(separator.length > 1){
                                    separator_last = separator[1];
                                }
                                
                                separator = separator[0];
                                
                                if(type == 'select'){
                                    val = val.map(function(x){
                                        if($input.find('option[value="'+x+'"]').length){
                                            return $input.find('option[value="'+x+'"]').html();
                                        }
                                        else{
                                            return x;
                                        }
                                    });
                                }
                                
                                var new_val = '';
                                for (var i = 0; i < val.length; i++){
                                    if(i > 0 && i < val.length){
                                        if(i < val.length - 1){
                                            new_val += separator;
                                        }
                                        else{
                                            new_val += separator_last;
                                        }
                                    }
                                    
                                    new_val += val[i];
                                }
                                
                                val = new_val;
                            }
                            else{
                                if(type == 'select'){
                                    if($input.find('option[value="'+val+'"]').length){
                                        val = $input.find('option[value="'+val+'"]').html();
                                    }
                                }
                            }
                            
                            $field.find('.input').html(val);
                        }
                    }
                    else{
                        $field.removeClass('fill');
                        $input.removeAttr('value');
                        
                        if(type !== 'date'){
                            $field.find('.input').html('');
                        }
                    }
                    
                    if(!isNaN(parseInt($input.attr('maxlength'))) || (type == 'select' && $input.attr('data-limit') != undefined)){
                        var inputlength = val.length;
                        var maxlength   = parseInt($input.attr('maxlength'));
                        
                        if(type == 'select'){
                            inputlength = $input.val().length;
                            maxlength = $input.attr('data-limit');
                            
                            if(inputlength == 1 && $input.val()[0] == ''){
                                inputlength = 0;
                            }
                        }
                        
                        if(!$label.find('.maxlength').length){
                            $label.append('<span class="maxlength" data-maxlength="'+inputlength+'"><span>'+inputlength+'</span><span>'+maxlength+'</span></span>');
                        }
                        else{
                            $label.find('.maxlength').attr('data-maxlength', inputlength);
                            $label.find('.maxlength span:first-child').html(inputlength);
                            $label.find('.maxlength span:last-child').html(maxlength);
                        }
                    }
                }
                
                break;
            }
        }
    },
    
    'validate' : function($field){
        var $input = $field.find('[name]');
        
        if($input != undefined){
            var val = $input.val();
            
            // REQUIRED
            if($input.attr('required') != undefined){
                $field.find('[data-field-log="field-required"]').click();
                
                if(val.length == 0){
                    field.log($field, 'le', 'Ce champ est requis', 'field-required');
                }
            }
            
            // VALIDATION
            switch($input.attr('type')){
                case 'number' : {
                    if($input.attr('min') !== undefined){
                        var val_min = parseInt($input.attr('min'));
                        
                        if(val < val_min){
                            val = val_min;
                            $(this).val(val).change();
                        }
                    }
                    
                    if($input.attr('max') !== undefined){
                        var val_max = parseInt($input.attr('max'));
                        
                        if(val > val_max){
                            val = val_max;
                            $input.val(val).change();
                        }
                    }
                    
                    break;
                }
                
                case 'email' : {
                    if($field.find('[data-field-log*="email-"]').length){
                        $field.find('[data-field-log*="email-"]').click();
                    }
                    
                    if(val.length > 0){
                        if(!(/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/).test(val)){
                            field.log($field, 'le', 'Email invalide', 'email-invalide');
                        }
                        else{
                            field.log($field, 'ls', 'Email valide', 'email-valide');
                        }
                    }
                    
                    break;
                }
            }
        }
    },
    
    
    'number' : {
        'increment' : function($number){
            var min  = $number.attr('min') != undefined ? parseInt($number.attr('min')) : 0;
            var max  = $number.attr('max') != undefined ? parseInt($number.attr('max')) : null;
            
            var step = $number.attr('step') != undefined ? parseInt($number.attr('step')) : 1;
            
            var value = min;    
            if($number.val() != '' && !isNaN(parseInt($number.val()))){
                value = parseInt($number.val());
                
                value = value + step;
                
                value = Math.max(value, min);
                value = Math.min(value, max);
            }
            
            $number.val(value).change();
        },
        
        'decrement' : function($number){
            var min  = $number.attr('min') != undefined ? parseInt($number.attr('min')) : 0;
            var max  = $number.attr('max') != undefined ? parseInt($number.attr('max')) : null;
            
            var step = $number.attr('step') != undefined ? parseInt($number.attr('step')) : 1;
            
            var value = min;    
            if($number.val() != '' && !isNaN(parseInt($number.val()))){
                value = parseInt($number.val());
                
                value = value - step;
                
                value = Math.max(value, min);
                value = Math.min(value, max);
            }
            
            $number.val(value).change();
        }
    },
    
    'date' : {
        'pick' : 0,
        
        'init' : function($field){
            var $input  = $field.find('[name]');
            var $label  = $field.find('.label');
            var $finput = null;
            
            var $pick = $input;
            
            if($field.find('.input').length){
                $finput = $field.find('.input');
            }
            
            var pickmeup_settings = {
                'date' : '',
                'default_date' : false,
                
                'hide_on_select' : true,
                
                'format' : 'Y-m-d',
                'first_day' : 1,
                
                'prev' : '<i class="fa-angle-left"></i>',
                'next' : '<i class="fa-angle-right"></i>',
                
                'mode' : 'single',
                
                'calendars' : 1,
                
                'separator' : field.parser,
                'title_format' : 'B Y',
                
                'class_name' : '',
                
                'locale'  : 'en',
                'locales' : {
                    en : {
                    	days        : ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
                    	daysShort   : ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
                    	daysMin     : ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                    	months      : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                    	monthsShort : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    },
                    fr : {
                        days        : ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
                        daysShort   : ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
                        daysMin     : ['Di', 'Lu', 'Ma', 'Me', 'Je', 'Ve', 'Sa'],
                        months      : ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
                        monthsShort : ['Jan', 'Fev', 'Mar', 'Avr', 'Mai', 'Jui', 'Jul', 'Auo', 'Sep', 'Oct', 'Nov', 'Dec']
                    }
                }
            };
            
            // Date par défaut
            if($input.val().length > 0){
                pickmeup_settings.date = $input.val();
            }
            
            // Mode & Limit
            var mode  = 'single', limit = null;
            if($field.attr('data-date-mode') !== undefined){
                mode = $field.attr('data-date-mode').split(field.parser);
                
                if(mode.length > 1){
                    if(!isNaN(parseInt(mode[1]))){
                        limit = mode[1];
                    }
                }
                
                mode = mode[0];
            }
            
            switch(mode){
                case 'single' : {
                    pickmeup_settings.mode = 'single';
                    
                    break;
                }
                
                case 'multiple' : {
                    pickmeup_settings.mode = 'multiple';
                    pickmeup_settings.hide_on_select = false;
                    
                    if(limit !== null){
                        var dates_limit = 0;
                        if($input.val().length > 0){
                            dates_limit = $input.val().split(pickmeup_settings.separator).length;
                        }
                        
                        var dates_limit_maxlength  = '<span class="maxlength" data-maxlength="'+dates_limit+'">';
                            dates_limit_maxlength += '    <span>'+dates_limit+'</span>';
                            dates_limit_maxlength += '    <span>'+limit+'</span>';
                            dates_limit_maxlength += '</span>';
                        
                        $label.append(dates_limit_maxlength);
                    }
                    
                    break;
                }
                
                case 'range' : {
                    pickmeup_settings.mode = 'range';
                    
                    break;
                }
            }
            
            
            // Min - Max
            if($field.attr('data-date-minmax') !== undefined){
                var date_limit = $field.attr('data-date-minmax').split('/');
                
                if(date_limit[0].length > 0){
                    var date_min;
                    if(date_limit[0].length == 10 && (date_limit[0].match(/-/g) || []).length == 2){
                        date_min = new Date(date_limit[0]);
                    }
                    else{
                        date_min = (new Date()).changeDate(date_limit[0]);
                    }
                    
                    pickmeup_settings.min = date_min;
                }
                
                if(date_limit.length > 1){
                    if(date_limit[1].length > 0){
                        var date_max;
                        if(date_limit[1].length == 10 && (date_limit[1].match(/-/g) || []).length == 2){
                            date_max = new Date(date_limit[1]);
                        }
                        else{
                            date_max = (new Date()).changeDate(date_limit[1]);
                        }
                        pickmeup_settings.max = date_max;
                    }
                }
            }
            
            
            // Disabled            
            if($field.attr('data-date-disabled') !== undefined){
                var date_disabled = $field.attr('data-date-disabled').split('/');
                
                pickmeup_settings.render = function(date){
                    if($.inArray(date.format('dd-mm-yyyy'), date_disabled) > -1 || $.inArray(date.format('yyyy-mm-dd'), date_disabled) > -1 || $.inArray(date.format('dd-mm'), date_disabled) > -1){
                        return {disabled : true};
                    }
                    
                    if($.inArray(date.getDay().toString(), date_disabled) > -1){
                        return {disabled : true};
                    }
                    
                    
                    if($.inArray('holiday', date_disabled) > -1){                            
                        if($.inArray(date.format('dd/mm'), ['01/01','21/04','22/04','01/05','08/05','30/05','09/06','14/07','15/08','01/11','11/11','25/12']) > -1){
                            return {disabled : true};
                        }
                    }
                    
                    
                    return {};
                };
            }
            
            
            // Flat
            if($field.attr('data-date-flat') !== undefined){
                pickmeup_settings.flat = true;
                $pick = $field;
            }
            
            
            // Calendar
            var calendars = Math.floor($field.width() / 280);
            if(280 * calendars + 10 * (calendars - 1) > $field.width()){
                calendars = calendars - 1;
            }
            if(calendars < 1){calendars = 1;}
            pickmeup_settings.calendars = calendars;
            
            // Class
            // $field.attr('data-pmu', field.date.pick);
            // pickmeup_settings.class_name += 'pmu-'+field.date.pick;
            
            field.date.pick++;
            
            // Launch
            pickmeup($pick[0], pickmeup_settings);
            
            
            // Events
            $pick[0].addEventListener('pickmeup-change', function(e){
                var dates_format_input = [], dates_format_finput = [];
                
                var dates = e.detail.date;
                if(!Array.isArray(dates)){dates = [dates];}
                
                var dates_formatted = e.detail.formatted_date;
                if(!Array.isArray(dates_formatted)){dates_formatted = [dates_formatted];}
                
                if(pickmeup_settings.mode == 'multiple' && limit !== null){
                    if(dates.length > limit){
                        var dates_update = [], dates_formatted_update = [];
                        var date_to_unselect = dates.length - limit;
                        
                        for(var i = 0; i < dates.length; i++){
                            // Deselection du premier
                            // if(i >= date_to_unselect){
                            //     dates_update.push(dates[i]);
                            //     dates_formatted_update.push(dates_formatted[i]);
                            // }
                            
                            // Reselection du dernier
                            if(i < limit - 1 || i == dates.length - 1){
                                dates_update.push(dates[i]);
                                dates_formatted_update.push(dates_formatted[i]);
                            }
                        }
                        
                        dates = dates_update;
                        dates_formatted = dates_formatted_update;
                        
                        pickmeup($pick[0]).clear();
                        pickmeup($pick[0]).set_date(dates_update);
                    }
                    
                    
                    $field.find('.label .maxlength').attr('data-maxlength', dates.length);
                    $field.find('.label .maxlength span:first-child').html(dates.length);
                }
                
                
                for (var i = 0; i < dates.length; i++) {
                    dates_format_input.push(dates_formatted[i]);
                    
                    if($finput !== null && $finput.attr('data-date-format') !== undefined){
                        dates_format_finput.push(dates[i].format($finput.attr('data-date-format')));
                    }
                    else{
                        dates_format_finput.push(dates_formatted[i]);
                    }
                }
                
                dates_format_input = dates_format_input.join(pickmeup_settings.separator);
                
                if($finput !== null && $finput.attr('data-separator') !== undefined){
                    dates_format_finput = dates_format_finput.join($finput.attr('data-separator'));
                }
                else{
                    dates_format_finput = dates_format_finput.join(pickmeup_settings.separator);
                }
                
                $input.val(dates_format_input);
                
                if($finput !== null){
                    $finput.html(dates_format_finput);
                }
                
                
                $input.change();
            });
            
            $pick[0].addEventListener('pickmeup-show', function(e){
                $field.addClass('focus');
            });
            
            /* $pick[0].addEventListener('pickmeup-fill', function(e){
                console.log
            }); */
            
            $pick[0].addEventListener('pickmeup-hide', function(){
                $field.removeClass('focus');
            });
            
            
            // Finalisation    
            $pick.addClass('pmu-pick');
            var $pickmeup = $($pick[0].__pickmeup.element);
            
            if(!pickmeup_settings.flat){
                $pickmeup.width($field.width());
            }
            
            if($input.val().length < 1){
                pickmeup($pick[0]).clear();
                $pickmeup.find('.pmu-selected').removeClass('pmu-selected');
            }
        }
    },
    
    'select' : {
        'id' : 0,
        
        'position' : function($field){
            var $select = $('.select[data-select-id="'+$field.attr('data-select-id')+'"]');
            
            var select_style = {
                'width' : ($field.width())+'px',
                'left' : ($field.offset().left)+'px',
                'top' : ($field.offset().top + $field.height())+'px',
            };
            
            $select.css(select_style);
        },
        
        'close' : function($field){
            var $select = $('.select[data-select-id="'+$field.attr('data-select-id')+'"]');
            
            $select.find('.sel-options button').removeClass('hover');
            
            $field.removeClass('open force');
            $select.addClass('sel-hidden');
        },
        
        'open' : function($field){
            $('[data-field="select"]').each(function(){
                field.select.close($(this));
            });
            
            var $select = $('.select[data-select-id="'+$field.attr('data-select-id')+'"]');
            
            field.select.position($field);
            
            $field.addClass('open force');
            $select.removeClass('sel-hidden');
            
            if(!environment.mobile){
                $select.find('.sel-search input').focus();
            }
        },
        
        'init' : function($field){
            var $input = $field.find('[name]'), select = '';
            var $label = $field.find('.label');
            
            var required = ($input.attr('required') != undefined);
            var multiple = ($input.attr('multiple') != undefined);
            var limit    = ($input.attr('data-limit') != undefined) ? $input.attr('data-limit') : null;
            
            var select_attributes  = '';
                select_attributes += ' data-select-id="'+field.select.id+'"';
                select_attributes += ' data-select-required="'+required+'"';
                select_attributes += ' data-select-multiple="'+multiple+'"';
            
            var fold = false;
            
            var options = '', options_selected = [];
            $input.find('option').each(function(i){
                var $option = $(this); var option_html = $option.html(),
                                           option_val  = $option.val();
                                           
                $option.attr('data-index', i);
                if($option.attr('value') == undefined){
                    $option.attr('value', option_val);
                }
                
                // Ouverture groupe
                var label_group = '';
                if($option.closest('optgroup').length && !$option.prev('option').length){
                    fold = true;
                    
                    
                    var label = '';
                    if($option.closest('optgroup').attr('label') !== undefined){
                        label_group = $option.closest('optgroup').attr('label');
                        label = '<span>'+label_group+' <i class="fa-angle-down"></i></span>';
                    }
                    
                    options += '<div>';
                    options +=   label;
                }
                
                if(option_val != ''){
                    var selected = '';
                    if($option.is(':selected')){
                        selected = ' class="active"';
                        options_selected.push(i);
                    }
                    
                    var keywords = option_val;
                    if(label_group.length > 0){
                        keywords = label_group+' '+keywords;
                    }
                    if(option_html !== option_val){
                        keywords += ' '+option_html;
                    }
                    if($(this).attr('data-keywords') !== undefined){
                        keywords += ' '+$(this).attr('data-keywords');
                    }
                    keywords = keywords.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
                    
                    options += '<button type="button" value="'+option_val+'" data-index="'+i+'"'+selected+' data-keywords="'+keywords+'" tabindex="-1">';
                    options +=   '<span>'+option_html+'</span>';
                    options += '</button>';
                }
                
                // Fermeture groupe
                if($option.closest('optgroup').length && !$option.next('option').length){
                    options += '</div>';
                }
            });
            
            if(limit != null){
                // $label.append('<span class="maxlength" data-maxlength="'+options_selected.length+'"><span>'+options_selected.length+'</span><span>'+limit+'</span></span>');
                
                if(options_selected.length > 0){
                    select_attributes += ' data-limit-order="'+options_selected.join(field.parser)+'"';
                }
            }
            
            
            select += '<div class="select sel-hidden"'+select_attributes+'>';
            select +=   '<div class="sel-instance">';
            select +=     '<div class="sel-search">';
            select +=       '<i class="fa-magnifying-glass"></i>';
            select +=       '<input type="search" placeholder="Search">';
            select +=     '</div>';
            
            if(fold){
                select +=     '<div class="sel-actions">';
                select +=       '<button type="button" class="sel-fold">';
                select +=           '<i class="fa-angle-up"></i>';
                select +=       '</button>';
                select +=       '<button type="button" class="sel-unfold">';
                select +=           '<i class="fa-angle-down"></i>';
                select +=       '</button>';
                select +=     '</div>';
            }
            
            if(multiple && limit == null){
                select +=     '<div class="sel-check">';
                select +=         '<button type="button" class="sel-none">';
                select +=             '<i class="fa-square-xmark"></i>';
                select +=         '</button>';
                select +=         '<button type="button" class="sel-all">';
                select +=             '<i class="fa-square-check"></i>';
                select +=         '</button>';
                select +=     '</div>';
            }
            
            select +=     '<div class="sel-options">'+options+'</div>';
            select +=   '</div>';
            select += '</div>';
            
            
            $field.attr('data-select-id', field.select.id);
            field.select.id++;
            
            $('body').append(select);
        },
        
        'value' : function($field){
            var $input  = $field.find('[name]');
            var $select = $('.select[data-select-id="'+$field.attr('data-select-id')+'"]');
            
            var selected = [];
            $select.find('.sel-options button').each(function(){
                if($(this).hasClass('active')){
                    selected.push($(this).val());
                }
            });
            
            $input.val('');
            if(selected.length > 0){
                $input.val(selected);
            }
            
            field.value($field);
        }
    },
    
    
    'init' : function(){
        $('[data-field]').each(function(){
            var $field = $(this);
            var $input = $field.find('[name]');
            var val = $input.val();
            
            field.value($field);
            if(val.length > 0){
                field.validate($field);
            }
            
            
            var type = $field.attr('data-field');
            
            if(field[type] != undefined){
                if(typeof(field[type].init) == 'function'){
                    field[type].init($field);
                }
            }
            
            $('.field-ctas button', this).attr('tabindex', '-1');
        });
    },
    
    
    'log' : function($field, theme, text, id){
        var id = (typeof id !== 'undefined') ? id : null;
        
        if(id == null){
            id = '';
        }
        else{
            id = ' data-field-log="'+id+'"';
        }
        
        var $log = '<button type="button" class="btn xs '+theme+'"'+id+' tabindex="-1"><span>'+text+'</span><span class="icn"><i class="fa-xmark"></i></span></button>';
        
        if(!$field.find('.field-logs').length){
            $field.find('.field-main').after('<div class="field-logs">'+$log+'</div>');
        }
        else{
            $field.find('.field-logs').append($log);
        }
    }
};

field.init();

$(window).resize(function(){
    // Update textarea height
    $('[data-field="text"] textarea[name]').each(function(){
        field.textarea($(this));
    });
        
    // Re-init datepicker
    $('[data-field="date"]').each(function(){
        var $field = $(this);
        var $label = $field.find('.label'); $label.find('.maxlength').remove();
        
        var $pick = $field;
        if(!$pick.hasClass('pmu-pick')){
            $pick = $field.find('.pmu-pick');
        }
        
        if($pick == undefined){
            $pick = $field.find('[name]');
        }
        else{
            pickmeup($pick[0]).destroy();
        }
        
        field.date.init($field);
    });
    
    // Re-position select
    $('[data-field="select"]').each(function(){
        var $field = $(this);
        
        field.select.position($field);
        
        setTimeout(function(){
            field.select.position($field);
        }, 200);
    });
});


// FOCUS
$('body').on('focus', '[data-field] [name]', function(){
    var $input = $(this);
    var $field = $input.closest('[data-field]');
    
    var type = $field.attr('data-field');
    
    if(['text','file','date','select'].indexOf(type) > -1){
        $(this).closest('[data-field]').addClass('focus');
    }
    else{
        $(this).closest('[data-field]').addClass('focus-only');
    }
    
    if(type == 'select'){
        
        if(!$field.hasClass('open')){
            field.select.open($field);
        }
        else{
            field.select.close($field);
            $input.focusout();
        }
    }
});
// FOCUSOUT
$('body').on('focusout', '[data-field] [name]', function(){
    var $input = $(this);
    var $field = $input.closest('[data-field]');
    
    var type = $field.attr('data-field');
    
    $(this).closest('[data-field]').removeClass('focus focus-only');
});
// "FOCUSOUT" -> Close select
$(document).bind('mouseup touchend', function(e){
    if(
        !$('[data-field="select"]').is(e.target) && $('[data-field="select"]').has(e.target).length === 0 &&
        !$('.select').is(e.target) && $('.select').has(e.target).length === 0
    ){
        $('[data-field="select"]').each(function(){
            var $field = $(this);
            field.select.close($field);
        });
    }
});
$('body').on('focus', 'input, select, button, a', function(){
    if(!$(this).closest('[data-field="select"]').length && !$(this).closest('.select').length){
        $('[data-field="select"]').each(function(){
            var $field = $(this);
            field.select.close($field);
        });
    }
});


// VALUE
$('body').on('input change', '[data-field] [name]', function(){
    var $field = $(this).closest('[data-field]');
    field.value($field);
});


// VALIDATE
$('body').on('change', '[data-field] [name]', function(){
    var $field = $(this).closest('[data-field]');
    field.validate($field);
});


// LOGS
$('body').on('click', '[data-field] .field-logs button', function(){
    if($(this).closest('.field-logs').children().length == 1){
        $(this).closest('.field-logs').remove();
    }
    else{
        $(this).remove();
    }
});


// BTNS
$('body').on('click', '[data-field] .field-increment', function(){
    var $field = $(this).closest('[data-field]');
    var $input = $field.find('[name]');
    
    field.number.increment($input);
});
$('body').on('click', '[data-field] .field-decrement', function(){
    var $field = $(this).closest('[data-field]');
    var $input = $field.find('[name]');
    
    field.number.decrement($input);
});

$('body').on('click', '[data-field] .field-reveal', function(){
    var $field = $(this).closest('[data-field]');
    var $input = $field.find('[name]');
    
    $(this).toggleClass('active');
    
    if($(this).hasClass('active')){
        $input.attr('type', 'text');
    }
    else{
        $input.attr('type', 'password');
    }
});

$('body').on('click', '[data-field] .field-clear', function(){
    var $field = $(this).closest('[data-field]');
    var $input = $field.find('[name]');
    
    var type   = $field.attr('data-field');
    
    $input.val('');
    
    $field.removeClass('fill');
    $input.removeAttr('value');
    
    if(type == 'select'){
        var $select = $('.select[data-select-id="'+$field.attr('data-select-id')+'"]');
        
        $select.find('.sel-options button.active').click();
    }
    
    field.value($(this));
    field.validate($(this));
});

$('body').on('click', '[data-field] .field-browse', function(){
    var $field = $(this).closest('[data-field]');
    var $input = $field.find('[name]');
    
    $input.click();
});

$('body').on('click', '[data-field] .field-open', function(){
    var $field = $(this).closest('[data-field]');
    var $input = $field.find('[name]');
    
    
    if(!$field.hasClass('open')){
        field.select.open($field);
    }
    else{
        field.select.close($field);
    }
});

$('body').on('click', '[data-field] .field-toggle', function(){
    var $field = $(this).closest('[data-field]');
    var $input = $field.find('[name]');
    
    $field.toggleClass('field-more-open');
    $(this).toggleClass('active');
});


// SELECT
$('body').on('input change', '.select .sel-search input', function(){
    var $select = $(this).closest('.select');
    var $field = $('[data-field="select"][data-select-id="'+$select.attr('data-select-id')+'"]');
    var $input = $field.find('[name]');
    
    var search = $(this).val().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '');
    
    
    if(search.length < 1){
        $select.find('button').removeClass('hide');
    }
    else{
        $select.find('.sel-options button').each(function(i){
            var keywords = $(this).attr('data-keywords');
            
            if(keywords.indexOf(search) > -1){
                $(this).removeClass('hide');
            }
            else{
                $(this).addClass('hide');
            }
        });
        
        // $select.find('.sel-options button[data-keywords*="'+search+'"]').removeClass('hide');
        // $select.find('.sel-options button:not([data-keywords*="'+search+'"])').addClass('hide');
    }
    
    
    if($select.find('.sel-options div').length){
        $select.find('.sel-options div').each(function(){
            if($('button', this).length == $('button.hide', this).length){
                $(this).addClass('hide');
                $('span', this).addClass('close');
            }
            else{
                $(this).removeClass('hide');
                $('span', this).removeClass('close');
            }
        });
    }
});

$('body').on('mouseenter mousemove', '.select .sel-options button', function(){
    var $select = $(this).closest('.select');
    $select.find('.sel-options button').blur();
    
    $(this).addClass('hover');
});
$('body').on('mouseleave', '.select .sel-options button', function(){
    var $select = $(this).closest('.select');
    $select.find('.sel-options button').blur();
    
    $(this).removeClass('hover');
});

$('body').on('keydown', function(e){
    if($('body > .select:not(.sel-hidden)').length){
        var $select = $('body > .select:not(.sel-hidden)');
        var $field  = $('[data-field][data-select-id="'+$select.attr('data-select-id')+'"]');
            
        switch(e.which) {
            case 38 : {// console.log('UP');
                e.preventDefault();
                
                if($select.find('.sel-options button.hover').length){
                    $select.find('.sel-options button.hover').removeClass('hover').focus();
                }
                
                if(!$select.find('.sel-options button:focus').length){
                    $select.find('.sel-options button').last().focus();
                }
                else{
                    var focused  = parseInt($select.find('.sel-options button:focus').attr('data-index'));
                    var to_focus = focused - 1;
                    
                    if(to_focus <= 0){
                        to_focus = $select.find('.sel-options button').length;
                    }
                    
                    $select.find('.sel-options button[data-index="'+to_focus+'"]').focus();
                }
                
                break;
            }
            
            case 40 : {// console.log('DOWN');
                e.preventDefault();
                
                if($select.find('.sel-options button.hover').length){
                    $select.find('.sel-options button.hover').removeClass('hover').focus();
                }
                
                if(!$select.find('.sel-options button:focus').length){
                    $select.find('.sel-options button').first().focus();
                }
                else{
                    var focused  = parseInt($select.find('.sel-options button:focus').attr('data-index'));
                    var to_focus = focused + 1;
                    
                    if(to_focus > $select.find('.sel-options button').length){
                        to_focus = 1;
                    }
                    
                    $select.find('.sel-options button[data-index="'+to_focus+'"]').focus();
                }
                
                break;
            }
            
            case 13 : 
            case 32 : {// console.log('ENTER / SPACE');
                if(!$select.find('.sel-search input').is(':focus')){
                    e.preventDefault();
                    
                    if($select.find('.sel-options button.hover').length){
                        $select.find('.sel-options button.hover').click();
                    }
                    
                    if($select.find('.sel-options button:focus').length){
                        $select.find('.sel-options button:focus').click().focus();
                    }
                }
                
                break;
            }
            
            case 27 :
            case  8 : {// console.log('ESCAPE / BACKSPACE');
                if(!$select.find('.sel-search input').is(':focus')){
                    e.preventDefault();
                    
                    field.select.close($field);
                }
                
                break;
            }
        }
    }
});

$('body').on('click', '.select .sel-options button', function(){
    var $select = $(this).closest('.select');
    var $field = $('[data-field="select"][data-select-id="'+$select.attr('data-select-id')+'"]');
    var $input = $field.find('[name]');
    
    var required = ($input.attr('required') != undefined),
        multiple = ($input.attr('multiple') != undefined);
    
    var limit = 1, limit_order = [];
    if(multiple){
        limit = null;
        
        if(!isNaN(parseInt($input.attr('data-limit')))){
            limit = parseInt($input.attr('data-limit'));
        }
    }
    
    var index = $(this).attr('data-index');
    
    if(!$(this).hasClass('active')){
        if(!multiple){
            $select.find('.sel-options button.active').removeClass('active');
        }
        
        $(this).addClass('active');
        
        
        if(limit !== null){
            if($select.attr('data-limit-order') == undefined){
                $select.attr('data-limit-order', index);
            }
            else{
                limit_order = $select.attr('data-limit-order').split(field.parser);
                
                if(limit_order.length == limit){
                    // Retire le premier selectionné
                    // $select.find('.sel-options button[data-index="'+(limit_order.shift())+'"]').removeClass('active');
                    
                    // Retire le dernier selectionné
                    $select.find('.sel-options button[data-index="'+(limit_order.pop())+'"]').removeClass('active');
                }
                
                limit_order.push(index);
                $select.attr('data-limit-order', limit_order.join(field.parser));
            }
        }
    }
    else{
        var limit_update = false;
        
        if(!required){
            $(this).removeClass('active');
            limit_update = true;
        }
        else{
            if($select.find('.sel-options button.active').length > 1){
                $(this).removeClass('active');
                limit_update = true;
            }
        }
        
        
        // LIMIT
        if(limit_update && $select.attr('data-limit-order') != undefined){
            limit_order = $select.attr('data-limit-order').split(field.parser);
            
            if(limit_order.indexOf(index) !== -1) {
                limit_order.splice(limit_order.indexOf(index), 1);
            }
            
            if(limit_order.length > 0){
                $select.attr('data-limit-order', limit_order.join(field.parser));
            }
            else{
                $select.removeAttr('data-limit-order');
            }
        }
    }
    
    field.select.value($field);
});

$('body').on('click', '.select .sel-options div > span', function(){
    $(this).toggleClass('close');
});

$('body').on('click', '.select .sel-actions button', function(){
    var $select = $(this).closest('.select');
    
    if($(this).hasClass('sel-fold')){
        $select.find('.sel-options div > span:not(.close)').click();
    }
    
    if($(this).hasClass('sel-unfold')){
        $select.find('.sel-options div > span.close').click();
    }
});

$('body').on('click', '.select .sel-check button', function(){
    var $select = $(this).closest('.select');
    
    if($(this).hasClass('sel-none')){
        $select.find('.sel-options > button.active').click();
    }
    
    if($(this).hasClass('sel-all')){
        $select.find('.sel-options > button:not(.active)').click();
    }
});