/**
 * {@link Ext.Audio} is a simple class which provides a container for the 
 * [HTML5 Audio element](http://developer.mozilla.org/en-US/docs/Using_HTML5_audio_and_video).
 *
 * ## Recommended File Types/Compression:
 * 
 * * Uncompressed WAV and AIF audio
 * * MP3 audio
 * * AAC-LC
 * * HE-AAC audio
 *
 * ## Notes
 * 
 * On Android devices, the audio tags controls do not show. You must use the {@link #method-play}, 
 * {@link #method-pause}, and {@link #toggle} methods to control the audio (example below).
 *
 * ## Examples
 *
 * This example shows the use of the {@link Ext.Audio} component in a fullscreen container--change 
 * the url: item for the location of an audio file--note that the audio starts on page load:
 *
 *     @example preview
 *     Ext.create('Ext.Container', {
 *         fullscreen: true,
 *         layout: {
 *             type : 'vbox',
 *             pack : 'center',
 *             align: 'stretch'
 *         },
 *         items: [
 *             {
 *                 xtype : 'toolbar',
 *                 docked: 'top',
 *                 title : 'Ext.Audio'
 *             },
 *             {
 *                 xtype: 'audio',
 *                 url  : 'touch-build/examples/audio/crash.mp3'
 *             }
 *         ]
 *     });
 *
 * You can also set the {@link #hidden} configuration of the {@link Ext.Audio} component to true by default,
 * and then control the audio by using the {@link #method-play}, {@link #method-pause}, and {@link #toggle} methods:
 *
 *     @example preview
 *     Ext.create('Ext.Container', {
 *         fullscreen: true,
 *         layout: {
 *             type: 'vbox',
 *             pack: 'center'
 *         },
 *         items: [
 *             {
 *                 xtype : 'toolbar',
 *                 docked: 'top',
 *                 title : 'Ext.Audio'
 *             },
 *             {
 *                 xtype: 'toolbar',
 *                 docked: 'bottom',
 *                 defaults: {
 *                     xtype: 'button',
 *                     handler: function() {
 *                         var container = this.getParent().getParent(),
 *                             // use ComponentQuery to get the audio component (using its xtype)
 *                             audio = container.down('audio');
 *
 *                         audio.toggle();
 *                         this.setText(audio.isPlaying() ? 'Pause' : 'Play');
 *                     }
 *                 },
 *                 items: [
 *                     { text: 'Play', flex: 1 }
 *                 ]
 *             },
 *             {
 *                 html: 'Hidden audio!',
 *                 styleHtmlContent: true
 *             },
 *             {
 *                 xtype : 'audio',
 *                 hidden: true,
 *                 url   : 'touch-build/examples/audio/crash.mp3'
 *             }
 *         ]
 *     });
 */
Ext.define('Ext.Audio', {
    extend: 'Ext.Media',
    xtype : 'audio',
 
    config: {
        /**
         * @cfg
         * @inheritdoc
         */
        cls: Ext.baseCSSPrefix + 'audio'
 
        /**
         * @cfg {String} url
         * The location of the audio to play.
         *
         * ### Recommended file types are:
         * * Uncompressed WAV and AIF audio
         * * MP3 audio
         * * AAC-LC
         * * HE-AAC audio
         * @accessor
         */
    },
 
    /**
     * @private
     */
    onActivate: function() {
        var me = this;
 
        me.callParent();
 
        if (Ext.os.is.Phone) {
            me.element.show();
        }
    },
 
    /**
     * @private
     */
    onDeactivate: function() {
        var me = this;
 
        me.callParent();
 
        if (Ext.os.is.Phone) {
            me.element.hide();
        }
    },
 
    template: [{
        reference: 'media',
        preload: 'auto',
        tag: 'audio',
        cls: Ext.baseCSSPrefix + 'component'
    }]
});