(function($){
    $.fn.list = function(params){
        var $this = $(this),
            html;

        var settings = $.extend({
            sentence: null,
            change: null,
            messageWell:null,
            messageWrong:null
        },params);

        main.call(this);
        function main(){
            $this.on('click','.fn_btncheck',check);
            draw();
            checkSizeScreen();
            $(window).resize(function() {
                checkSizeScreen();
            });
        }

        function draw(){
            html = '';
            html +='<div class="sentence"><p>'+settings.sentence+'</p></div>';

            $('.lists', $this).html(html);

            for(var i in settings.change)
            {
                var oldWord = settings.change[i].word,
                    options = settings.change[i].options;

                $('.lists', $this).html( $('.lists', $this).html().replace(oldWord,'<select class="ddl " placeholder="Despliega ..."></select>'));

                $('.lists', $this).find('.ddl').eq(i).append('<option class="opt-info">Despliega ...</option>');
                for(var j in options)
                {
                    $('.lists', $this).find('.ddl').eq(i).append('<option>'+options[j]+'</option>');
                }
            }
        }

        function check(){
            var points = 0;
            $('.ddl', $this).each(function(index,element){
                if(settings.change[index].correct === element.value) {
                    points++;
                    $(element).removeClass('correct-select fail-select').addClass('correct-select');
                }
                else {
                    $(element).removeClass('correct-select fail-select').addClass('fail-select');
                }
            });

            if(points === settings.change.length) {
                $('#retro > .content-retro').html($('#'+settings.messageWell).html());
                $('#retro').fadeIn();
            }
            else {
                $('#retro > .content-retro').html($('#'+settings.messageWrong).html());
                $('#retro').fadeIn();
            }

        }

        function checkSizeScreen() {
            if(window.innerWidth < 768)
                openModal('size_screen');
            else{
                $('#modal').removeClass().addClass('zoomOut animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){             $(this).removeClass().hide();         });}
        }

    }
})(jQuery);