8 files changed, 66 insertions, 52 deletions
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 5b03dce78..e2d7f11d9 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -11,8 +11,8 @@
 //= require cocoon
 //= require raphael
 //= require morris
-//= require bootstrap
-//= require typeahead.min
+//= require bootstrap-sass-official
+//= require typeahead.js
 //= require bootstrap-timepicker
 //= require tagmanager
 //= require_directory ./plugins
diff --git a/app/assets/stylesheets/application.css.scss.erb b/app/assets/stylesheets/application.css.scss.erb
index 8708d53c4..3f493856b 100644
--- a/app/assets/stylesheets/application.css.scss.erb
+++ b/app/assets/stylesheets/application.css.scss.erb
@@ -1,15 +1,11 @@
 // First import journal variables
-// @import "bootswatch/cerulean/variables";
 $brand-primary: <%= ChouetteIhm::Application.config.company_theme %>;
 $navbar-default-bg: $brand-primary;
 $navbar-default-link-color: white;
 $body-bg: #eee;
 
 // Then bootstrap itself
-@import "bootstrap";
-
-// And finally bootswatch style itself
-// @import "bootswatch/cerulean/bootswatch";
+@import "bootstrap-sass-official";
 
 // Whatever application styles you have go last
 // Modules and Variables
@@ -20,12 +16,11 @@ $body-bg: #eee;
 @import "partials/footer";
 
 // Third-party
-@import "tagmanager";
+@import "tagmanager/tagmanager.scss";
 @import "font-awesome";
 @import "jquery.ui.all";
 @import "morris";
 @import "formtastic";
-@import "typeahead-rails";
 @import "bootstrap-timepicker";
 
 @import "vendor/openlayers_style";
@@ -36,6 +31,7 @@ $body-bg: #eee;
 @import "vendor/pagination";
 @import "vendor/map_layers";
 @import "vendor/token-input.css";
+@import "vendor/typeahead";
 
 // Main css
 @import "main/*";
