/*jslint browser: true, nomen: true, devel: true */

(function () {
    'use strict';

    var Dropzone, Upload;

    Dropzone = {
        Vars: {
            dropzone: undefined
        },

        init: function () {
            this.bindEvents();
        },

        bindEvents: function () {
            var _dropzone;

            this.Vars.dropzone = _dropzone = document.querySelector('#dropzone');

            _dropzone.addEventListener('dragenter', Dropzone.enter, false);
            _dropzone.addEventListener('dragleave', Dropzone.leave, false);
            // drop will not work without this
            _dropzone.addEventListener('dragover', Dropzone.over, false);
            _dropzone.addEventListener('drop', Dropzone.drop, false);
        },

        enter: function (event) {
            $('#' + event.target.id).addClass('hovering');
        },

        leave: function (event) {
            Dropzone.cancelDefault(event);

            $('#' + event.target.id).removeClass('hovering');
        },

        over: function (event) {
            Dropzone.cancelDefault(event);
        },

        drop: function (event) {
            Dropzone.cancelDefault(event);
            event.dataTransfer.dropEffect = "copy";

            $('#' + event.target.id).slideUp();

            Dropzone.listFiles(event);
        },

        listFiles: function (event) {
            var files, i;

            files = event.target.files || event.dataTransfer.files;

            for (i = 0; i < files.length; i++) {
                $('#fileList').append('<li><p>' + files[i].name + '</p><progress id="upload-' + i + '"></progress></li>');
                Upload.init(files[i], i);
            }
        },

        cancelDefault: function (event) {
            if (event.preventDefault) {
                event.preventDefault();
            }
        }

    };

    Upload = {
        Vars: {
            xhr: undefined,
            url: "http://example.com/upload",
            file: undefined,
            ind: 0
        },

        init: function (file, i) {
            this.Vars.xhr = new XMLHttpRequest();
            this.Vars.file = file;
            this.Vars.index = i;

            this.bindEvents();
        },

        bindEvents: function () {
            var _xhr;
            _xhr = this.Vars.xhr;

            _xhr.upload.addEventListener("progress", Upload.trackProgress, false);
            _xhr.upload.addEventListener("load", Upload.transferComplete, false);
            _xhr.upload.addEventListener("error", Upload.transferFailed, false);
            _xhr.upload.addEventListener("abort", Upload.transferCancel, false);

            console.log(_xhr);

            this.beginUpload();
        },

        beginUpload: function () {
            var _xhr, _file, classStatus;
            _xhr = this.Vars.xhr;
            _file = this.Vars.file;

            if (_xhr.upload) {
                _xhr.open("POST", Upload.Vars.url, true);
                _xhr.setRequestHeader("X_FILENAME", _file.name);
                _xhr.send(_file);
            } else {
                console.log("xhr upload is false");
            }

            _xhr.onreadystatechange = function (event) {
                if (_xhr.readyState === 4) {
                    if (_xhr.status === 200) {
                        classStatus = "success";
                    } else {
                        classStatus = "failed";
                    }
                    $('#progress-' + Upload.Vars.index).addClass(classStatus);
                }
            };
        },

        trackProgress: function (event) {
            console.log(event);
            var percentLoaded;
            percentLoaded = parseFloat(100 - (event.loaded / event.total * 100)).toFixed(2);
            $('#upload-').val(percentLoaded);
        },

        transferComplete: function (event) {},

        transferFailed: function (event) {},

        transferCancel: function (event) {},

        showMore: function (event) {}
    };

    Dropzone.init();
}());