YUI.add('uploader-html5', function (Y, NAME) {

/**

* This module provides a UI for file selection and multiple file upload capability using

* HTML5 XMLHTTPRequest Level 2 as a transport engine.

* The supported features include: automatic upload queue management, upload progress

* tracking, drag-and-drop support, server response retrieval and error reporting.

*

* @module uploader-html5

*/

// Shorthands for the external modules

var  substitute  = Y.Lang.sub,

     UploaderQueue = Y.Uploader.Queue;

/**

* This module provides a UI for file selection and multiple file upload capability using

* HTML5 XMLHTTPRequest Level 2 as a transport engine.

* @class UploaderHTML5

* @extends Widget

* @constructor

*/

function UploaderHTML5() {

    UploaderHTML5.superclass.constructor.apply ( this, arguments );

}

Y.UploaderHTML5 = Y.extend( UploaderHTML5, Y.Widget, {

    /**

    * Stored reference to the instance of the file input field used to

    * initiate the file selection dialog.

    *

    * @property _fileInputField

    * @type {Node}

    * @protected

    */

    _fileInputField: null,

    /**

    * Stored reference to the click event binding of the `Select Files`

    * button.

    *

    * @property _buttonBinding

    * @type {EventHandle}

    * @protected

    */

    _buttonBinding: null,

    /**

    * Stored reference to the instance of Uploader.Queue used to manage

    * the upload process. This is a read-only property that only exists

    * during an active upload process. Only one queue can be active at

    * a time; if an upload start is attempted while a queue is active,

    * it will be ignored.

    *

    * @property queue

    * @type {Uploader.Queue}

    */

    queue: null,

    // Y.UploaderHTML5 prototype

    /**

    * Construction logic executed during UploaderHTML5 instantiation.

    *

    * @method initializer

    * @protected

    */

    initializer : function () {

        this._fileInputField = null;

        this.queue = null;

        this._buttonBinding = null;

        this._fileList = [];

        // Publish available events

        /**

        * Signals that files have been selected.

        *

        * @event fileselect

        * @param event {Event} The event object for the `fileselect` with the

        *                      following payload:

        *  <dl>

        *      <dt>fileList</dt>

        *          <dd>An `Array` of files selected by the user, encapsulated

        *              in Y.FileHTML5 objects.</dd>

        *  </dl>

        */

        this.publish("fileselect");

        /**

        * Signals that an upload of multiple files has been started.

        *

        * @event uploadstart

        * @param event {Event} The event object for the `uploadstart`.

        */

        this.publish("uploadstart");

        /**

        * Signals that an upload of a specific file has started.

        *

        * @event fileuploadstart

        * @param event {Event} The event object for the `fileuploadstart` with the

        *                      following payload:

        *  <dl>

        *      <dt>file</dt>

        *          <dd>A reference to the Y.File that dispatched the event.</dd>

        *      <dt>originEvent</dt>

        *          <dd>The original event dispatched by Y.File.</dd>

        *  </dl>

        */

        this.publish("fileuploadstart");

        /**

        * Reports on upload progress of a specific file.

        *

        * @event uploadprogress

        * @param event {Event} The event object for the `uploadprogress` with the

        *                      following payload:

        *  <dl>

        *      <dt>file</dt>

        *          <dd>The pointer to the instance of `Y.File` that dispatched the event.</dd>

        *      <dt>bytesLoaded</dt>

        *          <dd>The number of bytes of the file that has been uploaded</dd>

        *      <dt>bytesTotal</dt>

        *          <dd>The total number of bytes in the file</dd>

        *      <dt>percentLoaded</dt>

        *          <dd>The fraction of the file that has been uploaded, out of 100</dd>

        *      <dt>originEvent</dt>

        *          <dd>The original event dispatched by the HTML5 uploader</dd>

        *  </dl>

        */

        this.publish("uploadprogress");

        /**

        * Reports on the total upload progress of the file list.

        *

        * @event totaluploadprogress

        * @param event {Event} The event object for the `totaluploadprogress` with the

        *                      following payload:

        *  <dl>

        *      <dt>bytesLoaded</dt>

        *          <dd>The number of bytes of the file list that has been uploaded</dd>

        *      <dt>bytesTotal</dt>

        *          <dd>The total number of bytes in the file list</dd>

        *      <dt>percentLoaded</dt>

        *          <dd>The fraction of the file list that has been uploaded, out of 100</dd>

        *  </dl>

        */

        this.publish("totaluploadprogress");

        /**

        * Signals that a single file upload has been completed.

        *

        * @event uploadcomplete

        * @param event {Event} The event object for the `uploadcomplete` with the

        *                      following payload:

        *  <dl>

        *      <dt>file</dt>

        *          <dd>The pointer to the instance of `Y.File` whose upload has been completed.</dd>

        *      <dt>originEvent</dt>

        *          <dd>The original event fired by the SWF Uploader</dd>

        *      <dt>data</dt>

        *          <dd>Data returned by the server.</dd>

        *  </dl>

        */

        this.publish("uploadcomplete");

        /**

        * Signals that the upload process of the entire file list has been completed.

        *

        * @event alluploadscomplete

        * @param event {Event} The event object for the `alluploadscomplete`.

        */

        this.publish("alluploadscomplete");

        /**

        * Signals that a error has occurred in a specific file's upload process.

        *

        * @event uploaderror

        * @param event {Event} The event object for the `uploaderror` with the

        *                      following payload:

        *  <dl>

        *      <dt>originEvent</dt>

        *          <dd>The original error event fired by the HTML5 Uploader. </dd>

        *      <dt>file</dt>

        *          <dd>The pointer at the instance of Y.File that returned the error.</dd>

        *      <dt>status</dt>

        *          <dd>The status reported by the XMLHttpRequest object.</dd>

        *      <dt>statusText</dt>

        *          <dd>The statusText reported by the XMLHttpRequest object.</dd>

        *  </dl>

        */

        this.publish("uploaderror");

        /**

        * Signals that a dragged object has entered into the uploader's associated drag-and-drop area.

        *

        * @event dragenter

        * @param event {Event} The event object for the `dragenter`.

        */

        this.publish("dragenter");

        /**

        * Signals that an object has been dragged over the uploader's associated drag-and-drop area.

        *

        * @event dragover

        * @param event {Event} The event object for the `dragover`.

        */

        this.publish("dragover");

        /**

        * Signals that an object has been dragged off of the uploader's associated drag-and-drop area.

        *

        * @event dragleave

        * @param event {Event} The event object for the `dragleave`.

        */

        this.publish("dragleave");

        /**

        * Signals that an object has been dropped over the uploader's associated drag-and-drop area.

        *

        * @event drop

        * @param event {Event} The event object for the `drop` with the

        *                      following payload:

        *  <dl>

        *      <dt>fileList</dt>

        *          <dd>An `Array` of files dropped by the user, encapsulated

        *              in Y.FileHTML5 objects.</dd>

        *  </dl>

        */

        this.publish("drop");

    },

    /**

    * Create the DOM structure for the UploaderHTML5.

    * UploaderHTML5's DOM structure consists of a "Select Files" button that can

    * be replaced by the developer's widget of choice; and a hidden file input field

    * that is used to instantiate the File Select dialog.

    *

    * @method renderUI

    * @protected

    */

    renderUI : function () {

        var contentBox = this.get('contentBox'),

            selButton = this.get("selectFilesButton");

        selButton.setStyles({width:"100%", height:"100%"});

        contentBox.append(selButton);

        this._fileInputField = Y.Node.create(UploaderHTML5.HTML5FILEFIELD_TEMPLATE);

        contentBox.append(this._fileInputField);

    },

    /**

    * Binds to the UploaderHTML5 UI and subscribes to the necessary events.

    *

    * @method bindUI

    * @protected

    */

    bindUI : function () {

        this._bindSelectButton();

        this._setMultipleFiles();

        this._setFileFilters();

        this._bindDropArea();

        this._triggerEnabled();

        this.after("multipleFilesChange", this._setMultipleFiles, this);

        this.after("fileFiltersChange", this._setFileFilters, this);

        this.after("enabledChange", this._triggerEnabled, this);

        this.after("selectFilesButtonChange", this._bindSelectButton, this);

        this.after("dragAndDropAreaChange", this._bindDropArea, this);

        this.after("tabIndexChange", function () {

            this.get("selectFilesButton").set("tabIndex", this.get("tabIndex"));

        }, this);

        this._fileInputField.on("change", this._updateFileList, this);

        this._fileInputField.on("click", function(event) {

            event.stopPropagation();

        }, this);

        this.get("selectFilesButton").set("tabIndex", this.get("tabIndex"));

    },

    /**

    * Recreates the file field to null out the previous list of files and

    * thus allow for an identical file list selection.

    *

    * @method _rebindFileField

    * @protected

    */

    _rebindFileField : function () {

        this._fileInputField.remove(true);

        this._fileInputField = Y.Node.create(UploaderHTML5.HTML5FILEFIELD_TEMPLATE);

        this.get("contentBox").append(this._fileInputField);

        this._fileInputField.on("change", this._updateFileList, this);

        this._setMultipleFiles();

        this._setFileFilters();

    },

    /**

    * Binds the specified drop area's drag and drop events to the

    * uploader's custom handler.

    *

    * @method _bindDropArea

    * @protected

    */

    _bindDropArea : function (event) {

        var ev = event || {prevVal: null},

            ddArea = this.get("dragAndDropArea");

        if (ev.prevVal !== null) {

            ev.prevVal.detach('drop', this._ddEventHandler);

            ev.prevVal.detach('dragenter', this._ddEventHandler);

            ev.prevVal.detach('dragover', this._ddEventHandler);

            ev.prevVal.detach('dragleave', this._ddEventHandler);

        }

        if (ddArea !== null) {

            ddArea.on('drop', this._ddEventHandler, this);

            ddArea.on('dragenter', this._ddEventHandler, this);

            ddArea.on('dragover', this._ddEventHandler, this);

            ddArea.on('dragleave', this._ddEventHandler, this);

        }

    },

    /**

    * Binds the instantiation of the file select dialog to the current file select

    * control.

    *

    * @method _bindSelectButton

    * @protected

    */

    _bindSelectButton : function () {

       this._buttonBinding = this.get("selectFilesButton").on("click", this.openFileSelectDialog, this);

    },

    /**

    * Handles the drag and drop events from the uploader's specified drop

    * area.

    *

    * @method _ddEventHandler

    * @protected

    */

    _ddEventHandler : function (event) {

        event.stopPropagation();

        event.preventDefault();

        if (Y.Array.indexOf(event._event.dataTransfer.types, 'Files') > -1) {

            switch (event.type) {

                case "dragenter":

                    this.fire("dragenter");

                    break;

                case "dragover":

                    this.fire("dragover");

                    break;

                case "dragleave":

                    this.fire("dragleave");

                    break;

                case "drop":

                    var newfiles = event._event.dataTransfer.files,

                        parsedFiles = [],

                        filterFunc = this.get("fileFilterFunction"),

                        oldfiles;

                    if (filterFunc) {

                        Y.each(newfiles, function (value) {

                            var newfile = new Y.FileHTML5(value);

                            if (filterFunc(newfile)) {

                                parsedFiles.push(newfile);

                            }

                        });

                    }

                    else {

                        Y.each(newfiles, function (value) {

                            parsedFiles.push(new Y.FileHTML5(value));

                        });

                    }

                    if (parsedFiles.length > 0) {

                        oldfiles = this.get("fileList");

                        this.set("fileList",

                        this.get("appendNewFiles") ? oldfiles.concat(parsedFiles) : parsedFiles);

                        this.fire("fileselect", {fileList: parsedFiles});

                    }

                    this.fire("drop", {fileList: parsedFiles});

                    break;

            }

        }

    },

    /**

    * Adds or removes a specified state CSS class to the underlying uploader button.

    *

    * @method _setButtonClass

    * @protected

    * @param state {String} The name of the state enumerated in `buttonClassNames` attribute

    * from which to derive the needed class name.

    * @param add {Boolean} A Boolean indicating whether to add or remove the class.

    */

    _setButtonClass : function (state, add) {

        if (add) {

            this.get("selectFilesButton").addClass(this.get("buttonClassNames")[state]);

        }

        else {

            this.get("selectFilesButton").removeClass(this.get("buttonClassNames")[state]);

        }

    },

    /**

    * Syncs the state of the `multipleFiles` attribute between this class

    * and the file input field.

    *

    * @method _setMultipleFiles

    * @protected

    */

    _setMultipleFiles : function () {

        if (this.get("multipleFiles") === true) {