Wizard prototype. File validation.

Fernando Brito
1 parent 380a1960
Showing 20 changed files with 2725 additions and 68 deletions Show diff stats
app/assets/javascripts/v_libras/requests/new.js
app/assets/javascripts/v_libras/requests/rapid.js
app/assets/javascripts/v_libras/requests/shared.js
app/assets/stylesheets/application.css.scss
app/assets/stylesheets/bootstrap.css.less
app/assets/stylesheets/bootstrap_overrides.css.scss
app/assets/stylesheets/components/video_player.css.scss
app/assets/stylesheets/v_libras/requests.css.scss
app/controllers/v_libras/requests_controller.rb
app/models/v_libras/request.rb
app/views/layouts/_menu.haml
app/views/layouts/application.html.erb
app/views/static/home.haml
app/views/v_libras/requests/new.haml
app/views/v_libras/requests/rapid.haml
config/initializers/assets.rb
config/locales/pt-BR.yml
lib/api_client/client.rb
vendor/assets/javascripts/jquery.steps.js
vendor/assets/stylesheets/jquery.steps.css
@@ -0,0 +1,93 @@
+$(function () {
+    $("#vlibras-wizard").steps({
+        headerTag: "h2",
+        bodyTag: "section",
+        transitionEffect: "slideLeft",
+        stepsOrientation: "horizontal",
+        enablePagination: true,
+        forceMoveForward: true,
+
+        onStepChanging: stepValidation,
+        onStepChanged: stepChanged,
+        onFinished: finished,
+
+        labels: {
+            cancel: "Cancelar",
+            current: "etapa atual:",
+            pagination: "Pagination",
+            finish: "Finalizar",
+            next: "Próximo",
+            previous: "Anterior",
+            loading: "Carregando ..."
+        }
+    });
+
+    function stepChanged(event, currentIndex, priorIndex) {
+        var totalSteps = $("#vlibras-wizard .content section").size();
+
+        if ((currentIndex + 1) === totalSteps) {
+            $("#btn-next").text("Finalizar");
+        } else {
+            $("#btn-next").text("Próximo");
+        }
+
+        deactivateNextButton();
+    }
+
+    function finished(event, currentIndex) {
+        $("#vlibras-form").submit();
+    }
+
+    function stepValidation(event, currentIndex, newIndex) {
+        return true;
+    }
+
+    $('#menu #btn-next').click(function() {
+        // Number of steps
+        var totalSteps = $("#vlibras-wizard .content section").size();
+        var currentStep = $("#vlibras-wizard").steps('getCurrentIndex');
+
+        if ((currentStep + 1) === totalSteps) {
+            $("#vlibras-wizard").steps('finish');
+        } else {
+            $("#vlibras-wizard").steps('next');
+        }
+    });
+
+    function activateNextButton() {
+        $("#btn-next").prop('disabled', false);
+    }
+
+    function deactivateNextButton() {
+        $("#btn-next").prop('disabled', true);
+    }
+
+
+
+    /*
+     * Validates video and subtitle extension and activate the next button
+     */
+    $("#vlibras-wizard #subtitle-upload").change(function() {
+        var acceptedFileTypes = ["srt"];
+        validateFileWizard($(this), acceptedFileTypes);
+    });
+
+    $("#vlibras-wizard #video-upload").change(function() {
+        var acceptedFileTypes = ["flv", "ts", "avi", "mp4", "mov", "webm", "wmv", "mkv"];
+        validateFileWizard($(this), acceptedFileTypes);
+    });
+
+    function validateFileWizard(input, acceptedFileTypes) {
+        var isValidFile = checkType(input, acceptedFileTypes);
+
+        if (isValidFile) {
+            activateNextButton();
+        } else {
+            deactivateNextButton();
+            input.val(null);
+            alert("Apenas os formatos abaixo são aceitos:\n\n" + acceptedFileTypes.join(", "));
+        }
+
+        return true;
+    }
+});
 \ No newline at end of file
@@ -17,4 +17,32 @@ $(function() {
     if ($("#service-video")[0].checked) {
         $("#service-video").click();
     }
-});
 \ No newline at end of file
+});
+
+
+/*
+ * File type verification
+ */
+
+$(function() {
+    $("#subtitle-upload").change(function() {
+        var acceptedFileTypes = ["srt"];
+        validateFile($(this), acceptedFileTypes);
+    });
+
+    $("#video-upload").change(function() {
+        var acceptedFileTypes = ["flv", "ts", "avi", "mp4", "mov", "webm", "wmv", "mkv"];
+        validateFile($(this), acceptedFileTypes);
+    });
+
+    function validateFile(input, acceptedFileTypes) {
+        var isValidFile = checkType(input, acceptedFileTypes);
+
+        if (!isValidFile) {
+            input.val(null);
+            alert("Apenas os formatos abaixo são aceitos:\n\n" + acceptedFileTypes.join(", "));
+        }
+
+        return true;
+    }
+});
@@ -0,0 +1,13 @@
+function checkType(file, acceptedFileTypes) {
+    var ext = file.val().split('.').pop().toLowerCase();
+    var isValidFile = false;
+
+    for (var i = 0; i < acceptedFileTypes.length; i++) {
+        if (ext == acceptedFileTypes[i]) {
+            isValidFile = true;
+            break;
+        }
+    }
+
+    return isValidFile;
+}
 \ No newline at end of file
@@ -41,10 +41,4 @@
     color:#BBB;
     text-shadow: 1px 1px #AAA;
   }
-}
-
-@media (max-width: 980px) {
-  .dropdown ul.dropdown-menu {
-    display: block;
-  }
 }
 \ No newline at end of file
@@ -50,16 +50,6 @@ footer {
 }
-.upload{
-  width: 100%;
-  height: 480px;
-  text-align:center;
-}
-
-.upload a{
-  text-align:center;
-}
-
 .center{
   text-align:center;
 }
@@ -112,23 +102,26 @@ label {
   font-size:18px;
 }
-#upload{
+.upload{
   margin-top:10px;
   background-color:#DDD;
   height:100px;
-  text-transform:uppercase;
   color:#000;
-  text-align:center;
+  text-align: center;
   -moz-box-shadow: 0 0 1px 1px #888;
-  -webkit-box-shadow: 0 0 1px 1px#888;
+  -webkit-box-shadow: 0 0 1px 1px #888;
   box-shadow: 0 0 1px 1px #888;
 }
