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

  var editor;

  function initEditor(mode) {
    editor = ace.edit("editor");
    editor.setTheme("ace/theme/eclipse");
    console.log(mode);
    editor.getSession().setMode("ace/mode/" + mode);
    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, "ace/mode/" + which);
    // editor.getSession().setMode("ace/mode/" + which);
    // console.log('set editor content to', ed.html());
    // editor.getSession().setValue(ed.html());
    // newSession = ace.createEditSession(ed.html(), "ace/mode/" + which)
    // var oldSession = editor.session
    // editor.setSession(newSession)
    initEditor(which);
    console.log(ed[0].innerHTML)
    editor.getSession().setValue('<button id="pouet">Click me</button>'); //ed[0].innerHTML);
  }

  $('#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');
});