(function($){
    $.fn.draganddrop = function(params){
        var $this = $(this),
            contentDrag = '',
            cant = 0,
            corrects = 0;

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

        main.call(this);

        function main(){
            contentDrag = $('.itemsDrag', $this).html();
            cant =  $('.fn_drag', $this).length;
            setEventDragDrop();
            $this.on('click','.fn_btncheck',check);
            checkSizeScreen();
            $(window).resize(function() {
                checkSizeScreen();
            });
        }

        function setEventDragDrop() {
            $('.fn_drag', $this).draggable({
                containment: $this,
                revert: "invalid"
            });

            $(".fn_drop", $this).droppable({
                accept:".fn_drag",
                classes: {
                    "ui-droppable-active": "ui-state-active",
                    "ui-droppable-hover": "ui-state-hover"
                },
                drop: function(event, ui)
                {
                    console.log(parseInt($(this).data('value')) +'=='+ parseInt(ui.draggable.data('value')));
                    if(parseInt($(this).data('value')) == parseInt(ui.draggable.data('value')))
                        corrects++;
                    else
                        corrects--;
                    effectDrop( ui.draggable, $(this));
                }
            });
        }

        function check(){
            if(settings.cantElements != null)
                cant = settings.cantElements;

            if(cant == corrects)
            {
                $('#retro > .content-retro').html($('#'+settings.messageWell).html());
                $('#retro').fadeIn();
            }
            else{
                $('#retro > .content-retro').html($('#'+settings.messageWrong).html());
                $('#retro').fadeIn();
                $('.fn_drop',$this).empty();
                $('.itemsDrag',$this).empty().html(contentDrag);
                corrects = 0;
                $('.fn_drag', $this).draggable({
                    containment: $this,
                    revert: "invalid"
                });
            }
        }

        function effectDrop( $item, $gallery ) {
            var cont = $item.html();
            $($item,$this).animate({
                    'opacity': '0',
                    'height': '0'},
                300, function() {
                    $item.remove();
                    $gallery.fadeOut().append(cont).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);