(function($){
    $.fn.teaser = function(params){
        var $this = $(this),
            cant = 0,
            html='';

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

        main.call(this);

        function main(){
            var imageTeaser = new Image();
            imageTeaser.src = settings.imageSrc;
            imageTeaser.onload = function(){
                var imgW = settings.imageWidth,
                    imgH = (imgW * imageTeaser.height) / imageTeaser.width;

                var segW = imgW / settings.divide,
                    segH = imgH / settings.divide;

                draw(imgW, imgH, segW, segH);
            }

            checkSizeScreen();
            $(window).resize(function() {
                checkSizeScreen();
            });
        }

        function draw(_width, _height, _segmentWidth, _segmentHeight){
            var countDrag = 0, countDrop = 0;
            var arrayDrag = [],
                arrayDisort = [];
            html = '';
            html += '<div class="itemsDrag"  style="width:'+ _width+'px;height:'+_height+'px;">';

            for(var x = 1; x <= settings.divide; x++)
            {
                for(var y = 1; y <= settings.divide; y++)
                {
                   countDrag++;
                   /*html += '<div class="fn_drag" data-value="'+countDrag+'">';
                       html += '<div class="segmentDrag" style="width:'+ _segmentWidth+'px;height:'+_segmentHeight+'px;background-image:url('+settings.imageSrc+'); background-size:'+_width+'px '+_height+'px; background-position:'+[([_segmentWidth * y] - _segmentWidth) * (-1)]+'px '+[([_segmentHeight * x] - _segmentHeight) * (-1)]+'px; "> </div>';
                   html += '</div>';*/

                 arrayDrag.push('<div class="fn_drag" style="width:'+ _segmentWidth+'px;height:'+_segmentHeight+'px;" data-value="'+countDrag+'"><div class="segmentDrag" style="width:'+ _segmentWidth+'px;height:'+_segmentHeight+'px;background-image:url('+settings.imageSrc+'); background-size:'+_width+'px '+_height+'px; background-position:'+[([_segmentWidth * y] - _segmentWidth) * (-1)]+'px '+[([_segmentHeight * x] - _segmentHeight) * (-1)]+'px; "> </div></div>');
                }
            }

            arrayDisort = disorder(arrayDrag);
            for(var i = 0; i < arrayDisort.length; i++)
                html += arrayDrag[i];

            html += '</div>';
            html += '<div class="itemsDrop" style="width:'+ _width+'px;height:'+_height+'px;">';
                html += '<img class="model" src="'+settings.imageSrc+'">';
                for(var x = 1; x <= settings.divide; x++)
                {
                    for(var y = 1; y <= settings.divide; y++)
                    {
                        countDrop++;
                        html += '<div class="segmentDrop fn_drop" style="width:'+ _segmentWidth+'px;height:'+_segmentHeight+'px;" data-value="'+countDrop+'"></div>';
                    }
                }
            html += '</div>';

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

            setEventDragDrop();
        }

        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)
                {

                    if(ui.draggable.data('value') == $(this).data('value')) {
                        effectDrop( ui.draggable, $(this));
                        setTimeout(function(){
                            var finish = $('.itemsDrag',$this).children().length;
                            if(finish == 0){
                                $('#retro > .content-retro').html($('#'+settings.messageWell).html());
                                $('#retro').fadeIn();
                            }
                        },400);
                    }
                    else {
                        ui.draggable.draggable( "option", "revert", true );
                        setTimeout(function(){
                            $('#retro > .content-retro').html($('#'+settings.messageWrong).html());
                            $('#retro').fadeIn();
                        },300);
                    }



                }
            });
        }

        function effectDrop( $item, $gallery ) {
            var cont = $item.html();
            $($item,$this).animate({
                    'opacity': '0',
                    'height': '0'},
                300, function() {
                    $item.remove();
                    $gallery.fadeOut().html(cont).fadeIn();
                });
        }

        function disorder(lista)
        {
            lista = lista.sort(function() {return Math.random() - 0.5});
            return lista;
        }

        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);