-input{
+
+
+
+
+input {
   display: inline-block;
   *display: inline;
-  padding: 4px 12px;
+  padding: 0px;
   margin-bottom: 0;
   *margin-left: .3em;
   font-size: 14px;
@@ -327,6 +320,10 @@ input[type=&quot;checkbox&quot;] {
   width: auto;
 }
+input[type="file"] {
+  width: 100%;
+}
+
 select,
 input[type="file"] {
   height: 30px;
+.container-fluid {
+  max-width: 1024px;
+  margin: auto;
+}
+
+
 .breadcrumb {
   padding: 7px 14px;
   margin: 0 0 18px;
@@ -45,8 +51,16 @@
   color: #333333;
 }
+
+/* Fix menu */
 @media (max-width: 767px) {
   .nav-collapse.user-menu {
     float: left;
   }
+}
+
+@media (max-width: 980px) {
+  .dropdown ul.dropdown-menu {
+    display: block;
+  }
 }
 \ No newline at end of file
@@ -7,6 +7,10 @@
   box-shadow: 0 0 5px 5px #888;
 }
+.video-wizard {
+  max-width: 50%;
+}
+
 .video-vlibras {
   max-width: 50%;
 }
@@ -0,0 +1,5 @@
+#vlibras-wizard {
+  .actions {
+    display: none;
+  }
+}
 \ No newline at end of file
@@ -8,26 +8,23 @@ class VLibras::RequestsController &lt; ApplicationController
     @request = VLibras::Request.new
   end
-  def create
-    @request = VLibras::Request.build_from_params(params, current_user)
-
-    video = FileUploader.new
-    video.cache!(params[:video])
-
-    subtitle = FileUploader.new
-    subtitle.cache!(params[:subtitle])
+  def new
-    files = { :video => video, :subtitle => subtitle }
+  end
+  def create
+    @request = VLibras::Request.build_from_params(params, current_user)
     if @request.save
-      @request.perform_request(files)
+      @request.perform_request(@request.files)
       flash[:success] = 'Sua requisição foi submetida com sucesso!'
       redirect_to v_libras_videos_path
     else
-      flash[:error] = 'Algo deu errado com a sua requisição.'
-      render :action => :rapid
+      flash[:error] = 'Algo deu errado com a sua requisição. Por favor verifique opções escolhidas.'
+      flash[:warning] = @request.errors.full_messages.to_sentence.humanize
+
+      redirect_to :back
     end
   end
@@ -15,19 +15,21 @@
 class VLibras::Request < ActiveRecord::Base
   serialize :params
-  attr_accessor :video
+  attr_accessor :files
   belongs_to :owner, :class => User
   has_one :video, :class => VLibras::Video, :dependent => :destroy
   validates :service_type,
-              presence: true,
-              inclusion: { in: %w(video-legenda video), message: "%{value} is not a valid service type" }
+            presence: true,
+            inclusion: { in: %w(video-legenda video) }
   validates :status,
             presence: true,
-            inclusion: { in: %w(created processing error success), message: "%{value} is not a valid status" }
+            inclusion: { in: %w(created processing error success) }
+
+  validate :match_files_with_service_type
   before_validation :default_values
@@ -37,9 +39,23 @@ class VLibras::Request &lt; ActiveRecord::Base
     request = self.new
     request.service_type = params[:service]
-    request.video_filename = params[:video].original_filename
     request.owner = user
+    request.files = {}
+
+    if params[:video]
+      request.video_filename = params[:video].original_filename
+      video = FileUploader.new
+      video.cache!(params[:video])
+      request.files.merge!(:video => video)
+    end
+
+    if params[:subtitle]
+      subtitle = FileUploader.new
+      subtitle.cache!(params[:subtitle])
+      request.files.merge!(:subtitle => subtitle)
+    end
+
     request.params = params[:params]
     request
@@ -55,7 +71,18 @@ class VLibras::Request &lt; ActiveRecord::Base
   end
   handle_asynchronously :perform_request
+
 private
+  def match_files_with_service_type
+    if files[:video].nil?
+      errors.add(:base, 'Você precisa enviar um vídeo.')
+    end
+
+    if (service_type == 'video-legenda') && files[:subtitle].nil?
+      errors.add(:base, 'Você precisa enviar uma legenda.')
+    end
+  end
+
   def default_values
     self.status ||= 'created'
   end
@@ -9,9 +9,9 @@
       = link_to "GTAaaS", home_path, :class => "brand"
-      - if current_user.present?
-        .nav-collapse
-          %ul.nav
+      .nav-collapse
+        %ul.nav
+          - if current_user.present?
             %li= link_to t('shared.main'), home_path
             %li.dropdown
@@ -26,7 +26,7 @@
                     = t('wikivideos.my_videos')
                     - if current_user.videos.not_seen.any?
                       %span.label.label-success= current_user.videos.not_seen.size
-                %li= link_to t('videos.new'), '#'
+                %li= link_to t('videos.new'), new_v_libras_request_path
                 %li.divider
                 %li= link_to t('shared.form_alternative'), rapid_v_libras_requests_path
@@ -42,7 +42,7 @@
             %li.hidden= link_to t('shared.slibras')
-            %li= link_to t('shared.about'), "http://gtaaas.lavid.ufpb.br/projeto", :target => "blank"
+          %li= link_to t('shared.about'), "http://gtaaas.lavid.ufpb.br/projeto", :target => "blank"
         - if current_user.present?
           .nav-collapse.pull-right.user-menu
@@ -4,7 +4,10 @@
   <title>GTAaaS</title>
   <%= stylesheet_link_tag    "application", :media => "all" %>
   <%= javascript_include_tag "application" %>
+
   <%= yield :js %>
+  <%= yield :css %>
+
   <%= csrf_meta_tags %>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-%h1 Home
 \ No newline at end of file
+.breadcrumb
+  %h1 Menu
 \ No newline at end of file
@@ -0,0 +1,57 @@
+- content_for :js do
+  = javascript_include_tag "jquery.steps.js"
+  = javascript_include_tag "v_libras/requests/shared"
+  = javascript_include_tag "v_libras/requests/new"
+
+- content_for :css do
+  = stylesheet_link_tag "jquery.steps.css"
+  = stylesheet_link_tag "v_libras/requests"
+
+.breadcrumb
+  %h3 Novo vídeo
+
+= form_tag v_libras_requests_path, method: :post, :multipart => true, :id => 'vlibras-form' do |f|
+  .content.row-fluid
+    #vlibras-wizard
+      %h2 Vídeo
+      %section
+        %p
+          instruções + upload do arquivo de vído
+          só libera o botão quando o video for escolhido
+
+          = html5_video_tag("/video.mp4", 'id', 'video-wizard', :autoplay => 'autoplay')
+
+          .span4
+            = file_field_tag 'video', :id => 'video-upload'
+
+      %h2 Áudio ou Legenda
+      %section
+        %p
+          escolha se é audio ou legenda
+          se for legenda, mostra o input file e quando arquivo for selecionado, libera o botão de avançar
+
+          .span4
+            = file_field_tag 'subtitle', :id => 'subtitle-upload'
+      %h2 Posição
+      %section
+        %p
+          asd
+
+      %h2 Tamanho
+      %section
+        %p
+          botão de
+
+    #menu.center
+      = button_tag 'Próximo', :class => "btn btn-large btn-success", :id => 'btn-next', :disabled => true
+
+.row-fluid
+  #step-service
+
+  #step-video-upload
+
+  #step-subtitle-upload
+
+  #step-size
+
+  #step-position
 - content_for :js do
+  = javascript_include_tag "v_libras/requests/shared"
   = javascript_include_tag "v_libras/requests/rapid"
 .row-fluid
@@ -27,15 +28,18 @@
           = radio_button_tag :service, 'video-legenda', false, :id => 'service-video-subtitle'
           Legenda (.SRT)
-      #url.hide
+      #url.field.hide
         = label_tag :video, t('videos.url'), :class => "bold"
-        = file_field_tag :video, :onchange => "return check_video(this)"
-      #legend.hide
+        = file_field_tag :video, :prompt => "Arquivo de vídeo", :id => 'video-upload'
+
+      #legend.field.hide
         = label_tag :subtitle, t('videos.subtitle'), :class => "bold"
-        = file_field_tag :subtitle, :prompt => "LEGENDA", :onchange => "return check_subtitle(this)"
+        = file_field_tag :subtitle, :prompt => "Legenda", :id => 'subtitle-upload'
+
       .field
         = label_tag 'params[tamanho]', t('videos.window_size'), :class => "bold"
         = select_tag 'params[tamanho]', options_for_select([['Pequena', 'pequeno'], ['Média', 'medio'], ['Grande', 'grande']])
+
       .field
         %p
           %b
@@ -43,6 +47,7 @@
             = select_tag 'params[posicao]', options_for_select([[t('videos.top_left'),
               'superior-esquerdo'], [t('videos.top_right'), 'superior-direito'],
               [t('videos.bottom_right'),'inferior-direito'], [t('videos.bottom_left'), 'inferior-esquerdo']])
+
       .field
         = label_tag 'params[transparencia]', t('videos.transparency'), :class => "bold"
         = select_tag 'params[transparencia]', options_for_select([['Opaco', 'opaco'], ['Transparente', 'transparente']])
+Rails.application.config.assets.precompile += %w( v_libras/requests/shared.js )
 Rails.application.config.assets.precompile += %w( v_libras/requests/rapid.js )
-Rails.application.config.assets.precompile += %w( v_libras/videos/index.js )
 \ No newline at end of file
+Rails.application.config.assets.precompile += %w( v_libras/requests/new.js )
+Rails.application.config.assets.precompile += %w( v_libras/videos/index.js )
+Rails.application.config.assets.precompile += %w( jquery.steps.js )
+
+Rails.application.config.assets.precompile += %w( v_libras/requests.css )
+Rails.application.config.assets.precompile += %w( jquery.steps.css )
 \ No newline at end of file
@@ -299,6 +299,10 @@ pt-BR:
         one: 'Usuário'
         other: 'Usuários'
+    attributes:
+     v_libras/request:
+        service_type: 'Tipo de serviço'
+
     errors:
       template:
         header:
@@ -4,37 +4,49 @@ module ApiClient::Client
   include HTTMultiParty
   default_timeout 10 * 60
-  def self.submit(request, files)
-    o = { query: request.params.clone }
-    o[:query].merge!({ :servico => request.service_type })
-    o[:query].merge!({ :callback => "http://150.165.205.166:3000/v_libras/requests/callback?request_id=#{request.id}" })
-
-    o[:query].merge!({ :video => files[:video].file.to_file })
-
-    unless files[:subtitle].file.nil?
-      o[:query].merge!({ :legenda => files[:subtitle].file.to_file })
-      o[:query].merge!({ :linguagem => 'portugues' })
-    end
-    Delayed::Worker.logger.debug "[VLibras::Request] Options: #{o}"
-
-    response = self.post(ApiClient::API_URL, o)
+  def self.submit(request, files)
+    options = process_params(request, files)
+    Delayed::Worker.logger.debug "[VLibras::Request] Options: #{options}"
+    response = self.post(ApiClient::API_URL, options)
     Delayed::Worker.logger.debug "[VLibras::Request] Status #{response.response.code}"
     if response.response.code == '200'
-
+      # Response is processed by callback
     else
-      request.update!(:response => response.body, :status => 'error')
+      request.update!(:status => 'error', :response => response.body)
     end
+
   rescue => e
-    request.update!(:status => 'error', :response => e)
+    request.update!(:status => 'error', :response => e.to_s)
   ensure
     # FIXME: Running on another thread. Websocket not working :(
     Delayed::Worker.logger.debug "[VLibras::Request] Sending message to websocket channel"
     WebsocketRails[:requests_update].trigger(:update, {a: :b, c: :d})
   end
+
+  #
+  # Process the params from the request AR object
+  # and return options to make the post request
+  #
+  def self.process_params(request, files)
+    options = { query: request.params.clone }
+    options[:query].merge!(:servico => request.service_type)
+    options[:query].merge!(:callback => "http://150.165.205.197:3000/v_libras/requests/callback?request_id=#{request.id}")
+
+    options[:query].merge!(:video => files[:video].file.to_file)
+
+    unless files[:subtitle].nil?
+      options[:query].merge!(:legenda => files[:subtitle].file.to_file)
+      options[:query].merge!(:linguagem => 'portugues')
+    end
+
+    return options
+  end
+
+
 private
   def self.url_with_service(service)
     URI.encode("#{ApiClient::API_URL}?servico=#{service}")
@@ -0,0 +1,2015 @@
+/*! 
+ * jQuery Steps v1.0.7 - 05/07/2014
+ * Copyright (c) 2014 Rafael Staib (http://www.jquery-steps.com)
+ * Licensed under MIT http://www.opensource.org/licenses/MIT
+ */
+;(function ($, undefined)
+{
+$.fn.extend({
+    _aria: function (name, value)
+    {
+        return this.attr("aria-" + name, value);
+    },
+
+    _removeAria: function (name)
+    {
+        return this.removeAttr("aria-" + name);
+    },
+
+    _enableAria: function (enable)
+    {
+        return (enable == null || enable) ? 
+            this.removeClass("disabled")._aria("disabled", "false") : 
+            this.addClass("disabled")._aria("disabled", "true");
+    },
+
+    _showAria: function (show)
+    {
+        return (show == null || show) ? 
+            this.show()._aria("hidden", "false") : 
+            this.hide()._aria("hidden", "true");
+    },
+
+    _selectAria: function (select)
+    {
+        return (select == null || select) ? 
+            this.addClass("current")._aria("selected", "true") : 
+            this.removeClass("current")._aria("selected", "false");
+    },
+
+    _id: function (id)
+    {
+        return (id) ? this.attr("id", id) : this.attr("id");
+    }
+});
+
+if (!String.prototype.format)
+{
+    String.prototype.format = function()
+    {
+        var args = (arguments.length === 1 && $.isArray(arguments[0])) ? arguments[0] : arguments;
+        var formattedString = this;
+        for (var i = 0; i < args.length; i++)
+        {
+            var pattern = new RegExp("\\{" + i + "\\}", "gm");
+            formattedString = formattedString.replace(pattern, args[i]);
+        }
+        return formattedString;
+    };
+}
+
+/**
+ * A global unique id count.
+ *
+ * @static
+ * @private
+ * @property _uniqueId
+ * @type Integer
+ **/
+var _uniqueId = 0;
+
+/**
+ * The plugin prefix for cookies.
+ *
+ * @final
+ * @private
+ * @property _cookiePrefix
+ * @type String
+ **/
+var _cookiePrefix = "jQu3ry_5teps_St@te_";
+
+/**
+ * Suffix for the unique tab id.
+ *
+ * @final
+ * @private
+ * @property _tabSuffix
+ * @type String
+ * @since 0.9.7
+ **/
+var _tabSuffix = "-t-";
+
+/**
+ * Suffix for the unique tabpanel id.
+ *
+ * @final
+ * @private
+ * @property _tabpanelSuffix
+ * @type String
+ * @since 0.9.7
+ **/
+var _tabpanelSuffix = "-p-";
+
+/**
+ * Suffix for the unique title id.
+ *
+ * @final
+ * @private
+ * @property _titleSuffix
+ * @type String
+ * @since 0.9.7
+ **/
+var _titleSuffix = "-h-";
+
+/**
+ * An error message for an "index out of range" error.
+ *
+ * @final
+ * @private
+ * @property _indexOutOfRangeErrorMessage
+ * @type String
+ **/
+var _indexOutOfRangeErrorMessage = "Index out of range.";
+
+/**
+ * An error message for an "missing corresponding element" error.
+ *
+ * @final
+ * @private
+ * @property _missingCorrespondingElementErrorMessage
+ * @type String
+ **/
+var _missingCorrespondingElementErrorMessage = "One or more corresponding step {0} are missing.";
+
+/**
+ * Adds a step to the cache.
+ *
+ * @static
+ * @private
+ * @method addStepToCache
+ * @param wizard {Object} A jQuery wizard object
+ * @param step {Object} The step object to add
+ **/
+function addStepToCache(wizard, step)
+{
+    getSteps(wizard).push(step);
+}
+
+function analyzeData(wizard, options, state)
+{
+    var stepTitles = wizard.children(options.headerTag),
+        stepContents = wizard.children(options.bodyTag);
+
+    // Validate content
+    if (stepTitles.length > stepContents.length)
+    {
+        throwError(_missingCorrespondingElementErrorMessage, "contents");
+    }
+    else if (stepTitles.length < stepContents.length)
+    {
+        throwError(_missingCorrespondingElementErrorMessage, "titles");
+    }
+        
+    var startIndex = options.startIndex;
+
+    state.stepCount = stepTitles.length;
+
+    // Tries to load the saved state (step position)
+    if (options.saveState && $.cookie)
+    {
+        var savedState = $.cookie(_cookiePrefix + getUniqueId(wizard));
+        // Sets the saved position to the start index if not undefined or out of range 
+        var savedIndex = parseInt(savedState, 0);
+        if (!isNaN(savedIndex) && savedIndex < state.stepCount)
+        {
+            startIndex = savedIndex;
+        }
+    }
+
+    state.currentIndex = startIndex;
+
+    stepTitles.each(function (index)
+    {
+        var item = $(this), // item == header
+            content = stepContents.eq(index),
+            modeData = content.data("mode"),
+            mode = (modeData == null) ? contentMode.html : getValidEnumValue(contentMode,
+                (/^\s*$/.test(modeData) || isNaN(modeData)) ? modeData : parseInt(modeData, 0)),
+            contentUrl = (mode === contentMode.html || content.data("url") === undefined) ?
+                "" : content.data("url"),
+            contentLoaded = (mode !== contentMode.html && content.data("loaded") === "1"),
+            step = $.extend({}, stepModel, {
+                title: item.html(),
+                content: (mode === contentMode.html) ? content.html() : "",
+                contentUrl: contentUrl,
+                contentMode: mode,
+                contentLoaded: contentLoaded
+            });
+
+        addStepToCache(wizard, step);
+    });
+}
+
+/**
+ * Triggers the onCanceled event.
+ *
+ * @static
+ * @private
+ * @method cancel
+ * @param wizard {Object} The jQuery wizard object
+ **/
+function cancel(wizard)
+{
+    wizard.triggerHandler("canceled");
+}
+
+function decreaseCurrentIndexBy(state, decreaseBy)
+{
+    return state.currentIndex - decreaseBy;
+}
+
+/**
+ * Removes the control functionality completely and transforms the current state to the initial HTML structure.
+ *
+ * @static
+ * @private
+ * @method destroy
+ * @param wizard {Object} A jQuery wizard object
+ **/
+function destroy(wizard, options)
+{
+    var eventNamespace = getEventNamespace(wizard);
+
+    // Remove virtual data objects from the wizard
+    wizard.unbind(eventNamespace).removeData("uid").removeData("options")
+        .removeData("state").removeData("steps").removeData("eventNamespace")
+        .find(".actions a").unbind(eventNamespace);
+
+    // Remove attributes and CSS classes from the wizard
+    wizard.removeClass(options.clearFixCssClass + " vertical");
+
+    var contents = wizard.find(".content > *");
+
+    // Remove virtual data objects from panels and their titles
+    contents.removeData("loaded").removeData("mode").removeData("url");
+
+    // Remove attributes, CSS classes and reset inline styles on all panels and their titles
+    contents.removeAttr("id").removeAttr("role").removeAttr("tabindex")
+        .removeAttr("class").removeAttr("style")._removeAria("labelledby")
+        ._removeAria("hidden");
+
+    // Empty panels if the mode is set to 'async' or 'iframe'
+    wizard.find(".content > [data-mode='async'],.content > [data-mode='iframe']").empty();
+
+    var wizardSubstitute = $("<{0} class=\"{1}\"></{0}>".format(wizard.get(0).tagName, wizard.attr("class")));
+
+    var wizardId = wizard._id();
+    if (wizardId != null && wizardId !== "")
+    {
+        wizardSubstitute._id(wizardId);
+    }
+
+    wizardSubstitute.html(wizard.find(".content").html());
+    wizard.after(wizardSubstitute);
+    wizard.remove();
+
+    return wizardSubstitute;
+}
+
+/**
+ * Triggers the onFinishing and onFinished event.
+ *
+ * @static
+ * @private
+ * @method finishStep
+ * @param wizard {Object} The jQuery wizard object
+ * @param state {Object} The state container of the current wizard
+ **/
+function finishStep(wizard, state)
+{
+    var currentStep = wizard.find(".steps li").eq(state.currentIndex);
+
+    if (wizard.triggerHandler("finishing", [state.currentIndex]))
+    {
+        currentStep.addClass("done").removeClass("error");
+        wizard.triggerHandler("finished", [state.currentIndex]);
+    }
+    else
+    {
+        currentStep.addClass("error");
+    }
+}
+
+/**
+ * Gets or creates if not exist an unique event namespace for the given wizard instance.
+ *
+ * @static
+ * @private
+ * @method getEventNamespace
+ * @param wizard {Object} A jQuery wizard object
+ * @return {String} Returns the unique event namespace for the given wizard
+ */
+function getEventNamespace(wizard)
+{
+    var eventNamespace = wizard.data("eventNamespace");
+
+    if (eventNamespace == null)
+    {
+        eventNamespace = "." + getUniqueId(wizard);
+        wizard.data("eventNamespace", eventNamespace);
+    }
+
+    return eventNamespace;
+}
+
+function getStepAnchor(wizard, index)
+{
+    var uniqueId = getUniqueId(wizard);
+
+    return wizard.find("#" + uniqueId + _tabSuffix + index);
+}
+
+function getStepPanel(wizard, index)
+{
+    var uniqueId = getUniqueId(wizard);
+
+    return wizard.find("#" + uniqueId + _tabpanelSuffix + index);
+}
+
+function getStepTitle(wizard, index)
+{
+    var uniqueId = getUniqueId(wizard);
+
+    return wizard.find("#" + uniqueId + _titleSuffix + index);
+}
+
+function getOptions(wizard)
+{
+    return wizard.data("options");
+}
+
+function getState(wizard)
+{
+    return wizard.data("state");
+}
+
+function getSteps(wizard)
+{
+    return wizard.data("steps");
+}
+
+/**
+ * Gets a specific step object by index.
+ *
+ * @static
+ * @private
+ * @method getStep
+ * @param index {Integer} An integer that belongs to the position of a step
+ * @return {Object} A specific step object
+ **/
+function getStep(wizard, index)
+{
+    var steps = getSteps(wizard);
+
+    if (index < 0 || index >= steps.length)
+    {
+        throwError(_indexOutOfRangeErrorMessage);
+    }
+
+    return steps[index];
+}
+
+/**
+ * Gets or creates if not exist an unique id from the given wizard instance.
+ *
+ * @static
+ * @private
+ * @method getUniqueId
+ * @param wizard {Object} A jQuery wizard object
+ * @return {String} Returns the unique id for the given wizard
+ */
+function getUniqueId(wizard)
+{
+    var uniqueId = wizard.data("uid");
+
+    if (uniqueId == null)
+    {
+        uniqueId = wizard._id();
+        if (uniqueId == null)
+        {
+            uniqueId = "steps-uid-".concat(_uniqueId);
+            wizard._id(uniqueId);
+        }
+
+        _uniqueId++;
+        wizard.data("uid", uniqueId);
+    }
+
+    return uniqueId;
+}
+
+/**
+ * Gets a valid enum value by checking a specific enum key or value.
+ * 
+ * @static
+ * @private
+ * @method getValidEnumValue
+ * @param enumType {Object} Type of enum
+ * @param keyOrValue {Object} Key as `String` or value as `Integer` to check for
+ */
+function getValidEnumValue(enumType, keyOrValue)
+{
+    validateArgument("enumType", enumType);
+    validateArgument("keyOrValue", keyOrValue);
+
+    // Is key
+    if (typeof keyOrValue === "string")
+    {
+        var value = enumType[keyOrValue];
+        if (value === undefined)
+        {
+            throwError("The enum key '{0}' does not exist.", keyOrValue);
+        }
+
+        return value;
+    }
+    // Is value
+    else if (typeof keyOrValue === "number")
+    {
+        for (var key in enumType)
+        {
+            if (enumType[key] === keyOrValue)
+            {
+                return keyOrValue;
+            }
+        }
+
+        throwError("Invalid enum value '{0}'.", keyOrValue);
+    }
+    // Type is not supported
+    else
+    {
+        throwError("Invalid key or value type.");
+    }
+}
+
+/**
+ * Routes to the next step.
+ *
+ * @static
+ * @private
+ * @method goToNextStep
+ * @param wizard {Object} The jQuery wizard object
+ * @param options {Object} Settings of the current wizard
+ * @param state {Object} The state container of the current wizard
+ * @return {Boolean} Indicates whether the action executed
+ **/
+function goToNextStep(wizard, options, state)
+{
+    return paginationClick(wizard, options, state, increaseCurrentIndexBy(state, 1));
+}
+
+/**
+ * Routes to the previous step.
+ *
+ * @static
+ * @private
+ * @method goToPreviousStep
+ * @param wizard {Object} The jQuery wizard object
+ * @param options {Object} Settings of the current wizard
+ * @param state {Object} The state container of the current wizard
+ * @return {Boolean} Indicates whether the action executed
+ **/
+function goToPreviousStep(wizard, options, state)
+{
+    return paginationClick(wizard, options, state, decreaseCurrentIndexBy(state, 1));
+}
+
+/**
+ * Routes to a specific step by a given index.
+ *
+ * @static
+ * @private
+ * @method goToStep
+ * @param wizard {Object} The jQuery wizard object
+ * @param options {Object} Settings of the current wizard
+ * @param state {Object} The state container of the current wizard
+ * @param index {Integer} The position (zero-based) to route to
+ * @return {Boolean} Indicates whether the action succeeded or failed
+ **/
+function goToStep(wizard, options, state, index)
+{
+    if (index < 0 || index >= state.stepCount)
+    {
+        throwError(_indexOutOfRangeErrorMessage);
+    }
+
+    if (options.forceMoveForward && index < state.currentIndex)
+    {
+        return;
+    }
+
+    var oldIndex = state.currentIndex;
+    if (wizard.triggerHandler("stepChanging", [state.currentIndex, index]))
+    {
+        // Save new state
+        state.currentIndex = index;
+        saveCurrentStateToCookie(wizard, options, state);
+
+        // Change visualisation
+        refreshStepNavigation(wizard, options, state, oldIndex);
+        refreshPagination(wizard, options, state);
+        loadAsyncContent(wizard, options, state);
+        startTransitionEffect(wizard, options, state, index, oldIndex);
+
+        wizard.triggerHandler("stepChanged", [index, oldIndex]);
+    }
+    else
+    {
+        wizard.find(".steps li").eq(oldIndex).addClass("error");
+    }
+
+    return true;
+}
+
+function increaseCurrentIndexBy(state, increaseBy)
+{
+    return state.currentIndex + increaseBy;
+}
+
+/**
+ * Initializes the component.
+ *
+ * @static
+ * @private
+ * @method initialize
+ * @param options {Object} The component settings
+ **/
+function initialize(options)
+{
+    /*jshint -W040 */
+    var opts = $.extend(true, {}, defaults, options);
+
+    return this.each(function ()
+    {
+        var wizard = $(this);
+        var state = {
+            currentIndex: opts.startIndex,
+            currentStep: null,
+            stepCount: 0,
+            transitionElement: null
+        };
+
+        // Create data container
+        wizard.data("options", opts);
+        wizard.data("state", state);
+        wizard.data("steps", []);
+
+        analyzeData(wizard, opts, state);
+        render(wizard, opts, state);
+        registerEvents(wizard, opts);
+
+        // Trigger focus
+        if (opts.autoFocus && _uniqueId === 0)
+        {
+            getStepAnchor(wizard, opts.startIndex).focus();
+        }
+    });
+}
+
+/**
+ * Inserts a new step to a specific position.
+ *
+ * @static
+ * @private
+ * @method insertStep
+ * @param wizard {Object} The jQuery wizard object
+ * @param options {Object} Settings of the current wizard
+ * @param state {Object} The state container of the current wizard
+ * @param index {Integer} The position (zero-based) to add
+ * @param step {Object} The step object to add
+ * @example
+ *     $("#wizard").steps().insert(0, {
+ *         title: "Title",
+ *         content: "", // optional
+ *         contentMode: "async", // optional
+ *         contentUrl: "/Content/Step/1" // optional
+ *     });
+ * @chainable
+ **/
+function insertStep(wizard, options, state, index, step)
+{
+    if (index < 0 || index > state.stepCount)
+    {
+        throwError(_indexOutOfRangeErrorMessage);
+    }
+
+    // TODO: Validate step object
+
+    // Change data
+    step = $.extend({}, stepModel, step);
+    insertStepToCache(wizard, index, step);
+    if (state.currentIndex !== state.stepCount && state.currentIndex >= index)
+    {
+        state.currentIndex++;
+        saveCurrentStateToCookie(wizard, options, state);
+    }
+    state.stepCount++;
+
+    var contentContainer = wizard.find(".content"),
+        header = $("<{0}>{1}</{0}>".format(options.headerTag, step.title)),
+        body = $("<{0}></{0}>".format(options.bodyTag));
+
+    if (step.contentMode == null || step.contentMode === contentMode.html)
+    {
+        body.html(step.content);
+    }
+
+    if (index === 0)
+    {
+        contentContainer.prepend(body).prepend(header);
+    }
+    else
+    {
+        getStepPanel(wizard, (index - 1)).after(body).after(header);
+    }
+
+    renderBody(wizard, state, body, index);
+    renderTitle(wizard, options, state, header, index);
+    refreshSteps(wizard, options, state, index);
+    if (index === state.currentIndex)
+    {
+        refreshStepNavigation(wizard, options, state);
+    }
+    refreshPagination(wizard, options, state);
+
+    return wizard;
+}
+
+/**
+ * Inserts a step object to the cache at a specific position.
+ *
+ * @static
+ * @private
+ * @method insertStepToCache
+ * @param wizard {Object} A jQuery wizard object
+ * @param index {Integer} The position (zero-based) to add
+ * @param step {Object} The step object to add
+ **/
+function insertStepToCache(wizard, index, step)
+{
+    getSteps(wizard).splice(index, 0, step);
+}
+
+/**
+ * Handles the keyup DOM event for pagination.
+ *
+ * @static
+ * @private
+ * @event keyup
+ * @param event {Object} An event object
+ */
+function keyUpHandler(event)
+{
+    var wizard = $(this),
+        options = getOptions(wizard),
+        state = getState(wizard);
+
+    if (options.suppressPaginationOnFocus && wizard.find(":focus").is(":input"))
+    {
+        event.preventDefault();
+        return false;
+    }
+
+    var keyCodes = { left: 37, right: 39 };
+    if (event.keyCode === keyCodes.left)
+    {
+        event.preventDefault();
+        goToPreviousStep(wizard, options, state);
+    }
+    else if (event.keyCode === keyCodes.right)
+    {
+        event.preventDefault();
+        goToNextStep(wizard, options, state);
+    }
+}
+
+/**
+ * Loads and includes async content.
+ *
+ * @static
+ * @private
+ * @method loadAsyncContent
+ * @param wizard {Object} A jQuery wizard object
+ * @param options {Object} Settings of the current wizard
+ * @param state {Object} The state container of the current wizard
+ */
+function loadAsyncContent(wizard, options, state)
+{
+    if (state.stepCount > 0)
+    {
+        var currentStep = getStep(wizard, state.currentIndex);
+
+        if (!options.enableContentCache || !currentStep.contentLoaded)
+        {
+            switch (getValidEnumValue(contentMode, currentStep.contentMode))
+            {
+                case contentMode.iframe:
+                    wizard.find(".content > .body").eq(state.currentIndex).empty()
+                        .html("<iframe src=\"" + currentStep.contentUrl + "\" frameborder=\"0\" scrolling=\"no\" />")
+                        .data("loaded", "1");
+                    break;
+
+                case contentMode.async:
+                    var currentStepContent = getStepPanel(wizard, state.currentIndex)._aria("busy", "true")
+                        .empty().append(renderTemplate(options.loadingTemplate, { text: options.labels.loading }));
+
+                    $.ajax({ url: currentStep.contentUrl, cache: false }).done(function (data)
+                    {
+                        currentStepContent.empty().html(data)._aria("busy", "false").data("loaded", "1");
+                    });
+                    break;
+            }
+        }
+    }
+}
+
+/**
+ * Fires the action next or previous click event.
+ *
+ * @static
+ * @private
+ * @method paginationClick
+ * @param wizard {Object} The jQuery wizard object
+ * @param options {Object} Settings of the current wizard
+ * @param state {Object} The state container of the current wizard
+ * @param index {Integer} The position (zero-based) to route to
+ * @return {Boolean} Indicates whether the event fired successfully or not
+ **/
+function paginationClick(wizard, options, state, index)
+{
+    var oldIndex = state.currentIndex;
+
+    if (index >= 0 && index < state.stepCount && !(options.forceMoveForward && index < state.currentIndex))
+    {
+        var anchor = getStepAnchor(wizard, index),
+            parent = anchor.parent(),
+            isDisabled = parent.hasClass("disabled");
+
+        // Enable the step to make the anchor clickable!
+        parent._enableAria();
+        anchor.click();
+
+        // An error occured
+        if (oldIndex === state.currentIndex && isDisabled)
+        {
+            // Disable the step again if current index has not changed; prevents click action.
+            parent._enableAria(false);
+            return false;
+        }
+
+        return true;
+    }
+
+    return false;
+}
+
+/**
+ * Fires when a pagination click happens.
+ *
+ * @static
+ * @private
+ * @event click
+ * @param event {Object} An event object
+ */
+function paginationClickHandler(event)
+{
+    event.preventDefault();
+
+    var anchor = $(this),
+        wizard = anchor.parent().parent().parent().parent(),
+        options = getOptions(wizard),
+        state = getState(wizard),
+        href = anchor.attr("href");
+
+    switch (href.substring(href.lastIndexOf("#") + 1))
+    {
+        case "cancel":
+            cancel(wizard);
+            break;
+
+        case "finish":
+            finishStep(wizard, state);
+            break;
+
+        case "next":
+            goToNextStep(wizard, options, state);
+            break;
+
+        case "previous":
+            goToPreviousStep(wizard, options, state);
+            break;
+    }
+}
+
+/**
+ * Refreshs the visualization state for the entire pagination.
+ *
+ * @static
+ * @private
+ * @method refreshPagination
+ * @param wizard {Object} A jQuery wizard object
+ * @param options {Object} Settings of the current wizard
+ * @param state {Object} The state container of the current wizard
+ */
+function refreshPagination(wizard, options, state)
+{
+    if (options.enablePagination)
+    {
+        var finish = wizard.find(".actions a[href$='#finish']").parent(),
+            next = wizard.find(".actions a[href$='#next']").parent();
+
+        if (!options.forceMoveForward)
+        {
+            var previous = wizard.find(".actions a[href$='#previous']").parent();
+            previous._enableAria(state.currentIndex > 0);
+        }
+
+        if (options.enableFinishButton && options.showFinishButtonAlways)
+        {
+            finish._enableAria(state.stepCount > 0);
+            next._enableAria(state.stepCount > 1 && state.stepCount > (state.currentIndex + 1));
+        }
+        else
+        {
+            finish._showAria(options.enableFinishButton && state.stepCount === (state.currentIndex + 1));
+            next._showAria(state.stepCount === 0 || state.stepCount > (state.currentIndex + 1)).
+                _enableAria(state.stepCount > (state.currentIndex + 1) || !options.enableFinishButton);
+        }
+    }
+}
+
+/**
+ * Refreshs the visualization state for the step navigation (tabs).
+ *
+ * @static
+ * @private
+ * @method refreshStepNavigation
+ * @param wizard {Object} A jQuery wizard object
+ * @param options {Object} Settings of the current wizard
+ * @param state {Object} The state container of the current wizard
+ * @param [oldIndex] {Integer} The index of the prior step
+ */
+function refreshStepNavigation(wizard, options, state, oldIndex)
+{
+    var currentOrNewStepAnchor = getStepAnchor(wizard, state.currentIndex),
+        currentInfo = $("<span class=\"current-info audible\">" + options.labels.current + " </span>"),
+        stepTitles = wizard.find(".content > .title");
+
+    if (oldIndex != null)
+    {
+        var oldStepAnchor = getStepAnchor(wizard, oldIndex);
+        oldStepAnchor.parent().addClass("done").removeClass("error")._selectAria(false);
+        stepTitles.eq(oldIndex).removeClass("current").next(".body").removeClass("current");
+        currentInfo = oldStepAnchor.find(".current-info");
+        currentOrNewStepAnchor.focus();
+    }
+
+    currentOrNewStepAnchor.prepend(currentInfo).parent()._selectAria().removeClass("done")._enableAria();
+    stepTitles.eq(state.currentIndex).addClass("current").next(".body").addClass("current");
+}
+
+/**
+ * Refreshes step buttons and their related titles beyond a certain position.
+ *
+ * @static
+ * @private
+ * @method refreshSteps
+ * @param wizard {Object} A jQuery wizard object
+ * @param options {Object} Settings of the current wizard
+ * @param state {Object} The state container of the current wizard
+ * @param index {Integer} The start point for refreshing ids
+ */
+function refreshSteps(wizard, options, state, index)
+{
+    var uniqueId = getUniqueId(wizard);
+
+    for (var i = index; i < state.stepCount; i++)
+    {
+        var uniqueStepId = uniqueId + _tabSuffix + i,
+            uniqueBodyId = uniqueId + _tabpanelSuffix + i,
+            uniqueHeaderId = uniqueId + _titleSuffix + i,
+            title = wizard.find(".title").eq(i)._id(uniqueHeaderId);
+
+        wizard.find(".steps a").eq(i)._id(uniqueStepId)
+            ._aria("controls", uniqueBodyId).attr("href", "#" + uniqueHeaderId)
+            .html(renderTemplate(options.titleTemplate, { index: i + 1, title: title.html() }));
+        wizard.find(".body").eq(i)._id(uniqueBodyId)
+            ._aria("labelledby", uniqueHeaderId);
+    }
+}
+
+function registerEvents(wizard, options)
+{
+    var eventNamespace = getEventNamespace(wizard);
+
+    wizard.bind("canceled" + eventNamespace, options.onCanceled);
+    wizard.bind("finishing" + eventNamespace, options.onFinishing);
+    wizard.bind("finished" + eventNamespace, options.onFinished);
+    wizard.bind("stepChanging" + eventNamespace, options.onStepChanging);
+    wizard.bind("stepChanged" + eventNamespace, options.onStepChanged);
+
+    if (options.enableKeyNavigation)
+    {
+        wizard.bind("keyup" + eventNamespace, keyUpHandler);
+    }
+
+    wizard.find(".actions a").bind("click" + eventNamespace, paginationClickHandler);
+}
+
+/**
+ * Removes a specific step by an given index.
+ *
+ * @static
+ * @private
+ * @method removeStep
+ * @param wizard {Object} A jQuery wizard object
+ * @param options {Object} Settings of the current wizard
+ * @param state {Object} The state container of the current wizard
+ * @param index {Integer} The position (zero-based) of the step to remove
+ * @return Indecates whether the item is removed.
+ **/
+function removeStep(wizard, options, state, index)
+{
+    // Index out of range and try deleting current item will return false.
+    if (index < 0 || index >= state.stepCount || state.currentIndex === index)
+    {
+        return false;
+    }
+
+    // Change data
+    removeStepFromCache(wizard, index);
+    if (state.currentIndex > index)
+    {
+        state.currentIndex--;
+        saveCurrentStateToCookie(wizard, options, state);
+    }
+    state.stepCount--;
+
+    getStepTitle(wizard, index).remove();
+    getStepPanel(wizard, index).remove();
+    getStepAnchor(wizard, index).parent().remove();
+
+    // Set the "first" class to the new first step button 
+    if (index === 0)
+    {
+        wizard.find(".steps li").first().addClass("first");
+    }
+
+    // Set the "last" class to the new last step button 
+    if (index === state.stepCount)
+    {
+        wizard.find(".steps li").eq(index).addClass("last");
+    }
+
+    refreshSteps(wizard, options, state, index);
+    refreshPagination(wizard, options, state);
+
+    return true;
+}
+
+function removeStepFromCache(wizard, index)
+{
+    getSteps(wizard).splice(index, 1);
+}
+
+/**
+ * Transforms the base html structure to a more sensible html structure.
+ *
+ * @static
+ * @private
+ * @method render
+ * @param wizard {Object} A jQuery wizard object
+ * @param options {Object} Settings of the current wizard
+ * @param state {Object} The state container of the current wizard
+ **/
+function render(wizard, options, state)
+{
+    // Create a content wrapper and copy HTML from the intial wizard structure
+    var wrapperTemplate = "<{0} class=\"{1}\">{2}</{0}>",
+        orientation = getValidEnumValue(stepsOrientation, options.stepsOrientation),
+        verticalCssClass = (orientation === stepsOrientation.vertical) ? " vertical" : "",
+        contentWrapper = $(wrapperTemplate.format(options.contentContainerTag, "content " + options.clearFixCssClass, wizard.html())),
+        stepsWrapper = $(wrapperTemplate.format(options.stepsContainerTag, "steps " + options.clearFixCssClass, "<ul role=\"tablist\"></ul>")),
+        stepTitles = contentWrapper.children(options.headerTag),
+        stepContents = contentWrapper.children(options.bodyTag);
+
+    // Transform the wizard wrapper and remove the inner HTML
+    wizard.attr("role", "application").empty().append(stepsWrapper).append(contentWrapper)
+        .addClass(options.cssClass + " " + options.clearFixCssClass + verticalCssClass);
+
+    // Add WIA-ARIA support
+    stepContents.each(function (index)
+    {
+        renderBody(wizard, state, $(this), index);
+    });
+
+    stepTitles.each(function (index)
+    {
+        renderTitle(wizard, options, state, $(this), index);
+    });
+
+    refreshStepNavigation(wizard, options, state);
+    renderPagination(wizard, options, state);
+}
+
+/**
+ * Transforms the body to a proper tabpanel.
+ *
+ * @static
+ * @private
+ * @method renderBody
+ * @param wizard {Object} A jQuery wizard object
+ * @param body {Object} A jQuery body object
+ * @param index {Integer} The position of the body
+ */
+function renderBody(wizard, state, body, index)
+{
+    var uniqueId = getUniqueId(wizard),
+        uniqueBodyId = uniqueId + _tabpanelSuffix + index,
+        uniqueHeaderId = uniqueId + _titleSuffix + index;
+
+    body._id(uniqueBodyId).attr("role", "tabpanel")._aria("labelledby", uniqueHeaderId)
+        .addClass("body")._showAria(state.currentIndex === index);
+}
+
+/**
+ * Renders a pagination if enabled.
+ *
+ * @static
+ * @private
+ * @method renderPagination
+ * @param wizard {Object} A jQuery wizard object
+ * @param options {Object} Settings of the current wizard
+ * @param state {Object} The state container of the current wizard
+ */
+function renderPagination(wizard, options, state)
+{
+    if (options.enablePagination)
+    {
+        var pagination = "<{0} class=\"actions {1}\"><ul role=\"menu\" aria-label=\"{2}\">{3}</ul></{0}>",
+            buttonTemplate = "<li><a href=\"#{0}\" role=\"menuitem\">{1}</a></li>",
+            buttons = "";
+
+        if (!options.forceMoveForward)
+        {
+            buttons += buttonTemplate.format("previous", options.labels.previous);
+        }
+
+        buttons += buttonTemplate.format("next", options.labels.next);
+
+        if (options.enableFinishButton)
+        {
+            buttons += buttonTemplate.format("finish", options.labels.finish);
+        }
+
+        if (options.enableCancelButton)
+        {
+            buttons += buttonTemplate.format("cancel", options.labels.cancel);
+        }
+
+        wizard.append(pagination.format(options.actionContainerTag, options.clearFixCssClass,
+            options.labels.pagination, buttons));
+
+        refreshPagination(wizard, options, state);
+        loadAsyncContent(wizard, options, state);
+    }
+}
+
+/**
+ * Renders a template and replaces all placeholder.
+ *
+ * @static
+ * @private
+ * @method renderTemplate
+ * @param template {String} A template
+ * @param substitutes {Object} A list of substitute
+ * @return {String} The rendered template
+ */
+function renderTemplate(template, substitutes)
+{
+    var matches = template.match(/#([a-z]*)#/gi);
+
+    for (var i = 0; i < matches.length; i++)
+    {
+        var match = matches[i], 
+            key = match.substring(1, match.length - 1);
+
+        if (substitutes[key] === undefined)
+        {
+            throwError("The key '{0}' does not exist in the substitute collection!", key);
+        }
+
+        template = template.replace(match, substitutes[key]);
+    }
+
+    return template;
+}
+
+/**
+ * Transforms the title to a step item button.
+ *
+ * @static
+ * @private
+ * @method renderTitle
+ * @param wizard {Object} A jQuery wizard object
+ * @param options {Object} Settings of the current wizard
+ * @param state {Object} The state container of the current wizard
+ * @param header {Object} A jQuery header object
+ * @param index {Integer} The position of the header
+ */
+function renderTitle(wizard, options, state, header, index)
+{
+    var uniqueId = getUniqueId(wizard),
+        uniqueStepId = uniqueId + _tabSuffix + index,
+        uniqueBodyId = uniqueId + _tabpanelSuffix + index,
+        uniqueHeaderId = uniqueId + _titleSuffix + index,
+        stepCollection = wizard.find(".steps > ul"),
+        title = renderTemplate(options.titleTemplate, {
+            index: index + 1,
+            title: header.html()
+        }),
+        stepItem = $("<li role=\"tab\"><a id=\"" + uniqueStepId + "\" href=\"#" + uniqueHeaderId + 
+            "\" aria-controls=\"" + uniqueBodyId + "\">" + title + "</a></li>");
+        
+    stepItem._enableAria(options.enableAllSteps || state.currentIndex > index);
+
+    if (state.currentIndex > index)
+    {
+        stepItem.addClass("done");
+    }
+
+    header._id(uniqueHeaderId).attr("tabindex", "-1").addClass("title");
+
+    if (index === 0)
+    {
+        stepCollection.prepend(stepItem);
+    }
+    else
+    {
+        stepCollection.find("li").eq(index - 1).after(stepItem);
+    }
+
+    // Set the "first" class to the new first step button
+    if (index === 0)
+    {
+        stepCollection.find("li").removeClass("first").eq(index).addClass("first");
+    }
+
+    // Set the "last" class to the new last step button
+    if (index === (state.stepCount - 1))
+    {
+        stepCollection.find("li").removeClass("last").eq(index).addClass("last");
+    }
+
+    // Register click event
+    stepItem.children("a").bind("click" + getEventNamespace(wizard), stepClickHandler);
+}
+
+/**
+ * Saves the current state to a cookie.
+ *
+ * @static
+ * @private
+ * @method saveCurrentStateToCookie
+ * @param wizard {Object} A jQuery wizard object
+ * @param options {Object} Settings of the current wizard
+ * @param state {Object} The state container of the current wizard
+ */
+function saveCurrentStateToCookie(wizard, options, state)
+{
+    if (options.saveState && $.cookie)
+    {
+        $.cookie(_cookiePrefix + getUniqueId(wizard), state.currentIndex);
+    }
+}
+
+function startTransitionEffect(wizard, options, state, index, oldIndex)
+{
+    var stepContents = wizard.find(".content > .body"),
+        effect = getValidEnumValue(transitionEffect, options.transitionEffect),
+        effectSpeed = options.transitionEffectSpeed,
+        newStep = stepContents.eq(index),
+        currentStep = stepContents.eq(oldIndex);
+
+    switch (effect)
+    {
+        case transitionEffect.fade:
+        case transitionEffect.slide:
+            var hide = (effect === transitionEffect.fade) ? "fadeOut" : "slideUp",
+                show = (effect === transitionEffect.fade) ? "fadeIn" : "slideDown";
+
+            state.transitionElement = newStep;
+            currentStep[hide](effectSpeed, function ()
+            {
+                var wizard = $(this)._showAria(false).parent().parent(),
+                    state = getState(wizard);
+
+                if (state.transitionElement)
+                {
+                    state.transitionElement[show](effectSpeed, function ()
+                    {
+                        $(this)._showAria();
+                    });
+                    state.transitionElement = null;
+                }
+            }).promise();
+            break;
+
+        case transitionEffect.slideLeft:
+            var outerWidth = currentStep.outerWidth(true),
+                posFadeOut = (index > oldIndex) ? -(outerWidth) : outerWidth,
+                posFadeIn = (index > oldIndex) ? outerWidth : -(outerWidth);
+
+            currentStep.animate({ left: posFadeOut }, effectSpeed, 
+                function () { $(this)._showAria(false); }).promise();
+            newStep.css("left", posFadeIn + "px")._showAria()
+                .animate({ left: 0 }, effectSpeed).promise();
+            break;
+
+        default:
+            currentStep._showAria(false);
+            newStep._showAria();
+            break;
+    }
+}
+
+/**
+ * Fires when a step click happens.
+ *
+ * @static
+ * @private
+ * @event click
+ * @param event {Object} An event object
+ */
+function stepClickHandler(event)
+{
+    event.preventDefault();
+
+    var anchor = $(this),
+        wizard = anchor.parent().parent().parent().parent(),
+        options = getOptions(wizard),
+        state = getState(wizard),
+        oldIndex = state.currentIndex;
+
+    if (anchor.parent().is(":not(.disabled):not(.current)"))
+    {
+        var href = anchor.attr("href"),
+            position = parseInt(href.substring(href.lastIndexOf("-") + 1), 0);
+
+        goToStep(wizard, options, state, position);
+    }
+
+    // If nothing has changed
+    if (oldIndex === state.currentIndex)
+    {
+        getStepAnchor(wizard, oldIndex).focus();
+        return false;
+    }
+}
+
+function throwError(message)
+{
+    if (arguments.length > 1)
+    {
+        message = message.format(Array.prototype.slice.call(arguments, 1));
+    }
+
+    throw new Error(message);
+}
+
+/**
+ * Checks an argument for null or undefined and throws an error if one check applies.
+ *
+ * @static
+ * @private
+ * @method validateArgument
+ * @param argumentName {String} The name of the given argument
+ * @param argumentValue {Object} The argument itself
+ */
+function validateArgument(argumentName, argumentValue)
+{
+    if (argumentValue == null)
+    {
+        throwError("The argument '{0}' is null or undefined.", argumentName);
+    }
+}
+
+/**
+ * Represents a jQuery wizard plugin.
+ *
+ * @class steps
+ * @constructor
+ * @param [method={}] The name of the method as `String` or an JSON object for initialization
+ * @param [params=]* {Array} Additional arguments for a method call
+ * @chainable
+ **/
+$.fn.steps = function (method)
+{
+    if ($.fn.steps[method])
+    {
+        return $.fn.steps[method].apply(this, Array.prototype.slice.call(arguments, 1));
+    }
+    else if (typeof method === "object" || !method)
+    {
+        return initialize.apply(this, arguments);
+    }
+    else
+    {
+        $.error("Method " + method + " does not exist on jQuery.steps");
+    }
+};
+
+/**
+ * Adds a new step.
+ *
+ * @method add
+ * @param step {Object} The step object to add
+ * @chainable
+ **/
+$.fn.steps.add = function (step)
+{
+    var state = getState(this);
+    return insertStep(this, getOptions(this), state, state.stepCount, step);
+};
+
+/**
+ * Removes the control functionality completely and transforms the current state to the initial HTML structure.
+ *
+ * @method destroy
+ * @chainable
+ **/
+$.fn.steps.destroy = function ()
+{
+    return destroy(this, getOptions(this));
+};
+
+/**
+ * Triggers the onFinishing and onFinished event.
+ *
+ * @method finish
+ **/
+$.fn.steps.finish = function ()
+{
+    finishStep(this, getState(this));
+};
+
+/**
+ * Gets the current step index.
+ *
+ * @method getCurrentIndex
+ * @return {Integer} The actual step index (zero-based)
+ * @for steps
+ **/
+$.fn.steps.getCurrentIndex = function ()
+{
+    return getState(this).currentIndex;
+};
+
+/**
+ * Gets the current step object.
+ *
+ * @method getCurrentStep
+ * @return {Object} The actual step object
+ **/
+$.fn.steps.getCurrentStep = function ()
+{
+    return getStep(this, getState(this).currentIndex);
+};
+
+/**
+ * Gets a specific step object by index.
+ *
+ * @method getStep
+ * @param index {Integer} An integer that belongs to the position of a step
+ * @return {Object} A specific step object
+ **/
+$.fn.steps.getStep = function (index)
+{
+    return getStep(this, index);
+};
+
+/**
+ * Inserts a new step to a specific position.
+ *
+ * @method insert
+ * @param index {Integer} The position (zero-based) to add
+ * @param step {Object} The step object to add
+ * @example
+ *     $("#wizard").steps().insert(0, {
+ *         title: "Title",
+ *         content: "", // optional
+ *         contentMode: "async", // optional
+ *         contentUrl: "/Content/Step/1" // optional
+ *     });
+ * @chainable
+ **/
+$.fn.steps.insert = function (index, step)
+{
+    return insertStep(this, getOptions(this), getState(this), index, step);
+};
+
+/**
+ * Routes to the next step.
+ *
+ * @method next
+ * @return {Boolean} Indicates whether the action executed
+ **/
+$.fn.steps.next = function ()
+{
+    return goToNextStep(this, getOptions(this), getState(this));
+};
+
+/**
+ * Routes to the previous step.
+ *
+ * @method previous
+ * @return {Boolean} Indicates whether the action executed
+ **/
+$.fn.steps.previous = function ()
+{
+    return goToPreviousStep(this, getOptions(this), getState(this));
+};
+
+/**
+ * Removes a specific step by an given index.
+ *
+ * @method remove
+ * @param index {Integer} The position (zero-based) of the step to remove
+ * @return Indecates whether the item is removed.
+ **/
+$.fn.steps.remove = function (index)
+{
+    return removeStep(this, getOptions(this), getState(this), index);
+};
+
+/**
+ * Sets a specific step object by index.
+ *
+ * @method setStep
+ * @param index {Integer} An integer that belongs to the position of a step
+ * @param step {Object} The step object to change
+ **/
+$.fn.steps.setStep = function (index, step)
+{
+    throw new Error("Not yet implemented!");
+};
+
+/**
+ * Skips an certain amount of steps.
+ *
+ * @method skip
+ * @param count {Integer} The amount of steps that should be skipped
+ * @return {Boolean} Indicates whether the action executed
+ **/
+$.fn.steps.skip = function (count)
+{
+    throw new Error("Not yet implemented!");
+};
+
+/**
+ * An enum represents the different content types of a step and their loading mechanisms.
+ *
+ * @class contentMode
+ * @for steps
+ **/
+var contentMode = $.fn.steps.contentMode = {
+    /**
+     * HTML embedded content
+     *
+     * @readOnly
+     * @property html
+     * @type Integer
+     * @for contentMode
+     **/
+    html: 0,
+
+    /**
+     * IFrame embedded content
+     *
+     * @readOnly
+     * @property iframe
+     * @type Integer
+     * @for contentMode
+     **/
+    iframe: 1,
+
+    /**
+     * Async embedded content
+     *
+     * @readOnly
+     * @property async
+     * @type Integer
+     * @for contentMode
+     **/
+    async: 2
+};
+
+/**
+ * An enum represents the orientation of the steps navigation.
+ *
+ * @class stepsOrientation
+ * @for steps
+ **/
+var stepsOrientation = $.fn.steps.stepsOrientation = {
+    /**
+     * Horizontal orientation
+     *
+     * @readOnly
+     * @property horizontal
+     * @type Integer
+     * @for stepsOrientation
+     **/
+    horizontal: 0,
+
+    /**
+     * Vertical orientation
+     *
+     * @readOnly
+     * @property vertical
+     * @type Integer
+     * @for stepsOrientation
+     **/
+    vertical: 1
+};
+
+/**
+ * An enum that represents the various transition animations.
+ *
+ * @class transitionEffect
+ * @for steps
+ **/
+var transitionEffect = $.fn.steps.transitionEffect = {
+    /**
+     * No transition animation
+     *
+     * @readOnly
+     * @property none
+     * @type Integer
+     * @for transitionEffect
+     **/
+    none: 0,
+
+    /**
+     * Fade in transition
+     *
+     * @readOnly
+     * @property fade
+     * @type Integer
+     * @for transitionEffect
+     **/
+    fade: 1,
+
+    /**
+     * Slide up transition
+     *
+     * @readOnly
+     * @property slide
+     * @type Integer
+     * @for transitionEffect
+     **/
+    slide: 2,
+
+    /**
+     * Slide left transition
+     *
+     * @readOnly
+     * @property slideLeft
+     * @type Integer
+     * @for transitionEffect
+     **/
+    slideLeft: 3
+};
+
+var stepModel = $.fn.steps.stepModel = {
+    title: "",
+    content: "",
+    contentUrl: "",
+    contentMode: contentMode.html,
+    contentLoaded: false
+};
+
+/**
+ * An object that represents the default settings.
+ * There are two possibities to override the sub-properties.
+ * Either by doing it generally (global) or on initialization.
+ *
+ * @static
+ * @class defaults
+ * @for steps
+ * @example
+ *   // Global approach
+ *   $.steps.defaults.headerTag = "h3";
+ * @example
+ *   // Initialization approach
+ *   $("#wizard").steps({ headerTag: "h3" });
+ **/
+var defaults = $.fn.steps.defaults = {
+    /**
+     * The header tag is used to find the step button text within the declared wizard area.
+     *
+     * @property headerTag
+     * @type String
+     * @default "h1"
+     * @for defaults
+     **/
+    headerTag: "h1",
+
+    /**
+     * The body tag is used to find the step content within the declared wizard area.
+     *
+     * @property bodyTag
+     * @type String
+     * @default "div"
+     * @for defaults
+     **/
+    bodyTag: "div",
+
+    /**
+     * The content container tag which will be used to wrap all step contents.
+     *
+     * @property contentContainerTag
+     * @type String
+     * @default "div"
+     * @for defaults
+     **/
+    contentContainerTag: "div",
+
+    /**
+     * The action container tag which will be used to wrap the pagination navigation.
+     *
+     * @property actionContainerTag
+     * @type String
+     * @default "div"
+     * @for defaults
+     **/
+    actionContainerTag: "div",
+
+    /**
+     * The steps container tag which will be used to wrap the steps navigation.
+     *
+     * @property stepsContainerTag
+     * @type String
+     * @default "div"
+     * @for defaults
+     **/
+    stepsContainerTag: "div",
+
+    /**
+     * The css class which will be added to the outer component wrapper.
+     *
+     * @property cssClass
+     * @type String
+     * @default "wizard"
+     * @for defaults
+     * @example
+     *     <div class="wizard">
+     *         ...
+     *     </div>
+     **/
+    cssClass: "wizard",
+
+    /**
+     * The css class which will be used for floating scenarios.
+     *
+     * @property clearFixCssClass
+     * @type String
+     * @default "clearfix"
+     * @for defaults
+     **/
+    clearFixCssClass: "clearfix",
+
+    /**
+     * Determines whether the steps are vertically or horizontally oriented.
+     *
+     * @property stepsOrientation
+     * @type stepsOrientation
+     * @default horizontal
+     * @for defaults
+     * @since 1.0.0
+     **/
+    stepsOrientation: stepsOrientation.horizontal,
+
+    /*
+     * Tempplates
+     */
+
+    /**
+     * The title template which will be used to create a step button.
+     *
+     * @property titleTemplate
+     * @type String
+     * @default "<span class=\"number\">#index#.</span> #title#"
+     * @for defaults
+     **/
+    titleTemplate: "<span class=\"number\">#index#.</span> #title#",
+
+    /**
+     * The loading template which will be used to create the loading animation.
+     *
+     * @property loadingTemplate
+     * @type String
+     * @default "<span class=\"spinner\"></span> #text#"
+     * @for defaults
+     **/
+    loadingTemplate: "<span class=\"spinner\"></span> #text#",
+
+    /*
+     * Behaviour
+     */
+
+    /**
+     * Sets the focus to the first wizard instance in order to enable the key navigation from the begining if `true`. 
+     *
+     * @property autoFocus
+     * @type Boolean
+     * @default false
+     * @for defaults
+     * @since 0.9.4
+     **/
+    autoFocus: false,
+
+    /**
+     * Enables all steps from the begining if `true` (all steps are clickable).
+     *
+     * @property enableAllSteps
+     * @type Boolean
+     * @default false
+     * @for defaults
+     **/
+    enableAllSteps: false,
+
+    /**
+     * Enables keyboard navigation if `true` (arrow left and arrow right).
+     *
+     * @property enableKeyNavigation
+     * @type Boolean
+     * @default true
+     * @for defaults
+     **/
+    enableKeyNavigation: true,
+
+    /**
+     * Enables pagination if `true`.
+     *
+     * @property enablePagination
+     * @type Boolean
+     * @default true
+     * @for defaults
+     **/
+    enablePagination: true,
+
+    /**
+     * Suppresses pagination if a form field is focused.
+     *
+     * @property suppressPaginationOnFocus
+     * @type Boolean
+     * @default true
+     * @for defaults
+     **/
+    suppressPaginationOnFocus: true,
+
+    /**
+     * Enables cache for async loaded or iframe embedded content.
+     *
+     * @property enableContentCache
+     * @type Boolean
+     * @default true
+     * @for defaults
+     **/
+    enableContentCache: true,
+
+    /**
+     * Shows the cancel button if enabled.
+     *
+     * @property enableCancelButton
+     * @type Boolean
+     * @default false
+     * @for defaults
+     **/
+    enableCancelButton: false,
+
+    /**
+     * Shows the finish button if enabled.
+     *
+     * @property enableFinishButton
+     * @type Boolean
+     * @default true
+     * @for defaults
+     **/
+    enableFinishButton: true,
+
+    /**
+     * Not yet implemented.
+     *
+     * @property preloadContent
+     * @type Boolean
+     * @default false
+     * @for defaults
+     **/
+    preloadContent: false,
+
+    /**
+     * Shows the finish button always (on each step; right beside the next button) if `true`. 
+     * Otherwise the next button will be replaced by the finish button if the last step becomes active.
+     *
+     * @property showFinishButtonAlways
+     * @type Boolean
+     * @default false
+     * @for defaults
+     **/
+    showFinishButtonAlways: false,
+
+    /**
+     * Prevents jumping to a previous step.
+     *
+     * @property forceMoveForward
+     * @type Boolean
+     * @default false
+     * @for defaults
+     **/
+    forceMoveForward: false,
+
+    /**
+     * Saves the current state (step position) to a cookie.
+     * By coming next time the last active step becomes activated.
+     *
+     * @property saveState
+     * @type Boolean
+     * @default false
+     * @for defaults
+     **/
+    saveState: false,
+
+    /**
+     * The position to start on (zero-based).
+     *
+     * @property startIndex
+     * @type Integer
+     * @default 0
+     * @for defaults
+     **/
+    startIndex: 0,
+
+    /*
+     * Animation Effect Configuration
+     */
+
+    /**
+     * The animation effect which will be used for step transitions.
+     *
+     * @property transitionEffect
+     * @type transitionEffect
+     * @default none
+     * @for defaults
+     **/
+    transitionEffect: transitionEffect.none,
+
+    /**
+     * Animation speed for step transitions (in milliseconds).
+     *
+     * @property transitionEffectSpeed
+     * @type Integer
+     * @default 200
+     * @for defaults
+     **/
+    transitionEffectSpeed: 200,
+
+    /*
+     * Events
+     */
+
+    /**
+     * Fires before the step changes and can be used to prevent step changing by returning `false`. 
+     * Very useful for form validation. 
+     *
+     * @property onStepChanging
+     * @type Event
+     * @default function (event, currentIndex, newIndex) { return true; }
+     * @for defaults
+     **/
+    onStepChanging: function (event, currentIndex, newIndex) { return true; },
+
+    /**
+     * Fires after the step has change. 
+     *
+     * @property onStepChanged
+     * @type Event
+     * @default function (event, currentIndex, priorIndex) { }
+     * @for defaults
+     **/
+    onStepChanged: function (event, currentIndex, priorIndex) { },
+
+    /**
+     * Fires after cancelation. 
+     *
+     * @property onCanceled
+     * @type Event
+     * @default function (event) { }
+     * @for defaults
+     **/
+    onCanceled: function (event) { },
+
+    /**
+     * Fires before finishing and can be used to prevent completion by returning `false`. 
+     * Very useful for form validation. 
+     *
+     * @property onFinishing
+     * @type Event
+     * @default function (event, currentIndex) { return true; }
+     * @for defaults
+     **/
+    onFinishing: function (event, currentIndex) { return true; },
+
+    /**
+     * Fires after completion. 
+     *
+     * @property onFinished
+     * @type Event
+     * @default function (event, currentIndex) { }
+     * @for defaults
+     **/
+    onFinished: function (event, currentIndex) { },
+
+    /**
+     * Contains all labels. 
+     *
+     * @property labels
+     * @type Object
+     * @for defaults
+     **/
+    labels: {
+        /**
+         * Label for the cancel button.
+         *
+         * @property cancel
+         * @type String
+         * @default "Cancel"
+         * @for defaults
+         **/
+        cancel: "Cancel",
+
+        /**
+         * This label is important for accessability reasons.
+         * Indicates which step is activated.
+         *
+         * @property current
+         * @type String
+         * @default "current step:"
+         * @for defaults
+         **/
+        current: "current step:",
+
+        /**
+         * This label is important for accessability reasons and describes the kind of navigation.
+         *
+         * @property pagination
+         * @type String
+         * @default "Pagination"
+         * @for defaults
+         * @since 0.9.7
+         **/
+        pagination: "Pagination",
+
+        /**
+         * Label for the finish button.
+         *
+         * @property finish
+         * @type String
+         * @default "Finish"
+         * @for defaults
+         **/
+        finish: "Finish",
+
+        /**
+         * Label for the next button.
+         *
+         * @property next
+         * @type String
+         * @default "Next"
+         * @for defaults
+         **/
+        next: "Next",
+
+        /**
+         * Label for the previous button.
+         *
+         * @property previous
+         * @type String
+         * @default "Previous"
+         * @for defaults
+         **/
+        previous: "Previous",
+
+        /**
+         * Label for the loading animation.
+         *
+         * @property loading
+         * @type String
+         * @default "Loading ..."
+         * @for defaults
+         **/
+        loading: "Loading ..."
+    }
+};
+})(jQuery);
 \ No newline at end of file
@@ -0,0 +1,382 @@
+/*
+    Common 
+*/
+
+.wizard,
+.tabcontrol
+{
+    display: block;
+    width: 100%;
+    overflow: hidden;
+}
+
+.wizard a,
+.tabcontrol a
+{
+    outline: 0;
+}
+
+.wizard ul,
+.tabcontrol ul
+{
+    list-style: none !important;
+    padding: 0;
+    margin: 0;
+}
+
+.wizard ul > li,
+.tabcontrol ul > li
+{
+    display: block;
+    padding: 0;
+}
+
+/* Accessibility */
+.wizard > .steps .current-info,
+.tabcontrol > .steps .current-info
+{
+    position: absolute;
+    left: -999em;
+}
+
+.wizard > .content > .title,
+.tabcontrol > .content > .title
+{
+    position: absolute;
+    left: -999em;
+}
+
+
+
+/*
+    Wizard
+*/
+
+.wizard > .steps
+{
+    position: relative;
+    display: block;
+    width: 100%;
+}
+
+.wizard.vertical > .steps
+{
+    display: inline;
+    float: left;
+    width: 30%;
+}
+
+.wizard > .steps .number
+{
+    font-size: 1.429em;
+}
+
+.wizard > .steps > ul > li
+{
+    width: 25%;
+}
+
+.wizard > .steps > ul > li,
+.wizard > .actions > ul > li
+{
+    float: left;
+}
+
+.wizard.vertical > .steps > ul > li
+{
+    float: none;
+    width: 100%;
+}
+
+.wizard > .steps a,
+.wizard > .steps a:hover,
+.wizard > .steps a:active
+{
+    display: block;
+    width: auto;
+    margin: 0 0.5em 0.5em;
+    padding: 1em 1em;
+    text-decoration: none;
+
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.wizard > .steps .disabled a,
+.wizard > .steps .disabled a:hover,
+.wizard > .steps .disabled a:active
+{
+    background: #eee;
+    color: #aaa;
+    cursor: default;
+}
+
+.wizard > .steps .current a,
+.wizard > .steps .current a:hover,
+.wizard > .steps .current a:active
+{
+    background: #2184be;
+    color: #fff;
+    cursor: default;
+}
+
+.wizard > .steps .done a,
+.wizard > .steps .done a:hover,
+.wizard > .steps .done a:active
+{
+    background: #9dc8e2;
+    color: #fff;
+}
+
+.wizard > .steps .error a,
+.wizard > .steps .error a:hover,
+.wizard > .steps .error a:active
+{
+    background: #ff3111;
+    color: #fff;
+}
+
+.wizard > .content
+{
+    background: #eee;
+    display: block;
+    margin: 0.5em;
+    min-height: 35em;
+    overflow: hidden;
+    position: relative;
+    width: auto;
+
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.wizard.vertical > .content
+{
+    display: inline;
+    float: left;
+    margin: 0 2.5% 0.5em 2.5%;
+    width: 65%;
+}
+
+.wizard > .content > .body
+{
+    float: left;
+    position: absolute;
+    width: 95%;
+    height: 95%;
+    padding: 2.5%;
+}
+
+.wizard > .content > .body ul
+{
+    list-style: disc !important;
+}
+
+.wizard > .content > .body ul > li
+{
+    display: list-item;
+}
+
+.wizard > .content > .body > iframe
+{
+    border: 0 none;
+    width: 100%;
+    height: 100%;
+}
+
+.wizard > .content > .body input
+{
+    display: block;
+    border: 1px solid #ccc;
+}
+
+.wizard > .content > .body input[type="checkbox"]
+{
+    display: inline-block;
+}
+
+.wizard > .content > .body input.error
+{
+    background: rgb(251, 227, 228);
+    border: 1px solid #fbc2c4;
+    color: #8a1f11;
+}
+
+.wizard > .content > .body label
+{
+    display: inline-block;
+    margin-bottom: 0.5em;
+}
+
+.wizard > .content > .body label.error
+{
+    color: #8a1f11;
+    display: inline-block;
+    margin-left: 1.5em;
+}
+
+.wizard > .actions
+{
+    position: relative;
+    display: block;
+    text-align: right;
+    width: 100%;
+}
+
+.wizard.vertical > .actions
+{
+    display: inline;
+    float: right;
+    margin: 0 2.5%;
+    width: 95%;
+}
+
+.wizard > .actions > ul
+{
+    display: inline-block;
+    text-align: right;
+}
+
+.wizard > .actions > ul > li
+{
+    margin: 0 0.5em;
+}
+
+.wizard.vertical > .actions > ul > li
+{
+    margin: 0 0 0 1em;
+}
+
+.wizard > .actions a,
+.wizard > .actions a:hover,
+.wizard > .actions a:active
+{
+    background: #2184be;
+    color: #fff;
+    display: block;
+    padding: 0.5em 1em;
+    text-decoration: none;
+
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.wizard > .actions .disabled a,
+.wizard > .actions .disabled a:hover,
+.wizard > .actions .disabled a:active
+{
+    background: #eee;
+    color: #aaa;
+}
+
+.wizard > .loading
+{
+}
+
+.wizard > .loading .spinner
+{
+}
+
+
+
+/*
+    Tabcontrol
+*/
+
+.tabcontrol > .steps
+{
+    position: relative;
+    display: block;
+    width: 100%;
+}
+
+.tabcontrol > .steps > ul
+{
+    position: relative;
+    margin: 6px 0 0 0;
+    top: 1px;
+    z-index: 1;
+}
+
+.tabcontrol > .steps > ul > li
+{
+    float: left;
+    margin: 5px 2px 0 0;
+    padding: 1px;
+
+    -webkit-border-top-left-radius: 5px;
+    -webkit-border-top-right-radius: 5px;
+    -moz-border-radius-topleft: 5px;
+    -moz-border-radius-topright: 5px;
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+}
+
+.tabcontrol > .steps > ul > li:hover
+{
+    background: #edecec;
+    border: 1px solid #bbb;
+    padding: 0;
+}
+
+.tabcontrol > .steps > ul > li.current
+{
+    background: #fff;
+    border: 1px solid #bbb;
+    border-bottom: 0 none;
+    padding: 0 0 1px 0;
+    margin-top: 0;
+}
+
+.tabcontrol > .steps > ul > li > a
+{
+    color: #5f5f5f;
+    display: inline-block;
+    border: 0 none;
+    margin: 0;
+    padding: 10px 30px;
+    text-decoration: none;
+}
+
+.tabcontrol > .steps > ul > li > a:hover
+{
+    text-decoration: none;
+}
+
+.tabcontrol > .steps > ul > li.current > a
+{
+    padding: 15px 30px 10px 30px;
+}
+
+.tabcontrol > .content
+{
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: 35em;
+    overflow: hidden;
+    border-top: 1px solid #bbb;
+    padding-top: 20px;
+}
+
+.tabcontrol > .content > .body
+{
+    float: left;
+    position: absolute;
+    width: 95%;
+    height: 95%;
+    padding: 2.5%;
+}
+
+.tabcontrol > .content > .body ul
+{
+    list-style: disc !important;
+}
+
+.tabcontrol > .content > .body ul > li
+{
+    display: list-item;
+}
 \ No newline at end of file
	@@ -0,0 +1,93 @@		@@ -0,0 +1,93 @@
		1	+$(function () {
		2	+ $("#vlibras-wizard").steps({
		3	+ headerTag: "h2",
		4	+ bodyTag: "section",
		5	+ transitionEffect: "slideLeft",
		6	+ stepsOrientation: "horizontal",
		7	+ enablePagination: true,
		8	+ forceMoveForward: true,
		9	+
		10	+ onStepChanging: stepValidation,
		11	+ onStepChanged: stepChanged,
		12	+ onFinished: finished,
		13	+
		14	+ labels: {
		15	+ cancel: "Cancelar",
		16	+ current: "etapa atual:",
		17	+ pagination: "Pagination",
		18	+ finish: "Finalizar",
		19	+ next: "Próximo",
		20	+ previous: "Anterior",
		21	+ loading: "Carregando ..."
		22	+ }
		23	+ });
		24	+
		25	+ function stepChanged(event, currentIndex, priorIndex) {
		26	+ var totalSteps = $("#vlibras-wizard .content section").size();
		27	+
		28	+ if ((currentIndex + 1) === totalSteps) {
		29	+ $("#btn-next").text("Finalizar");
		30	+ } else {
		31	+ $("#btn-next").text("Próximo");
		32	+ }
		33	+
		34	+ deactivateNextButton();
		35	+ }
		36	+
		37	+ function finished(event, currentIndex) {
		38	+ $("#vlibras-form").submit();
		39	+ }
		40	+
		41	+ function stepValidation(event, currentIndex, newIndex) {
		42	+ return true;
		43	+ }
		44	+
		45	+ $('#menu #btn-next').click(function() {
		46	+ // Number of steps
		47	+ var totalSteps = $("#vlibras-wizard .content section").size();
		48	+ var currentStep = $("#vlibras-wizard").steps('getCurrentIndex');
		49	+
		50	+ if ((currentStep + 1) === totalSteps) {
		51	+ $("#vlibras-wizard").steps('finish');
		52	+ } else {
		53	+ $("#vlibras-wizard").steps('next');
		54	+ }
		55	+ });
		56	+
		57	+ function activateNextButton() {
		58	+ $("#btn-next").prop('disabled', false);
		59	+ }
		60	+
		61	+ function deactivateNextButton() {
		62	+ $("#btn-next").prop('disabled', true);
		63	+ }
		64	+
		65	+
		66	+
		67	+ /*
		68	+ * Validates video and subtitle extension and activate the next button
		69	+ */
		70	+ $("#vlibras-wizard #subtitle-upload").change(function() {
		71	+ var acceptedFileTypes = ["srt"];
		72	+ validateFileWizard($(this), acceptedFileTypes);
		73	+ });
		74	+
		75	+ $("#vlibras-wizard #video-upload").change(function() {
		76	+ var acceptedFileTypes = ["flv", "ts", "avi", "mp4", "mov", "webm", "wmv", "mkv"];
		77	+ validateFileWizard($(this), acceptedFileTypes);
		78	+ });
		79	+
		80	+ function validateFileWizard(input, acceptedFileTypes) {
		81	+ var isValidFile = checkType(input, acceptedFileTypes);
		82	+
		83	+ if (isValidFile) {
		84	+ activateNextButton();
		85	+ } else {
		86	+ deactivateNextButton();
		87	+ input.val(null);
		88	+ alert("Apenas os formatos abaixo são aceitos:\n\n" + acceptedFileTypes.join(", "));
		89	+ }
		90	+
		91	+ return true;
		92	+ }
		93	+});
0	\ No newline at end of file	94	\ No newline at end of file
	@@ -17,4 +17,32 @@ $(function() {		@@ -17,4 +17,32 @@ $(function() {
17	if ($("#service-video")[0].checked) {	17	if ($("#service-video")[0].checked) {
18	$("#service-video").click();	18	$("#service-video").click();
19	}	19	}
20	-});
21	\ No newline at end of file	20	\ No newline at end of file
		21	+});
		22	+
		23	+
		24	+/*
		25	+ * File type verification
		26	+ */
		27	+
		28	+$(function() {
		29	+ $("#subtitle-upload").change(function() {
		30	+ var acceptedFileTypes = ["srt"];
		31	+ validateFile($(this), acceptedFileTypes);
		32	+ });
		33	+
		34	+ $("#video-upload").change(function() {
		35	+ var acceptedFileTypes = ["flv", "ts", "avi", "mp4", "mov", "webm", "wmv", "mkv"];
		36	+ validateFile($(this), acceptedFileTypes);
		37	+ });
		38	+
		39	+ function validateFile(input, acceptedFileTypes) {
		40	+ var isValidFile = checkType(input, acceptedFileTypes);
		41	+
		42	+ if (!isValidFile) {
		43	+ input.val(null);
		44	+ alert("Apenas os formatos abaixo são aceitos:\n\n" + acceptedFileTypes.join(", "));
		45	+ }
		46	+
		47	+ return true;
		48	+ }
		49	+});
	@@ -0,0 +1,13 @@		@@ -0,0 +1,13 @@
		1	+function checkType(file, acceptedFileTypes) {
		2	+ var ext = file.val().split('.').pop().toLowerCase();
		3	+ var isValidFile = false;
		4	+
		5	+ for (var i = 0; i < acceptedFileTypes.length; i++) {
		6	+ if (ext == acceptedFileTypes[i]) {
		7	+ isValidFile = true;
		8	+ break;
		9	+ }
		10	+ }
		11	+
		12	+ return isValidFile;
		13	+}
0	\ No newline at end of file	14	\ No newline at end of file
	@@ -41,10 +41,4 @@		@@ -41,10 +41,4 @@
41	color:#BBB;	41	color:#BBB;
42	text-shadow: 1px 1px #AAA;	42	text-shadow: 1px 1px #AAA;
43	}	43	}
44	-}
45	-
46	-@media (max-width: 980px) {
47	- .dropdown ul.dropdown-menu {
48	- display: block;
49	- }
50	}	44	}
51	\ No newline at end of file	45	\ No newline at end of file
		1	+.container-fluid {
		2	+ max-width: 1024px;
		3	+ margin: auto;
		4	+}
		5	+
		6	+
1	.breadcrumb {	7	.breadcrumb {
2	padding: 7px 14px;	8	padding: 7px 14px;
3	margin: 0 0 18px;	9	margin: 0 0 18px;
	@@ -45,8 +51,16 @@		@@ -45,8 +51,16 @@
45	color: #333333;	51	color: #333333;
46	}	52	}
47		53
		54	+
		55	+/* Fix menu */
48	@media (max-width: 767px) {	56	@media (max-width: 767px) {
49	.nav-collapse.user-menu {	57	.nav-collapse.user-menu {
50	float: left;	58	float: left;
51	}	59	}
		60	+}
		61	+
		62	+@media (max-width: 980px) {
		63	+ .dropdown ul.dropdown-menu {
		64	+ display: block;
		65	+ }
52	}	66	}
53	\ No newline at end of file	67	\ No newline at end of file
	@@ -0,0 +1,5 @@		@@ -0,0 +1,5 @@
		1	+#vlibras-wizard {
		2	+ .actions {
		3	+ display: none;
		4	+ }
		5	+}
