$(document).ready(function() {
  var $editor = $('#editor');
  var $editorJs = $('#editor-javascript');
  var $editorHtml = $('#editor-html');
  var $htmlContent = $('#html-content');
  var activeTab = 'show-html';

  var editor = ace.edit("editor");
  editor.setTheme("ace/theme/eclipse");
  editor.getSession().setMode("ace/mode/javascript");
  editor.getSession().setUseWrapMode(true);
  editor.getSession().on('change', function() {
    console.log(arguments)
  });

  function setActiveTab(which) {
    var elementId = 'show-' + which;
    $('#' + activeTab).removeClass('active');
    activeTab = elementId;
    $('#' + elementId).addClass('active');
    var ed = $('#editor-' + which);
    editor.getSession().setValue('');
    console.log(which);
    editor.getSession().setMode("ace/mode/" + which);
    console.log('set editor content to', ed.html());
    editor.getSession().setValue(ed.html());
  }

  $('#tabs button').click(function() {
    var which = $(this).prop('id').substr(5);
    setActiveTab(which);
  })

  function loadExample() {
    var exampleName = $(this).val();
    var serverPath = 'exemples/' + exampleName + '/';
    $.get(serverPath + 'script.js', function(javascript) {
      $editorJs.html(javascript);
    }, 'text');
    $.get(serverPath + '/contenu.html', function(html) {
      $editorHtml.html(html);
      $htmlContent.html(html);
      setActiveTab('html');
      loadJS(serverPath + 'script.js');
    }, 'text');

    
  }

  var fileSelect = $('#fileSelect');
  fileSelect.change(loadExample);

  setActiveTab('html');
});