<div id='sidebar'>
  <div class='panel'>
    <div class='header'>
      <span class='col_fade'>话题发布步骤</span>
    </div>
    <div class='inner'>
      <ol>
        <li>填写标题</li>
        <li>填写内容</li>
        <li>选择话题标签</li>
        <li>确认后发布话题</li>
      </ol>
    </div>
  </div>
  <div class='panel'>
    <div class='header'>
      <span class='col_fade'>话题发布指南</span>
    </div>
    <div class='inner'>
      <ol>
        <li>尽量把话题要点浓缩到标题里</li>
        <li>内容对标题做进一步说明，但不是必须的</li>
        <li>给话题选择合适的标签能增加被阅读的机会</li>
      </ol>
    </div>
  </div>
  <div class='panel'>
    <div class='header'>
      <span class='col_fade'>markdown语法参考</span>
    </div>
    <div class='inner'>
      <ol>
        <li>换行：两个空格</li>
        <li>分段：一个空行</li>
        <li>斜体：*斜体*</li>
        <li>粗体：**粗体**</li>
        <li>代码：行首四个空格</li>
        <li>链接：[文字](url)</li>
        <li>图片：![alt 文字](url)</li>
      </ol>
      <span>详见 <a href='http://www.ituring.com.cn/article/775' target='_blank'>Markdown Wiki</a></span>
    </div>
  </div>
</div>

<div id='content'>
  <div class='panel'>
    <div class='header'>
      <ol class='breadcrumb'>
        <li><a href='/'>主页</a><span class='divider'>/</span></li>
        <% if(locals.action && action == 'edit'){ %>
        <li class='active'>编辑话题</li>
        <% }else{ %>
        <li class='active'>发布话题</li>
        <% } %>
      </ol>
    </div>
    <div class='inner post'>
      <% if(locals.edit_error){ %>
      <div class="alert alert-error"> 
        <a class="close" data-dismiss="alert" href="#">&times;</a>
        <strong><%= edit_error %></strong>
      </div>
      <% } %>
      <% if(locals.error){ %>
      <div class="alert alert-error" >  
        <strong><%= error %></strong>
      </div>
      <% }else{ %>
      <% if (locals.action && action === 'edit') { %>
      <form id='create_topic_form' action='/topic/<%= topic_id %>/edit' method='post'>
      <% } else { %>
      <form id='create_topic_form' action='/topic/create' method='post'>
      <% } %>
        <fieldset>
          <label class='bold' for='title'>标题</label>
          <textarea class='span9' id='title' name='title' rows='1' placeholder="请在此输入标题，字数控制在10到100个之间"><%= locals.title || '' %></textarea>
          <label class='bold' for='t_content'>内容</label>
          <textarea class='editor' id='wmd-input' name='t_content' rows='20'><%= locals.content || '' %></textarea>

          <input type='hidden' id='topic_tags' name='topic_tags' value=''></input>
          <input type='hidden' name='_csrf' value='<%= csrf %>' />
          <button id='submit_btn' type="submit" class='btn'>发布</button>
        </fieldset>
      </form>
    </div>
    <% } %>
  </div>  
</div>

<!-- ajaxupload -->
<script src='/libs/ajax-upload/ajaxupload.js'></script>
<!-- markdown editor -->
<!-- <script src='/libs/pagedown/Markdown.Converter.js'></script>
<script src='/libs/showdown.js'></script>
<script src='/libs/pagedown/Markdown.Editor.js'></script> -->
<script src='/libs/ace/ace.js'></script>
<script src='/javascripts/editor.js'></script>

<script>
$(function () {
  // var editor;
  // function run_md_editor(){
  //   // var converter = Markdown.getSanitizingConverter();
  //   var converter = new Showdown.converter();
  //   editor = new Markdown.Editor(converter);
  //   editor.run();
  // }
  // run_md_editor();

  // $('.preview-btn').click(function() {
  //   editor.makePreviewHtml();
  //   prettyPrint();
  // });

  $('.tag_selectable').click(function(){
    $(this).toggleClass('tag_select');
  });

  $('#submit_btn').click(function(){
    var values=[];
    $('.tag_selectable').each(function(){
      if($(this).hasClass('tag_select')){
        values.push($(this).attr('tag_id'));
      }
    });
    $('#topic_tags').val(values);
    $('#create_topic_form').submit();
  });
});
</script>
