Implement tooltips for suppliers table view

Gemfile

@@ -60,7 +60,11 @@ end
 
 group :test do
   gem 'pry'
-  gem 'steak'
+  #gem 'steak'
+  gem 'rspec-rails'
+  gem 'cucumber-rails'
+  gem 'poltergeist'
+  gem 'database_cleaner'
   gem 'rb-fsevent', :require => false #if RUBY_PLATFORM =~ /darwin/i
   gem 'ruby_gntp'
   gem 'guard-rspec'

Gemfile.lock

@@ -106,7 +106,17 @@ GEM
       mime-types (~> 1.15)
       multi_json (~> 1.0)
       rest-client (~> 1.6.1)
+    cucumber (1.2.3)
+      builder (>= 2.1.2)
+      diff-lcs (>= 1.1.3)
+      gherkin (~> 2.11.6)
+      multi_json (~> 1.3)
+    cucumber-rails (1.3.0)
+      capybara (>= 1.1.2)
+      cucumber (>= 1.1.8)
+      nokogiri (>= 1.5.0)
     daemons (1.1.9)
+    database_cleaner (0.9.1)
     devise (2.0.4)
       bcrypt-ruby (~> 3.0)
       orm_adapter (~> 0.0.3)
@@ -126,8 +136,12 @@ GEM
     factory_girl_rails (4.2.1)
       factory_girl (~> 4.2.0)
       railties (>= 3.0.0)
+    faye-websocket (0.4.6)
+      eventmachine (>= 0.12.0)
     ffi (1.4.0)
     fssm (0.2.10)
+    gherkin (2.11.6)
+      json (>= 1.7.6)
     guard (1.6.2)
       listen (>= 0.6.0)
       lumberjack (>= 1.0.2)
@@ -145,6 +159,7 @@ GEM
       haml (>= 3.1, < 4.1)
       railties (>= 3.1, < 4.1)
     hike (1.2.1)
+    http_parser.rb (0.5.3)
     i18n (0.6.4)
     journey (1.0.4)
     jquery-rails (2.2.1)
@@ -175,6 +190,12 @@ GEM
       activesupport (>= 3.0.0)
       cocaine (~> 0.5.0)
       mime-types
+    poltergeist (1.0.2)
+      capybara (> 1.1)
+      childprocess (~> 0.3)
+      faye-websocket (~> 0.4, >= 0.4.4)
+      http_parser.rb (~> 0.5.3)
+      multi_json (~> 1.0)
     polyglot (0.3.3)
     pry (0.9.12)
       coderay (~> 1.0.5)
@@ -257,9 +278,6 @@ GEM
       multi_json (~> 1.0)
       rack (~> 1.0)
       tilt (~> 1.1, != 1.3.0)
-    steak (2.0.0)
-      capybara (>= 1.0.0)
-      rspec-rails (>= 2.5.0)
     subexec (0.2.2)
     temple (0.5.5)
     terminal-table (1.4.5)
@@ -295,6 +313,8 @@ DEPENDENCIES
   coffee-rails (~> 3.2.1)
   compass-rails
   couch_potato!
+  cucumber-rails
+  database_cleaner
   devise (= 2.0.4)
   devise_simply_stored
   factory_girl_rails
@@ -304,6 +324,7 @@ DEPENDENCIES
   letter_opener
   mini_magick
   mustache
+  poltergeist
   pry
   quiet_assets
   rack-cors
@@ -316,6 +337,5 @@ DEPENDENCIES
   simple_form
   simply_stored!
   slim-rails
-  steak
   thin
   uglifier (>= 1.0.3)

app/assets/javascripts/supplier/application.js

@@ -17,10 +17,11 @@
 // require bootstrap-popover
 // require bootstrap-typeahead
 //= require bootstrap
-//= require mustache
+//= require handlebars
 //= require faye
 //= require supplier/base
 //= require qwaiter
+//= require qtip
 //= require_directory .
 //= require_self
 //= require moment
