var request = new XMLHttpRequest();

function cargarEstilos() {
  var api = '/cgi/api/styles';
  request.open("GET", api, true);
  request.send();
}

function listarEstilos(id, estilos, def) {
	var select = document.getElementById(id);

	for (var i=0; i < estilos.length; i++) {
		var opt = document.createElement('option');
		opt.value = estilos[i];
		opt.textContent = estilos[i];
		if (i == def) {
			opt.selected = true;
		}
		select.appendChild(opt);
	}
}

request.onreadystatechange = function() {
  if (request.readyState == 4) {
    var json = JSON.parse(request.responseText);
    if (json.state == "success") {
			listarEstilos('stylebbs', json.bbs_styles, json.bbs_styles_default);
			listarEstilos('styleib', json.ib_styles, json.ib_styles_default);
    }
  }
};

function cambiarModo(e) {
  var iframe = document.getElementById('examplebbs');
  var estilo = document.getElementById('stylebbs').value;

  if (this.dataset.view == '1') {
    iframe.addEventListener('load', mostrarEstilo);
    iframe.src = '/static/example/bbs2.html';
    this.value = 'Ver modo frontal';
    this.dataset.view = '2';
  } else {
    iframe.src = '/static/example/bbs1.html';
    this.value = 'Ver modo respuesta';
    this.dataset.view = '1';
  }
}

function mostrarEstilo(e) {
  var tipo = e.target.dataset.type;
  if (e.target.tagName.toLowerCase() == 'iframe') {
    var estilo = document.getElementById(('style'+tipo)).value;
    var iframe = e.target;
  } else {
    var estilo = e.target.value;
    var id = "example" + tipo;
    var iframe = document.getElementById(id);
  }

  var css = iframe.contentDocument.getElementById('css');
  var loc = "/static/css/";
  if (tipo == 'bbs') {
    loc += 'txt/';
  }

  css.href = loc + estilo.toLowerCase() + ".css";
}

function cargariframe(tipo) {
  var iframe = document.createElement('iframe');
  iframe.id = 'example' + tipo;
  iframe.dataset.type = tipo;
  iframe.addEventListener('load', cargarDatos);
  iframe.src = '/static/example/' + tipo + '1.html';
  var div = document.getElementById("desc" + tipo);
  div.appendChild(document.createElement("br"));
  div.appendChild(iframe);
}

function cargarDatos(e) {
  var tipo = this.dataset.type;
  var key = 'weabot_style_' + tipo;
  if (localStorage.hasOwnProperty(key)) {
    var estilo = localStorage.getItem(key);
    document.getElementById(('style'+tipo)).value = estilo;
    mostrarEstilo(e);
    this.tabIndex = -1;
  }
  this.removeEventListener('load', cargarDatos);
}

function establecerEstilo(e) {
  var key = e.target.dataset.key;
}

function init(tipo) {
  cargariframe(tipo);
  document.getElementById('style'+tipo).addEventListener('change', mostrarEstilo);
  document.getElementById('set'+tipo).addEventListener('click', function() {
    var key = 'weabot_style_' + tipo;
    var estilo = document.getElementById(('style'+tipo)).value;
    localStorage.setItem(key, estilo);
  });
}

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("escondeme").style.display = 'none';

  cargarEstilos();

  document.getElementById('switchview').addEventListener('click', cambiarModo);
  init('bbs');
  init('ib');
});