0	\ No newline at end of file	6	\ No newline at end of file
1	-%h1 Home
2	\ No newline at end of file	1	\ No newline at end of file
		2	+.breadcrumb
		3	+ %h1 Menu
3	\ No newline at end of file	4	\ No newline at end of file
@@ -0,0 +1,57 @@		@@ -0,0 +1,57 @@
	1	+- content_for :js do
	2	+ = javascript_include_tag "jquery.steps.js"
	3	+ = javascript_include_tag "v_libras/requests/shared"
	4	+ = javascript_include_tag "v_libras/requests/new"
	5	+
	6	+- content_for :css do
	7	+ = stylesheet_link_tag "jquery.steps.css"
	8	+ = stylesheet_link_tag "v_libras/requests"
	9	+
	10	+.breadcrumb
	11	+ %h3 Novo vídeo
	12	+
	13	+= form_tag v_libras_requests_path, method: :post, :multipart => true, :id => 'vlibras-form' do \|f\|
	14	+ .content.row-fluid
	15	+ #vlibras-wizard
	16	+ %h2 Vídeo
	17	+ %section
	18	+ %p
	19	+ instruções + upload do arquivo de vído
	20	+ só libera o botão quando o video for escolhido
	21	+
	22	+ = html5_video_tag("/video.mp4", 'id', 'video-wizard', :autoplay => 'autoplay')
	23	+
	24	+ .span4
	25	+ = file_field_tag 'video', :id => 'video-upload'
	26	+
	27	+ %h2 Áudio ou Legenda
	28	+ %section
	29	+ %p
	30	+ escolha se é audio ou legenda
	31	+ se for legenda, mostra o input file e quando arquivo for selecionado, libera o botão de avançar
	32	+
	33	+ .span4
	34	+ = file_field_tag 'subtitle', :id => 'subtitle-upload'
	35	+ %h2 Posição
	36	+ %section
	37	+ %p
	38	+ asd
	39	+
	40	+ %h2 Tamanho
	41	+ %section
	42	+ %p
	43	+ botão de
	44	+
	45	+ #menu.center
	46	+ = button_tag 'Próximo', :class => "btn btn-large btn-success", :id => 'btn-next', :disabled => true
	47	+
	48	+.row-fluid
	49	+ #step-service
	50	+
	51	+ #step-video-upload
	52	+
	53	+ #step-subtitle-upload
	54	+
	55	+ #step-size
	56	+
	57	+ #step-position
		1	+Rails.application.config.assets.precompile += %w( v_libras/requests/shared.js )
