diff --git a/app/assets/javascripts/projects/index.js.erb b/app/assets/javascripts/projects/index.js.erb
index 9aa7f8e01..14505d2e6 100644
--- a/app/assets/javascripts/projects/index.js.erb
+++ b/app/assets/javascripts/projects/index.js.erb
@@ -17,7 +17,7 @@
 
   var editProjectModal = null;
   var editProjectModalTitle = null;
-  var editProjectModalForm = null;
+  var editProjectModalBody = null;
   var editProjectBtn = null;
 
   var manageUsersModal = null;
@@ -39,6 +39,73 @@
     .prop("checked", true);
   }
 
+  /**
+   * Initializes page
+   */
+  function init() {
+    newProjectModal = $('#new-project-modal');
+    newProjectModalForm = newProjectModal.find('form');
+    newProjectModalBody = newProjectModal.find('.modal-body');
+    newProjectBtn = $('#new-project-btn');
+
+    editProjectModal = $('#edit-project-modal');
+    editProjectModalTitle = editProjectModal.find('#edit-project-modal-label');
+    editProjectModalBody = editProjectModal.find('.modal-body');
+    editProjectBtn = editProjectModal.find(".btn[data-action='submit']");
+
+    manageUsersModal = $('#manage-users-modal');
+    manageUsersModalBody = manageUsersModal.find('.modal-body');
+    manageUsersModalFooter = manageUsersModal.find('.modal-footer');
+
+    initNewProjectModal();
+    initEditProjectModal();
+    initManageUsersModal();
+    Comments.initCommentOptions('ul.content-comments', true);
+    Comments.initEditComments('.panel-project .tab-content');
+    Comments.initDeleteComments('.panel-project .tab-content');
+
+    // initialize project tab remote loading
+    $('.panel-project .panel-footer [role=tab]')
+
+      .on('ajax:before', function(e) {
+        var $this = $(this);
+        var parentNode = $this.parents('li');
+        var targetId = $this.attr('aria-controls');
+
+        if (parentNode.hasClass('active')) {
+          // TODO move to fn
+          parentNode.removeClass('active');
+          $('#' + targetId).removeClass('active');
+          return false;
+        }
+      })
+
+      .on('ajax:success', function(e, data, status, xhr) {
+        var $this = $(this);
+        var targetId = $this.attr('aria-controls');
+        var target = $('#' + targetId);
+        var parentNode = $this.parents('ul').parent();
+
+        target.html(data.html);
+        initUsersEditLink(parentNode);
+        Comments.form(parentNode);
+        Comments.moreComments(parentNode);
+
+        // TODO move to fn
+        parentNode.find('.active').removeClass('active');
+        $this.parents('li').addClass('active');
+        target.addClass('active');
+
+        Comments.scrollBottom(parentNode);
+      })
+
+      .on('ajax:error', function() {
+        // TODO
+      });
+
+    initTutorial();
+  }
+
   /**
    * Initialize the JS for new project modal to work.
    */
@@ -265,70 +332,10 @@
     initUserRoleForms();
   }
 
