class SamplerView extends EICDomContent {
            // all mpeg preloading not in dependency anymore, 
        // but here, when you're really about to use then

    sounds = [
            {"name": "98.mp3","path": "/app/assets/sfx/sampler/", 'label': '98'},
            {"name": "quenouilles.mp3","path": "/app/assets/sfx/sampler/", 'label': 'As-tu vu?'},
            {"name": "celebrate.mp3","path": "/app/assets/sfx/sampler/", 'label': 'party'},
            {"name": "paillettes.mp3","path": "/app/assets/sfx/sampler/", 'label': 'paillettes'},
            {"name": "manu.mp3","path": "/app/assets/sfx/sampler/", 'label': 'Manu'},
            {"name": "projet.mp3","path": "/app/assets/sfx/sampler/", 'label': 'Projet'},
            {"name": "judgenot.mp3","path": "/app/assets/sfx/sampler/", 'label': 'Judge not!'},
            {"name": "metaphore.mp3","path": "/app/assets/sfx/sampler/", 'label': 'Metaphore'},
            {"name": "gamin.mp3","path": "/app/assets/sfx/sampler/", 'label': 'Gamin!'},
            {"name": "jcvd.mp3","path": "/app/assets/sfx/sampler/", 'label': '1+1=11'},
            {"name": "balladur.mp3","path": "/app/assets/sfx/sampler/", 'label': 'Arretez!'},
            {"name": "guingamp.mp3","path": "/app/assets/sfx/sampler/", 'label': 'En avant !'},
            {"name": "phrases.mp3","path": "/app/assets/sfx/sampler/", 'label': 'Phrases...'},
            {"name": "bourpif.mp3","path": "/app/assets/sfx/sampler/",  'label': 'Raoul'},
            {"name": "fairplay.mp3","path": "/app/assets/sfx/sampler/", 'label': 'Fairplay'},            
            {"name": "neanderthal.mp3","path": "/app/assets/sfx/sampler/", 'label': 'Neanderthal'},
            {"name": "hassancehef.mp3","path": "/app/assets/sfx/sampler/", 'label': 'C\'est possible !'}  
        ];

    mixer = null;
    
    constructor() {
        super();
    }

    DOMContentLoaded() {
        this.pads = this.findAll('.pad');
        this.init();
        this.preloadSounds(this.sounds);
    }

    DOMContentRemoved() { window.removeEventListener('keyup',this.keyHandler); }

    init() {
        for(let i = 0; i < this.sounds.length; i++) {
            let data = this.sounds[i];
            this.pads[i].name = data.name;
            this.pads[i].querySelector('label').innerText = data.label;
            let button = this.pads[i].querySelector('button');
            button.addEventListener('click', this.play.bind(this, data.name));
        }
        this.keyHandler = this.onKeyPressed.bind(this);
        window.addEventListener('keyup', this.keyHandler);
    }
   
    preloadSounds(sndList){
        for(let snd of sndList){
            app.Assets.loadSound({
                'id': snd.name,
                'name': snd.name,
                'path': snd.path
            }).then(audioEl => {
                audioEl.addEventListener("play", this.playBoy.bind(this));
                audioEl.addEventListener("pause", this.pauseBoy.bind(this));
                let pad, idx;
                for([idx, pad] of this.pads.entries()){
                    if(pad.name==audioEl.getAttribute('aid')) {
                        pad.querySelector('button').classList.add('assigned');
                        break;
                    }
                }
            });
        }
    }

    playBoy(event){
        let aid = event.target.getAttribute('aid');
        let pad, idx;
        for([idx, pad] of this.pads.entries()){
            if(pad.name==aid) {
                pad.querySelector('button').classList.remove('assigned')
                pad.querySelector('button').classList.add('playing');
                break;
            }
        }
    }

    pauseBoy(event){
        let aid = event.target.getAttribute('aid');
        let pad, idx;
        for([idx, pad] of this.pads.entries()){
            if(pad.name==aid) {
                pad.querySelector('button').classList.remove('playing')
                pad.querySelector('button').classList.add('assigned');
                break;
            }
        }
    }
        
    play(audioid, event) {
        event.stopPropagation();

        if(this.mixer) {
            this.mixer.pause();
            this.mixer.currentTime = 0;
        }
        this.mixer = app.Assets.Store.sfx[audioid];
        this.mixer.play();  
    }

    stop() {}

    onKeyPressed(event) {
        let btn = document.querySelector('button[accessKey="'+event.key.toLowerCase()+'"]');
        if(btn) btn.click();
    }

}

app.registerClass('SamplerView',SamplerView);