1	Rails.application.config.assets.precompile += %w( v_libras/requests/rapid.js )	2	Rails.application.config.assets.precompile += %w( v_libras/requests/rapid.js )
2	-Rails.application.config.assets.precompile += %w( v_libras/videos/index.js )
3	\ No newline at end of file	3	\ No newline at end of file
		4	+Rails.application.config.assets.precompile += %w( v_libras/requests/new.js )
		5	+Rails.application.config.assets.precompile += %w( v_libras/videos/index.js )
		6	+Rails.application.config.assets.precompile += %w( jquery.steps.js )
		7	+
		8	+Rails.application.config.assets.precompile += %w( v_libras/requests.css )
		9	+Rails.application.config.assets.precompile += %w( jquery.steps.css )
4	\ No newline at end of file	10	\ No newline at end of file
	@@ -0,0 +1,382 @@		@@ -0,0 +1,382 @@
		1	+/*
		2	+ Common
		3	+*/
		4	+
		5	+.wizard,
		6	+.tabcontrol
		7	+{
		8	+ display: block;
		9	+ width: 100%;
		10	+ overflow: hidden;
		11	+}
		12	+
		13	+.wizard a,
		14	+.tabcontrol a
		15	+{
		16	+ outline: 0;
		17	+}
		18	+
		19	+.wizard ul,
		20	+.tabcontrol ul
		21	+{
		22	+ list-style: none !important;
		23	+ padding: 0;
		24	+ margin: 0;
		25	+}
		26	+
		27	+.wizard ul > li,
		28	+.tabcontrol ul > li
		29	+{
		30	+ display: block;
		31	+ padding: 0;
		32	+}
		33	+
		34	+/* Accessibility */
		35	+.wizard > .steps .current-info,
		36	+.tabcontrol > .steps .current-info
		37	+{
		38	+ position: absolute;
		39	+ left: -999em;
		40	+}
		41	+
		42	+.wizard > .content > .title,
		43	+.tabcontrol > .content > .title
		44	+{
		45	+ position: absolute;
		46	+ left: -999em;
		47	+}
		48	+
		49	+
		50	+
		51	+/*
		52	+ Wizard
		53	+*/
		54	+
		55	+.wizard > .steps
		56	+{
		57	+ position: relative;
		58	+ display: block;
		59	+ width: 100%;
		60	+}
		61	+
		62	+.wizard.vertical > .steps
		63	+{
		64	+ display: inline;
		65	+ float: left;
		66	+ width: 30%;
		67	+}
		68	+
		69	+.wizard > .steps .number
		70	+{
		71	+ font-size: 1.429em;
		72	+}
		73	+
		74	+.wizard > .steps > ul > li
		75	+{
		76	+ width: 25%;
		77	+}
		78	+
		79	+.wizard > .steps > ul > li,
		80	+.wizard > .actions > ul > li
		81	+{
		82	+ float: left;
		83	+}
		84	+
		85	+.wizard.vertical > .steps > ul > li
		86	+{
		87	+ float: none;
		88	+ width: 100%;
		89	+}
		90	+
		91	+.wizard > .steps a,
		92	+.wizard > .steps a:hover,
		93	+.wizard > .steps a:active
		94	+{
		95	+ display: block;
		96	+ width: auto;
		97	+ margin: 0 0.5em 0.5em;
		98	+ padding: 1em 1em;
		99	+ text-decoration: none;
		100	+
		101	+ -webkit-border-radius: 5px;
		102	+ -moz-border-radius: 5px;
		103	+ border-radius: 5px;
		104	+}
		105	+
		106	+.wizard > .steps .disabled a,
		107	+.wizard > .steps .disabled a:hover,
		108	+.wizard > .steps .disabled a:active
		109	+{
		110	+ background: #eee;
		111	+ color: #aaa;
		112	+ cursor: default;
		113	+}
		114	+
		115	+.wizard > .steps .current a,
		116	+.wizard > .steps .current a:hover,
		117	+.wizard > .steps .current a:active
		118	+{
		119	+ background: #2184be;
		120	+ color: #fff;
		121	+ cursor: default;
		122	+}
		123	+
		124	+.wizard > .steps .done a,
		125	+.wizard > .steps .done a:hover,
		126	+.wizard > .steps .done a:active
		127	+{
		128	+ background: #9dc8e2;
		129	+ color: #fff;
		130	+}
		131	+
		132	+.wizard > .steps .error a,
		133	+.wizard > .steps .error a:hover,
		134	+.wizard > .steps .error a:active
		135	+{
		136	+ background: #ff3111;
		137	+ color: #fff;
		138	+}
		139	+
		140	+.wizard > .content
		141	+{
		142	+ background: #eee;
		143	+ display: block;
		144	+ margin: 0.5em;
		145	+ min-height: 35em;
		146	+ overflow: hidden;
		147	+ position: relative;
		148	+ width: auto;
		149	+
		150	+ -webkit-border-radius: 5px;
		151	+ -moz-border-radius: 5px;
		152	+ border-radius: 5px;
		153	+}
		154	+
		155	+.wizard.vertical > .content
		156	+{
		157	+ display: inline;
		158	+ float: left;
		159	+ margin: 0 2.5% 0.5em 2.5%;
		160	+ width: 65%;
		161	+}
		162	+
		163	+.wizard > .content > .body
		164	+{
		165	+ float: left;
		166	+ position: absolute;
		167	+ width: 95%;
		168	+ height: 95%;
		169	+ padding: 2.5%;
		170	+}
		171	+
		172	+.wizard > .content > .body ul
		173	+{
		174	+ list-style: disc !important;
		175	+}
		176	+
		177	+.wizard > .content > .body ul > li
		178	+{
		179	+ display: list-item;
		180	+}
		181	+
		182	+.wizard > .content > .body > iframe
		183	+{
		184	+ border: 0 none;
		185	+ width: 100%;
		186	+ height: 100%;
		187	+}
		188	+
		189	+.wizard > .content > .body input
		190	+{
		191	+ display: block;
		192	+ border: 1px solid #ccc;
		193	+}
		194	+
		195	+.wizard > .content > .body input[type="checkbox"]
		196	+{
		197	+ display: inline-block;
		198	+}
		199	+
		200	+.wizard > .content > .body input.error
		201	+{
		202	+ background: rgb(251, 227, 228);
		203	+ border: 1px solid #fbc2c4;
		204	+ color: #8a1f11;
		205	+}
		206	+
		207	+.wizard > .content > .body label
		208	+{
		209	+ display: inline-block;
		210	+ margin-bottom: 0.5em;
		211	+}
		212	+
		213	+.wizard > .content > .body label.error
		214	+{
		215	+ color: #8a1f11;
		216	+ display: inline-block;
		217	+ margin-left: 1.5em;
		218	+}
		219	+
		220	+.wizard > .actions
		221	+{
		222	+ position: relative;
		223	+ display: block;
		224	+ text-align: right;
		225	+ width: 100%;
		226	+}
		227	+
		228	+.wizard.vertical > .actions
		229	+{
		230	+ display: inline;
		231	+ float: right;
		232	+ margin: 0 2.5%;
		233	+ width: 95%;
		234	+}
		235	+
		236	+.wizard > .actions > ul
		237	+{
		238	+ display: inline-block;
		239	+ text-align: right;
		240	+}
		241	+
		242	+.wizard > .actions > ul > li
		243	+{
		244	+ margin: 0 0.5em;
		245	+}
		246	+
		247	+.wizard.vertical > .actions > ul > li
		248	+{
		249	+ margin: 0 0 0 1em;
		250	+}
		251	+
		252	+.wizard > .actions a,
		253	+.wizard > .actions a:hover,
		254	+.wizard > .actions a:active
		255	+{
		256	+ background: #2184be;
		257	+ color: #fff;
		258	+ display: block;
		259	+ padding: 0.5em 1em;
		260	+ text-decoration: none;
		261	+
		262	+ -webkit-border-radius: 5px;
		263	+ -moz-border-radius: 5px;
		264	+ border-radius: 5px;
		265	+}
		266	+
		267	+.wizard > .actions .disabled a,
		268	+.wizard > .actions .disabled a:hover,
		269	+.wizard > .actions .disabled a:active
		270	+{
		271	+ background: #eee;
		272	+ color: #aaa;
		273	+}
		274	+
		275	+.wizard > .loading
		276	+{
		277	+}
		278	+
		279	+.wizard > .loading .spinner
		280	+{
		281	+}
		282	+
		283	+
		284	+
		285	+/*
		286	+ Tabcontrol
		287	+*/
		288	+
		289	+.tabcontrol > .steps
		290	+{
		291	+ position: relative;
		292	+ display: block;
		293	+ width: 100%;
		294	+}
		295	+
		296	+.tabcontrol > .steps > ul
		297	+{
		298	+ position: relative;
		299	+ margin: 6px 0 0 0;
		300	+ top: 1px;
		301	+ z-index: 1;
		302	+}
		303	+
		304	+.tabcontrol > .steps > ul > li
		305	+{
		306	+ float: left;
		307	+ margin: 5px 2px 0 0;
		308	+ padding: 1px;
		309	+
		310	+ -webkit-border-top-left-radius: 5px;
		311	+ -webkit-border-top-right-radius: 5px;
		312	+ -moz-border-radius-topleft: 5px;
		313	+ -moz-border-radius-topright: 5px;
		314	+ border-top-left-radius: 5px;
		315	+ border-top-right-radius: 5px;
		316	+}
		317	+
		318	+.tabcontrol > .steps > ul > li:hover
		319	+{
		320	+ background: #edecec;
		321	+ border: 1px solid #bbb;
		322	+ padding: 0;
		323	+}
		324	+
		325	+.tabcontrol > .steps > ul > li.current
		326	+{
		327	+ background: #fff;
		328	+ border: 1px solid #bbb;
		329	+ border-bottom: 0 none;
		330	+ padding: 0 0 1px 0;
		331	+ margin-top: 0;
		332	+}
		333	+
		334	+.tabcontrol > .steps > ul > li > a
		335	+{
		336	+ color: #5f5f5f;
		337	+ display: inline-block;
		338	+ border: 0 none;
		339	+ margin: 0;
		340	+ padding: 10px 30px;
		341	+ text-decoration: none;
		342	+}
		343	+
		344	+.tabcontrol > .steps > ul > li > a:hover
		345	+{
		346	+ text-decoration: none;
		347	+}
		348	+
		349	+.tabcontrol > .steps > ul > li.current > a
		350	+{
		351	+ padding: 15px 30px 10px 30px;
		352	+}
		353	+
		354	+.tabcontrol > .content
		355	+{
		356	+ position: relative;
		357	+ display: inline-block;
		358	+ width: 100%;
		359	+ height: 35em;
		360	+ overflow: hidden;
		361	+ border-top: 1px solid #bbb;
		362	+ padding-top: 20px;
		363	+}
		364	+
		365	+.tabcontrol > .content > .body
		366	+{
		367	+ float: left;
		368	+ position: absolute;
		369	+ width: 95%;
		370	+ height: 95%;
		371	+ padding: 2.5%;
		372	+}
		373	+
		374	+.tabcontrol > .content > .body ul
		375	+{
		376	+ list-style: disc !important;
		377	+}
		378	+
		379	+.tabcontrol > .content > .body ul > li
		380	+{
		381	+ display: list-item;
		382	+}
0	\ No newline at end of file	383	\ No newline at end of file