diff --git a/app/assets/stylesheets/main/time_tables.css.scss b/app/assets/stylesheets/main/time_tables.css.scss
index 10a8ca161..14eb87d5f 100644
--- a/app/assets/stylesheets/main/time_tables.css.scss
+++ b/app/assets/stylesheets/main/time_tables.css.scss
@@ -101,6 +101,14 @@
 
 #workspace.time_tables.edit,#workspace.time_tables.new,#workspace.time_tables.create,#workspace.time_tables.update
 {
+    fieldset.inputs{
+        overflow: visible !important;
+
+        .tags{
+            overflow: visible !important;
+        }
+    }
+
     h3 {
         .dates {
             cursor: pointer;
diff --git a/app/assets/stylesheets/vendor/formtastic_changes.css.scss b/app/assets/stylesheets/vendor/formtastic_changes.css.scss
index 4e7ea0d37..8de2a9bd1 100644
--- a/app/assets/stylesheets/vendor/formtastic_changes.css.scss
+++ b/app/assets/stylesheets/vendor/formtastic_changes.css.scss
@@ -1,8 +1,4 @@
 .formtastic{
-     
-    .input.typeahead_wrapper{
-        overflow: inherit !important;
-    }
 
     .label{
         white-space: normal;
diff --git a/app/assets/stylesheets/vendor/token-input.css b/app/assets/stylesheets/vendor/token-input.css
index cb883729a..50676f980 100644
--- a/app/assets/stylesheets/vendor/token-input.css
+++ b/app/assets/stylesheets/vendor/token-input.css
@@ -8,7 +8,7 @@ ul.token-input-list {
     cursor: text;
     font-size: 12px;
     font-family: Verdana, sans-serif;
-    z-index: 999;
+    z-index: 1061;
     margin: 0;
     padding: 0;
     background-color: #fff;
@@ -88,7 +88,7 @@ div.token-input-dropdown {
     cursor: default;
     font-size: 12px;
     font-family: Verdana, sans-serif;
-    z-index: 1;
+    z-index: 1061;
 }
 
 div.token-input-dropdown p {
diff --git a/app/assets/stylesheets/vendor/typeahead.css.scss b/app/assets/stylesheets/vendor/typeahead.css.scss
new file mode 100644
index 000000000..56653de9d
--- /dev/null
+++ b/app/assets/stylesheets/vendor/typeahead.css.scss
@@ -0,0 +1,49 @@
+.twitter-typeahead .tt-query,
+.twitter-typeahead .tt-hint {
+  margin-bottom: 0;
+}
+
+.tt-dropdown-menu {
+  min-width: 160px;
+  margin-top: 2px;
+  padding: 5px 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0,0,0,.2);
+  *border-right-width: 2px;
+  *border-bottom-width: 2px;
+  -webkit-border-radius: 6px;
+     -moz-border-radius: 6px;
+          border-radius: 6px;
+  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+          box-shadow: 0 5px 10px rgba(0,0,0,.2);
+  -webkit-background-clip: padding-box;
+     -moz-background-clip: padding;
+          background-clip: padding-box;
+}
+
+.tt-suggestion {
+  display: block;
+  padding: 3px 20px;
+}
+
+.tt-suggestion.tt-is-under-cursor {
+  color: #fff;
+  background-color: #0081c2;
+  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
+  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
+  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0)
+}
+
+.tt-suggestion.tt-is-under-cursor a {
+  color: #fff;
+}
+
+.tt-suggestion p {
+  margin: 0;
+}
+\ No newline at end of file
diff --git a/app/inputs/tags_input.rb b/app/inputs/tags_input.rb
index cee5a8312..4fbf0465f 100644
--- a/app/inputs/tags_input.rb
+++ b/app/inputs/tags_input.rb
@@ -14,6 +14,6 @@ class TagsInput < Formtastic::Inputs::StringInput
                   :autofocus         => nil,
                   :class             => 'tm-input',
                 })
-  end 
+  end
   
 end
diff --git a/app/views/time_table_combinations/_combine_form.html.erb b/app/views/time_table_combinations/_combine_form.html.erb
index a2124d9dc..aad31a218 100644
--- a/app/views/time_table_combinations/_combine_form.html.erb
+++ b/app/views/time_table_combinations/_combine_form.html.erb
@@ -3,8 +3,7 @@
   <%= render "shared/flash_messages" %>
   <%= form.inputs do %>
     <%= form.input :operation, :as => :radio, :collection => Hash[TimeTableCombination.operations.map {|b| [t( b, :scope => "time_table_combinations.operations"),b]}] %>
-    <%= form.input :combined_name, :class =>  "typeahead", :input_html => { :class => "form-control" } %>
-    <%= form.input :combined_id, :as => :hidden  %>
+    <%= form.input :combined_id, :label => t('.time_tables'), :as => :search_time_table, :json => referential_time_tables_path(@referential, :format => :json), :hint_text => t('search_hint'), :no_result_text => t('no_result_text'), :searching_text => t('searching_term'), :tokenLimit => 1 %>
   <% end %>
   </div>
   <div class="modal-footer">
@@ -12,38 +11,4 @@
     <%= form.action :submit, :as => :button , :label => t('time_tables.show.combine') %>
   <% end %>
   </div>
-
-<script>
-	$(function() {
-		var timeTableSuggestion = new Bloodhound({
-        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
-        queryTokenizer: Bloodhound.tokenizers.whitespace,
-        limit: 12,
-        remote: {
-          url: '<%= referential_time_tables_path(@referential, :format => :json) %>?q[comment_cont]=%QUERY',
-          },
-        });
-
-      timeTableSuggestion.initialize();
-
-      $('#time_table_combination_combined_name').typeahead(
-        {
-          hint: true,
-          highlight: true,
-          minLength: 1
-        },
-        {
-          name: 'comment',
-          displayKey: 'comment',
-          source: timeTableSuggestion.ttAdapter()
-        }
-      );
-
-  $('#time_table_combination_combined_name').on('typeahead:selected', function($e, datum)
-  {
-    $('input[name="time_table_combination[combined_id]"]').val(datum.id);
-  })
-
-	});
-</script>
 <% end %>