-  function init() {
-
-    newProjectModal = $("#new-project-modal");
-    newProjectModalForm = newProjectModal.find("form");
-    newProjectModalBody = newProjectModal.find(".modal-body");
-    newProjectBtn = $("#new-project-btn");
-
-    editProjectModal = $("#edit-project-modal");
-    editProjectModalTitle = editProjectModal.find("#edit-project-modal-label");
-    editProjectModalBody = editProjectModal.find(".modal-body");
-    editProjectBtn = editProjectModal.find(".btn[data-action='submit']");
-
-    manageUsersModal = $("#manage-users-modal");
-    manageUsersModalBody = manageUsersModal.find(".modal-body");
-    manageUsersModalFooter = manageUsersModal.find(".modal-footer");
-
-    initNewProjectModal();
-    initEditProjectModal();
-    initManageUsersModal();
-    Comments.initCommentOptions("ul.content-comments", true);
-    Comments.initEditComments(".panel-project .tab-content");
-    Comments.initDeleteComments(".panel-project .tab-content");
-
-    // initialize project tab remote loading
-    $(".panel-project .panel-footer [role=tab]")
-
-      .on("ajax:before", function (e) {
-        var $this = $(this);
-        var parentNode = $this.parents("li");
-        var targetId = $this.attr("aria-controls");
-
-        if (parentNode.hasClass("active")) {
-          // TODO move to fn
-          parentNode.removeClass("active");
-          $("#" + targetId).removeClass("active");
-          return false;
-        }
-      })
-
-      .on("ajax:success", function (e, data, status, xhr) {
-
-        var $this = $(this);
-        var targetId = $this.attr("aria-controls");
-        var target = $("#" + targetId);
-        var parentNode = $this.parents("ul").parent();
-
-        target.html(data.html);
-        initUsersEditLink(parentNode);
-        Comments.form(parentNode);
-        Comments.moreComments(parentNode);
-
-        // TODO move to fn
-        parentNode.find(".active").removeClass("active");
-        $this.parents("li").addClass("active");
-        target.addClass("active");
-
-        Comments.scrollBottom(parentNode);
-      })
-
-      .on("ajax:error", function (e, xhr, status, error) {
-        // TODO
-      });
-
-    // Initialize first-time tutorial
+  /**
+   * Initializes tutorial
+   */
+  function initTutorial() {
     var tutorialData = Cookies.get('tutorial_data');
     if (tutorialData) {
       tutorialData = JSON.parse(tutorialData);
@@ -341,40 +348,15 @@
       }
 
       if (stepNum < 4) {
-        var projectOptionsTutorial =
-          $('#projects-toolbar')
-            .attr('data-project-options-step-text');
-        demoProject.attr('data-step', '3');
-        demoProject.attr('data-intro', projectOptionsTutorial);
-        demoProject.attr('data-tooltipClass', 'custom next-page-link');
-
-        if (demoProject.offset().top > window.innerHeight / 2) {
-          demoProject.attr('data-position', 'top');
-        } // Otherwise show bottom
-
-        introJs()
-          .setOptions({
-            overlayOpacity: '0.2',
-            hidePrev: true, // Doesn't work, so it's handled in css
-            prevLabel: 'Back',
-            nextLabel: 'Next',
-            doneLabel: 'End tutorial',
-            skipLabel: 'End tutorial',
-            showBullets: false,
-            showStepNumbers: false,
-            exitOnOverlayClick: false,
-            exitOnEsc: false,
-            disableInteraction: true,
-            tooltipClass: 'custom',
-            tooltipPosition: 'right'
-          })
-          .goToStep(stepNum)
-          .start();
+        var nextPage =
+          $('#' + demoProjectId + '-project-canvas-link').attr('href');
+        initPageTutorialSteps(1, 3, nextPage, tutorialBeforeCb,
+                              tutorialAfterCb);
       }
       else if (stepNum > 18) {
         var archiveProjectTutorial = $("#projects-toolbar").attr("data-archive-project-step-text");
         var goodbye_message = $("#projects-toolbar").attr("data-goodbye-tutorial");
-        stepNum = 20;
+        Cookies.set('current_tutorial_step', 20);
         var position = "right";
         if (demoProject.offset().left > window.innerWidth / 2 || window.innerWidth < demoProject.width() + 100) {
           if (demoProject.offset().top > 500 && demoProject.offset().top > window.innerHeight / 2) {
@@ -408,73 +390,50 @@
           })
           .start();
       }
-
-      // Page navigation when coming to this page from previous/next page
-      $(function() {
-        if (stepNum === 3) {
-          $('.introjs-nextbutton').removeClass('introjs-disabled');
-        }
-      });
-
-      // Page navigation when already on this page
-      $('.introjs-skipbutton').click(function() {
-        restore_after_tutorial();
-      });
-      $('.introjs-prevbutton').click(function() {
-        if (stepNum > 1) {
-          Cookies.set('current_tutorial_step', --stepNum);
-        }
-      });
-      $('.introjs-nextbutton').click(function() {
-        Cookies.set('current_tutorial_step', ++stepNum);
-
-        if (stepNum === 3) {
-          $('.introjs-nextbutton').removeClass('introjs-disabled');
-        } else if (stepNum > 3) {
-          // Going to next page
-
-          var prevPage = window.location.pathname;
-          tutorialData[0].previousPage = prevPage;
-          Cookies.set('tutorial_data', tutorialData);
-
-          var nextPage =
-            $('#' + demoProjectId + '-project-canvas-link')
-              .attr('href');
-          $('.introjs-nextbutton').attr('href', nextPage);
-        }
-      });
     }
   }
 
