window.onload = init;

var activeColor = '000000';
var activeBgColor = 'FFFFFF';
var activeFont = '0';
var activeSize = 20;

function init() {
  preview();
}

function select_color(colorId) {
  document.getElementById('color'+colorId).style.border = '2px solid #000';
  document.getElementById('color'+activeColor).style.borderColor = '#ccc';
  activeColor = colorId;
  document.getElementById('CounterColor').value = colorId;
  preview();
}

function select_bgcolor(colorId) {
  document.getElementById('bgcolor'+colorId).style.borderColor = '#000';
  document.getElementById('bgcolor'+activeBgColor).style.borderColor = '#ccc';
  activeBgColor = colorId;
  document.getElementById('CounterBgcolor').value = colorId;
  document.getElementById('CounterTransparent').value = 0;
  document.getElementById('CounterTransparentPlaceholder').checked = false;
  preview();
}

function select_font(fontId) {
  document.getElementById('font'+fontId).style.borderColor = '#000';
  document.getElementById('font'+activeFont).style.border = '0';
  activeFont = fontId;
  document.getElementById('CounterFontId').value = fontId;  
  preview();
}

function select_fontsize(size) {
  document.getElementById('size'+size).style.color = '#000';
  document.getElementById('size'+activeSize).style.color = '#ff6600';
  activeSize = size;
  document.getElementById('CounterSize').value = size;
  preview();
}

function toggle_transparent() {
  if (document.getElementById('CounterTransparent').value == 1) {
    document.getElementById('CounterTransparent').value = 0;
  } else {
    document.getElementById('CounterTransparent').value = 1;
  }
  preview();
}

function preview() {
  options = '?font_id=' + document.getElementById('CounterFontId').value;
  options += '&color=' + document.getElementById('CounterColor').value;
  options += '&transparent=' + document.getElementById('CounterTransparent').value;
  options += '&bgcolor=' + document.getElementById('CounterBgcolor').value;
  options += '&size=' + document.getElementById('CounterSize').value;
  
  document.getElementById('preview_img').src = '/counters/v/1/1' + options;
}