function voorwaarden(url) {
  if (document.all) {
    var x = screenLeft + (document.body.clientWidth-662)/2;
    var y = screenTop +45;
  } else {
    var x = screenX + (outerWidth-662)/2;
    var y = screenY + 150;
  }
  var w = window.open(url, "WebEtui", "status=1, scrollbars=1, resizable=1, left="+x+", top="+y+", width=662, height=500");
  w.focus();
}

function changetitle(e) {
  $('websitetitle').update($('input_websitetitle').value);
}

function changemenu(e) {
  var text = $('input_websitemenu').value;
  var arr = text.split("\n");
  var spans = [];
  arr.each(function(item) {
    spans.push('<span>'+item+'</span>');
  });

  $('websitemenu').update(spans.join(''));
}

function changecolor(e) {
  var hex = $('input_websitecolor').value;
  $('websitemenu').setStyle({'backgroundColor':hex});
  $$('#template h1, #template h2').invoke('setStyle', {'color':hex}); 
}

function clickcolor(e) {
  var a = e.element();
  var rgb = a.getStyle('backgroundColor');
  if (rgb.indexOf('rgb') >= 0) {
    var rv  = rgb.match(/rgb\((\d+), (\d+), (\d+)\)/);
    rgb = rgb2hex(rv[1], rv[2], rv[3]);
  }
  $('input_websitecolor').value = rgb;
  changecolor(e);
  $$('#colors a').invoke('removeClassName', 'selected');
  a.addClassName('selected');
}

function clickfont(e) {
  var a = e.element();
  var font = a.getStyle('fontFamily');
  $('input_lettertype').value = font;
  $$('#template, #template h1, #template h2').invoke('setStyle', {'fontFamily':font}); 
  $$('#fonts a').invoke('removeClassName', 'selected');
  a.addClassName('selected');
}

function rgb2hex(red, green, blue) {
  var hex = new Array('0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f');
  var rgb = new Array();
  var k = 0;
  
  for (var i = 0; i < 16; i++) {
    for (var j = 0; j < 16; j++) { 
      rgb[k] = hex[i] + hex[j]; k++ 
    }
  }
  return('#' + rgb[red] + rgb[green] + rgb[blue]);
}
  
document.observe('dom:loaded', function() {
  if ($('input_websitetitle')) {
    $('input_websitetitle').observe('keyup', changetitle);
    $('input_websitemenu').observe('keyup', changemenu);
    $('input_websitecolor').observe('keyup', changecolor);
    $$('#colors a').invoke('observe', 'click', clickcolor);
    $$('#fonts a').invoke('observe', 'click', clickfont);
  }
});