-  function project_tutorial_helper(){
-    $(document).ready(function(){
-      if( $('div').hasClass('introjs-overlay')){
-        $.each($('.panel'), function(i, el){
-          $(el)
-          .find('.panel-title')
-          .css({ 'pointer-events': 'none' });
-          $(el)
-          .find('.tab-content')
-          .css({ 'pointer-events': 'none' });
-          $(el)
-          .find('.form-submit-link')
-          .css({
-            'pointer-events': 'none',
-            'color': '<%= Constants::COLOR_ALTO %>'});
-          $(el)
-          .find('[data-action="edit"]')
-          .css({
-            'pointer-events': 'none',
-            'color': '<%= Constants::COLOR_ALTO %>'});
-        });
-      }
+  /**
+   * Callback to be executed before tutorial sterts
+   */
+  function tutorialBeforeCb() {
+    var tutorialData = JSON.parse(Cookies.get('tutorial_data'));
+    var projectOptionsTutorial =
+      $('#projects-toolbar').attr('data-project-options-step-text');
+    var demoProjectId = tutorialData[0].project;
+    var demoProject = $('#' + demoProjectId);
+    demoProject.attr('data-step', '3');
+    demoProject.attr('data-intro', projectOptionsTutorial);
+    demoProject.attr('data-tooltipClass', 'custom next-page-link');
+
+    if (demoProject.offset().top > window.innerHeight / 2) {
+      demoProject.attr('data-position', 'top');
+    } // Otherwise show bottom
+
+    $.each($('.panel'), function(i, el){
+      $(el)
+      .find('.panel-title')
+      .css({ 'pointer-events': 'none' });
+      $(el)
+      .find('.tab-content')
+      .css({ 'pointer-events': 'none' });
+      $(el)
+      .find('.form-submit-link')
+      .css({
+        'pointer-events': 'none',
+        'color': '<%= Constants::COLOR_ALTO %>'});
+      $(el)
+      .find('[data-action="edit"]')
+      .css({
+        'pointer-events': 'none',
+        'color': '<%= Constants::COLOR_ALTO %>'});
     });
   }
 
-  function restore_after_tutorial() {
-    Cookies.remove('tutorial_data');
-    Cookies.remove('current_tutorial_step');
-
+  /**
+   * Callback to be executed after tutorial exits
+   */
+  function tutorialAfterCb() {
     $.each($('.panel'), function(i, el){
       $(el)
       .find('.tab-content')
@@ -496,6 +455,4 @@
   }
 
   init();
-  project_tutorial_helper();
-
 }());
diff --git a/app/assets/javascripts/projects/show.js b/app/assets/javascripts/projects/show.js
index 5e408158e..d1a844b52 100644
--- a/app/assets/javascripts/projects/show.js
+++ b/app/assets/javascripts/projects/show.js
@@ -7,6 +7,8 @@
       that.find(".workflowimg-container").hide();
       initProjectExperiment(that);
     });
+
+    initTutorial();
   }
 
   function initProjectExperiment(element){
@@ -60,110 +62,35 @@
       }
     });
   }
-  // init
-  init();
-})();
 
