Ext.namespace('Abacus');
Abacus.AudioPreview = Ext.extend(Ext.Container, {
    mode:'pause',   /*Starts in pause mode */
    /** @cfg {Integer} initialVolume
     *  The initial volume (0-100)
     *
     */
    initialVolume:50,
/**
     * @cfg {String/Array} listAlign A valid anchor position value. See {@link Ext.Element#alignTo} for details
     * on supported anchor positions and offsets. To specify x/y offsets as well, this value
     * may be specified as an Array of {@link Ext.Element#alignTo} method arguments.

     *
[ 'tl-bl?', [6,0] ]
(defaults to 'tl-bl?')
     */
    listAlign : 'tl-bl?',    
    initComponent: function(){
        // Called during component initialization
 
        // Config object has already been applied to 'this' so properties can 
        // be overriden here or new properties (e.g. items, tools, buttons) 
        // can be added, eg:
        Ext.apply(this, {
            layout:'fit',
            items:[
                {xtype:'toolbar',items:[
                    {xtype:'label',text:'Now Playing:'},
                    {xtype:'textfield',id:this.id+'_display_field', disabled:true,width: 50},
                    {xtype:'button',iconCls:'play',tooltip:'Play',scope:this,handler:this.play_pause,id:this.id+'_play_button',disabled:true},
                    {xtype:'button',iconCls:'mute',tooltip:'Mute',scope:this,handler:this.onMuteToggle,id:this.id+'_mute_button'},
                    {xtype:'button',iconCls:'volume',tooltip:'Adjust volume',scope:this, handler:this.showHideVolume, id:this.id+'_volume_button'}
                
                ]}
            ]
        });
        if(!Ext.QuickTips.isEnabled()) Ext.QuickTips.init();
        this.volume=this.initialVolume;
        this.initList();
        this.volumeSlider.on('change',this.onVolumeChange,this);
 
        // Before parent code
 
        // Call parent (required)
        Abacus.AudioPreview.superclass.initComponent.apply(this, arguments);

        // After parent code
        // e.g. install event handlers on rendered component

    },
    load:function(recordOrUrl){
        var title;
        var url;
        if(recordOrUrl instanceof Object){
            title=recordOrUrl.title;
            url='/audio_files/' + recordOrUrl.id;
            if(recordOrUrl.extension) {
                url += '.'+recordOrUrl.extension;
            }
        }else{
            title=recordOrUrl;
            url=recordOrUrl;
        }
        var df=Ext.getCmp(this.id+'_display_field');
        var pb=Ext.getCmp(this.id+'_play_button');
        df.setValue(title);
        this.soundUrl=url;
        if(this.sound){
            soundManager.destroySound(this.id+'_sound');
            delete this.sound;
        }
        this.sound = soundManager.createSound({
          id: this.id+'_sound',
          url: this.soundUrl,
          onfinish:this.onFinish,
          volume: this.volume
        });
        this.sound.abacusPlayer=this


        pb.enable();
        this.mode='pause'
        pb.setIconClass('play');
    },
    /* To be overriden if required */

    onFinish:function(){
        
    },
    play_pause:function(e,t,o){
        if(this.mode=='pause'){
            this.play();
        }else{
            this.pause();
        }
    },
    play:function(){
        var pb=Ext.getCmp(this.id+'_play_button');
        this.mode='play'
        pb.setIconClass('pause');
        this.sound.play();

    },
    pause:function(){
        var pb=Ext.getCmp(this.id+'_play_button');
        this.mode='pause'
        pb.setIconClass('play');
        this.sound.pause();

    },
    onMuteToggle:function(){
        
        if(this.muted){
            this.sound.setVolume(this.volume);
            this.muted=false;
        }else{
            this.sound.setVolume(0);
            this.muted=true;
        }
    },
    getListParent : function() {
        return document.body;
    },
    onVolumeChange:function(slider,value){
        this.setVolume(value);
    },
    setVolume:function(value){
        this.volume=value;
        this.sound.setVolume(value);
    },
    showHideVolume:function(){
        if(this.isExpanded()){
            this.collapse();
        }else{
            this.expand();
        }
    },
    // private
     initList : function(){
         if(!this.list){
             var cls = 'x-combo-list',
                 listParent = Ext.getDom(this.getListParent() || Ext.getBody()),
                 zindex = parseInt(Ext.fly(listParent).getStyle('z-index') ,10);

             if (this.ownerCt && !zindex){
                 this.findParentBy(function(ct){
                     zindex = parseInt(ct.getPositionEl().getStyle('z-index'), 10);
                     return !!zindex;
                 });
             }

             this.list = new Ext.Layer({
                 parentEl: listParent,
                 shadow: this.shadow,
                 cls: [cls, this.listClass].join(' '),
                 constrain:false,
                 zindex: (zindex || 12000) + 5
             });

             var lw = 25;
             this.list.setSize(lw, 100);
             this.list.swallowEvent('mousewheel');
             this.assetHeight = 0;

             this.innerList = this.list.createChild({cls:cls+'-inner'});
             //this.mon(this.innerList, 'mouseover', this.onViewOver, this);
             //this.mon(this.innerList, 'mousemove', this.onViewMove, this);
             this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));
             this.volumeSlider=Ext.create({xtype:'slider',id:this.id+'_volume_slider',renderTo:this.innerList,vertical:true,height:100,value:this.volume});
             
         }
     },
    expand : function(){
        if(this.isExpanded()){
            return;
        }
       this.list.alignTo.apply(this.list, [Ext.getCmp(this.id+'_volume_button').getEl()].concat(this.listAlign));
        this.list.setWidth(Ext.getCmp(this.id+'_volume_button').getEl().getWidth());
        this.list.show();
        if(Ext.isGecko2){
            this.innerList.setOverflow('auto'); // necessary for FF 2.0/Mac
        }
        this.mon(Ext.getDoc(), {
            scope: this,
            mousewheel: this.collapseIf,
            mousedown: this.collapseIf
        });
        this.volumeSlider.setValue(this.volume);
    },
    // private
    collapseIf : function(e){
        if(!e.within(this.el) && !e.within(this.list)){
            this.collapse();
        }
    },

/**
     * Hides the dropdown list if it is currently expanded. Fires the {@link #collapse} event on completion.
     */
    collapse : function(){
        if(!this.isExpanded()){
            return;
        }
        this.list.hide();
        Ext.getDoc().un('mousewheel', this.collapseIf, this);
        Ext.getDoc().un('mousedown', this.collapseIf, this);
        this.fireEvent('collapse', this);
    },    /**
         * Returns true if the dropdown list is expanded, else false.
         */
        isExpanded : function(){
            return this.list && this.list.isVisible();
        }


 
    // Override other inherited methods 
});
 
// register xtype to allow for lazy initialization
Ext.reg('abacusaudiopreview', Abacus.AudioPreview);