// Add next/previous buttons
var addNav = function(base) {
    base.$el.addClass('current');
    //$("body").css('padding-bottom', '250px'); // keep Donate Now button in view
    var inputs = $('input'),
        len = inputs.length - 1,
        indx = inputs.index(base.$el),
        topPadding = 50; // distance from top where the focused input is placed
    // make sure input is in view
    $(window).scrollTop(inputs.eq(indx).offset().top - topPadding);

    console.log(base);

    // see if nav is already set up
    if (base.$keyboard.find('.ui-keyboard-nav').length) {
        return;
    }
    base.$keyboard.find('.next').hover(function() {
        $(this).addClass('ui-state-hover');
    }, function() {
        $(this).removeClass('ui-state-hover');
    }).click(function() {
        var n = indx + 1;
        if (n >= len) {
            return;
        }
        base.close(true); // true = auto accept
        // set focus to next input
        inputs.eq(n).focus();
        // make sure input is in view
        $(window).scrollTop(inputs.eq(n).offset().top - topPadding);
    });

    base.$keyboard.find('.prev').hover(function() {
        $(this).addClass('ui-state-hover');
    }, function() {
        $(this).removeClass('ui-state-hover');
    }).click(function() {
        var n = indx - 1;
        if (n < 0) {
            return;
        }
        base.close(true); // true = auto accept
        // set focus to previous input
        inputs.eq(n).focus();
        // make sure input is in view
        $(window).scrollTop(inputs.eq(n).offset().top - topPadding);
    });

}; // end prev/next button code
// Keyboard Layouts
$('.keyboard-normal').keyboard({
    layout: 'qwerty',
    autoAccept: 'true',
    usePreview: false,
    visible: function(e, keyboard, el) {
        addNav(keyboard);
    },
    beforeClose: function(e, keyboard, el, accepted) {
        $('input.current').removeClass('current');
        $("body").css('padding-bottom', '0px');
    }
});

$('.keyboard-manager').keyboard({
    layout: 'custon',
    autoAccept: 'true',
    maxLength: 100,
    customLayout: {
        'default': [
            'Q W E R T Y U I O P',
            'A D F G H I J K L Ç',
            'Z X C V B N M',
            '{space}'
        ]
    },
    usePreview: false,
    visible: function(e, keyboard, el) {
        addNav(keyboard);
    },
    beforeClose: function(e, keyboard, el, accepted) {
        $('input.current').removeClass('current');
        $("body").css('padding-bottom', '0px');
    }
});

$('.keyboard-num-2-digitos').keyboard({
    layout: 'custom',
    autoAccept: 'true',
    maxLength: 2,
    css:{
        buttonAction: '',
        buttonActive: '',
        buttonDefault: '',
        buttonDisabled: '',
        buttonEmpty: '',
        buttonHover: ''
    },
    change        : function(e, keyboard, el) {
        return false;
    },
    customLayout: {
        'default': [
            '7 8 9',
            '4 5 6',
            '1 2 3',
            '0 {bksp}'
        ]
    },
    usePreview: false,
    visible: function(e, keyboard, el) {
        addNav(keyboard);
        console.log(keyboard);
        console.log(el);
        $(".ui-keyboard-button").on('click', function (element) {
            var value = $(el).val(),
                count = value.length;
            if(count == 2){
                keyboard.close();
                $(el).val(value);
                $(el).next('input').focus();
                //$(".ui-keyboard-input-current").val(value);
            }
        });
    },
    beforeClose: function(e, keyboard, el, accepted) {
        $('input.current').removeClass('current');
        $("body").css('padding-bottom', '0px');
    }
});

$('.keyboard-num-4-digitos').keyboard({
    layout: 'custom',
    autoAccept: 'true',
    maxLength: 4,
    css:{
        buttonAction: '',
        buttonActive: '',
        buttonDefault: '',
        buttonDisabled: '',
        buttonEmpty: '',
        buttonHover: ''
    },
    customLayout: {
        'default': [
            '7 8 9',
            '4 5 6',
            '1 2 3',
            '0 {bksp}'
        ]
    },
    usePreview: false,
    visible: function(e, keyboard, el) {
        addNav(keyboard);
    },
    beforeClose: function(e, keyboard, el, accepted) {
        $('input.current').removeClass('current');
        $("body").css('padding-bottom', '0px');
    }
});