-/* Initialize the first-time demo tutorial if needed. */
-(function() {
-  function initializeTutorial() {
-    if (showTutorial()) {
-      var stepNum = parseInt(Cookies.get('current_tutorial_step'), 10);
-
-      introJs()
-        .setOptions({
-          overlayOpacity: '0.2',
-          prevLabel: 'Back',
-          nextLabel: 'Next',
-          doneLabel: 'End tutorial',
-          skipLabel: 'End tutorial',
-          showBullets: false,
-          showStepNumbers: false,
-          exitOnOverlayClick: false,
-          exitOnEsc: false,
-          disableInteraction: true,
-          tooltipClass: 'custom next-page-link'
-        })
-        .start();
-
-      // Page navigation when coming to this page from previous/next page
-      $(function() {
-        if (stepNum === 4) {
-          $('.introjs-prevbutton').removeClass('introjs-disabled');
-        } else if (stepNum === 5) {
-          $('.introjs-nextbutton').removeClass('introjs-disabled');
-        }
-      });
-
-      // Page navigation when already on this page
-      var tutorialData = JSON.parse(Cookies.get('tutorial_data'));
-      $('.introjs-skipbutton').click(function() {
-        restore_after_tutorial();
-      });
-      $('.introjs-prevbutton').click(function() {
-        Cookies.set('current_tutorial_step', --stepNum);
-
-        if (stepNum === 4) {
-          $('.introjs-prevbutton').removeClass('introjs-disabled');
-        } else if (stepNum < 4) {
-          // Going to previous page
-          var prevPage = tutorialData[0].previousPage;
-          $('.introjs-prevbutton').attr('href', prevPage);
-        }
-      });
-      $('.introjs-nextbutton').click(function() {
-        Cookies.set('current_tutorial_step', ++stepNum);
-
-        if (stepNum === 5) {
-          $('.introjs-nextbutton').removeClass('introjs-disabled');
-        } else if (stepNum > 5) {
-          // Going to next page
-
-          var prevPage = window.location.pathname;
-          tutorialData[0].previousPage = prevPage;
-          Cookies.set('tutorial_data', tutorialData);
-
-          var nextPage = $('[data-canvas-link]').data('canvasLink');
-          $('.introjs-nextbutton').attr('href', nextPage);
-        }
-      });
-    }
+  /**
+   * Initializes tutorial
+   */
+  function initTutorial() {
+    var nextPage = $('[data-canvas-link]').data('canvasLink');
+    initPageTutorialSteps(4, 5, nextPage, tutorialBeforeCb, tutorialAfterCb);
   }
 
-  function showTutorial() {
-    var tutorialData;
-
-    if (Cookies.get('tutorial_data'))
-      tutorialData = JSON.parse(Cookies.get('tutorial_data'));
-    else
-      return false;
-    var currentStep = Cookies.get('current_tutorial_step');
-    if (currentStep < 3 || currentStep > 5)
-      return false;
-    var tutorialProjectId = tutorialData[0].project;
-    var currentProjectId = $("#data-holder").attr("data-project-id");
-
-    return tutorialProjectId == currentProjectId;
-  }
-
-  function project_tutorial_helper(){
-    $(document).ready(function(){
-      if( $('div').hasClass('introjs-overlay')){
-        $.each( $(".panel-title"), function(){
-          $(this).css({ "pointer-events": "none" });
-        });
-        $.each( $(".workflowimg-container"), function(){
-          $(this).css({ "pointer-events": "none" });
-        });
-        $.each( $(".dropdown-experiment-actions").find("li"),
-          function(){
-            $(this).css({ "pointer-events": "none" });
-        });
-      }
+  /**
+   * Callback to be executed before tutorial sterts
+   */
+  function tutorialBeforeCb() {
+    $.each( $(".panel-title"), function(){
+      $(this).css({ "pointer-events": "none" });
+    });
+    $.each( $(".workflowimg-container"), function(){
+      $(this).css({ "pointer-events": "none" });
+    });
+    $.each( $(".dropdown-experiment-actions").find("li"),
+      function(){
+        $(this).css({ "pointer-events": "none" });
     });
   }
 
-  function restore_after_tutorial(){
+  /**
+   * Callback to be executed after tutorial exits
+   */
+  function tutorialAfterCb() {
     $.each( $(".panel-title"), function(){
       $(this).css({ "pointer-events": "auto" });
     });
@@ -176,9 +103,5 @@
     });
   }
 
-  $(document).ready(function(){
-    initializeTutorial();
-    project_tutorial_helper();
-  });
-
+  init();
 })();
diff --git a/app/assets/javascripts/sitewide/utils.js b/app/assets/javascripts/sitewide/utils.js
index 79f7cb06d..1d27de40c 100644
--- a/app/assets/javascripts/sitewide/utils.js
+++ b/app/assets/javascripts/sitewide/utils.js
@@ -25,3 +25,98 @@ $.fn.onAjaxComplete = function (cb) {
 	cb();
   });
 }
+
+var TUTORIAL_STEPS_CNT = 20;
+
+/**
+ * Initializes tutorial steps for the current page
+ * @param  {number} pageFirstStep Page's first step
+ * @param  {number} pageLastStep Page's last step
+ * @param  {string} nextPagePath Next page absolute path
+ * @param {function} beforeCb Callback called before the fucntion logic
+ * @param {function} afterCb Callback called after the fucntion logic
+ */
+function initPageTutorialSteps(pageFirstStep, pageLastStep, nextPagePath,
+                               beforeCb, afterCb) {
+  var tutorialData = Cookies.get('tutorial_data');
+  if (tutorialData) {
+    tutorialData = JSON.parse(tutorialData);
+    var stepNum = parseInt(Cookies.get('current_tutorial_step'), 10);
+    if (isNaN(stepNum)) {
+      stepNum = 1;
+      Cookies.set('current_tutorial_step', stepNum);
+    }
+    beforeCb();
+
+    // Initialize tutorial for the current page's steps
+    var doneLabel = (pageLastStep === TUTORIAL_STEPS_CNT) ?
+     'Start using sciNote' : 'End tutorial';
+    introJs()
+      .setOptions({
+        overlayOpacity: '0.2',
+        prevLabel: 'Back',
+        nextLabel: 'Next',
+        skipLabel: 'End tutorial',
+        doneLabel: doneLabel,
+        showBullets: false,
+        showStepNumbers: false,
+        exitOnOverlayClick: false,
+        exitOnEsc: false,
+        disableInteraction: true,
+        tooltipClass: 'custom next-page-link'
+      })
+      .goToStep(stepNum - (pageFirstStep - 1))
+      .start();
+
+    // Page navigation when coming to this page from previous/next page
+    $(function() {
+      if (stepNum === pageFirstStep && stepNum > 1) {
+        $('.introjs-prevbutton').removeClass('introjs-disabled');
+      } else if (stepNum === pageLastStep) {
+        $('.introjs-nextbutton').removeClass('introjs-disabled');
+      }
+    });
+
+    // Page navigation when already on this page
+
+    $('.introjs-skipbutton').click(function() {
+      Cookies.remove('tutorial_data');
+      Cookies.remove('current_tutorial_step');
+
+      afterCb();
+      $('.introjs-overlay').remove();
+    });
+
+    $('.introjs-prevbutton').click(function() {
+      if (stepNum > 1) {
+        Cookies.set('current_tutorial_step', --stepNum);
+
+        if (stepNum === pageFirstStep && stepNum > 1) {
+          $('.introjs-prevbutton').removeClass('introjs-disabled');
+        } else if (stepNum < pageFirstStep) {
+          // Going to previous page
+          var prevPage = tutorialData[0].previousPage;
+          $('.introjs-prevbutton').attr('href', prevPage);
+        }
+      }
+    });
+
+    $('.introjs-nextbutton').click(function() {
+      if (stepNum < TUTORIAL_STEPS_CNT) {
+        Cookies.set('current_tutorial_step', ++stepNum);
+
+        if (stepNum === pageLastStep && stepNum < TUTORIAL_STEPS_CNT) {
+          $('.introjs-nextbutton').removeClass('introjs-disabled');
+        } else if (stepNum > pageLastStep) {
+          // Going to next page
+
+          var prevPage = window.location.pathname;
+          tutorialData[0].previousPage = prevPage;
+          Cookies.set('tutorial_data', tutorialData);
+
+          $('.introjs-nextbutton').attr('href', nextPagePath);
+        }
+      }
+    });
+  }
+}