{% extends 'setting/setting_base.html' %}
{% load staticfiles %}
{% load app_filters %}

{% block headscript %}
  <script src="{% static "js/setting.js" %}"></script>
  <script src="http://segimapp/settings.js?{% now "u" %}"></script>
  <script src="{% static "js/cefsharp.js" %}"></script>
{% endblock %}

{% block content %}
  <div class="set_content sound">
    <ul class="sound_range">
      <li>
        <div class="sound_btn_wrap">
          <button class="sound_plus" onclick="plusVolume(this);"/>
          <button class="sound_min" onclick="minusVolume(this);"/>
        </div>
        <input type="range" id="soundtrack" value="20">
        <img src="{% static 'img/sound_bg.png'%}" alt="" class="bar">
        <h4>음원 재생</h4>
      </li>
      <li>
        <div class="sound_btn_wrap">
          <button class="sound_plus" onclick="plusVolume(this);"/>
          <button class="sound_min" onclick="minusVolume(this);"/>
        </div>
        <input type="range" id="effect" value="70">
        <img src="{% static 'img/sound_bg.png'%}" alt="" class="bar">
        <h4>효과음</h4>
      </li>
      <li>
        <div class="sound_btn_wrap">
          <button class="sound_plus" onclick="plusVolume(this);"/>
          <button class="sound_min" onclick="minusVolume(this);"/>
        </div>
        <input type="range" id="bgm" value="90">
        <img src="{% static 'img/sound_bg.png'%}" alt="" class="bar">
        <h4>배경음</h4>
      </li>
    </ul>
    <button class="set_btn" id="btn_save">Save</a>
  </div>
  <script>
    $(document).ready(function () {
      try {
        let volume = settings.volume
        $("#soundtrack").val(volume.soundtrack.toString())
        $("#effect").val(volume.effect.toString())
        $("#bgm").val(volume.bgm.toString())
      } catch (error) {
        $("#soundtrack").val("50")
        $("#effect").val("50")
        $("#bgm").val("50")
      }

      $("#btn_save").on("click", function() {
        saveSetting("volume");
      })
    })

    function plusVolume(obj) {
      var input = $(obj).closest("li").find("input[type=range]");
      var currValue = parseInt(input.val());
      if (currValue + 10 >= 100) {
        input.val("100");
      } else {
        input.val((currValue + 10).toString());  
      }
    }

    function minusVolume(obj) {
      var input = $(obj).closest("li").find("input[type=range]");
      var currValue = parseInt(input.val());
      if (currValue - 10 <= 0) {
        input.val("0");
      } else {
        input.val((currValue - 10).toString());  
      }
    }

  </script>
{% endblock %}