var MiniAudio = (function() {

function MA(containerId, assetsPath, options) {
  this.assetsPath = assetsPath;
  this.elemRoot = document.getElementById(containerId);
  this.elemPlayer = this.elemRoot.querySelector(".ma-player");
  this.elemAudio = this.elemRoot.querySelector(".ma-audio");
  this.bar = this.elemRoot.querySelector(".progress-bar .bar");
  this.brick = this.elemRoot.querySelector(".progress-bar .brick");
  this.elemAudio.loop = options && options.loop === true;
  window.ha = this.elemAudio;
  this.showCurrentTime = true;
  this.init();
}
function _getTimeFromProgressOffset(progressOffset) {
  const progressLength = this.bar.offsetWidth - this.brick.offsetWidth;
  return (progressOffset / progressLength) * this.elemAudio.duration * 0.999;
}
function _setBarEventHandler(param) {
  this.bar.addEventListener("click", event => {
    let brickOffset =
      event.clientX -
      this.bar.getBoundingClientRect().left -
      this.brick.offsetWidth / 2;
    brickOffset = Math.min(
      Math.max(0, brickOffset),
      this.bar.offsetWidth - this.brick.offsetWidth
    );
    this.elemAudio.currentTime = _getTimeFromProgressOffset.call(
      this,
      brickOffset
    );
  });
}
function _setBrickEventHandlers() {
  this.brick.addEventListener("mousedown", event => {
    this.pause();
    this.brickClick = true;
  });
  this.elemRoot.addEventListener("mouseup", event => {
    if (this.brickClick) {
      const brickOffset =
        this.brick.getBoundingClientRect().left -
        this.bar.getBoundingClientRect().left;
      const timeOffset = _getTimeFromProgressOffset.call(this, brickOffset);
      this.elemAudio.currentTime = timeOffset;
      this.play();
    }
    this.brickClick = false;
  });
  this.elemRoot.addEventListener("mousemove", event => {
    if (this.brickClick) {
      let brickOffset =
        event.clientX -
        this.bar.getBoundingClientRect().left -
        this.brick.offsetWidth / 2;
      brickOffset = Math.min(
        Math.max(0, brickOffset),
        this.bar.offsetWidth - this.brick.offsetWidth
      );
      this.updateTimeText(
        _getTimeFromProgressOffset.call(this, brickOffset),
        "currentTime"
      );
      this.brick.style.left = Math.round(brickOffset) + "px";
    }
  });
}
function _addClickListener(selector, listener) {
  this.elemRoot.querySelector(selector).addEventListener("click", listener);
  this.listenerMap = this.listenerMap || {};
  this.listenerMap[selector] = listener;
}
function _removeClickListener(selector) {
  this.elemRoot
    .querySelector(selector)
    .removeEventListener("click", this.listenerMap[selector]);
}
function _updatePlayButtonImage() {
  let selector = ".button-play img";
  const playButtonImg = this.elemRoot.querySelector(selector);
  _removeClickListener.call(this, selector);
  if (this.elemAudio.paused) {
    playButtonImg.src = this.assetsPath + "/assets/play.svg";
    playButtonImg.alt = "play";
    _addClickListener.call(this, selector, this.play.bind(this));
  } else {
    playButtonImg.src = this.assetsPath + "/assets/pause.svg";
    playButtonImg.alt = "pause";
    _addClickListener.call(this, selector, this.pause.bind(this));
  }
}
function _updateLoopButtonImage() {
  const loopButtonImg = this.elemRoot.querySelector(".button-loop img");
  if (this.elemAudio.loop) {
    loopButtonImg.src = this.assetsPath + "/assets/loop-active.svg";
  } else {
    loopButtonImg.src = this.assetsPath + "/assets/loop.svg";
  }
}
function _toTimeString(duration) {
  let minutes,
    seconds = 0;
  seconds = Math.floor(duration);
  minutes = Math.floor(seconds / 60);
  seconds = seconds % 60;
  let ms = [minutes, seconds].map(v => {
    let sv = v.toString();
    return sv.length > 1 ? sv : "0" + sv;
  });
  return ms.join(":");
}
function _updateTime(timeText, timeType) {
  const span =
    timeType === "currentTime"
      ? this.elemRoot.querySelector(".progress-panel .current-time")
      : this.elemRoot.querySelector(".progress-panel .duration-time");
  span.textContent = timeText;
}
MA.prototype.init = function() {
  _addClickListener.call(this, ".button-play img", this.play.bind(this));
  _addClickListener.call(this, ".button-stop img", this.stop.bind(this));
  _addClickListener.call(this, ".volume-up img", this.volumeUp.bind(this));
  _addClickListener.call(
    this,
    ".button-loop img",
    this.toggleLoop.bind(this)
  );
  _addClickListener.call(
    this,
    ".volume-down img",
    this.volumeDown.bind(this)
  );
  _addClickListener.call(
    this,
    ".progress-panel",
    this.toggleTimeText.bind(this)
  );
  this.elemAudio.addEventListener(
    "canplay",
    () => {
      this.updateTimeText(this.elemAudio.duration, "durationTime");
    },
    false
  );
  this.elemAudio.addEventListener(
    "timeupdate",
    () => {
      this.updateTimeText(this.elemAudio.currentTime, "currentTime");
      const offsetLeft =
        (this.elemAudio.currentTime / this.elemAudio.duration) *
        (this.bar.offsetWidth - this.brick.offsetWidth);
      this.brick.style.left = Math.round(offsetLeft) + "px";
    },
    false
  );
  this.elemAudio.addEventListener(
    "ended",
    () => {
      this.stop();
    },
    false
  );
  _setBrickEventHandlers.call(this);
  _setBarEventHandler.call(this);
};
MA.prototype.updateTimeText = function(time, timeType) {
  _updateTime.call(this, _toTimeString(time), timeType);
};
MA.prototype.toggleTimeText = function() {
  const currentTime = this.elemRoot.querySelector(
    ".progress-panel .current-time"
  );
  const durationTime = this.elemRoot.querySelector(
    ".progress-panel .duration-time"
  );
  this.showCurrentTime = !this.showCurrentTime;
  if (this.showCurrentTime) {
    currentTime.style.display = "inherit";
    durationTime.style.display = "none";
  } else {
    currentTime.style.display = "none";
    durationTime.style.display = "inherit";
    this.elemAudio.readyState > 1 &&  this.updateTimeText(this.elemAudio.duration, "durationTime");
  }
};
MA.prototype.toggleLoop = function() {
  this.elemAudio.loop = !this.elemAudio.loop;
  _updateLoopButtonImage.call(this);
};
MA.prototype.stop = function() {
  this.pause();
  this.elemAudio.currentTime = 0;
};
MA.prototype.play = function() {
  this.elemAudio.play();
  _updatePlayButtonImage.call(this);
};
MA.prototype.pause = function() {
  this.elemAudio.pause();
  _updatePlayButtonImage.call(this);
};
MA.prototype.volumeUp = function() {
  this.volumeChange(0.1);
};
MA.prototype.volumeDown = function() {
  this.volumeChange(-0.1);
};
MA.prototype.volumeChange = function(v) {
  const newVoulum = this.elemAudio.volume + v;
  if (newVoulum < 0 || newVoulum > 1) {
    return;
  }
  this.elemAudio.volume = newVoulum;
};
return MA;

})();