vlog/app/views/admin/vlogs/_form.html.erb

<% content_for :page_specific_css do %>
  <%= stylesheet_link_tag "lib/main-forms" %>
  <%= stylesheet_link_tag "lib/fileupload" %>
  <%= stylesheet_link_tag "lib/main-list" %>
<% end %>
<% content_for :page_specific_javascript do %>
  <%= javascript_include_tag "lib/bootstrap-fileupload" %>
  <%= javascript_include_tag "lib/bootstrap-datetimepicker" %>
  <%= javascript_include_tag "lib/datetimepicker/datetimepicker.js" %>
  <%= javascript_include_tag "lib/file-type" %>
  <%= javascript_include_tag "lib/module-area" %>  
  <%= javascript_include_tag "file-upload/jquery.fileupload" %>  
<% end %>



<!-- Input Area -->
<div class="input-area">
<!-- Module Tabs -->
  <div class="nav-name"><strong><%= t(:module) %></strong></div>
  <ul class="nav nav-pills module-nav">
    <li class="active"><a href="#basic" data-toggle="tab"><%= t(:basic) %></a></li>
    <li><a href="#tag" data-toggle="tab"><%= t(:tags) %></a></li>
    <li><a href="#members" data-toggle="tab"><%= t(:member) %></a></li>
  </ul>
  <div class="tab-content module-area">
   <!-- Basic Module -->
    <div class="tab-pane fade in active" id="basic">

      <!-- Category -->
      <div class="control-group">
        <label class="control-label muted"><%= t(:category) %></label>
        <div class="controls">
          <%= select_category(f, @module_app) %>
        </div>
      </div>
      <div class="control-group" id="video_type_selection">
        <label class="control-label muted"><%= t(:type) %></label>
        <div class="controls">
        <label class="checkbox inline" style="padding-left:0px;">
        	<%= f.radio_button :type, "youtube" %> YouTube
        </label>
        <label class="checkbox inline" style="padding-left:0px;">
         	<%= f.radio_button :type, "upload" %> Upload
        </label>
        </div>
      </div>
      <div class="control-group video <%= @vlog.type == "youtube" ? "" : "hide" %>" for="youtube">
      	<%= f.label :youtube_link, "YouTube Link", :class => "control-label muted" %>
      	<div class="controls">
      		<%= f.text_field :youtube_link %>
      		<div><%= 'ex. https://www.youtube.com/watch?v=UHF2e3lyPVU' %></div>
      	</div>
      </div>
       <div class="control-group video <%= @vlog.type == "upload" ? "" : "hide" %>" for="upload">
      	<%= f.label :video, "Video", :class => "control-label muted" %>
      	<div class="controls">
			<input type="hidden" name="video_dirname" id="video_file_temp_dir" />	
			<input type="hidden" name="video_filename" id="video_file_temp_name" />	
			<a href="#videoUploader" role="button" class="btn btn-info" data-toggle="modal">Upload Video</a>
			<label id="video_file_name"><%= File.basename(@vlog.video.file.path) if !@vlog.new_record? && @vlog.type != "youtube" %></label>
      	</div>
      </div>
       <div class="control-group video <%= @vlog.type == "upload" ? "" : "hide" %>" for="upload">
      	<%= f.label :image, "Cover Image", :class => "control-label muted" %>
        <div class="controls">
          <div class="fileupload fileupload-new clearfix <%= 'fileupload-edit' if @vlog.image.file %>" >
            <div class="fileupload-new thumbnail pull-left">
              <% if @vlog.image.file %>
                <%= image_tag @vlog.image %>
              <% else %>
                <img src="http://www.placehold.it/50x50/EFEFEF/AAAAAA" id="showcase_image" />
              <% end %>
            </div>
            <div class="fileupload-preview fileupload-exists thumbnail pull-left"></div>
            <span class="btn btn-file">
              <span class="fileupload-new"><%= t(:select_image) %></span>
              <span class="fileupload-exists"><%= t(:change) %></span>
              <%= f.file_field :image %>
            </span>
            <a href="#" class="btn fileupload-exists" data-dismiss="fileupload"><%= t(:cancel) %></a>
            <div class="controls" data-toggle="buttons-checkbox">
              <label class="checkbox inline btn btn-danger fileupload-remove">
                <%= f.check_box :remove_image %><%= t(:remove) %>
              </label>
            </div>
          </div>
        </div>
      </div>
      <div class="control-group">
        <%= f.label :display_in_profile, "Display in profile", :class => "control-label muted" %>
        <div class="controls">
			<%= f.check_box :display_in_profile %>
        </div>
      </div>
    </div>
	 <!-- Tag Module -->
    <div class="tab-pane fade" id="tag">
      <div class="control-group">
        <label class="control-label muted"><%= t(:tags) %></label>
        <%= select_tags(f, @module_app) %>
      </div>
    </div>
    <!-- Members section -->
    <div class="tab-pane fade" id="members">
    </div>
   </div>

     <!-- Language Tabs -->
  <div class="nav-name"><strong><%= t(:language) %></strong></div>
  <ul class="nav nav-pills language-nav">
    <% @site_in_use_locales.each_with_index do |locale, i| %>
      <li class="<%= 'active' if i == 0 %>">
        <a data-toggle="tab" href=".<%= locale %>"><%= t(locale) %></a>
      </li>
    <% end %>
  </ul>

  <!-- Language -->
  <div class="tab-content language-area">

    <% @site_in_use_locales.each_with_index do |locale, i| %>
    
      <div class="<%= locale %> tab-pane fade <%= ( i == 0 ) ? "in active" : '' %>">

        <!-- Title-->
        <div class="control-group input-title">
          <label class="control-label muted"><%= t(:title) %></label>
          <div class="controls">
            <%= f.fields_for :title_translations do |f| %>
              <%= f.text_field locale, class: "input-block-level", placeholder: t(:title), value: (@vlog.title_translations[locale] rescue nil) %>
            <% end %>
          </div>
        </div>

        <!-- Sub Title -->
        <div class="control-group input-subtitle">
          <label class="control-label muted"><%= t(:subtitle) %></label>
          <div class="controls">
            <div class="textarea">
              <%= f.fields_for :subtitle_translations do |f| %>
                <%= f.text_area locale, rows: 2, class: "input-block-level", value: (@vlog.subtitle_translations[locale] rescue nil) %>
              <% end %>
            </div>
          </div>
        </div>
     </div>

    <% end %>
         <!-- File -->
    <div class="control-group">
      <label class="control-label muted"><%= t(:file_) %></label>
      <div class="controls"  id="add-target-files">

        <!-- Exist -->
        <% if @vlog && !@vlog.v_log_files.blank? %>
          <div class="exist">
            <% @vlog.v_log_files.each_with_index do |v_log_file, i| %>
              <%= f.fields_for :v_log_files, v_log_file do |f| %>
                <%= render :partial => 'form_file', :object => v_log_file, :locals => {:f => f, :i => i} %>
              <% end %>
            <% end %> 
            <hr>
          </div>
        <% end %>

        <!-- Add -->
        <div class="add-target">
        </div>
        <p class="add-btn">
          <button id="add_file" class="trigger btn btn-small btn-primary"><i class="icons-plus"></i> <%= t(:add) %></button>
        </p>

      </div>
    </div>
	</div>