@@ -45,3 +46,16 @@ function redirect_to(mapping, variables){
 function currency(num) {
   return Qwaiter.currency(num);
 }
+
+Handlebars.registerHelper('t', function(tlocation) {
+  return t(tlocation)
+})
+Handlebars.registerHelper('currency', function(price) {
+  if(price.fn){
+    price = price.fn(this);
+  }
+  if(typeof(price) == 'function'){
+    price = price.call(this)
+  }
+  return new Handlebars.SafeString(currency(price))
+})

app/assets/javascripts/supplier/qsupplier.js.coffee

@@ -6,7 +6,8 @@ root.Qsupplier=
       if(e.event == 'new_order')
         body = $('#active-orders-table tbody')
         order = new Order(e.data)
-        body.append @mustache('#active-order-template', order)
+        if body.length
+          body.append @mustache('#active-order-template', order)
         $('.section-table-list-'+order.list_id()).addClass('active_order')
       else if(e.event == 'list_needs_help')
         $('#list-needs-help-indicator-'+e.data.id).removeClass('hide')
@@ -202,6 +203,11 @@ root.Qsupplier=
   mustache: (selector, locals)->
     html = $(selector).html()
     return '' unless html
+    template = Handlebars.compile(html)
+    container = $('<div></div>')
+    container.html(template(locals))
+    setTranslations(container)
+    return container.html()
     locs = $.extend(locals,
       currency: ->
         (val)->

app/assets/javascripts/supplier/translations.js.erb

@@ -61,7 +61,7 @@ function setTranslations(selector){
   list.find('.locale').show();
   list.find('.locale-'+$locale).hide();
   if(selector){
-    $(selector).find('[data-t]').each(function(){$(this).text(t($(this).data('t'), $(this).data('tAttributes')))})
+    $(selector).find('[data-t]').each(function(){$(this).html(t($(this).data('t'), $(this).data('tAttributes')))})
   }else{
     $('[data-t]').each(function(){$(this).html(t($(this).data('t'),$(this).data('tAttributes')))})
   }

app/assets/stylesheets/supplier/application.css

@@ -2,6 +2,7 @@
  *= require 'twitter-bootstrap/bootstrap_and_overrides'
  *= require 'twitter-bootstrap/bootstrap_overrides'
  *= require 'jquery-ui-1.8.23.custom.css'
+ *= require qtip
  *= require 'general'
  *= require user/active_list
  *= require_directory .

app/assets/stylesheets/supplier/darkstrap.sass

@@ -265,6 +265,11 @@ legend
   border-top: 1px solid #222
   +box-shadow(0 1px 0 #333333 inset)
 
+.popover
+  color: #333
+  h3
+    color: #333
+
 //=Progress bars
 .progress
   @extend .well

app/assets/stylesheets/supplier/section_tables.css.sass

@@ -40,7 +40,7 @@ $table-width: 83px
     background-color: rgba(0,0,0,0.4)
     .section-table
       position: absolute
-      cursor: move
+      cursor: pointer
       &.occupied
         background-color: #ffa
       &.needs_help
@@ -59,6 +59,9 @@ $table-width: 83px
       a
         &:hover
           text-decoration: none
+  &.section-tables-manage
+    .section-table
+      cursor: move
   &.section-tables-inactive
     .section-table
       position: relative
@@ -76,3 +79,7 @@ table
           content: " - "
 .go-to-tables-view.hide
   display: inline-block
+
+ul#table-actions-list
+  list-style: none
+  margin: 0

app/controllers/suppliers/sections_controller.rb

@@ -103,6 +103,7 @@ module Suppliers
     # GET /sections/1/tables_view.json
     def tables_view
       @section = Section.find_by_supplier_id_and_id!(current_supplier.id, params[:id])
+      @tables =  Table.enrich_active_list_id(@section.tables)
 
       respond_to do |format|
         format.html # show.html.erb
@@ -138,5 +139,15 @@ module Suppliers
       else render(json: json_alert('messages.could_not_arrange_tables'))
       end
     end
+
+    def table_actions
+      @section = Section.find_by_supplier_id_and_id!(current_supplier.id, params[:id])
+      render(text: 'No table_id given', content_type: Mime::HTML.to_s) and return unless params[:table_id].present?
+      @table = Table.find(params[:table_id])
+      render(text: 'Table is not correct', content_type: Mime::HTML.to_s) and return unless @table.section_id == @section.id
+      @list = List.active_for_table(@table).first
+      @orders = @list ? @list.active_orders : []
+      render layout: false
+    end
   end
 end

app/models/list.rb

@@ -314,6 +314,10 @@ class List
     Order.count_active_for_supplier_and_list(supplier_id, id) > 0
   end
 
+  def active_orders
+    Order.active_for_supplier_and_list(supplier_id, id)
+  end
+
   # Return a join requests object in the form of:
   #   {join_request: [{user_id: '1saf3...', user_email: 'info@qwaiter.com'}, [....]]}
   def join_requests_as_json

app/templates/supplier/_active_list.mustache

@@ -5,10 +5,10 @@
   </td>
   <td class="numeric table_number">{{table_number}}</td>
   <td class="section_title">{{section_title}}</td>
-  <td class="currency total_list_amount">{{#currency}}{{total_amount}}{{/currency}}</td>
+  <td class="currency total_list_amount">{{currency total_amount}}</td>
   <td class="actions">
-    <button id="list-is-helped-button-{{id}}" class="btn btn-info {{^needs_help}}hide{{/needs_help}}" onclick="Qsupplier.mark_list_as_helped('{{id}}')">Question answered!</button>
+    <button id="list-is-helped-button-{{id}}" class="btn btn-info {{^needs_help}}hide{{/needs_help}}" onclick="Qsupplier.mark_list_as_helped('{{id}}')" data-t="list.is_helped_button"></button>
-    <button class="btn btn-warning" onclick="Qsupplier.close_list('{{id}}')">Close!</button>
+    <button class="btn btn-warning" onclick="Qsupplier.close_list('{{id}}')" data-t="list.close_list"></button>
     <a href="/supplier/lists/{{id}}" class="btn"><span class="icon-list">&nbsp;</span></a>
   </td>
 <tr>

app/templates/supplier/_active_order.mustache

@@ -2,9 +2,9 @@
   <td>{{display}}</td>
   <td class="numeric table_number">{{table_number}}</td>
   <td class="section_title">{{section_title}}</td>
-  <td class="currency">{{#currency}}{{total_amount}}{{/currency}}</td>
+  <td class="currency">{{currency total_amount}}</td>
   <td class="actions">
-    <button id="order-in-process-button-{{id}}" class="btn btn-success {{^can_process}}hide{{/can_process}}" onclick="Qsupplier.mark_order_in_process('{{id}}')">In process!</button>
+    <button id="order-in-process-button-{{id}}" class="btn btn-success {{^can_process}}hide{{/can_process}}" onclick="Qsupplier.mark_order_in_process('{{id}}')" data-t="order.being_processed"></button>
-    <button class="btn btn-inverse" onclick="Qsupplier.mark_order_delivered('{{id}}')">Is delivered!</button>
+    <button class="btn btn-inverse" onclick="Qsupplier.mark_order_delivered('{{id}}')" data-t="order.being_served"></button>
   </td>
 </tr>

app/views/suppliers/sections/manage_tables.html.slim

@@ -6,7 +6,7 @@
     - for section in @section.supplier.sections
       li class=(section == @section ? 'active' : nil) = link_to section.title, [:manage_tables, :suppliers, section]
   .span9
-    .well.section-tables-container.section-tables-active
+    .well.section-tables-container.section-tables-active.section-tables-manage
       - for table in @section.tables
         .section-table.hide{ id="section-table-#{table.id}" data-position-x=table.position_x data-position-y=table.position_y data-table-id=table.id}
           .pull-right.action-button-container

app/views/suppliers/sections/table_actions.html.slim

@@ -0,0 +1,8 @@
+ul#table-actions-list
+  - if @list
+    - if @list.needs_help?
+      li
+        button.btn.btn-info.btn-small class="of-list-#{@list.id}" id="list-is-helped-button-#{@list.id}" onclick="Qsupplier.mark_list_as_helped('#{@list.id}')" data-t="list.is_helped_button"
+    button.btn.btn-warning.btn-small class="of-list-#{@list.id}" onclick="Qsupplier.close_list('#{@list.id}')" data-t="list.close_list"
+  li
+    a data-t='section.tables_view.table_actions.got_to_table' href=suppliers_table_path(@table)

app/views/suppliers/sections/tables_view.html.slim

@@ -4,15 +4,21 @@
   .span12
     .well.section-tables-container.section-tables-active
       .section-manage-tables.pull-right= link_to content_tag(:span, '', class: 'icon-pencil'), manage_tables_suppliers_section_path(@section), class: 'btn btn-mini'
-      - for table in Table.enrich_active_list_id(@section.tables)
+      - for table in @tables
         .section-table.hide[
           class="section-table-list-#{table.active_list_id}" id="section-table-#{table.id}" 
           data-position-x=table.position_x data-position-y=table.position_y data-table-id=table.id]
-          .table-number = link_to table.number, suppliers_table_path(table)
+          .table-number = table.number
           .status-icons
             span.needs_payment.icon-flag
             span.needs_help.icon-bell
             span.active_order.icon-glass
+#section-table-menu-container.hide
+  - @tables.each do |table|
+    .section-table-menu-content class="section-table-menu-#{table.id} section-table-list-#{table.active_list_id}"
+      button.btn.btn-info.list-is-helped.hide Question answered!
+
+    
 - content_for :footer do
   javascript:
     var current_section_id = '#{@section.id}';
@@ -24,6 +30,38 @@
       active_section_container.css('height', #{@section.height/@section.width}*active_section_container.width());
       active_section_container.find('.section-table').each(function(){
         Qsupplier.position_table_in_active_section(active_section_container, $(this), false);
+        var table_id;
+        var match = $(this).attr('id').match(/section-table-(\w+)/);
+        if(!match || match.length < 2) return;
+        table_id = match[1];
+
+        $(this).qtip({
+          content: {
+            text: '#{spinner}',
+            ajax: {
+              url: '#{table_actions_suppliers_section_path(@section)}',
+              data: {table_id: table_id},
+              success: function(data, status){
+                var container = $('<div></div>');
+                container.html(data); // Create a container to parse translation data
+                setTranslations(container);
+                this.set('content.text', container.html());
+              }, 
+              once: false
+            },
+            title: {
+              text: t('section.tables_view.table_actions.title'),
+              button: true
+            }
+          },
+          show: {
+            event: 'click'
+          },
+          hide: 'unfocus',
+          style: {
+            classes: 'qtip-wiki qtip-light qtip-shadow'
+          }
+        })
       });
       Qsupplier.update_section_tables_view('#{@section.id}');
       Qsupplier.watch_events();

config/cucumber.yml

@@ -0,0 +1,8 @@
+<%
+rerun = File.file?('rerun.txt') ? IO.read('rerun.txt') : ""
+rerun_opts = rerun.to_s.strip.empty? ? "--format #{ENV['CUCUMBER_FORMAT'] || 'progress'} features" : "--format #{ENV['CUCUMBER_FORMAT'] || 'pretty'} #{rerun}"
+std_opts = "--format #{ENV['CUCUMBER_FORMAT'] || 'pretty'} --strict --tags ~@wip"
+%>
+default: <%= std_opts %> features
+wip: --tags @wip:3 --wip features
+rerun: <%= rerun_opts %> --format rerun --out rerun.txt --strict --tags ~@wip

config/database.yml

@@ -12,7 +12,7 @@ development:
 # Warning: The database defined as "test" will be erased and
 # re-generated from your development database when you run "rake".
 # Do not set this db to the same as development or production.
-test:
+test: &test
   adapter: sqlite3
   database: db/test.sqlite3
   pool: 5
@@ -23,3 +23,6 @@ production:
   database: db/production.sqlite3
   pool: 5
   timeout: 5000
+
+cucumber:
+  <<: *test

config/locales/supplier.en.yml

@@ -26,6 +26,12 @@ en:
         show_all: Show all ${models.plural.list}
       show:
         title: Show %{list}
+    list:
+      is_helped_button: Question answered!
+      close_list: Close!
+    order:
+      being_processed: 'In process!'
+      being_served: 'Is delivered!'
     section:
       first_section_title: Room
       show:
@@ -35,6 +41,9 @@ en:
         title: "Manage tables for ${models.section|downcase}: %{title}"
       tables_view:
         link: 'Tables view'
+        table_actions:
+          title: '${models.table} actions'
+          got_to_table: 'Go to ${models.table|downcase}'
       add_tables:
         button_label: Add tables
         modal:

config/locales/supplier.nl.yml

@@ -26,6 +26,12 @@ nl:
         show_all: Toon alle ${models.plural.list}
       show:
         title: "%{list} tonen"
+    list:
+      is_helped_button: Vraag beantwoord!
+      close_list: Afsluiten!
+    order:
+      being_processed: 'Ben bezig!'
+      being_served: 'Ik kom het brengen!'
     section:
       first_section_title: Ruimte
       show:
@@ -35,6 +41,9 @@ nl:
         title: "Tafels beheren voor ${models.section|downcase}: %{title}"
       tables_view:
         link: Tafel overzicht
+        table_actions:
+          title: '${models.table} acties'
+          got_to_table: 'Toon ${models.table|downcase}'
       add_tables:
         button_label: Voeg tafels toe
         modal:

config/routes.rb

@@ -78,6 +78,7 @@ Qwaiter::Application.routes.draw do
       member do
         get :manage_tables
         get :tables_view
+        get :table_actions
         post :add_tables
         post :arrange_tables
       end

lib/tasks/cucumber.rake

@@ -0,0 +1,65 @@
+# IMPORTANT: This file is generated by cucumber-rails - edit at your own peril.
+# It is recommended to regenerate this file in the future when you upgrade to a 
+# newer version of cucumber-rails. Consider adding your own code to a new file 
+# instead of editing this one. Cucumber will automatically load all features/**/*.rb
+# files.
+
+
+unless ARGV.any? {|a| a =~ /^gems/} # Don't load anything when running the gems:* tasks
+
+vendored_cucumber_bin = Dir["#{Rails.root}/vendor/{gems,plugins}/cucumber*/bin/cucumber"].first
+$LOAD_PATH.unshift(File.dirname(vendored_cucumber_bin) + '/../lib') unless vendored_cucumber_bin.nil?
+
+begin
+  require 'cucumber/rake/task'
+
+  namespace :cucumber do
+    Cucumber::Rake::Task.new({:ok => 'db:test:prepare'}, 'Run features that should pass') do |t|
+      t.binary = vendored_cucumber_bin # If nil, the gem's binary is used.
+      t.fork = true # You may get faster startup if you set this to false
+      t.profile = 'default'
+    end
+
+    Cucumber::Rake::Task.new({:wip => 'db:test:prepare'}, 'Run features that are being worked on') do |t|
+      t.binary = vendored_cucumber_bin
+      t.fork = true # You may get faster startup if you set this to false
+      t.profile = 'wip'
+    end
+
+    Cucumber::Rake::Task.new({:rerun => 'db:test:prepare'}, 'Record failing features and run only them if any exist') do |t|
+      t.binary = vendored_cucumber_bin
+      t.fork = true # You may get faster startup if you set this to false
+      t.profile = 'rerun'
+    end
+
+    desc 'Run all features'
+    task :all => [:ok, :wip]
+
+    task :statsetup do
+      require 'rails/code_statistics'
+      ::STATS_DIRECTORIES << %w(Cucumber\ features features) if File.exist?('features')
+      ::CodeStatistics::TEST_TYPES << "Cucumber features" if File.exist?('features')
+    end
+  end
+  desc 'Alias for cucumber:ok'
+  task :cucumber => 'cucumber:ok'
+
+  task :default => :cucumber
+
+  task :features => :cucumber do
+    STDERR.puts "*** The 'features' task is deprecated. See rake -T cucumber ***"
+  end
+
+  # In case we don't have ActiveRecord, append a no-op task that we can depend upon.
+  task 'db:test:prepare' do
+  end
+
+  task :stats => 'cucumber:statsetup'
+rescue LoadError
+  desc 'cucumber rake task not available (cucumber not installed)'
+  task :cucumber do
+    abort 'Cucumber rake task is not available. Be sure to install cucumber as a gem or plugin'
+  end
+end
+
+end

script/cucumber

@@ -0,0 +1,10 @@
+#!/usr/bin/env ruby
+
+vendored_cucumber_bin = Dir["#{File.dirname(__FILE__)}/../vendor/{gems,plugins}/cucumber*/bin/cucumber"].first
+if vendored_cucumber_bin
+  load File.expand_path(vendored_cucumber_bin)
+else
+  require 'rubygems' unless ENV['NO_RUBYGEMS']
+  require 'cucumber'
+  load Cucumber::BINARY
+end

spec/models/list_spec.rb

@@ -83,4 +83,32 @@ describe List do
     end
   end
 
+  describe '#active_orders' do
+    its(:active_orders) { should be_empty }
+
+    it 'returns placed orders' do
+      order = create :order, supplier: supplier, list: list, section: section, state: 'placed'
+      list.active_orders.should eq [order]
+    end
+
+    it 'returns active orders' do
+      order = create :order, supplier: supplier, list: list, section: section, state: 'active'
+      list.active_orders.should eq [order]
+    end
+
+    it 'does not return delivered orders' do
+      order = create :order, supplier: supplier, list: list, section: section, state: 'delivered'
+      list.active_orders.should be_empty
+    end
+
+    it 'does not return closed orders' do
+      order = create :order, supplier: supplier, list: list, section: section, state: 'closed'
+      list.active_orders.should be_empty
+    end
+    it 'does not return cancelled orders' do
+      order = create :order, supplier: supplier, list: list, section: section, state: 'cancelled'
+      list.active_orders.should be_empty
+    end
+  end
+
 end

vendor/assets/qtip/jquery.qtip.css

@@ -0,0 +1,625 @@
+/*!
+ * qTip2 - Pretty powerful tooltips - v2.0.1-35-
+ * http://qtip2.com
+ *
+ * Copyright (c) 2013 Craig Michael Thompson
+ * Released under the MIT, GPL licenses
+ * http://jquery.org/license
+ *
+ * Date: Sun Mar 10 2013 03:07 GMT+0000
+ * Plugins: svg ajax tips modal viewport imagemap ie6
+ * Styles: basic css3
+ */
+
+/* Core qTip styles */
+.qtip{
+	position: absolute;
+	left: -28000px;
+	top: -28000px;
+	display: none;
+
+	max-width: 280px;
+	min-width: 50px;
+	
+	font-size: 10.5px;
+	line-height: 12px;
+
+	direction: ltr;
+
+	box-shadow: none;
+	padding: 0;
+}
+
+	.qtip-content{
+		position: relative;
+		padding: 5px 9px;
+		overflow: hidden;
+
+		text-align: left;
+		word-wrap: break-word;
+	}
+
+	.qtip-titlebar{
+		position: relative;
+		padding: 5px 35px 5px 10px;
+		overflow: hidden;
+
+		border-width: 0 0 1px;
+		font-weight: bold;
+	}
+
+	.qtip-titlebar + .qtip-content{ border-top-width: 0 !important; }
+
+	/* Default close button class */
+	.qtip-close{
+		position: absolute;
+		right: -9px; top: -9px;
+
+		cursor: pointer;
+		outline: medium none;
+
+		border-width: 1px;
+		border-style: solid;
+		border-color: transparent;
+	}
+
+		.qtip-titlebar .qtip-close{
+			right: 4px; top: 50%;
+			margin-top: -9px;
+		}
+	
+		* html .qtip-titlebar .qtip-close{ top: 16px; } /* IE fix */
+
+		.qtip-titlebar .ui-icon,
+		.qtip-icon .ui-icon{
+			display: block;
+			text-indent: -1000em;
+			direction: ltr;
+			vertical-align: middle;
+		}
+
+		.qtip-icon, .qtip-icon .ui-icon{
+			-moz-border-radius: 3px;
+			-webkit-border-radius: 3px;
+			border-radius: 3px;
+			text-decoration: none;
+		}
+
+			.qtip-icon .ui-icon{
+				width: 18px;
+				height: 14px;
+
+				text-align: center;
+				text-indent: 0;
+				font: normal bold 10px/13px Tahoma,sans-serif;
+
+				color: inherit;
+				background: transparent none no-repeat -100em -100em;
+			}
+
+
+/* Applied to 'focused' tooltips e.g. most recently displayed/interacted with */
+.qtip-focus{}
+
+/* Applied on hover of tooltips i.e. added/removed on mouseenter/mouseleave respectively */
+.qtip-hover{}
+
+/* Default tooltip style */
+.qtip-default{
+	border-width: 1px;
+	border-style: solid;
+	border-color: #F1D031;
+
+	background-color: #FFFFA3;
+	color: #555;
+}
+
+	.qtip-default .qtip-titlebar{
+		background-color: #FFEF93;
+	}
+
+	.qtip-default .qtip-icon{
+		border-color: #CCC;
+		background: #F1F1F1;
+		color: #777;
+	}
+	
+	.qtip-default .qtip-titlebar .qtip-close{
+		border-color: #AAA;
+		color: #111;
+	}
+
+
+/*! Light tooltip style */
+.qtip-light{
+	background-color: white;
+	border-color: #E2E2E2;
+	color: #454545;
+}
+
+	.qtip-light .qtip-titlebar{
+		background-color: #f1f1f1;
+	}
+
+
+/*! Dark tooltip style */
+.qtip-dark{
+	background-color: #505050;
+	border-color: #303030;
+	color: #f3f3f3;
+}
+
+	.qtip-dark .qtip-titlebar{
+		background-color: #404040;
+	}
+
+	.qtip-dark .qtip-icon{
+		border-color: #444;
+	}
+
+	.qtip-dark .qtip-titlebar .ui-state-hover{
+		border-color: #303030;
+	}
+
+
+/*! Cream tooltip style */
+.qtip-cream{
+	background-color: #FBF7AA;
+	border-color: #F9E98E;
+	color: #A27D35;
+}
+
+	.qtip-cream .qtip-titlebar{
+		background-color: #F0DE7D;
+	}
+
+	.qtip-cream .qtip-close .qtip-icon{
+		background-position: -82px 0;
+	}
+
+
+/*! Red tooltip style */
+.qtip-red{
+	background-color: #F78B83;
+	border-color: #D95252;
+	color: #912323;
+}
+
+	.qtip-red .qtip-titlebar{
+		background-color: #F06D65;
+	}
+
+	.qtip-red .qtip-close .qtip-icon{
+		background-position: -102px 0;
+	}
+
+	.qtip-red .qtip-icon{
+		border-color: #D95252;
+	}
+
+	.qtip-red .qtip-titlebar .ui-state-hover{
+		border-color: #D95252;
+	}
+
+
+/*! Green tooltip style */
+.qtip-green{
+	background-color: #CAED9E;
+	border-color: #90D93F;
+	color: #3F6219;
+}
+
+	.qtip-green .qtip-titlebar{
+		background-color: #B0DE78;
+	}
+
+	.qtip-green .qtip-close .qtip-icon{
+		background-position: -42px 0;
+	}
+
+
+/*! Blue tooltip style */
+.qtip-blue{
+	background-color: #E5F6FE;
+	border-color: #ADD9ED;
+	color: #5E99BD;
+}
+
+	.qtip-blue .qtip-titlebar{
+		background-color: #D0E9F5;
+	}
+
+	.qtip-blue .qtip-close .qtip-icon{
+		background-position: -2px 0;
+	}
+
+
+/* Add shadows to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE9+, Safari 2+ */
+.qtip-shadow{
+	-webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
+	-moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
+	box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
+}
+
+/* Add rounded corners to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE9+, Safari 2+ */
+.qtip-rounded,
+.qtip-tipsy,
+.qtip-bootstrap{
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+	border-radius: 5px;
+}
+
+.qtip-rounded .qtip-titlebar{
+	-moz-border-radius: 5px 5px 0 0;
+	-webkit-border-radius: 5px 5px 0 0;
+	border-radius: 5px 5px 0 0;
+}
+
+/* Youtube tooltip style */
+.qtip-youtube{
+	-moz-border-radius: 2px;
+	-webkit-border-radius: 2px;
+	border-radius: 2px;
+	
+	-webkit-box-shadow: 0 0 3px #333;
+	-moz-box-shadow: 0 0 3px #333;
+	box-shadow: 0 0 3px #333;
+
+	color: white;
+	border-width: 0;
+
+	background: #4A4A4A;
+	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#4A4A4A),color-stop(100%,black));
+	background-image: -webkit-linear-gradient(top,#4A4A4A 0,black 100%);
+	background-image: -moz-linear-gradient(top,#4A4A4A 0,black 100%);
+	background-image: -ms-linear-gradient(top,#4A4A4A 0,black 100%);
+	background-image: -o-linear-gradient(top,#4A4A4A 0,black 100%);
+}
+
+	.qtip-youtube .qtip-titlebar{
+		background-color: #4A4A4A;
+		background-color: rgba(0,0,0,0);
+	}
+	
+	.qtip-youtube .qtip-content{
+		padding: .75em;
+		font: 12px arial,sans-serif;
+		
+		filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4a4a4a,EndColorStr=#000000);
+		-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4a4a4a,EndColorStr=#000000);";
+	}
+
+	.qtip-youtube .qtip-icon{
+		border-color: #222;
+	}
+
+	.qtip-youtube .qtip-titlebar .ui-state-hover{
+		border-color: #303030;
+	}
+
+
+/* jQuery TOOLS Tooltip style */
+.qtip-jtools{
+	background: #232323;
+	background: rgba(0, 0, 0, 0.7);
+	background-image: -webkit-gradient(linear, left top, left bottom, from(#717171), to(#232323));
+	background-image: -moz-linear-gradient(top, #717171, #232323);
+	background-image: -webkit-linear-gradient(top, #717171, #232323);
+	background-image: -ms-linear-gradient(top, #717171, #232323);
+	background-image: -o-linear-gradient(top, #717171, #232323);
+
+	border: 2px solid #ddd;
+	border: 2px solid rgba(241,241,241,1);
+
+	-moz-border-radius: 2px;
+	-webkit-border-radius: 2px;
+	border-radius: 2px;
+
+	-webkit-box-shadow: 0 0 12px #333;
+	-moz-box-shadow: 0 0 12px #333;
+	box-shadow: 0 0 12px #333;
+}
+
+	/* IE Specific */
+	.qtip-jtools .qtip-titlebar{
+		background-color: transparent;
+		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A);
+		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A)";
+	}
+	.qtip-jtools .qtip-content{
+		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323);
+		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323)";
+	}
+
+	.qtip-jtools .qtip-titlebar,
+	.qtip-jtools .qtip-content{
+		background: transparent;
+		color: white;
+		border: 0 dashed transparent;
+	}
+
+	.qtip-jtools .qtip-icon{
+		border-color: #555;
+	}
+
+	.qtip-jtools .qtip-titlebar .ui-state-hover{
+		border-color: #333;
+	}
+
+
+/* Cluetip style */
+.qtip-cluetip{
+	-webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
+	-moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
+	box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
+
+	background-color: #D9D9C2;
+	color: #111;
+	border: 0 dashed transparent;
+}
+
+	.qtip-cluetip .qtip-titlebar{
+		background-color: #87876A;
+		color: white;
+		border: 0 dashed transparent;
+	}
+	
+	.qtip-cluetip .qtip-icon{
+		border-color: #808064;
+	}
+	
+	.qtip-cluetip .qtip-titlebar .ui-state-hover{
+		border-color: #696952;
+		color: #696952;
+	}
+
+
+/* Tipsy style */
+.qtip-tipsy{
+	background: black;
+	background: rgba(0, 0, 0, .87);
+
+	color: white;
+	border: 0 solid transparent;
+
+	font-size: 11px;
+	font-family: 'Lucida Grande', sans-serif;
+	font-weight: bold;
+	line-height: 16px;
+	text-shadow: 0 1px black;
+}
+
+	.qtip-tipsy .qtip-titlebar{
+		padding: 6px 35px 0 10;
+		background-color: transparent;
+	}
+
+	.qtip-tipsy .qtip-content{
+		padding: 6px 10;
+	}
+	
+	.qtip-tipsy .qtip-icon{
+		border-color: #222;
+		text-shadow: none;
+	}
+
+	.qtip-tipsy .qtip-titlebar .ui-state-hover{
+		border-color: #303030;
+	}
+
+
+/* Tipped style */
+.qtip-tipped{
+	border: 3px solid #959FA9;
+
+	-moz-border-radius: 3px;
+	-webkit-border-radius: 3px;
+	border-radius: 3px;
+
+	background-color: #F9F9F9;
+	color: #454545;
+
+	font-weight: normal;
+	font-family: serif;
+}
+
+	.qtip-tipped .qtip-titlebar{
+		border-bottom-width: 0;
+
+		color: white;
+		background: #3A79B8;
+		background-image: -webkit-gradient(linear, left top, left bottom, from(#3A79B8), to(#2E629D));
+		background-image: -webkit-linear-gradient(top, #3A79B8, #2E629D);
+		background-image: -moz-linear-gradient(top, #3A79B8, #2E629D);
+		background-image: -ms-linear-gradient(top, #3A79B8, #2E629D);
+		background-image: -o-linear-gradient(top, #3A79B8, #2E629D);
+		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D);
+		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D)";
+	}
+
+	.qtip-tipped .qtip-icon{
+		border: 2px solid #285589;
+		background: #285589;
+	}
+
+		.qtip-tipped .qtip-icon .ui-icon{
+			background-color: #FBFBFB;
+			color: #555;
+		}
+
+
+/**
+ * Twitter Bootstrap style.
+ *
+ * Tested with IE 8, IE 9, Chrome 18, Firefox 9, Opera 11.
+ * Does not work with IE 7.
+ */
+.qtip-bootstrap{
+	/** Taken from Bootstrap body */
+	font-size: 14px;
+	line-height: 20px;
+	color: #333333;
+
+	/** Taken from Bootstrap .popover */
+	padding: 1px;
+	background-color: #ffffff;
+	border: 1px solid #ccc;
+	border: 1px solid rgba(0, 0, 0, 0.2);
+	-webkit-border-radius: 6px;
+	-moz-border-radius: 6px;
+	border-radius: 6px;
+	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+	-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+	-webkit-background-clip: padding-box;
+	-moz-background-clip: padding;
+	background-clip: padding-box;
+}
+
+	.qtip-bootstrap .qtip-titlebar{
+		/** Taken from Bootstrap .popover-title */
+		padding: 8px 14px;
+		margin: 0;
+		font-size: 14px;
+		font-weight: normal;
+		line-height: 18px;
+		background-color: #f7f7f7;
+		border-bottom: 1px solid #ebebeb;
+		-webkit-border-radius: 5px 5px 0 0;
+		-moz-border-radius: 5px 5px 0 0;
+		border-radius: 5px 5px 0 0;
+	}
+
+		.qtip-bootstrap .qtip-titlebar .qtip-close{
+			/**
+			 * Overrides qTip2:
+			 * .qtip-titlebar .qtip-close{
+			 *   [...]
+			 *   right: 4px;
+			 *   top: 50%;
+			 *   [...]
+			 *   border-style: solid;
+			 * }
+			 */
+			right: 11px;
+			top: 45%;
+			border-style: none;
+		}
+
+	.qtip-bootstrap .qtip-content{
+		/** Taken from Bootstrap .popover-content */
+		padding: 9px 14px;
+	}
+
+	.qtip-bootstrap .qtip-icon{
+		/**
+		 * Overrides qTip2:
+		 * .qtip-default .qtip-icon {
+		 *   border-color: #CCC;
+		 *   background: #F1F1F1;
+		 *   color: #777;
+		 * }
+		 */
+		background: transparent;
+	}
+
+		.qtip-bootstrap .qtip-icon .ui-icon{
+			/**
+			 * Overrides qTip2:
+			 * .qtip-icon .ui-icon{
+			 *   width: 18px;
+			 *   height: 14px;
+			 * }
+			 */
+			width: auto;
+			height: auto;
+
+			/* Taken from Bootstrap .close */
+			float: right;
+			font-size: 20px;
+			font-weight: bold;
+			line-height: 18px;
+			color: #000000;
+			text-shadow: 0 1px 0 #ffffff;
+			opacity: 0.2;
+			filter: alpha(opacity=20);
+		}
+
+		.qtip-bootstrap .qtip-icon .ui-icon:hover{
+			/* Taken from Bootstrap .close:hover */
+			color: #000000;
+			text-decoration: none;
+			cursor: pointer;
+			opacity: 0.4;
+			filter: alpha(opacity=40);
+		}
+
+
+/* IE9 fix - removes all filters */
+.qtip:not(.ie9haxors) div.qtip-content,
+.qtip:not(.ie9haxors) div.qtip-titlebar{
+	filter: none;
+	-ms-filter: none;
+}
+
+
+/* Tips plugin */
+.qtip .qtip-tip{
+	margin: 0 auto;
+	overflow: hidden;
+	z-index: 10;
+	
+}
+
+	/* Opera bug #357 - Incorrect tip position
+	https://github.com/Craga89/qTip2/issues/367 */
+	x:-o-prefocus, .qtip .qtip-tip{
+		visibility: hidden;
+	}
+
+	.qtip .qtip-tip,
+	.qtip .qtip-tip .qtip-vml,
+	.qtip .qtip-tip canvas{
+		position: absolute;
+
+		color: #123456;
+		background: transparent;
+		border: 0 dashed transparent;
+	}
+	
+	.qtip .qtip-tip canvas{ top: 0; left: 0; }
+
+	.qtip .qtip-tip .qtip-vml{
+		behavior: url(#default#VML);
+		display: inline-block;
+		visibility: visible;
+	}
+/* Modal plugin */
+#qtip-overlay{
+	position: fixed;
+	left: -10000em;
+	top: -10000em;
+}
+
+	/* Applied to modals with show.modal.blur set to true */
+	#qtip-overlay.blurs{ cursor: pointer; }
+
+	/* Change opacity of overlay here */
+	#qtip-overlay div{
+		position: absolute;
+		left: 0; top: 0;
+		width: 100%; height: 100%;
+
+		background-color: black;
+
+		opacity: 0.7;
+		filter:alpha(opacity=70);
+		-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+	}
+
+
+/* IE6 Modal plugin fix */
+.qtipmodal-ie6fix{
+	position: absolute !important;
+}

vendor/assets/qtip/qtip.css

@@ -0,0 +1,3 @@
+/*
+ *= require_directory .
+ */

vendor/assets/qtip/qtip.js

@@ -0,0 +1 @@
+//= require_directory .