$(function(){
    /************************** Van Details Page ****************************/

    /**
     *  Used Vans Images
     */

    // Variable Declarations
    var usedVanImgContainer = $('.used-van-img-container'); // Used vans images container

    var usedVanSelectAllBtn = $('.used-van-select-all-button'); // Used vans select all button
    var usedVanSelectNoneBtn = $('.used-van-select-none-button'); // Used vans select none button

    var usedVanId = $('.used-van-derivative-id').val(); // A hidden input to get the used van ID on the derivative page

    var usedVanBulkSelect = $('#used-van-bulk-img-select'); // Select box with actions for Delete and Deactivate

    var deactivatedContainer = $('.used-van-deactivated-images-container'); // Containing <div> for deactivated images
    var deletedContainer = $('.used-van-deleted-images-container'); // Containing <div> for deleted images

    var usedVansImagesSortable = $(".used-van-img-container").sortable({

    });

    addReactivateButtons();

    // Set Drozone autodiscover OFF
    Dropzone.autoDiscover = false;

    // Used vans images Dropzone
    var usedVanDropzone = new Dropzone('#used-van-dropzone', {
        url: "/used-vans/ajax/upload-images/" + usedVanId,
        parallelUploads: 999,
        uploadMultiple: true,
        paramName: 'new-images',
        dictDefaultMessage: 'Drag multiple files here, or click to select files.',
        acceptedFiles: "image/*",
        autoProcessQueue: false,
        addRemoveLinks: true,

        init: function(){
            this.on('error', function(file){
                // Error
            });

            this.on('success', function(){
                // Success
                window.location.reload();
            });

            this.on('addedfile', function(file){
                console.log( this.getActiveFiles() );

            });
        }
    });

    $("#used-van-dropzone").sortable({
        items:'.dz-preview',
        cursor: 'move',
        opacity: 0.5,
        containment: "parent",
        distance: 20,
        tolerance: 'pointer',
        update: function(e, ui){
            // do what you want
        }
    });

    $('#used-van-dropzone-get-all-files').click(function(){
        console.log(usedVanDropzone.files);
    });

    // Listen for clicks on each image to mark selected or not
    usedVanImgContainer.on('click','div.used-van-image-div', function(){
        $(this).toggleClass('used-van-img-selected');
    });

    // Select All Button
    usedVanSelectAllBtn.click(function(){
        usedVanImgContainer.find('.used-van-image-div').addClass('used-van-img-selected');
    });

    // Select None Button
    usedVanSelectNoneBtn.click(function(){
        usedVanImgContainer.find('.used-van-image-div').removeClass('used-van-img-selected');
    });

    // Listen for click on the Upload Files button, and then
    // process the Dropzone queue
    $('.used-van-upload-files-button').on('click', function(){
        if( usedVanDropzone.getQueuedFiles().length > 0){
            usedVanDropzone.processQueue();
        }
    });

    // Adds the "undelete" buttons underneith each Deleted Image
    function addUndeleteButtons(){
        deletedContainer.find('.used-van-image-div').each(function(index, item){
            $(this).children('div').remove();
            var el = $('<div>');
            el.css('background','blue').css('color', 'white');

            var link = $('<button>').text('Undelete').attr('id', 'used-van-undelete-button').addClass('btn btn-success').attr('data-index', index);
            el.append(link);
            $(this).append(el);
        });
    }

    // Adds the "reactivate" buttons underneith each Deactivated Image
    function addReactivateButtons(){
        deactivatedContainer.find('.used-van-image-div').each(function(index, item){
            $(this).children('div').remove();
            var el = $('<div>');
            el.css('background','blue').css('color', 'white');

            var link = $('<button>').text('Reactivate').attr('id', 'used-van-reactivate-button').addClass('btn btn-success').attr('data-index', index);
            el.append(link);
            $(this).append(el);
        });
    }

    // Listen for click on the "undelete" button and move it back into
    // the sortable
    deletedContainer.on('click', '#used-van-undelete-button', function(){
        var container = $(this).parents('.used-van-image-div');
        container.children('div').remove();
        usedVanImgContainer.append(container);
        usedVansImagesSortable.sortable('refresh');
    });

    // Listen for click on the "reactivate" button and move it back into
    // the sortable
    deactivatedContainer.on('click', '#used-van-reactivate-button', function(){
        var container = $(this).parents('.used-van-image-div');
        container.children('div').remove();
        usedVanImgContainer.append(container);
        usedVansImagesSortable.sortable('refresh');
    });

    // Listen for click on the "Apply" button to either delete or deactivate
    // all of the selected images in the normal images container
    $('#used-van-bulk-img-submit-btn').on('click', function(){
        var options = usedVanImgContainer.find('.used-van-img-selected');

        // Deactivate
        if( usedVanBulkSelect.val() == "deactivate" ){

            options.each(function(index,item){

                $(this).removeClass("ui-sortable-handle used-van-img-selected");
                deactivatedContainer.append( $(this) );
            });
            addReactivateButtons();

            // Delete
        }else if( usedVanBulkSelect.val() == "delete" ){

            options.each(function(index,item){

                $(this).removeClass("ui-sortable-handle used-van-img-selected");
                deletedContainer.append( $(this) );
            });
            addUndeleteButtons();
        }
    });
});