</div>
 <!-- Form Actions -->
<div class="form-actions">
  <%= f.submit t('submit'), class: 'btn btn-primary' %>
</div>
<script type="text/javascript">
	$("#video_type_selection input[type=radio]").on("click",function(){
		var type = $(this).val();
		$(".video").addClass("hide");
		$(".video[for=" + type + "]").removeClass("hide");
	})
 	var columnArea = $("#add-target-files"),
		totalFiles = columnArea.find(".fileupload").length,
		filesCounter = totalFiles;

	$("button#add_file").on("click",function(){
	    var html = "<%= escape_javascript(add_attribute 'form_file', f, :v_log_files) %>",
	        replaceReg = new RegExp("new_v_log_files","g");

	    html = html.replace(replaceReg,filesCounter);
	    columnArea.find(".add-target").append(html);
	    filesCounter++;
	    return false;
	})
	
	$(document).on('click', '.delete_file', function(){
    	$(this).parents('.input-prepend').remove();
  	});

  	$(document).on('click', '.remove_existing_record', function(){
        if(confirm("<%= I18n.t(:sure?)%>")){
          $(this).children('.should_destroy').attr('value', 1);
          $(this).parents('.start-line').hide();
        }
    });

    $("#v_log_image").on("change",function(){
      $("#showcase_image").attr("src",URL.createObjectURL(this.files[0]));
    })

    $(document).on("change",".btn-file input[type=file]",function(){
      var span = $(this).parent().parent().find(".fileupload-preview");
      span.text(this.files[0].name);
    })
	
</script>