/**
 * Provides a base class for audio/visual controls. Should not be used directly.
 *
 * Please see the {@link Ext.Audio} and {@link Ext.Video} classes for more information.
 * @private
 */
Ext.define('Ext.Media', {
    extend: 'Ext.Component',
    xtype: 'media',
 
    /**
     * @event play
     * Fires whenever the media is played.
     * @param {Ext.Media} this 
     */
 
    /**
     * @event pause
     * Fires whenever the media is paused.
     * @param {Ext.Media} this 
     * @param {Number} time The time at which the media was paused at in seconds.
     */
 
    /**
     * @event ended
     * Fires whenever the media playback has ended.
     * @param {Ext.Media} this 
     * @param {Number} time The time at which the media ended at in seconds.
     */
 
    /**
     * @event stop
     * Fires whenever the media is stopped.
     * The `pause` event will also fire after the `stop` event if the media is currently playing.
     * The `timeupdate` event will also fire after the `stop` event regardless of playing status.
     * @param {Ext.Media} this 
     */
 
    /**
     * @event volumechange
     * Fires whenever the volume is changed.
     * @param {Ext.Media} this 
     * @param {Number} volume The volume level from 0 to 1.
     */
 
    /**
     * @event mutedchange
     * Fires whenever the muted status is changed.
     * The volumechange event will also fire after the `mutedchange` event fires.
     * @param {Ext.Media} this 
     * @param {Boolean} muted The muted status.
     */
 
    /**
     * @event timeupdate
     * Fires when the media is playing every 15 to 250ms.
     * @param {Ext.Media} this 
     * @param {Number} time The current time in seconds.
     */
 
    config: {
        /**
         * @cfg {String} url
         * Location of the media to play.
         * @accessor
         */
        url: '',
 
        /**
         * @cfg {Boolean} enableControls
         * Set this to `false` to turn off the native media controls.
         * @accessor
         * @deprecated 6.5 Please use {@link #controls} instead.
         */
        enableControls: true,
 
        /**
         * @cfg {Boolean} controls
         * Set this to `false` to turn off the native media controls.
         * @accessor
         */
        controls: true,
 
        /**
         * @cfg {Boolean} autoResume
         * Will automatically start playing the media when the container is activated.
         * @accessor
         */
        autoResume: false,
 
        /**
         * @cfg {Boolean} autoPause
         * Will automatically pause the media when the container is deactivated.
         * @accessor
         */
        autoPause: true,
 
        /**
         * @cfg {Boolean} preload
         * Will begin preloading the media immediately.
         * @accessor
         */
        preload: true,
 
        /**
         * @cfg {Boolean} loop
         * Will loop the media forever.
         * @accessor
         */
        loop: false,
 
        /**
         * @cfg {Ext.Element} media
         * A reference to the underlying audio/video element.
         * @accessor
         */
        media: null,
 
        /**
         * @cfg {Number} volume
         * The volume of the media from 0.0 to 1.0.
         * @accessor
         */
        volume: 1,
 
        /**
         * @cfg {Boolean} muted
         * Whether or not the media is muted. This will also set the volume to zero.
         * @accessor
         */
        muted: false
    },
 
    constructor: function(config) {
        this.mediaEvents = {};
        this.callParent([config]);
    },
 
    initialize: function() {
        var me = this;
 
        me.callParent();
 
        me.on({
            scope: me,
            show: 'onActivate',
            hide: 'onDeactivate'
        });
 
        me.addMediaListener({
            canplay: 'onCanPlay',
            play: 'onPlay',
            pause: 'onPause',
            ended: 'onEnd',
            volumechange: 'onVolumeChange',
            timeupdate: 'onTimeUpdate'
        });
    },
 
    addMediaListener: function(event, fn) {
        var me = this,
            dom = me.media.dom,
            bind = Ext.Function.bind;
 
        Ext.Object.each(event, function(e, fn) {
            fn = bind(me[fn], me);
            me.mediaEvents[e] = fn;
            dom.addEventListener(e, fn);
        });
    },
 
    onPlay: function() {
        this.fireEvent('play', this);
    },
 
    onCanPlay: function() {
        this.fireEvent('canplay', this);
    },
 
    onPause: function() {
        this.fireEvent('pause', this, this.getCurrentTime());
    },
 
    onEnd: function() {
        this.fireEvent('ended', this, this.getCurrentTime());
    },
 
    onVolumeChange: function() {
        this.fireEvent('volumechange', this, this.media.dom.volume);
    },
 
    onTimeUpdate: function() {
        this.fireEvent('timeupdate', this, this.getCurrentTime());
    },
 
    /**
     * Returns if the media is currently playing.
     * @return {Boolean} playing `true` if the media is playing.
     */
    isPlaying: function() {
        return !Boolean(this.media.dom.paused);
    },
 
    /**
     * @private
     */
    onActivate: function() {
        var me = this;
 
        if (me.getAutoResume() && !me.isPlaying()) {
            me.play();
        }
    },
 
    /**
     * @private
     */
    onDeactivate: function() {
        var me = this;
 
        if (me.getAutoPause() && me.isPlaying()) {
            me.pause();
        }
    },
 
    /**
     * Sets the URL of the media element. If the media element already exists, it is update the src attribute of the
     * element. If it is currently playing, it will start the new video.
     */
    updateUrl: function(newUrl) {
        var dom = this.media.dom;
 
        //when changing the src, we must call load:
        //http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/ControllingMediaWithJavaScript/ControllingMediaWithJavaScript.html
 
        dom.src = newUrl;
 
        if ('load' in dom) {
            dom.load();
        }
 
        if (this.isPlaying()) {
            this.play();
        }
    },
 
    /**
     * Updates the controls of the video element.
     */
    updateEnableControls: function(enableControls) {
        this.setControls(enableControls);
    },
 
    updateControls: function (value) {
        this.media.set({
            controls: value ? 'controls' : undefined
        });
    },
 
    /**
     * Updates the loop setting of the media element.
     * @param {Boolean} loop 
     */
    updateLoop: function(loop) {
        this.media.dom.loop = loop ? 'loop' : false;
    },
 
    /**
     * Starts or resumes media playback.
     */
    play: function() {
        var dom = this.media.dom;
 
        if ('play' in dom) {
            dom.play();
            Ext.defer(function() {
                dom.play();
            }, 10);
        }
    },
 
    /**
     * Pauses media playback.
     */
    pause: function() {
        var dom = this.media.dom;
 
        if ('pause' in dom) {
            dom.pause();
        }
    },
 
    /**
     * Toggles the media playback state.
     */
    toggle: function() {
        if (this.isPlaying()) {
            this.pause();
        } else {
            this.play();
        }
    },
 
    /**
     * Stops media playback and returns to the beginning.
     */
    stop: function() {
        var me = this;
 
        me.setCurrentTime(0);
        me.fireEvent('stop', me);
        me.pause();
    },
 
    /**
     * @private
     */
    updateVolume: function(volume) {
        this.media.dom.volume = volume;
    },
 
    /**
     * @private
     */
    updateMuted: function(muted) {
        this.fireEvent('mutedchange', this, muted);
 
        this.media.dom.muted = muted;
    },
 
    /**
     * Returns the current time of the media, in seconds.
     * @return {Number} 
     */
    getCurrentTime: function() {
        return this.media.dom.currentTime;
    },
 
    /**
     * Set the current time of the media.
     * @param {Number} time The time, in seconds.
     * @return {Number} 
     */
    setCurrentTime: function(time) {
        this.media.dom.currentTime = time;
 
        return time;
    },
 
    /**
     * Returns the duration of the media, in seconds.
     * @return {Number} 
     */
    getDuration: function() {
        return this.media.dom.duration;
    },
 
    doDestroy: function() {
        var me = this,
            dom  = me.media.dom,
            mediaEvents = me.mediaEvents;
 
        Ext.Object.each(mediaEvents, function(event, fn) {
            dom.removeEventListener(event, fn);
        });
 
        me.callParent();
    },
 
    deprecated: {
        '6.5': {
            configs: {
                enableControls: {
                    message: 'Please use "controls" instead.'
                }
            }
        }
    }
});