$(document).ready(function () {
  performTranslation();

  // update instance listing
  updateHyperionInstanceListing();

  var oldEffects = [];
  var cpcolor = '#B500FF';
  var mappingList = window.serverSchema.properties.color.properties.imageToLedMappingType.enum;
  var duration = 0;
  var rgb = { r: 255, g: 0, b: 0 };
  var lastImgData = "";
  var lastFileName = "";

  //create html
  createTable('ssthead', 'sstbody', 'sstcont');
  $('.ssthead').html(createTableRow([$.i18n('remote_input_origin'), $.i18n('remote_input_owner'), $.i18n('remote_input_priority'), $.i18n('remote_input_status')], true, true));
  createTable('crthead', 'crtbody', 'adjust_content', true);


  //create introduction
  if (window.showOptHelp) {
    createHint("intro", $.i18n('remote_color_intro', $.i18n('remote_losthint')), "color_intro");
    createHint("intro", $.i18n('remote_input_intro', $.i18n('remote_losthint')), "sstcont");
    createHint("intro", $.i18n('remote_adjustment_intro', $.i18n('remote_losthint')), "adjust_content");
    createHint("intro", $.i18n('remote_components_intro', $.i18n('remote_losthint')), "comp_intro");
    createHint("intro", $.i18n('remote_maptype_intro', $.i18n('remote_losthint')), "maptype_intro");
    createHint("intro", $.i18n('remote_videoMode_intro', $.i18n('remote_losthint')), "videomode_intro");
  }

  //color adjustment
  var sColor = sortProperties(window.serverSchema.properties.color.properties.channelAdjustment.items.properties);
  var values = window.serverInfo.adjustment[0];

  for (var key in sColor) {
    if (sColor[key].key != "id" && sColor[key].key != "leds") {
      var title = '<label for="cr_' + sColor[key].key + '">' + $.i18n(sColor[key].title) + '</label>';
      var property;
      var value = values[sColor[key].key];

      if (sColor[key].type == "array") {
        property = '<div id="cr_' + sColor[key].key + '" class="input-group colorpicker-component" ><input type="text" class="form-control" /><span class="input-group-addon"><i></i></span></div>';
        $('.crtbody').append(createTableRow([title, property], false, true));
        createCP('cr_' + sColor[key].key, value, function (rgb, hex, e) {
          requestAdjustment(e.target.id.substr(e.target.id.indexOf("_") + 1), '[' + rgb.r + ',' + rgb.g + ',' + rgb.b + ']');
        });
      }
      else if (sColor[key].type == "boolean") {
        property = '<div class="checkbox"><input id="cr_' + sColor[key].key + '" type="checkbox" value="' + value + '"/><label></label></div>';
        $('.crtbody').append(createTableRow([title, property], false, true));

        $('#cr_' + sColor[key].key).off().on('change', function (e) {
          requestAdjustment(e.target.id.substr(e.target.id.indexOf("_") + 1), e.currentTarget.checked);
        });
      }
      else {
        if (sColor[key].key == "brightness" || sColor[key].key == "brightnessCompensation" || sColor[key].key == "backlightThreshold")
          property = '<div class="input-group"><input id="cr_' + sColor[key].key + '" type="number" class="form-control" min="0" max="100" step="10" value="' + value + '"/><span class="input-group-addon">' + $.i18n("edt_append_percent") + '</span></div>';
        else
          property = '<input id="cr_' + sColor[key].key + '" type="number" class="form-control" min="0.1" max="4.0" step="0.1" value="' + value + '"/>';

        $('.crtbody').append(createTableRow([title, property], false, true));
        $('#cr_' + sColor[key].key).off().on('change', function (e) {
          valValue(this.id, this.value, this.min, this.max);
          requestAdjustment(e.target.id.substr(e.target.id.indexOf("_") + 1), e.currentTarget.value);
        });
      }
    }
  }

  function sendEffect() {
    var efx = $("#effect_select").val();
    if (efx != "__none__") {
      requestPriorityClear();
      $(window.hyperion).one("cmd-clear", function (event) {
        setTimeout(function () { requestPlayEffect(efx, duration) }, 100);
      });
    }
  }

  function sendColor() {
    requestSetColor(rgb.r, rgb.g, rgb.b, duration);
  }

  function updateInputSelect() {
    $('.sstbody').html("");
    var prios = window.serverInfo.priorities;
    var clearAll = false;

    for (var i = 0; i < prios.length; i++) {
      var origin = prios[i].origin ? prios[i].origin : "System";
      origin = origin.split("@");
      var ip = origin[1];
      origin = origin[0];

      var owner = prios[i].owner;
      var active = prios[i].active;
      var visible = prios[i].visible;
      var priority = prios[i].priority;
      var compId = prios[i].componentId;
      var duration = prios[i].duration_ms / 1000;
      var value = "0,0,0";
      var btn_type = "default";
      var btn_text = $.i18n('remote_input_setsource_btn');
      var btn_state = "enabled";

      if (active)
        btn_type = "primary";

      if (priority > 254)
        continue;
      if (priority < 254 && (compId == "EFFECT" || compId == "COLOR" || compId == "IMAGE"))
        clearAll = true;

      if (visible) {
        btn_state = "disabled";
        btn_type = "success";
        btn_text = $.i18n('remote_input_sourceactiv_btn');
      }

      if (ip)
        origin += '<br/><span style="font-size:80%; color:grey;">' + $.i18n('remote_input_ip') + ' ' + ip + '</span>';

      if ("value" in prios[i])
        value = prios[i].value.RGB;

      switch (compId) {
        case "EFFECT":
          owner = $.i18n('remote_effects_label_effects') + '  ' + owner;
          break;
        case "COLOR":
          owner = $.i18n('remote_color_label_color') + '  ' + '<div style="width:18px; height:18px; border-radius:20px; margin-bottom:-4px; border:1px grey solid; background-color: rgb(' + value + '); display:inline-block" title="RGB: (' + value + ')"></div>';
          break;
        case "IMAGE":
          owner = $.i18n('remote_effects_label_picture') + ' ' + owner;
          break;
        case "GRABBER":
          owner = $.i18n('general_comp_GRABBER') + ': (' + owner + ')';
          break;
        case "V4L":
          owner = $.i18n('general_comp_V4L') + ': (' + owner + ')';
          break;
        case "BOBLIGHTSERVER":
          owner = $.i18n('general_comp_BOBLIGHTSERVER');
          break;
        case "FLATBUFSERVER":
          owner = $.i18n('general_comp_FLATBUFSERVER');
          break;
        case "PROTOSERVER":
          owner = $.i18n('general_comp_PROTOSERVER');
          break;
      }

      if (duration && compId != "GRABBER" && compId != "FLATBUFSERVER" && compId != "PROTOSERVER")
        owner += '<br/><span style="font-size:80%; color:grey;">' + $.i18n('remote_input_duration') + ' ' + duration.toFixed(0) + $.i18n('edt_append_s') + '</span>';

      var btn = '<button id="srcBtn' + i + '" type="button" ' + btn_state + ' class="btn btn-' + btn_type + ' btn_input_selection" onclick="requestSetSource(' + priority + ');">' + btn_text + '</button>';

      if ((compId == "EFFECT" || compId == "COLOR" || compId == "IMAGE") && priority < 254)
        btn += '<button type="button" class="btn btn-sm btn-danger" style="margin-left:10px;" onclick="requestPriorityClear(' + priority + ');"><i class="fa fa-close"></button>';

      if (btn_type != 'default')
        $('.sstbody').append(createTableRow([origin, owner, priority, btn], false, true));
    }
    var btn_auto_color = (window.serverInfo.priorities_autoselect ? "btn-success" : "btn-danger");
    var btn_auto_state = (window.serverInfo.priorities_autoselect ? "disabled" : "enabled");
    var btn_auto_text = (window.serverInfo.priorities_autoselect ? $.i18n('general_btn_on') : $.i18n('general_btn_off'));
    var btn_call_state = (clearAll ? "enabled" : "disabled");
    $('#auto_btn').html('<button id="srcBtn' + i + '" type="button" ' + btn_auto_state + ' class="btn ' + btn_auto_color + '" style="margin-right:5px;display:inline-block;" onclick="requestSetSource(\'auto\');">' + $.i18n('remote_input_label_autoselect') + ' (' + btn_auto_text + ')</button>');
    $('#auto_btn').append('<button type="button" ' + btn_call_state + ' class="btn btn-danger" style="display:inline-block;" onclick="requestClearAll();">' + $.i18n('remote_input_clearall') + '</button>');

    var max_width = 100;
    $('.btn_input_selection').each(function () {
      if ($(this).innerWidth() > max_width)
        max_width = $(this).innerWidth();
    });
    $('.btn_input_selection').css("min-width", max_width + "px");
  }

  function updateLedMapping() {
    var mapping = window.serverInfo.imageToLedMappingType;

    $('#mappingsbutton').html("");
    for (var ix = 0; ix < mappingList.length; ix++) {
      if (mapping == mappingList[ix])
        var btn_style = 'btn-success';
      else
        var btn_style = 'btn-primary';

      $('#mappingsbutton').append('<button type="button" id="lmBtn_' + mappingList[ix] + '" class="btn ' + btn_style + '" style="margin:3px;min-width:200px" onclick="requestMappingType(\'' + mappingList[ix] + '\');">' + $.i18n('remote_maptype_label_' + mappingList[ix]) + '</button><br/>');
    }
  }

  function initComponents() {
    var components = window.comps;
    var hyperionEnabled = true;
    components.forEach(function (obj) {
      if (obj.name == "ALL") {
        hyperionEnabled = obj.enabled;
      }
    });

    for (const comp of components) {
      if (comp.name === "ALL")
        continue;

      const enable_style = (comp.enabled ? "checked" : "");
      const comp_btn_id = "comp_btn_" + comp.name;

      if ($("#" + comp_btn_id).length === 0) {
        var d = '<span style="display:block;margin:3px">'
          + '<label class="checkbox-inline">'
          + '<input id = "' + comp_btn_id + '"' + enable_style + ' type = "checkbox"'
          + 'data-toggle="toggle" data-onstyle="success" data-on="' + $.i18n('general_btn_on') + '" data-off="' + $.i18n('general_btn_off') + '">'
          + $.i18n('general_comp_' + comp.name) + '</label > '
          + '</span>';

        $('#componentsbutton').append(d);
        $(`#${comp_btn_id}`).bootstrapToggle();
        $(`#${comp_btn_id}`).bootstrapToggle((hyperionEnabled ? "enable" : "disable"));
        $(`#${comp_btn_id}`).change(e => {
          requestSetComponentState(e.currentTarget.id.split('_').pop(), e.currentTarget.checked);
        });
      }
    }
  }

  function updateComponent(component) {
    if (component.name == "ALL") {
      var components = window.comps;
      var hyperionEnabled = component.enabled;
      for (const comp of components) {

        if (comp.name === "ALL")
          continue;

        const comp_btn_id = "comp_btn_" + comp.name;

        if (!hyperionEnabled) {
          $(`#${comp_btn_id}`).bootstrapToggle('off');
          $(`#${comp_btn_id}`).bootstrapToggle("disable");
        }
        else {
          $(`#${comp_btn_id}`).bootstrapToggle("enable");
          if (comp.enabled !== $(`#${comp_btn_id}`).prop("checked")) {
            $(`#${comp_btn_id}`).bootstrapToggle().prop('checked', comp.enabled).change();
          }
        }
      }
    }
    else {
      const comp_btn_id = "comp_btn_" + component.name;

      //console.log ("updateComponent: ", component.name, "Current Checked: ", $(`#${comp_btn_id}`).prop("checked"), "New Checked: ", component.enabled,  );

      // In case Buttons were disabled before, status may be different to component status
      if (component.enabled != $(`#${comp_btn_id}`).prop("checked")) {
        // console.log ("Update status to Checked = ", component.enabled);
        if (component.enabled)
          $(`#${comp_btn_id}`).bootstrapToggle("on");
        else
          $(`#${comp_btn_id}`).bootstrapToggle("off");
      }
    }
  }

  function updateEffectlist() {
    var newEffects = window.serverInfo.effects;
    if (newEffects.length != oldEffects.length) {
      $('#effect_select').html('<option value="__none__"></option>');
      var usrEffArr = [];
      var sysEffArr = [];

      for (var i = 0; i < newEffects.length; i++) {
        var effectName = newEffects[i].name;
        if (!/^\:/.test(newEffects[i].file)) {
          usrEffArr.push(effectName);
        }
        else {
          sysEffArr.push(effectName);
        }
      }
      $('#effect_select').append(createSel(usrEffArr, $.i18n('remote_optgroup_usreffets')));
      $('#effect_select').append(createSel(sysEffArr, $.i18n('remote_optgroup_syseffets')));
      oldEffects = newEffects;
    }
  }

  function updateVideoMode() {
    var videoModes = ["2D", "3DSBS", "3DTAB"];
    var currVideoMode = window.serverInfo.videomode;

    $('#videomodebtns').html("");
    for (var ix = 0; ix < videoModes.length; ix++) {
      if (currVideoMode == videoModes[ix])
        var btn_style = 'btn-success';
      else
        var btn_style = 'btn-primary';
      $('#videomodebtns').append('<button type="button" id="vModeBtn_' + videoModes[ix] + '" class="btn ' + btn_style + '" style="margin:3px;min-width:200px" onclick="requestVideoMode(\'' + videoModes[ix] + '\');">' + $.i18n('remote_videoMode_' + videoModes[ix]) + '</button><br/>');
    }
  }

  // colorpicker and effect
  if (getStorage('rmcpcolor') != null) {
    cpcolor = getStorage('rmcpcolor');
    rgb = hexToRgb(cpcolor);
  }

  if (getStorage('rmduration') != null) {
    $("#remote_duration").val(getStorage('rmduration'));
    duration = getStorage('rmduration');
  }

  createCP('cp2', cpcolor, function (rgbT, hex) {
    rgb = rgbT;
    sendColor();
    setStorage('rmcpcolor', hex);
    updateInputSelect();
  });

  $("#reset_color").off().on("click", function () {
    requestPriorityClear();
    lastImgData = "";
    $("#effect_select").val("__none__");
    $("#remote_input_img").val("");
  });

  $("#remote_duration").off().on("change", function () {
    duration = valValue(this.id, this.value, this.min, this.max);
    setStorage('rmduration', duration);
  });

  $("#effect_select").off().on("change", function (event) {
    sendEffect();
  });

  $("#remote_input_reseff, #remote_input_rescol").off().on("click", function () {
    if (this.id == "remote_input_rescol")
      sendColor();
    else
      sendEffect();
  });

  $("#remote_input_repimg").off().on("click", function () {
    if (lastImgData != "")
      requestSetImage(lastImgData, duration, lastFileName);
  });

  $("#remote_input_img").change(function () {
    readImg(this, function (src, fileName) {
      lastFileName = fileName;
      if (src.includes(","))
        lastImgData = src.split(",")[1];
      else
        lastImgData = src;

      requestSetImage(lastImgData, duration, lastFileName);
    });
  });

  //force first update
  initComponents();
  updateInputSelect();
  updateLedMapping();
  updateVideoMode();
  updateEffectlist();

  // interval updates

  $(window.hyperion).on('components-updated', function (e, comp) {
    //console.log ("components-updated", e, comp);
    updateComponent(comp);
  });

  $(window.hyperion).on("cmd-priorities-update", function (event) {
    window.serverInfo.priorities = event.response.data.priorities;
    window.serverInfo.priorities_autoselect = event.response.data.priorities_autoselect;
    updateInputSelect();
  });
  $(window.hyperion).on("cmd-imageToLedMapping-update", function (event) {
    window.serverInfo.imageToLedMappingType = event.response.data.imageToLedMappingType;
    updateLedMapping();
  });

  $(window.hyperion).on("cmd-videomode-update", function (event) {
    window.serverInfo.videomode = event.response.data.videomode;
    updateVideoMode();
  });

  $(window.hyperion).on("cmd-effects-update", function (event) {
    window.serverInfo.effects = event.response.data.effects;
    updateEffectlist();
  });

  removeOverlay();
});