$(function() {
    var alertInfo = '.alert-info';
    var clientBrowse = $('#clientBrowse');
    var clientUpload = $('#clientUpload');
    var description = $('.upload');
    var detail = '.detail';
    var setViewType = $('#setViewType');
    var dropArea = $('#dropzone');
    var fileList = $('#fileList');
    var fileQueue = '#fileList';
    var progress = '.progress';
    var progressBar = '.progress-bar';
    var title = $('#title');
    var totalQueueFileSize = 0;
    var uploadNode = '.upload';

    var uploader = new plupload.Uploader({
        runtimes : 'html5, flash, silverlight, html4',
        browse_button : 'clientBrowse',
        drop_element: 'dropzone',
        filters: {
            max_file_size: config.maxFileSize,
            max_queue_size: config.maxQueueSize
        },
        chunk_size: config.chunkSize,
        url: config.url,
        flash_swf_url : '/libs/moxie.swf',
        silverlight_xap_url : '/libs/moxie.xap',
        init: {
            PostInit: function() {
                fileList.html('');

                clientUpload.click(function() {
                    dropArea.remove();
                    clientUpload.attr('disabled', 'disabled');
                    uploader.disableBrowse();
                    uploader.start();
                    $(fileQueue + ' ' + 'button.close').remove();

                    return false;
                });
            },
            BeforeUpload: function(up, file) {
                up.settings.multipart_params.fileHash = file.id;
                up.settings.multipart_params.username = config.username;
                up.settings.multipart_params.token = config.token;
                up.settings.multipart_params.hash = config.hash;
                var viewTypeChecked = document.getElementById("viewType").checked ? 'yes' : 'no';
                up.settings.multipart_params.viewType = viewTypeChecked;
            },
            FilesAdded: function(up, files) {
                plupload.each(files, function(file) {
                    totalQueueFileSize += file.size;

                    if (file.size !== 0 && totalQueueFileSize <= uploader.getOption(['filters']).max_queue_size) {
                        fileList.html(fileList.html() + '<div id="' + file.id + '"><p>' + file.name + ' (' + plupload.formatSize(file.size) + ') <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button></p> <div class="progress upload"><div class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">0%</div></div> <div class="alert alert-info detail" role="alert"></div> </div>');
                         $('#' + file.id + ' ' + progress).css('display', 'block');

                       $(document).delegate( '#' + file.id + " button.close", 'click', function() {
                            uploader.removeFile(file);
                            $('#' + file.id).remove();
                        });
                    }
                    else {
                        uploader.removeFile(file);
                    }
                });
            },
            FilesRemoved: function(up, files) {
                plupload.each(files, function(file) {
                    totalQueueFileSize -= file.size;
                });
            },
            UploadProgress: function(up, file) {
                $('#' + file.id + ' ' + progressBar).width(file.percent + '%').attr('aria-valuenow', file.percent);
                $('#' + file.id + ' ' + progressBar).html(file.percent + '%');
            },
            FileUploaded: function(up, file, info) {
                if (info.status === 200) {
                    var response = JSON.parse(info.response);
                    $('#' + file.id + ' ' + progress + uploadNode).remove();
                    $('#' + file.id + ' ' + alertInfo + detail).css('display', 'block');

                    if (response.info) {
                        if (response.info.code === 200) {
                            $('#' + file.id + ' ' + alertInfo).html('<p>URL: ' + '<a href="'+response.info.message+'">'+response.info.message+'</a>' + '</p>');
                        }
                    }
                    else if (response.error) {
                        if (response.error.code !== 0) {
                            $('#' + file.id + ' ' + alertInfo).html('<p>Reason: ' +response.error.message+'</p>');
                        }
                    }
                    else {
                        $('#' + file.id + ' ' + alertInfo).html('<p>Reason: Oops Something Went Wrong.</p>');
                    }
                }
                else {
                    $('#' + file.id + ' ' + alertInfo).html('<p>Reason: Unknown Error.</p>');
                }
            },
            UploadComplete: function(up, file) {
                clientBrowse.remove();
                clientUpload.remove();
                description.remove();
                setViewType.remove();
                title.html('<h1>Upload Details</h1>');  
            },
            Error: function(up, error) {
                if (error.code === -600) {
                    uploader.removeFile(error.file);
                }
            },
            ChunkUploaded: function(up, file, info) {

            },
            QueueChanged: function(up) {

            }
        }
    });

    uploader.init();
});

$(function() {
    var dropZone = document.getElementById('dropzone');

    function showDropZone() {
        dropZone.style.display = "block";
    }
    function hideDropZone() {
        dropZone.style.display = "none";
    }

    function allowDrag(e) {
        if (true) {
            e.dataTransfer.dropEffect = 'copy';
            e.preventDefault();
        }
    }

    function handleDrop(e) {
        e.preventDefault();
        hideDropZone();
    }

    window.addEventListener('dragenter', function(e) {
        showDropZone();
    });

    dropZone.addEventListener('dragenter', allowDrag);

    dropZone.addEventListener('dragover', allowDrag);

    dropZone.addEventListener('dragleave', function(e) {
        hideDropZone();
    });

    dropZone.addEventListener('drop', handleDrop);
});