var languages = ['en', 'nl', 'th'];
var language_names = { 'en': 'English', 'nl': 'Nederlands', 'th': 'ภาษาไทย' };
var styles = ['hidden', 'shown', 'red', 'blue'];

var hidden_regex = /\s*hidden$/;
function show(element) {
  element.className = element.className.replace(hidden_regex, '');
}

var language_styles = {
  'hidden': function (element) {
    element.className += ' hidden';
  },
  'shown': function (element) {
    show(element);
    element.style.color = 'black';
  },
  'red': function (element) {
    show(element);
    element.style.color = 'darkred';
  },
  'blue': function (element) {
    show(element);
    element.style.color = 'darkblue';
  }
};

var language_defaults = {
  'en': 'shown',
  'nl': 'hidden',
  'th': 'shown'
};

// Apply a style change to all tags of the given language code.
function modify_language(language, style) {
  var apply = language_styles[style];
  var all = (document.all ? document.all : document.getElementsByTagName('*'));
  for (var i=0; i<all.length; ++i) {
    var element = all[i];
    if (element.lang == language) { apply(element); }
  }
}

function initialize_language_options(table_elt) {
  var table_text = '<table>';
  for (var l=0; l<languages.length; ++l) {
    var language = languages[l];
    var language_column = '<td>' + language_names[language] + '</td>';
    var dropdown_column = (
      '<td>\n<select id="' + language + '" ' +
      'onchange="modify_language(' + "'" + language + "'" + ', this.options[this.selectedIndex].value)">\n');
    var default_style = language_defaults[language];
    for (var s=0; s<styles.length; ++s) {
      var style = styles[s];
      dropdown_column += '<option value="' + style + '"';
      if (style == default_style) { dropdown_column += ' selected="selected"'; }
      dropdown_column += '>' + style + '</option>\n';
    }
    dropdown_column += '</select></td>\n';

    table_text += '<tr>' + language_column + dropdown_column + '</tr>\n';
  }
  table_text += '</table>';
  var new_table = document.createElement('div');
  new_table.innerHTML = table_text;
  table_elt.appendChild(new_table);
  table_elt.style.display = 'block';
}

function set_logo(suffix) {
  var tag = '<img src="images/logo-' + suffix + '.png" alt="Logo" />';
  var div = document.getElementById('logo');
  if (div) { div.innerHTML = tag; }
}

function get_logo_variant() {
  var today = new Date();
  return '0' + today.getDay();
}

function setup_page() {
  var lang_panel = document.getElementById('language-panel');
  if (lang_panel) { initialize_language_options(lang_panel); }

  set_logo(get_logo_variant());
}