kwbock/clipster

<script type="text/javascript">
  $(function() {
    $("#tabs a").click(function (e) {
      e.preventDefault();
      $(this).tab('show');
    });

    $('#tabs a#preview_label').bind('click', function(e) {
      $.post("<%= preview_new_clip_path %>", $("#new_clip").serialize(), function(data, textStatus, jqXHR) {
        $("#preview").html(data);
      })
    });
  });
</script>
<legend>New Clip</legend>

<%= form_for(@clip, :url => { :action => "create" }) do |f| %>
  <%= f.error_messages %>

  <!-- 1st Row -->
  <div class="span5 offset1">
    <!-- title -->
    <div class="span4 no-left">
      <div class="help-tip">
        <%= f.label(:title) %> <i class="icon-question-sign" data-title="Name your clip"></i></div>
      <%= f.text_field(:title, :value => @clip.title, :required=>"required") %>
    </div>
    <!-- /title -->

    <!-- language -->
    <div class="span4 no-left">
      <div class="help-tip">
        <%= f.label(:language) %> <i class="icon-question-sign" data-title="Choose a language for syntax highlighting"></i></div>
      <%= f.collection_select("language", supported_languages, :lang, :title, :selected => (@clip.language || "text")) %>
    </div>
    <!-- /language -->
  </div>
  <!-- /1st Row -->

  <!-- 2nd Row -->
  <div class="span5 offset1 pull-right no-left">
    <!-- lifespan -->
    <div class="span4">
      <div class="help-tip">
        <%= f.label(:lifespan) %> <i class="icon-question-sign" data-title="Choose how long the clip should remain available"></i></div>
      <%= f.collection_select(:lifespan, @clip.lifespans, :first, :first, :selected=>(@clip.lifespan || "Forever")) %>
    </div>
    <!-- /lifespan -->

    <!-- private -->
    <div class="span4">
      <div class="help-tip">
        <%= f.label(:private) %> <i class="icon-question-sign" data-title="Only allow those with a link to access the clip"></i></div>
      <%= f.check_box(:private, :value => @clip.private) %>
    </div>
    <!-- /private -->
  </div>
  <!-- /2nd Row -->
  <div class="span10 offset1 ">
    <ul id="tabs" class="nav nav-tabs">
      <li class="active"><a href="#code" data-toggle="tab">Code</a></li>
      <li><a href="#preview" id="preview_label" data-toggle="tab">Preview</a></li>
    </ul>
    <div class="tab-content">
      <div id="code" class="tab-pane active">
        <div class="help-tip">
          <%= f.label(:clip) %> <i class="icon-question-sign" data-title="The main content to be shared"></i>
        </div>
        <%= f.text_area(:clip, :class=>"span10", :rows=>"15", :value => @clip.clip, :required=>"required") %>
      </div>
      <div id="preview" class="tab-pane"></div><!-- ajax loaded preview content -->
    </div>
  </div>
  <!-- clip -->
  <div class="tab-content">

  </div>
  <!-- /clip -->

  <div class="span2 pull-right">
    <%= f.submit(:class=>"btn btn-primary") %>
  </div>
<% end %>