// TODO Update product image code to use the cool new function
function productDropzone() {

    if ($('.dropzone.product').length) {

        var $dropzone = $('.dropzone.product');
        var myDropzone = new Dropzone('.dropzone.product', {
            url: '/admin/products/' + $dropzone.attr('data-product-id') + '/product_image',
            dictDefaultMessage: ''
        });

        myDropzone.on('complete', function(file) {
            $.post('/admin/products/' + $dropzone.attr('data-product-id') + '/reload_images')
        });

        myDropzone.on('addedfile', function(file) {
            $dropzone.addClass('uploading')
        });

    }
}

// This function below is for setting up dropzone dynamically based upon the data
// attributes that the image_upload partial contains. The data attributes should
// always be controller, object id and image id.
// Drag and drop setting a preview image also included in this function
function defaultDropzone() {


    var dropzoneType = '';
    var dropzoneName = '';
    var $dropzone = '';
    var dropzoneData = '';

    if ($('.dropzone.pages').length) {

        dropzoneType = "pages";
        dropzoneName = ".dropzone." + dropzoneType;
        $dropzone = $(dropzoneName);
        dropzoneData = $dropzone.attr("data-" + dropzoneType + "-id");

    }

    if (dropzoneType.length > 0) {

        var myDropzone = new Dropzone(dropzoneName, {
            url: '/admin/' + dropzoneType + '/' + dropzoneData + '/dropzone_image',
            dictDefaultMessage: ''
        });

        myDropzone.on('complete', function(file) {
            $.post('/admin/' + dropzoneType + '/' + dropzoneData + '/reload_images')
        });

        myDropzone.on('addedfile', function(file) {
            $dropzone.addClass('uploading')
        });

    }

    if ($('#preview_drag__target').length && dropzoneData.length > 0) {

        $('.image_container.draggable img').draggable({
            revert: true,
            drag: function(event, ui) {}
        });

        $('#preview_drag__target').droppable({
            hoverClass: 'hovering',
            drop: function(event, ui) {

                setPreviewImage(dropzoneData, $(ui.draggable).attr('data-image-id'), dropzoneType);
            }
        });

        $('.image_container.draggable img').on('drag', function(event, ui) {});

    }

}

function setPreviewImage(objId, imageId, type) {

    $.post('/admin/' + type + '/' + objId + '/set_preview_image?image_id=' + imageId)
    setPreviewHeights();
}

function setPreviewHeights() {

    if ($('#preview_image__wrapper').length > 0){
        var w = $('#preview_image').width();
        var h = $('#preview_image').height();

        $('#preview_image__overlay').width(w);
        $('#preview_image__overlay').height(h);
    }

}