playing: false,

    popcorn: null,

    head: 0,

    remaining: 0,

        this.set('popcorn', Popcorn('#popcorn-audio'));

        this.get('popcorn').on('timeupdate', Ember.run.bind(this, this.get('onProgress')));

    },

    onProgress: function(event) {

        var currentTime = this.get('popcorn').currentTime();

        var duration = this.get('popcorn').duration();

        this.$('.bar .value').width(currentTime * 100 / duration + '%');

        this.set('head', currentTime);

        this.set('remaining', duration - currentTime);

            if(this.get('playing')) {

                this.get('popcorn').pause();

            } else {

                this.get('popcorn').play();

            }

            this.set('playing', !this.get('playing'));