text: 
  // Tutorial component based on bootstrap tour
  var Tutorial = {
  	template: '<div/>',
  	data: function() {
  		return {
  			l10n: {
  				stringPrevShort: '',
  				stringNextShort: '',
  				stringEndShort: '',
  				stringTutoExplainTitle: '',
  				stringTutoExplainContent: '',
  				stringTutoBookTitle: '',
  				stringTutoBookContent: '',
  				stringTutoLibraryButtonTitle: '',
  				stringTutoLibraryButtonContent: '',
  				stringTutoSettingsButtonTitle: '',
  				stringTutoSettingsButtonContent: '',
  				stringTutoFullscreenButtonTitle: '',
  				stringTutoFullscreenButtonContent: '',
  				stringTutoNextButtonTitle: '',
  				stringTutoNextButtonContent: '',
  				stringTutoPrevButtonTitle: '',
  				stringTutoPrevButtonContent: '',
  			}
  		}
  	},
  	methods: {
  		localized: function(localization) {
  			var vm = this;
  			Object.keys(this.l10n).forEach(function(key, index) {
  				vm.l10n[key] = localization.get(key.substr(6));
  			});
  		},
  
  		show: function(options) {
  			options = options || {};
  			var steps = [
  				{
  					element: "",
  					orphan: true,
  					placement: "bottom",
  					title: this.l10n.stringTutoExplainTitle,
  					content: this.l10n.stringTutoExplainContent
  				},
  				{
  					element: options.book,
  					placement: "right",
  					title: this.l10n.stringTutoBookTitle,
  					content: this.l10n.stringTutoBookContent
  				},
  				{
  					element: options.switchbutton,
  					placement: "bottom",
  					title: this.l10n.stringTutoLibraryButtonTitle,
  					content: this.l10n.stringTutoLibraryButtonContent
  				},
  				{
  					element: options.settingsbutton,
  					placement: "bottom",
  					title: this.l10n.stringTutoSettingsButtonTitle,
  					content: this.l10n.stringTutoSettingsButtonContent
  				},
  				{
  					element: options.fullscreenbutton,
  					placement: "bottom",
  					title: this.l10n.stringTutoFullscreenButtonTitle,
  					content: this.l10n.stringTutoFullscreenButtonContent
  				},
  				{
  					element: options.prevbutton,
  					placement: "right",
  					title: this.l10n.stringTutoPrevButtonTitle,
  					content: this.l10n.stringTutoPrevButtonContent
  				},
  				{
  					element: options.nextbutton,
  					placement: "left",
  					title: this.l10n.stringTutoNextButtonTitle,
  					content: this.l10n.stringTutoNextButtonContent
  				},
  			];
  			var tour = new Tour({
  				template: "\
  				<div class='popover tour'>\
  					<div class='arrow'></div>\
  					<h3 class='popover-title tutorial-title'></h3>\
  					<div class='popover-content'></div>\
  					<div class='popover-navigation'>\
  						<div class='tutorial-prev-icon tutorial-icon-button' data-role='prev'>\
  							<div class='tutorial-prev-icon1 web-activity'>\
  								<div class='tutorial-prev-icon2 web-activity-icon'></div>\
  								<div class='tutorial-prev-icon3 web-activity-disable'></div>\
  							</div>\
  							<div class='tutorial-icon-text'>"+this.l10n.stringPrevShort+"</div>\
  						</div>\
  						<span data-role='separator'>|</span>\
  						<div class='tutorial-next-icon tutorial-icon-button' data-role='next'>\
  							<div class='tutorial-next-icon1 web-activity'>\
  								<div class='tutorial-next-icon2 web-activity-icon'></div>\
  								<div class='tutorial-next-icon3 web-activity-disable'></div>\
  							</div>\
  							<div class='tutorial-icon-text'>"+this.l10n.stringNextShort+"</div>\
  						</div>\
  						<div class='tutorial-end-icon tutorial-icon-button' data-role='end'>\
  							<div class='tutorial-end-icon1 web-activity'>\
  								<div class='tutorial-end-icon2 web-activity-icon'></div>\
  								<div class='tutorial-end-icon3 web-activity-disable'></div>\
  							</div>\
  							<div class='tutorial-icon-text'>"+this.l10n.stringEndShort+"</div>\
  						</div>\
  					</div>\
  				</div>",
  				storage: false,
  				backdrop: true,
  				steps: steps
  			});
  			tour.init();
  			tour.start(true);
  		}
  	}
  }
  