/**
 * Used for the tutorial on the sandbox
 */

jQuery(document).ready(function($){

	var dslcBubblePosCheck;

	$(document).on('click', '.dslc-tut-proceed-secondary', function(e) {

		e.preventDefault();

		$('.video-modal').fadeIn(500, function(){
			$('.videoThumb[href*="' + $('.video-modal').data('video-id') + '"]').click();
			$('.video-modal').fitVids();
			lc_calc_video_width();
		});

	});

	$(document).on('mousedown', '.dslc-tut-prevent, .dslca-action-disabled, .dslc-tut-panel-prevent', function(e) {
		$('.dslc-tut-bubble:not(:animated)').css({ marginTop : 5 });
		setTimeout( function(){
			$('.dslc-tut-bubble:not(:animated)').css({ marginTop : 10 });
			setTimeout( function(){
				$('.dslc-tut-bubble:not(:animated)').css({ marginTop : 5 });
				setTimeout( function(){
					$('.dslc-tut-bubble:not(:animated)').css({ marginTop : 0 });
				}, 20);
			}, 20);
		}, 20);
	});

	function dslc_tut_keep_up( dslcStep ) {

		dslcBubblePosCheck = setInterval( function(){			

			var dslcBubble, dslcOffset, dslcLeftOffset, dslcTopOffset, dslcArrOffsetLeft, dslcType, dslcAnimation, dslcBubbleHeight, dslcTut, dslcTutIDVar;

			dslcBubble = $('.dslc-tut-bubble');

			if ( $(dslcStep.dslc_target).is(':visible') ) {

				dslcOffset = $(dslcStep.dslc_target).offset();
				dslcLeftOffset = dslcOffset.left + ( $(dslcStep.dslc_target).outerWidth() / 2 - dslcBubble.outerWidth() / 2 )

				/**
				 * Stop from going outside ( left side )
				 */
				if ( dslcLeftOffset < 0 ) {
					dslcArrOffsetLeft = ( dslcBubble.width() / 2 ) + dslcLeftOffset + $(dslcStep.dslc_target).width() / 2 + 15 + 3 + 'px';
					dslcLeftOffset = 15;
				}

				/**
				 * Stop from going outise ( right side )
				 */
				if ( ( dslcBubble.outerWidth() + dslcLeftOffset ) > $(window).width() ) {

					dslcArrOffsetLeft = ( dslcBubble.outerWidth() - $(dslcStep.dslc_target).width() / 2 ) - ( $(window).width() - ( $(dslcStep.dslc_target).offset().left + $(dslcStep.dslc_target).width() ) )  + 'px';
					if ( parseInt( dslcArrOffsetLeft ) > ( dslcBubble.outerWidth() - 20 ) ) { 
						dslcArrOffsetLeft = dslcBubble.outerWidth() - 20 + 'px';
					}
					dslcLeftOffset = $(window).width() - dslcBubble.outerWidth() - 15;

				}

				/**
				 * Position - Action/Information
				 */
				if ( dslcStep.dslc_type == 'action' ) 
					dslcTopOffset = dslcOffset.top - dslcBubble.outerHeight() - 10;
				else
					dslcTopOffset = dslcBubbleOverlay.height() / 2 - dslcBubble.outerHeight() / 2 - 59;

				/**
				 * Position - Bellow
				 */
				if ( dslcStep[ 'dslc_pos' ] == 'bellow' ) {
					dslcTopOffset += $(dslcStep.dslc_target).outerHeight() + dslcBubble.outerHeight() + 20;
				}

				dslcBubble.stop().css({ top : dslcTopOffset, left : dslcLeftOffset });
				$("head").append($('<style>.dslc-tut-bubble:after, .dslc-tut-bubble:before { left: ' + dslcArrOffsetLeft + ' !important; }</style>'));

			}

		}, 200);

	}

	function dslc_tut_prevent( dslc_event, dslc_allow ) {

		//console.log( dslc_event );
		//console.log( dslc_allow );

		false;

	}

	function dslc_tut_proceed() {

		var dslcBubble, dslcStepID, dslcStep, dslcOffset, dslcLeftOffset, dslcTopOffset, dslcArrOffsetLeft, dslcType, dslcAnimation, dslcBubbleHeight, dslcTut, dslcTutIDVar;

		dslcTut = dslcTuts[$('#dslc_tut_settings').data('post-id')];
		dslcBubble = $('.dslc-tut-bubble');
		dslcBubbleOverlay = $('.dslc-tut-bubble-overlay');
		dslcStepID = dslcBubble.data('step');
		dslcStep = dslcTut[ dslcStepID ];
		dslcType = dslcStep.dslc_type;
		dslcAnimation = dslcStep.dslc_animation;

		/**
		 * Do NOT let them do stuff they should not
		 */

		// Stop all events on all element
		/*$(document).on('mousedown mouseup click', 'a, span, div', function(e){
			dslc_tut_prevent( e, '.dslc-tut-proceed' );
		});*/
		//$('*').off('mousedown mouseup click mouseenter mouseleave', false);
		//$('a:not("' + dslcStep.dslc_event_el + '")').on('mousedown mouseup click mouseenter mouseleave', false);

		// Alow events on specific elements
		//$('.dslc-tut-proceed').off( 'mousedown mouseup click', false );

		// Allow events on elements specific to the step
		//$( dslcStep.dslc_allow_events_el ).on( dslcStep.dslc_allow_events );
	

		/* Function to call on start */

		if ( dslcStep[ 'dslc_func_start' ] !== undefined ) {
			dslcStep[ 'dslc_func_start']();
		}

		/* Position */

		if ( dslcStep[ 'dslc_pos' ] !== undefined ) {
			//nadda
		} else {
			dslcStep[ 'dslc_pos' ] = 'above';
		}

		/* Recalculate */

		if ( dslcStep[ 'dslc_keep_up' ] !== undefined ) {
			//nadda
		} else {
			dslcStep[ 'dslc_keep_up' ] = true;
		}

		if ( parseInt( dslcTut.length ) ==  ( dslcStepID + 0 ) ) {
			dslcBubble.hide();
		}

		if ( dslcStep[ 'dslc_parent_el' ] !== undefined ) {
			//nadda
		} else {
			dslcStep[ 'dslc_parent_el' ] = false;
		}

		// Increment the step
		dslcBubble.data( 'step', dslcStepID + 1 )

		// Add event for proceeding

		$(document).on( dslcStep.dslc_event, dslcStep.dslc_event_el, function(){

			// Remove this event ( no longer needed )
			$(document).off( dslcStep.dslc_event );

			if ( dslcStep[ 'dslc_func_end' ] !== undefined ) {
				dslcStep[ 'dslc_func_end']();
			}

			// Proceed to next step
			dslc_tut_proceed();

		});

		// Position the bubble

		var dslcStepCheck = setInterval( function(){

			if ( $(dslcStep.dslc_target).length 
				&& $(dslcStep.dslc_target).not(':animated') 
				&& ! $(dslcStep.dslc_target).is(':hidden')
				&& $(dslcStep.dslc_target).offset().left <= ( $(window).width() - $(dslcStep.dslc_target).outerWidth() )
				&& $(dslcStep.dslc_event_el).not(':animated') 
				&& ! $( 'body' ).hasClass('dslca-anim-in-progress')
				&& ( $('.dslca-container').length == 0 || $('.dslca-container').css('bottom') == '0px' )
				) {
				
				clearInterval( dslcBubblePosCheck );
				clearInterval( dslcStepCheck );

				// Limit to specific element
				if ( $( dslcStep.dslc_target ).css('position') == 'static' ) {
					$( dslcStep.dslc_target ).css('position', 'relative');
				}

				if ( $( dslcStep.dslc_event_el ).css('position') == 'static' ) {
					$( dslcStep.dslc_event_el ).css('position', 'relative');
				}

				$('.dslc-tut-revert-zindex').each(function(){
					$(this).css( 'z-index', $(this).data('orig-zindex') ).removeClass('dslc-tut-revert-zindex');				
				});

				if ( dslcStep.dslc_target != 'body' ) {
					$( dslcStep.dslc_target ).data('orig-zindex', $( dslcStep.dslc_target ).css('z-index') ).addClass('dslc-tut-revert-zindex').css({ 'z-index' : 9999997 });
				}

				if ( $( dslcStep.dslc_event_el ).hasClass('dslc-tut-revert-zindex') ) {
					// nadda
				} else {
					$( dslcStep.dslc_event_el ).data('orig-zindex', $( dslcStep.dslc_event_el ).css('z-index') ).css({ 'z-index' : 9999997 }).addClass('dslc-tut-revert-zindex');
				}

				if ( $( dslcStep.dslc_parent_el ).hasClass('dslc-tut-revert-zindex') ) {
					// nadda
				} else {
					$( dslcStep.dslc_parent_el ).data('orig-zindex', $( dslcStep.dslc_parent_el ).css('z-index') ).css({ 'z-index' : 9999997 }).addClass('dslc-tut-revert-zindex');
				}

				// Animation
				if ( dslcAnimation == 'fade' )
					dslcBubble.css({ opacity : 0 });

				// Add bubble text
				dslcBubble.html( dslcStep.dslc_label );				

				// Add type class
				dslcBubble.removeClass( 'dslc-tut-bubble-type-action dslc-tut-bubble-type-information' ).addClass( 'dslc-tut-bubble-type-' + dslcType );
				dslcBubble.removeClass( 'dslc-tut-bubble-pos-above dslc-tut-bubble-pos-bellow' ).addClass( 'dslc-tut-bubble-pos-' + dslcStep['dslc_pos'] );

				// If information show overlay
				if ( dslcType == 'information' )
					dslcBubbleOverlay.fadeIn(300);
				else
					dslcBubbleOverlay.fadeOut(200);

				dslcOffset = $(dslcStep.dslc_target).offset();
				dslcLeftOffset = dslcOffset.left + ( $(dslcStep.dslc_target).outerWidth() / 2 - dslcBubble.outerWidth() / 2 )

				var dslcArrOffsetLeft = '50%';

				/**
				 * Stop from going outside ( left side )
				 */
				if ( dslcLeftOffset < 0 ) {
					dslcArrOffsetLeft = ( dslcBubble.width() / 2 ) + dslcLeftOffset + $(dslcStep.dslc_target).width() / 2 + 15 + 3 + 'px';
					dslcLeftOffset = 15;
				}

				/**
				 * Stop from going outise ( right side )
				 */
				if ( ( dslcBubble.outerWidth() + dslcLeftOffset ) > $(window).width() ) {

					dslcArrOffsetLeft = ( dslcBubble.outerWidth() - $(dslcStep.dslc_target).width() / 2 ) - ( $(window).width() - ( $(dslcStep.dslc_target).offset().left + $(dslcStep.dslc_target).width() ) )  + 'px';
					dslcLeftOffset = $(window).width() - dslcBubble.outerWidth() - 15;

				}

				/**
				 * Position - Action/Information
				 */
				if ( dslcType == 'action' ) 
					dslcTopOffset = dslcOffset.top - dslcBubble.outerHeight() - 10;
				else
					dslcTopOffset = dslcBubbleOverlay.height() / 2 - dslcBubble.outerHeight() / 2 - 59;

				/**
				 * Position - Bellow
				 */
				if ( dslcStep[ 'dslc_pos' ] == 'bellow' ) {
					dslcTopOffset += $(dslcStep.dslc_target).outerHeight() + dslcBubble.outerHeight() + 20;
				}

				/**
				 * Animation - Fade/Slide
				 */
				if ( dslcAnimation == 'fade' ) {
					dslcBubble.stop().css({ top : dslcTopOffset + 20, left : dslcLeftOffset }).animate({ top : dslcTopOffset, opacity : 1 }, 400, function(){
						if ( dslcStep[ 'dslc_keep_up' ] && dslcStep['dslc_type'] == 'action' )
							dslc_tut_keep_up( dslcStep );
					});
				} else {
					dslcBubble.stop().css({ opacity : 1 }).animate({ top : dslcTopOffset, left : dslcLeftOffset }, 400, function(){
						if ( dslcStep[ 'dslc_keep_up' ] && dslcStep['dslc_type'] == 'action' )
							dslc_tut_keep_up( dslcStep );
					});
				}

				/**
				 * CSS Arrow
				 */
				$("head").append($('<style>.dslc-tut-bubble:after, .dslc-tut-bubble:before { left: ' + dslcArrOffsetLeft + ' !important; }</style>'));

			}

		}, 300);

	}

	// Add the tut bubble
	jQuery('body').append('<div class="dslc-tut-prevent"></div><div class="dslc-tut-bubble-overlay"></div><div class="dslc-tut-bubble" data-step="0"></div>');
	jQuery('.dslca-container').append('<div class="dslc-tut-panel-prevent"></div>');

	var dslcTuts = [];

	dslcTuts['502'] = [

		{
			'dslc_type' : 'information',
			'dslc_label' : '<span class="dslc-tut-bubble-title">Welcome</span>'
			+ '<div class="dslc-tut-bubble-content">'
				+ 'Welcome to the <strong style="color: #06b2ac;">Live Composer</strong> interactive <strong style="color: #9268a9;">tutorial</strong>.<br>'
				+ 'In this step by step guide, we will show you some of the core functionalities of this plugin.<br>'
			+ '</div>'
			+ '<a href="#" class="dslc-tut-proceed">START TUTORIAL<span class="dslc-tut-icon dslc-icon-chevron-right"></span></a>',
			'dslc_target' : 'body',
			'dslc_event_el' : '.dslc-tut-proceed',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade'
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'First of all, let\'s <strong style="color: #54c13f;">activate</strong> the <strong style="color: #06b2ac;">Live Composer</strong>.',
			'dslc_target' : '.dslca-activate-composer-hook',
			'dslc_event_el' : '.dslca-activate-composer-hook',
			'dslc_event' : 'click.dslc_tut_add_row',
			'dslc_animation' : 'fade'
		},

	];

	dslcTuts['495'] = [
		{
			'dslc_type' : 'information',
			'dslc_label' : '<span class="dslc-tut-bubble-title">Welcome</span>'
			+ '<div class="dslc-tut-bubble-content">'
				+ 'Welcome to the <strong style="color: #06b2ac;">Live Composer</strong> interactive <strong style="color: #9268a9;">tutorial</strong>.<br>'
				+ 'In this step by step guide, we will show you some of the core functionalities of this plugin.<br>'
			+ '</div>'
			+ '<a href="#" class="dslc-tut-proceed">Start <strong>CHAPTER ONE</strong><span class="dslc-tut-icon dslc-icon-chevron-right"></span></a>',
			'dslc_target' : 'body',
			'dslc_event_el' : '.dslc-tut-proceed',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade',
		},
		{
			'dslc_type' : 'information',
			'dslc_label' : '<span class="dslc-tut-bubble-title">1. Row</span>'
			+ '<span class="dslc-tut-bubble-descr">1/3 Adding a Row</span>'
			+ '<div class="dslc-tut-bubble-content">'
				+ 'Here is the structure of Live Composer: <strong style="color: #e5855f;">Rows</strong> > <strong style="color: #5890e5;">Module Areas</strong> > <strong style="color:#58bce5;">Modules</strong>.<br>Let\'s start by adding a <strong style="color: #e5855f;">row</strong>.</div>'
			+ '<a href="#" class="dslc-tut-proceed">continue<span class="dslc-tut-icon dslc-icon-chevron-right"></span></a>',
			'dslc_target' : 'body',
			'dslc_event_el' : '.dslc-tut-proceed',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade'
		},
		{ /* bubble */
			'dslc_type' : 'action',
			'dslc_label' : 'Create your first <strong style="color: #e5855f;">row</strong>, it will be automatically populated with a <strong style="color: #5890e5;">modules area</strong>.',
			'dslc_target' : '.dslca-add-modules-section-hook',
			'dslc_event_el' : '.dslca-add-modules-section-hook',
			'dslc_event' : 'click.dslc_tut_add_row',
			'dslc_animation' : 'fade',
			'dslc_func_end' : function(){
				$('.dslca-add-modules-section-hook').addClass('dslca-action-disabled');
			}
		},
		{ /* info */
			'dslc_type' : 'information',
			'dslc_label' : '<span class="dslc-tut-bubble-title">1. Row</span><span class="dslc-tut-bubble-descr">2/3 Row Options</span><div class="dslc-tut-bubble-content">Now that you have a <strong style="color: #e5855f;">row</strong> you could start adding <strong style="color: #5890e5;">module areas</strong> and <strong style="color:#58bce5;">modules</strong>.<br>But first, let\'s see what can be done with a <strong style="color: #e5855f;">row</strong>.</div><a href="#" class="dslc-tut-proceed">continue<span class="dslc-tut-icon dslc-icon-chevron-right"></span></a>',
			'dslc_target' : 'body',
			'dslc_event_el' : '.dslc-tut-proceed',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade',
			'dslc_func_start' : function(){
				
			}
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'When you rollover a <strong style="color: #e5855f;">row</strong> some options show up. Those are : <strong style="color: #06b2ac;">Edit</strong> - <strong style="color: #06b2ac;">Duplicate</strong> - <strong style="color: #06b2ac;">Move</strong> - <strong style="color: #06b2ac;">Delete</strong>. For now, let\'s click on the cog icon to edit this <strong style="color: #e5855f;">row</strong>',
			'dslc_target' : '.dslc-modules-section',
			'dslc_event_el' : '.dslc-modules-section',
			'dslc_event' : 'mouseenter.dslc_tut_add_row',
			'dslc_animation' : 'fade',
			'dslc_pos' : 'bellow',
			'dslc_func_start' : function() {
				$('.dslca-modules-area-manage').css({ 'visibility' : 'hidden' });
				$('.dslca-modules-section-manage .dslca-manage-action').addClass('dslca-action-disabled');
				$('.dslca-edit-modules-section-hook').removeClass('dslca-action-disabled');
			}
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'When you rollover a <strong style="color: #e5855f;">row</strong> some options show up. Those are : <strong style="color: #06b2ac;">Edit</strong> - <strong style="color: #06b2ac;">Duplicate</strong> - <strong style="color: #06b2ac;">Move</strong> - <strong style="color: #06b2ac;">Delete</strong>. For now, let\'s click on the cog icon to edit this <strong style="color: #e5855f;">row</strong>',
			'dslc_target' : '.dslca-edit-modules-section-hook',
			'dslc_event_el' : '.dslca-edit-modules-section-hook',
			'dslc_parent_el' : '.dslc-modules-section',
			'dslc_event' : 'click.dslc_tut_add_row',
			'dslc_animation' : 'slide',
			'dslc_pos' : 'bellow',
			'dslc_func_end' : function(){
				$('.dslca-modules-section-manage .dslca-manage-action').removeClass('dslca-action-disabled');
			}
		},
		{ /* Make the options are visible */
			'dslc_type' : 'information',
			'dslc_label' : '<span class="dslc-tut-bubble-title">1. Row</span><span class="dslc-tut-bubble-descr">3/3 Options Panel</span><div class="dslc-tut-bubble-content">'
			+ 'Every time you want to edit a <strong style="color: #e5855f;">row</strong> or a <strong style="color:#58bce5;">module</strong>, the <strong style="color: #9268a9;">Options Panel</strong> will appear.<br>' 
			+ 'There are multiple options, for now let\'s change the <strong>background color</strong> and the <strong>padding</strong> for this <strong style="color: #e5855f;">row</strong>.'
			+ '</div><a href="#" class="dslc-tut-proceed">continue<span class="dslc-tut-icon dslc-icon-chevron-right"></span></a>',
			'dslc_target' : 'body',
			'dslc_event_el' : '.dslc-tut-proceed',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade',
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'First, let\'s change the <strong>background color</strong>, choose any color and <a class="dslc-tut-proceed-2" href="#"><strong>click here to continue</strong></a> once you are done.',
			'dslc_target' : '.dslca-modules-section-edit-option[data-id="bg_color"]',
			'dslc_event_el' : '.dslca-modules-section-edit-option[data-id="bg_color"] input',
			'dslc_event' : 'mouseup.dslc_tut_modules_info',
			'dslc_animation' : 'fade',
			'dslc_parent_el' : '.dslca-container',
			'dslc_func_start' : function(){
				$('.dslc-tut-panel-prevent').show();
				$('.dslca-modules-section-edit-option[data-id="bg_color"]').css( 'z-index', 1000001 );
			},
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'First, let\'s change the <strong>background color</strong>, choose any color and <a class="dslc-tut-proceed-2" href="#"><strong>click here to continue</strong></a> once you are done.',
			'dslc_target' : '.colorpicker:visible',
			'dslc_event_el' : '.dslc-tut-proceed-2',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_parent_el' : '.dslca-container',
			'dslc_animation' : 'slide',
			'dslc_func_end' : function(){
				$('.dslc-tut-panel-prevent').hide();
				$('.dslca-container').css( 'z-index', 99999 );
				$('.dslca-modules-section-edit-option[data-id="bg_color"]').css( 'z-index', 'auto' );
			}
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'Good, now you will need to <strong style="color: #9268a9;">drag</strong> this scrollbar to the right to access the <strong style="color:#06b2ac;">padding vertical</strong> options.',
			'dslc_target' : '.jspDrag',
			'dslc_event_el' : '.dslca-container',
			'dslc_event' : 'mouseup.dslc_tut_modules_info',
			'dslc_parent_el' : '.dslca-container',
			'dslc_animation' : 'slide',
			'dslc_keep_up' : false,
			'dslc_func_start' : function(){
				$('.dslc-tut-panel-prevent').show();
				$('.jspHorizontalBar').css( 'z-index', 1000001 );
			},
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'Go ahead and change this <strong style="color:#06b2ac;">padding value</strong>, this will add space vertically on this whole <strong style="color: #e5855f;">row</strong>.',
			'dslc_target' : '.dslca-modules-section-edit-option[data-id="padding"]',
			'dslc_event_el' : '.dslca-modules-section-edit-option[data-id="padding"]',
			'dslc_parent_el' : '.dslca-container',
			'dslc_event' : 'mouseup.dslc_tut_modules_info',
			'dslc_animation' : 'slide',
			'dslc_func_start' : function(){
				$('.jspHorizontalBar').css( 'z-index', 'auto' );
				$('.dslca-modules-section-edit-option[data-id="padding"]').css( 'z-index', 1000001 );
			},
			'dslc_func_end' : function(){				
				$('.dslca-module-edit-save').css( 'z-index', 1000001 );
			},
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'Everytime you are done editing an element, you have to <span style="color: #78ca4f; font-weight:bold;">confirm</span> or <span style="color: #e55f5f; font-weight:bold;">cancel</span> those changes. Let\'s <span style="color: #78ca4f; font-weight:bold;">confirm</span> these changes now.',
			'dslc_target' : '.dslca-module-edit-save',
			'dslc_event_el' : '.dslca-module-edit-save',
			'dslc_parent_el' : '.dslca-container',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade',
			'dslc_func_start' : function(){
			
			},
		},
		{
			'dslc_type' : 'information',
			'dslc_label' : '<span class="dslc-tut-bubble-title">1. Row</span><span class="dslc-tut-bubble-descr">finished</span><div class="dslc-tut-bubble-content">'
			+ 'Congratulations on completing the first chapter of this <strong style="color: #9268a9;">tutorial</strong>.<br>' 
			+ 'Now that you know how to change options for a <strong style="color: #e5855f;">row</strong>, let\'s see what can be done with <strong style="color: #5890e5;">modules area</strong>.'
			+ '</div>'
			+ '<a href="http://livecomposerplugin.com/sandbox/tutorial-chapter-two/?dslc=active&dslc_tut=start" class="dslc-tut-proceed dslca-link">start chapter two<span class="dslc-tut-icon dslc-icon-chevron-right"></span></a>',
			'dslc_target' : 'body',
			'dslc_event_el' : '.dslc-tut-proceed',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade',
			'dslc_func_start' : function(){
				$('.dslc-tut-panel-prevent').hide();
				$('.dslca-module-edit-save').css( 'z-index', 'auto' );
			},
		},

	];

	dslcTuts['497'] = [

		{
			'dslc_type' : 'information',
			'dslc_label' : '<span class="dslc-tut-bubble-title">2. Modules Area</span>'
			+ '<span class="dslc-tut-bubble-descr">1/5 Column System</span>'
			+ '<div class="dslc-tut-bubble-content">'
				+ 'In this chapter, we will show you how to work with <strong style="color: #5890e5;">module areas</strong>.'
				+ '<br>First thing, let\'s see how you can build your own <strong style="color: #06b2ac;">layout</strong>.'
			+ '</div>'
			+ '<a href="#" class="dslc-tut-proceed">continue<span class="dslc-tut-icon dslc-icon-chevron-right"></span></a>',
			'dslc_target' : 'body',
			'dslc_event_el' : '.dslc-tut-proceed',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade',
			'dslc_func_start' : function(){
				$('.dslca-modules-section-manage').css({ 'visibility' : 'hidden' });
			}
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'When you rollover a <strong style="color: #5890e5;">modules area</strong> some options show up. Those are : <strong style="color: #06b2ac;">Duplicate</strong> - <strong style="color: #06b2ac;">Move</strong> - <strong style="color: #06b2ac;">Layout</strong> - <strong style="color: #06b2ac;">Delete</strong>.<br>For now, let\'s click on the <strong>layout icon</strong> to change the width of this <strong style="color: #5890e5;">modules area</strong>.',
			'dslc_target' : '.dslc-modules-area',
			'dslc_event_el' : '.dslc-modules-area',
			'dslc_event' : 'mouseenter.dslc_tut_add_row',
			'dslc_animation' : 'fade',
			'dslc_pos' : 'above'
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'When you rollover a <strong style="color: #5890e5;">modules area</strong> some options show up. Those are : <strong style="color: #06b2ac;">Duplicate</strong> - <strong style="color: #06b2ac;">Move</strong> - <strong style="color: #06b2ac;">Layout</strong> - <strong style="color: #06b2ac;">Delete</strong>.<br>For now, let\'s click on the <strong>layout icon</strong> to change the width of this <strong style="color: #5890e5;">modules area</strong>.',
			'dslc_target' : '.dslca-change-width-modules-area-hook .dslc-icon-columns',
			'dslc_event_el' : '.dslca-change-width-modules-area-hook',
			'dslc_event' : 'click.dslc_tut_add_row',
			'dslc_parent_el' : '.dslc-modules-area',
			'dslc_animation' : 'slide',
			'dslc_pos' : 'above',
			'dslc_func_start' : function(){
				$('.dslca-modules-area-manage').addClass('dslc-tut-force-show');
				$('.dslca-delete-modules-area-hook, .dslca-move-modules-area-hook, .dslca-copy-modules-area-hook').addClass('dslca-action-disabled');
			},
			'dslc_func_end' : function(){
				
			}
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'Click on this <strong>6/12</strong> layout option.',
			'dslc_target' : '.dslca-change-width-modules-area-options span[data-size="6"]',
			'dslc_event_el' : '.dslca-change-width-modules-area-options span[data-size="6"]',
			'dslc_event' : 'click.dslc_tut_add_row',
			'dslc_parent_el' : '.dslc-modules-section',
			'dslc_animation' : 'fade',
			'dslc_pos' : 'bellow',
			'dslc_func_start' : function(){
				$('.dslca-change-width-modules-area-options span, .dslca-change-width-modules-area-hook').addClass('dslca-action-disabled');
				$('.dslca-change-width-modules-area-options span[data-size="6"]').removeClass('dslca-action-disabled');
			}, 
			'dslc_func_end' : function(){
				$('.dslca-change-width-modules-area-options span, .dslca-change-width-modules-area-hook').removeClass('dslca-action-disabled');
				$('.dslca-delete-modules-area-hook, .dslca-move-modules-area-hook, .dslca-copy-modules-area-hook').removeClass('dslca-action-disabled');
			}
		},
		{
			'dslc_type' : 'information',
			'dslc_label' : '<span class="dslc-tut-bubble-title">2. Modules Area</span>'
			+ '<span class="dslc-tut-bubble-descr">2/5 Duplicating</span>'
			+ '<div class="dslc-tut-bubble-content">'
				+ 'Now that you\'ve changed the <strong>layout</strong> of the <strong style="color: #5890e5;">modules area</strong>, let\'s <strong style="color:#06b2ac;">duplicate</strong> it.'
			+ '</div>'
			+ '<a href="#" class="dslc-tut-proceed">continue<span class="dslc-tut-icon dslc-icon-chevron-right"></span></a>',
			'dslc_target' : 'body',
			'dslc_event_el' : '.dslc-tut-proceed',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade',
			'dslc_func_start' : function(){
				$('.dslca-modules-area-manage').removeClass('dslc-tut-force-show');
			}
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : '<strong style="color: #9268a9;">Rollover</strong> the <strong style="color: #5890e5;">modules area</strong> to make the options appear.',
			'dslc_target' : '.dslc-modules-area',
			'dslc_event_el' : '.dslc-modules-area',
			'dslc_event' : 'mouseenter.dslc_tut_add_row',
			'dslc_parent_el' : '.dslc-modules-area',
			'dslc_animation' : 'fade',
			'dslc_pos' : 'above'
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'Now click on the <strong style="color:#06b2ac;">duplicate</strong> icon.',
			'dslc_target' : '.dslca-copy-modules-area-hook',
			'dslc_event_el' : '.dslca-copy-modules-area-hook',
			'dslc_event' : 'click.dslc_tut_add_row',
			'dslc_parent_el' : '.dslc-modules-area',
			'dslc_animation' : 'slide',
			'dslc_pos' : 'bellow',
			'dslc_func_start' : function(){
				$('.dslca-modules-area-manage').addClass('dslc-tut-force-show');
			},
			'dslc_func_end' : function(){
				$('.dslca-copy-modules-area-hook').addClass('dslca-action-disabled');	
			}
		},
		{
			'dslc_type' : 'information',
			'dslc_label' : '<span class="dslc-tut-bubble-title">2. Modules Area</span>'
			+ '<span class="dslc-tut-bubble-descr">3/5 Adding Area</span>'
			+ '<div class="dslc-tut-bubble-content">'
				+ 'It\'s time to add a new <strong style="color: #5890e5;">modules area</strong>.'
				+ '<br>Below are the available <strong style="color:#58bce5;">modules</strong>. For now, let\'s add a new <strong style="color: #5890e5;">modules area</strong>.'
			+ '</div>'
			+ '<a href="#" class="dslc-tut-proceed">continue<span class="dslc-tut-icon dslc-icon-chevron-right"></span></a>',
			'dslc_target' : 'body',
			'dslc_event_el' : '.dslc-tut-proceed',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade',
			'dslc_func_start' : function(){
				$('.dslca-modules-area-manage').removeClass('dslc-tut-force-show');
				$('.dslc-modules-area').css( 'z-index', 'auto' );
				$('.dslca-copy-modules-area-hook').removeClass('dslca-action-disabled');	
			}
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : '<strong style="color: #06b2ac;">Click &amp; Drag</strong> this item and release it over the <strong style="color: #e5855f;">row</strong>.',
			'dslc_target' : '.dslca-module[data-id="DSLC_M_A"]',
			'dslc_event_el' : '.dslca-module[data-id="DSLC_M_A"]',
			'dslc_event' : 'mousedown.dslc_tut_add_row',
			'dslc_parent_el' : '.dslca-container',
			'dslc_animation' : 'fade',
			'dslc_pos' : 'above',
			'dslc_func_start' : function(){
				$('.dslc-tut-panel-prevent').show();
				$('.dslca-module[data-id="DSLC_M_A"]').css( 'z-index', 1000001 );
			},
			'dslc_func_end' : function(){
				$('.dslc-tut-panel-prevent').hide();
				$('.dslca-container').css( 'z-index', 99999 );
				$('.dslca-module[data-id="DSLC_M_A"]').css( 'z-index', 'auto' );
			}
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : '<strong style="color: #06b2ac;">Click &amp; Drag</strong> this item and release it over the <strong style="color: #e5855f;">row</strong>.',
			'dslc_target' : '.dslc-modules-section',
			'dslc_event_el' : $(document),
			'dslc_event' : 'mouseup.dslc_tut_add_row',
			'dslc_animation' : 'slide',
			'dslc_pos' : 'bellow',
			'dslc_func_end' : function(){
				if ( $('body').hasClass('dslca-anim-in-progress') ) {
					// nadda
				} else {
					$('.dslc-tut-bubble').data('step', 8);
				}
			}
		},
		{
			'dslc_type' : 'information',
			'dslc_label' : '<span class="dslc-tut-bubble-title">2. Modules Area</span>'
			+ '<span class="dslc-tut-bubble-descr">4/5 Reordering</span>'
			+ '<div class="dslc-tut-bubble-content">'
				+ '<strong style="color: #5890e5;">Modules areas</strong>, like <strong style="color: #e5855f;">rows</strong>, can be <strong style="color: #9268a9;">moved</strong>. Let\'s <strong style="color: #9268a9;">move</strong> the <strong style="color: #5890e5;">modules area</strong> you just created.'
			+ '</div>'
			+ '<a href="#" class="dslc-tut-proceed">continue<span class="dslc-tut-icon dslc-icon-chevron-right"></span></a>',
			'dslc_target' : 'body',
			'dslc_event_el' : '.dslc-tut-proceed',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade',
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : '<strong style="color: #9268a9;">Rollover</strong> the <strong style="color: #5890e5;">modules area</strong> to make the options appear.',
			'dslc_target' : '.dslc-modules-area.dslc-12-col',
			'dslc_event_el' : '.dslc-modules-area.dslc-12-col',
			'dslc_event' : 'mouseenter.dslc_tut_add_row',
			'dslc_parent_el' : '.dslc-modules-area.dslc-12-col',
			'dslc_animation' : 'fade',
			'dslc_pos' : 'above'
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'Now <strong style="color: #06b2ac;">Click &amp; Drag</strong> the move icon to move the <strong style="color: #5890e5;">modules area</strong> on top of the 2 others.',
			'dslc_target' : '.dslc-modules-area.dslc-12-col .dslca-move-modules-area-hook',
			'dslc_event_el' : '.dslc-modules-area.dslc-12-col .dslca-move-modules-area-hook',
			'dslc_event' : 'mousedown.dslc_tut_add_row',
			'dslc_parent_el' : '.dslc-modules-area.dslc-12-col',
			'dslc_animation' : 'slide',
			'dslc_pos' : 'bellow',
			'dslc_func_start' : function(){
				$('.dslc-modules-area.dslc-12-col .dslca-modules-area-manage').addClass('dslc-tut-force-show');
				$('.dslc-modules-area.dslc-12-col .dslca-copy-modules-area-hook').addClass('dslca-action-disabled');
			},
			'dslc_func_end' : function(){
				$('.dslc-modules-area.dslc-12-col .dslca-copy-modules-area-hook').removeClass('dslca-action-disabled');
			}
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'Now <strong style="color: #06b2ac;">Click &amp; Drag</strong> the move icon to move the <strong style="color: #5890e5;">modules area</strong> on top of the 2 others.',
			'dslc_target' : '.dslc-modules-section',
			'dslc_event_el' : $(document),
			'dslc_event' : 'mouseup.dslc_tut_add_row',
			'dslc_parent_el' : '.dslc-modules-area',
			'dslc_animation' : 'slide',
			'dslc_pos' : 'above',
			'dslc_func_end' : function(){
				if ( $('.dslc-modules-area:first-child').hasClass('dslc-12-col') ) {
					// nadda
				} else {
					$('.dslc-tut-bubble').data('step', 12);
				}
			}
		},
		{
			'dslc_type' : 'information',
			'dslc_label' : '<span class="dslc-tut-bubble-title">2. Modules Area</span>'
			+ '<span class="dslc-tut-bubble-descr">5/5 Deleting</span>'
			+ '<div class="dslc-tut-bubble-content">'
				+ 'The last thing that you can do with <strong style="color: #5890e5;">modules areas</strong> is to <strong style="color: #e55f5f;">delete</strong> them.'
			+ '</div>'
			+ '<a href="#" class="dslc-tut-proceed">continue<span class="dslc-tut-icon dslc-icon-chevron-right"></span></a>',
			'dslc_target' : 'body',
			'dslc_event_el' : '.dslc-tut-proceed',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade',
			'dslc_func_start' : function(){
				$('.dslc-modules-area.dslc-12-col .dslca-modules-area-manage').removeClass('dslc-tut-force-show');
			}
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : '<strong style="color: #9268a9;">Rollover</strong> the <strong style="color: #5890e5;">modules area</strong> to make the options appear.',
			'dslc_target' : '.dslc-modules-area.dslc-12-col',
			'dslc_event_el' : '.dslc-modules-area.dslc-12-col',
			'dslc_event' : 'mouseenter.dslc_tut_add_row',
			'dslc_parent_el' : '.dslc-modules-area',
			'dslc_animation' : 'fade',
			'dslc_pos' : 'above',
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'Now click the <strong style="color: #e55f5f;">delete</strong> icon to delete the <strong style="color: #5890e5;">modules area</strong>.',
			'dslc_target' : '.dslc-modules-area.dslc-12-col .dslca-delete-modules-area-hook',
			'dslc_event_el' : '.dslc-modules-area.dslc-12-col .dslca-delete-modules-area-hook',
			'dslc_event' : 'click.dslc_tut_add_row',
			'dslc_parent_el' : '.dslc-modules-area.dslc-12-col',
			'dslc_animation' : 'slide',
			'dslc_pos' : 'bellow',
			'dslc_func_start' : function(){
				$('.dslc-modules-area.dslc-12-col .dslca-modules-area-manage').addClass('dslc-tut-force-show');
				$('.dslca-copy-modules-area-hook, .dslca-move-modules-area-hook, .dslca-change-width-modules-area-hook').addClass('dslca-action-disabled');
			},
			'dslc_func_end' : function(){
				$('.dslca-copy-modules-area-hook, .dslca-move-modules-area-hook, .dslca-change-width-modules-area-hook').removeClass('dslca-action-disabled');
			}
		},
		{
			'dslc_type' : 'information',
			'dslc_label' : '<span class="dslc-tut-bubble-title">2. Modules Area</span>'
			+ '<span class="dslc-tut-bubble-descr">finished</span>'
			+ '<div class="dslc-tut-bubble-content">'
				+ 'Congrats on completing <strong>Chapter Two</strong> of this interactive <strong style="color: #9268a9;">tutorial</strong>.'
				+ '<br>Now that you know everything about <strong style="color: #e5855f;">rows</strong> and <strong style="color: #5890e5;">modules areas</strong>, it\'s time for you to learn how to use <strong style="color:#58bce5;">modules</strong>.'
			+ '</div>'
			+ '<a href="http://livecomposerplugin.com/sandbox/tutorial-chapter-three/?dslc=active&dslc_tut=start" class="dslc-tut-proceed dslca-link">start chapter Three<span class="dslc-tut-icon dslc-icon-chevron-right"></span></a>',
			'dslc_target' : 'body',
			'dslc_event_el' : '.dslc-tut-proceed',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade',
			'dslc_func_start' : function(){
				$('.dslc-modules-area.dslc-12-col .dslca-modules-area-manage').removeClass('dslc-tut-force-show');
			}
		},

	];

	dslcTuts['500'] = [

		{
			'dslc_type' : 'information',
			'dslc_label' : '<span class="dslc-tut-bubble-title">3. Modules</span>'
			+ '<span class="dslc-tut-bubble-descr">1/3 Adding modules</span>'
			+ '<div class="dslc-tut-bubble-content">'
				+ 'In this chapter, we will show you how to use <strong style="color:#58bce5;">modules</strong>.'
				+ '<br>These are the most important part of the <strong style="color: #06b2ac;">Live Composer</strong> and they will allow you to display your content.'
				+ '<br>To start, let\'s add a <strong style="color:#58bce5;">module</strong>.'
			+ '</div>'
			+ '<a href="#" class="dslc-tut-proceed">continue<span class="dslc-tut-icon dslc-icon-chevron-right"></span></a>',
			'dslc_target' : 'body',
			'dslc_event_el' : '.dslc-tut-proceed',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade'
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : '<strong style="color: #06b2ac;">Click &amp; Drag</strong> this item and release it over the <strong style="color: #5890e5;">modules area</strong>.',
			'dslc_target' : '.dslca-module[data-id="DSLC_Blog"]',
			'dslc_event_el' : '.dslca-module[data-id="DSLC_Blog"]',
			'dslc_event' : 'mousedown.dslc_tut_add_row',
			'dslc_parent_el' : '.dslca-container',
			'dslc_animation' : 'fade',
			'dslc_pos' : 'above',
			'dslc_func_start' : function(){
				$('.dslc-tut-panel-prevent').show();
				$('.dslca-module[data-id="DSLC_Blog"]').css( 'z-index', 1000001 );
			},
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : '<strong style="color: #06b2ac;">Click &amp; Drag</strong> this item and release it over the <strong style="color: #5890e5;">modules area</strong>.',
			'dslc_target' : '.dslc-modules-area',
			'dslc_event_el' : $(document),
			'dslc_event' : 'mouseup.dslc_tut_add_row',
			'dslc_animation' : 'slide',
			'dslc_pos' : 'above',
			'dslc_func_end' : function(){
				$('.dslc-tut-panel-prevent').hide();
				$('.dslca-module[data-id="DSLC_Blog"]').css( 'z-index', 'auto' );
				if ( $('body').hasClass('dslca-anim-in-progress') ) {
					// nadda
				} else {
					$('.dslc-tut-bubble').data('step', 1);
				}
			}
		},
		{
			'dslc_type' : 'information',
			'dslc_label' : '<span class="dslc-tut-bubble-title">3. Modules</span>'
			+ '<div class="dslc-tut-bubble-content">'
				+ 'Some modules will take the content that you created in the WordPress admin.'
				+ '<br>This is the case for the <strong style="color:#58bce5;">blog module</strong>, it retreives the blog post that you have created.'
			+ '</div>'
			+ '<a href="#" class="dslc-tut-proceed">continue<span class="dslc-tut-icon dslc-icon-chevron-right"></span></a>',
			'dslc_target' : 'body',
			'dslc_event_el' : '.dslc-tut-proceed',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade'
		},
		{
			'dslc_type' : 'information',
			'dslc_label' : '<span class="dslc-tut-bubble-title">3. Modules</span>'
			+ '<span class="dslc-tut-bubble-descr">2/3 Functionality</span>'
			+ '<div class="dslc-tut-bubble-content">'
				+ 'Every module has it\'s own set of options. There are <strong style="color: #9268a9;">Functionality</strong> and <strong style="color: #06b2ac;">Styling</strong> options.'
				+ '<br>For now let\'s take a look at the <strong style="color: #9268a9;">Functionality</strong> options for the <strong style="color:#58bce5;">blog module</strong>.'
			+ '</div>'
			+ '<a href="#" class="dslc-tut-proceed">continue<span class="dslc-tut-icon dslc-icon-chevron-right"></span></a>',
			'dslc_target' : 'body',
			'dslc_event_el' : '.dslc-tut-proceed',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade'
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : '<strong style="color: #9268a9;">Rollover</strong> the <strong style="color: #58bce5;">module</strong> to make the options appear and click on the <strong style="color:#06b2ac;">edit</strong> icon.',
			'dslc_target' : '.dslca-module-edit-hook',
			'dslc_event_el' : '.dslca-module-edit-hook',
			'dslc_event' : 'click.dslc_tut_add_row',
			'dslc_parent_el' : '.dslc-module-front',
			'dslc_animation' : 'slide',
			'dslc_pos' : 'above',
			'dslc_func_start' : function(){
				$('.dslc-module-front').trigger('mouseenter');
				$('.dslca-copy-module-hook, .dslca-move-module-hook, .dslca-delete-module-hook').addClass('dslca-action-disabled');
			}
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'Go ahead and change the <strong style="color:#06b2ac;">posts per row</strong> to <strong>2</strong>.',
			'dslc_target' : '.dslca-module-edit-option[data-id="columns"]',
			'dslc_event_el' : '.dslca-module-edit-option[data-id="columns"]',
			'dslc_event' : 'change.dslc_tut_modules_info',
			'dslc_parent_el' : '.dslca-container',
			'dslc_animation' : 'fade',
			'dslc_pos' : 'above',
			'dslc_func_start' : function(){
				$('.dslca-copy-module-hook, .dslca-move-module-hook, .dslca-delete-module-hook').removeClass('dslca-action-disabled');
				$('.dslc-tut-panel-prevent').show();
				$('.dslca-module-edit-option[data-id="columns"]').css( 'z-index', 1000001 );
			},
			'dslc_func_end' : function(){
				if ( $('.dslca-module-edit-field[data-id="columns"]').val() != 6 ) {
					$('.dslc-tut-bubble').data('step', 6);
				}
			}
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'You can test any other option in this panel, once you are done <a class="dslc-tut-proceed-2" href="#"><strong>click here to continue</strong></a>.',
			'dslc_target' : '.dslca-module-edit-options',
			'dslc_event_el' : '.dslc-tut-proceed-2',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_parent_el' : '.dslca-container',
			'dslc_animation' : 'slide',
			'dslc_pos' : 'above',
			'dslc_func_start' : function(){
				$('.dslca-module-edit-option[data-id="columns"]').css( 'z-index', 'auto' );
				$('.dslca-module-edit-options-wrapper').css( 'z-index', 1000001 );
			}
		},
		{
			'dslc_type' : 'information',
			'dslc_label' : '<span class="dslc-tut-bubble-title">3. Modules</span>'
			+ '<span class="dslc-tut-bubble-descr">3/3 Styling</span>'
			+ '<div class="dslc-tut-bubble-content">'
				+ 'There are also a lot of <strong style="color: #06b2ac;">styling</strong> options that you can change for every <strong style="color: #58bce5;">module</strong>, let\'s change a few now.'
			+ '</div>'
			+ '<a href="#" class="dslc-tut-proceed">continue<span class="dslc-tut-icon dslc-icon-chevron-right"></span></a>',
			'dslc_target' : 'body',
			'dslc_event_el' : '.dslc-tut-proceed',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_parent_el' : '.dslca-container',
			'dslc_animation' : 'fade',
			'dslc_func_start' : function(){
				$('.dslca-module-edit-options-wrapper').css( 'z-index', 'auto' );
			}
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'Click on the <strong style="color: #06b2ac;">styling</strong> tab to show the <strong style="color: #06b2ac;">styling</strong> options.',
			'dslc_target' : '.dslca-options-filter-hook[data-section="styling"]',
			'dslc_event_el' : '.dslca-options-filter-hook[data-section="styling"]',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade',
			'dslc_parent_el' : '.dslca-container',
			'dslc_pos' : 'above',
			'dslc_func_start' : function(){
				$('.dslca-options-filter-hook[data-section="styling"]').css( 'z-index', 1000001 );
			}
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'All the options are categorized by the element they affect. Click on any of the tabs to change the options available.',
			'dslc_target' : '.dslca-module-edit-options-tab-hook[data-id="main_styling"]',
			'dslc_event_el' : '.dslca-module-edit-options-tab-hook',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade',
			'dslc_parent_el' : '.dslca-container',
			'dslc_pos' : 'above',
			'dslc_func_start' : function(){
				$('.dslca-options-filter-hook[data-section="styling"]').css( 'z-index', 'auto' );
				$('.dslca-module-edit-options-tab-hook').css( 'z-index', 1000001 );
			},
			'dslc_func_end' : function(){
				$('.dslca-module-edit-options-tab-hook').css( 'z-index', 'auto !important' );
				$('.dslca-module-edit-options-wrapper').css( 'z-index', '1000001 !important' );
			}
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'There is a lot of <strong style="color: #06b2ac;">styling</strong> options. Go ahead and play with them and once you are done click on <span style="color: #78ca4f; font-weight:bold;">confirm</span>.',
			'dslc_target' : '.dslca-module-edit-save',
			'dslc_event_el' : '.dslca-module-edit-save',
			'dslc_event' : 'click.dslc_tut_modules_info_2',
			'dslc_animation' : 'slide',
			'dslc_parent_el' : '.dslca-container',
			'dslc_pos' : 'above',
			'dslc_func_start' : function(){
				$('.dslca-module-edit-options').css( 'z-index', 1000001 );
			}
		},
		{
			'dslc_type' : 'information',
			'dslc_label' : '<span class="dslc-tut-bubble-title">3. Modules</span>'
			+ '<span class="dslc-tut-bubble-descr">finished</span>'
			+ '<div class="dslc-tut-bubble-content">'
				+ 'Congrats on completing <strong>Chapter Three</strong> of this interactive <strong style="color: #9268a9;">tutorial</strong>.'
				+ '<br>Before going on to the next step, you can take a look at some videos on how <strong style="color: #58bce5;">modules</strong> can be edited. Simply click on the launch video button below.'
				+ '<br>Once you are ready to continue, click to start chapter four, you will learn how to use the <strong style="color: #d8827d;">templates system</strong>.'
			+ '</div>'
			+ '<a href="http://livecomposerplugin.com/sandbox/tutorial-chapter-four/?dslc=active&dslc_tut=start" class="dslc-tut-proceed-secondary dslca-link">launch videos<span class="dslc-tut-icon dslc-icon-rocket"></span></a>'
			+ '<a href="http://livecomposerplugin.com/sandbox/tutorial-chapter-four/?dslc=active&dslc_tut=start" class="dslc-tut-proceed dslca-link">start chapter four<span class="dslc-tut-icon dslc-icon-chevron-right"></span></a>',
			'dslc_target' : 'body',
			'dslc_event_el' : '.dslc-tut-proceed',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade',
			'dslc_func_start' : function() {
				$('.dslc-tut-panel-prevent').hide();
				$('.dslca-module-edit-options-wrapper').css( 'z-index', 'auto' );
			}
		}

	];

	dslcTuts['504'] = [

		{
			'dslc_type' : 'information',
			'dslc_label' : '<span class="dslc-tut-bubble-title">4. Templates System</span>'
			+ '<span class="dslc-tut-bubble-descr">1/2 Load</span>'
			+ '<div class="dslc-tut-bubble-content">'
				+ 'In this chapter, we will show you how to use the <strong style="color: #d8827d;">templates system</strong>.'
				+ '<br>The <strong style="color: #d8827d;">templates system</strong> consists of 4 main features: <strong>Save</strong>, <strong>Load</strong>, <strong>Export</strong> and <strong>Import</strong>.'
				+ '<br>Let\'s start of by <strong>loading</strong> an existing template.'
			+ '</div>'
			+ '<a href="#" class="dslc-tut-proceed">continue<span class="dslc-tut-icon dslc-icon-chevron-right"></span></a>',
			'dslc_target' : 'body',
			'dslc_event_el' : '.dslc-tut-proceed',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade',
			'dslc_func_start' : function(){
				$('.dslca-section-title-filter-options span[data-origin="user"]').trigger('click');
			}
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'Click this tab to switch to the <strong style="color: #d8827d;">templates management</strong>.',
			'dslc_target' : '.dslca-go-to-section-templates',
			'dslc_event_el' : '.dslca-go-to-section-templates',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade',
			'dslc_parent_el' : '.dslca-container',
			'dslc_pos' : 'above',
			'dslc_func_start' : function() {
				$('.dslc-tut-panel-prevent').show();	
				
			},
			'dslc_func_end' : function() {
				
			}
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'Click <strong>Load</strong> to see the available <strong>templates</strong>.',
			'dslc_target' : '.dslca-go-to-section-hook[data-section=".dslca-templates-load"]',
			'dslc_event_el' : '.dslca-go-to-section-hook[data-section=".dslca-templates-load"]',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade',
			'dslc_parent_el' : '.dslca-container',
			'dslc_pos' : 'above',
			'dslc_func_start' : function() {
				//$('.dslca-go-to-section-hook[data-section=".dslca-templates-load"]').css( 'z-index', 1000001 );
			}
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'Click <strong>Chapter Four</strong> to load the <strong>template</strong>.',
			'dslc_target' : '.dslca-template[data-id="chapter-four"]',
			'dslc_event_el' : '.dslca-template[data-id="chapter-four"]',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade',
			'dslc_parent_el' : '.dslca-container',
			'dslc_pos' : 'above',
			'dslc_func_start' : function() {
				//$('.dslca-go-to-section-hook[data-section=".dslca-templates-load"]').css( 'z-index', 'auto' );
				//$('.dslca-template[data-id="chapter-four"]').css( 'z-index', 1000001 );
			}
		},
		{
			'dslc_type' : 'information',
			'dslc_label' : '<span class="dslc-tut-bubble-title">4. Templates System</span>'
			+ '<div class="dslc-tut-bubble-content">'
				+ 'The <strong>template</strong> is now loaded. You can of course modify it as you wish.'
				+ '<br>Let\'s move the <strong>sidebar</strong> on the right of the <strong>blog</strong>.'
			+ '</div>'
			+ '<a href="#" class="dslc-tut-proceed">continue<span class="dslc-tut-icon dslc-icon-chevron-right"></span></a>',
			'dslc_target' : 'body',
			'dslc_event_el' : '.dslc-tut-proceed',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade',
			'dslc_func_start' : function() {
				$('.dslc-tut-panel-prevent').hide();	
				$('.dslca-template[data-id="chapter-four"]').css( 'z-index', 'auto' );
			}
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'Let\'s move this <strong style="color: #5890e5;">modules area</strong> on the right of the blog.',
			'dslc_target' : '.dslc-modules-area.dslc-3-col',
			'dslc_event_el' : '.dslc-modules-area.dslc-3-col',
			'dslc_event' : 'mouseenter.dslc_tut_modules_info',
			'dslc_parent_el' : '.dslc-modules-area.dslc-3-col',
			'dslc_animation' : 'fade',
			'dslc_pos' : 'above',
			'dslc_func_start' : function() {
				$('.dslca-change-width-modules-area-hook, .dslca-delete-modules-area-hook, .dslca-copy-modules-area-hook').addClass('dslca-action-disabled');
			}
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'Let\'s move this <strong style="color: #5890e5;">modules area</strong> on the right of the blog.',
			'dslc_target' : '.dslc-modules-area.dslc-3-col .dslca-move-modules-area-hook',
			'dslc_event_el' : '.dslc-modules-area.dslc-3-col .dslca-move-modules-area-hook',
			'dslc_event' : 'mousedown.dslc_tut_modules_info',
			'dslc_parent_el' : '.dslc-modules-area.dslc-3-col',
			'dslc_animation' : 'slide',
			'dslc_pos' : 'above',
			'dslc_func_start' : function() {
				
			}
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'Drop the <strong style="color: #5890e5;">modules area</strong> bellow.',
			'dslc_target' : '.dslc-post.dslc-last-col',
			'dslc_event_el' : $(document),
			'dslc_event' : 'mouseup.dslc_tut_modules_info',
			'dslc_parent_el' : '.dslc-modules-area.dslc-3-col',
			'dslc_animation' : 'slide',
			'dslc_pos' : 'above',
			'dslc_keep_up' : false,
			'dslc_func_start' : function(){
				$('.dslca-change-width-modules-area-hook, .dslca-delete-modules-area-hook, .dslca-copy-modules-area-hook').removeClass('dslca-action-disabled');
			}
		},
		{
			'dslc_type' : 'information',
			'dslc_label' : '<span class="dslc-tut-bubble-title">4. Templates System</span>'
			+ '<span class="dslc-tut-bubble-descr">2/2 Import</span>'
			+ '<div class="dslc-tut-bubble-content">'
				+ 'In the textarea bellow, you can see how an export looks like, let\'s import it. Select the "text" and copy it, when done click continue.<br>'
				+ '<br><textarea style="width: 100%; height:50px;">'
				+ '[dslc_modules_section type="wrapped" border_color="" border_width="0" border_style="" border="" bg_color="#f7f7f7" bg_image="" bg_video="" bg_video_overlay_color="" bg_video_overlay_opacity="" bg_image_repeat="no-repeat" bg_image_attachment="parallax" bg_image_position="center bottom" padding="49" padding_h="0" ] [dslc_modules_area last="yes" size="12"] [dslc_module] [/dslc_module] [/dslc_modules_area] [/dslc_modules_section] '
				+ '</textarea>.'
			+ '</div>'
			+ '<a href="#" class="dslc-tut-proceed">continue<span class="dslc-tut-icon dslc-icon-chevron-right"></span></a>',
			'dslc_target' : 'body',
			'dslc_event_el' : '.dslc-tut-proceed',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade'
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'Click this tab to switch to the main <strong style="color: #d8827d;">templates management</strong> section.',
			'dslc_target' : '.dslca-go-to-section-templates',
			'dslc_event_el' : '.dslca-go-to-section-templates',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_parent_el' : '.dslca-container',
			'dslc_animation' : 'fade',
			'dslc_pos' : 'above',
			'dslc_func_start' : function() {
				$('.dslc-tut-panel-prevent').show();	
			}
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'Click <strong>Import</strong>, paste the code in the textarea and click the <strong>import</strong> button.',
			'dslc_target' : '.dslca-open-modal-hook[data-modal=".dslca-modal-templates-import"]',
			'dslc_event_el' : '.dslca-open-modal-hook[data-modal=".dslca-modal-templates-import"]',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_parent_el' : '.dslca-container',
			'dslc_animation' : 'fade',
			'dslc_pos' : 'above'
		},
		{
			'dslc_type' : 'action',
			'dslc_label' : 'Click <strong>Import</strong>, paste the code in the textarea and click the <strong>import</strong> button.',
			'dslc_target' : '.dslca-modal-templates-import',
			'dslc_event_el' : '.dslca-submit',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_parent_el' : '.dslca-container',
			'dslc_animation' : 'slide',
			'dslc_pos' : 'above',
			'dslc_func_start' : function(){
				$('.dslca-close-modal-hook').addClass('dslca-action-disabled');
			}
		},
		{
			'dslc_type' : 'information',
			'dslc_label' : '<span class="dslc-tut-bubble-title">4. Templates System</span>'
			+ '<span class="dslc-tut-bubble-descr">finished</span>'
			+ '<div class="dslc-tut-bubble-content">'
				+ 'Congrats on completing the <strong style="color: #9268a9;">Basics Tutorial</strong> for <strong style="color: #06b2ac;">Live Composer</strong>.'
				+ '<br>Of course, we couldn\'t cover everything you can do with <strong style="color: #06b2ac;">Live Composer</strong>. Our goal was to show you how easy it is to work with it.'
				+ '<br>Now you can go play around with the plugin in our sandbox mode or look at some videos showing how the plugin works in more details.'
			+ '</div>'
			+ '<a href="http://livecomposerplugin.com/sandbox/tutorial-chapter-four/?dslc=active" class="dslc-tut-proceed-secondary dslca-link">launch videos<span class="dslc-tut-icon dslc-icon-rocket"></span></a>'
			+ '<a href="http://livecomposerplugin.com/sandbox/" class="dslc-tut-proceed dslca-link">go to sandbox<span class="dslc-tut-icon dslc-icon-chevron-right"></span></a>',
			'dslc_target' : 'body',
			'dslc_event_el' : '.dslc-tut-proceed',
			'dslc_event' : 'click.dslc_tut_modules_info',
			'dslc_animation' : 'fade'
		},
		
		

	];

	dslc_tut_proceed();

});

