import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['player-component'],
  currentTime: "00:00",
  duration: "00:00",
  documentLoaded: Ember.observer('document.mediaArray', function() {
    var mediaList = this.get('document').get("mediaList");
    if ((typeof(mediaList) !== 'undefined') && (mediaList.length > 0)){
      if (this.audio.src){
        this.pause();
        this.updateProgress(0);
      }
      var mp3 = mediaList.findBy('format', 'audio/mpeg');
      this.audio.src = mp3.url;
      this.audio.load();
      this.set("currentTime", "00:00");
    }

  }),

  didInsertElement: function(){
    var _this = this;

    this.audio = new Audio();

    this.button = {
      play: this.$('#action_play'),
      progress: this.$('.progress')
    };

		this.$(document).on('touchmove', function(e){
			e.preventDefault();
		});

		// seeker
		this.button.progress.on('mousedown', function(e){
			var r = _this.rotation(e.pageX, e.pageY);
			_this.updateProgress(r);
			_this.changeTime(r/360*100);
		});

    this.audio.addEventListener('loadedmetadata',function (){
      var minutes = Math.floor( _this.audio.duration / 60);
      var seconds =  Math.floor(_this.audio.duration) % 60;
      _this.set('duration', ('0' + minutes).slice(-2)+':'+('0' + seconds).slice(-2));
    });

		// update bar onchange
		this.audio.addEventListener('timeupdate',function (){
			var curtime = _this.audio.currentTime,
				percent = (curtime/_this.audio.duration)*100,
				deg = 360/100*percent,
        minutes = Math.floor( curtime / 60),
        seconds =  Math.floor(curtime) % 60;
      _this.set('currentTime', ('0' + minutes).slice(-2)+':'+('0' + seconds).slice(-2));
			_this.updateProgress(deg);
		});

		// when the audio has finished playing
		this.audio.addEventListener('ended', function(){
      _this.pause();
      _this.changeTime(0);
      _this.updateProgress(0);
		});
  },
  // change seeked time
  changeTime: function(percent){
    var t = (this.audio.duration*percent)/100;
    this.audio.currentTime = t;
  },
  updateProgress: function(deg){
    var $slice = this.$('.slice');

    if (deg > 180 && !$slice.is('.gt50')) {
      $slice.addClass('gt50');
      $slice.append('<div class="pie fill"></div>');
    } else if (deg < 180 && $slice.is('.gt50')) {
      $slice.removeClass('gt50');
      $slice.find('.fill').remove();
    }

    $slice.find('.pie').css({
      '-moz-transform':'rotate('+deg+'deg)',
      '-webkit-transform':'rotate('+deg+'deg)',
      '-o-transform':'rotate('+deg+'deg)',
      'transform':'rotate('+deg+'deg)'
    });
  },
  rotation: function(x,y){
    var offset = this.button.progress.offset();
    var button_centerX = (offset.left) + (this.button.progress.width()/2);
    var button_centerY = (offset.top) + (this.button.progress.height()/2);

    var radians = Math.atan2(x - button_centerX, y - button_centerY);
    var degree = Math.round( (radians * (180 / Math.PI) * -1) + 180 );
    return degree;
    //return (degree <= max ? degree : max);
  },
  play: function(){
    this.audio.play();
    this.button.play.addClass('playing');
    this.button.play.text('Pause');
  },
  pause: function(){
    this.audio.pause();
    this.button.play.removeClass('playing');
    this.button.play.text('Play');
  },
  actions: {
    tooglePlay: function(){
      if (this.button.play.is('.playing')) {
        this.pause();
      } else {
        this.play();
      }
    },
    prevNextDocument(change){
      this.sendAction("action", change);
    }
  }
});