var FusionPageBuilder = FusionPageBuilder || {};

( function() {

	jQuery( document ).ready( function() {

		// Content Boxes Child View.
		FusionPageBuilder.fusion_content_box = FusionPageBuilder.ChildElementView.extend( {

			resetTypography: function() {
				jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( 'body' ).trigger( 'fusion-typography-reset', this.model.get( 'cid' ) );

				if ( 800 > jQuery( '#fb-preview' ).width() ) {
					setTimeout( function() {
						jQuery( '#fb-preview' )[ 0 ].contentWindow.jQuery( 'body' ).trigger( 'resize' );
					}, 50 );
				}
			},

			/**
			 * Runs during render() call.
			 *
			 * @since 2.0
			 * @return {void}
			 */
			onRender: function() {
				var parentView,
					queryData = this.model.get( 'query_data' );

				// Update the parent image map with latest query data images.
				if ( 'undefined' !== typeof queryData ) {
					parentView = window.FusionPageBuilderViewManager.getView( this.model.get( 'parent' ) );
					parentView.updateImageMap( queryData );
				}

				if ( 'undefined' !== typeof this.model.attributes.selectors ) {
					this.model.attributes.selectors[ 'class' ] += ' ' + this.className;
					this.setElementAttributes( this.$el, this.model.attributes.selectors );
				}
			},

			/**
			 * Runs after view DOM is patched.
			 *
			 * @since 2.0
			 * @return {void}
			 */
			afterPatch: function() {
				var parentView,
					queryData = this.model.get( 'query_data' );

				// Update the parent image map with latest query data images.
				if ( 'undefined' !== typeof queryData ) {
					parentView = window.FusionPageBuilderViewManager.getView( this.model.get( 'parent' ) );
					parentView.updateImageMap( queryData );
				}

				this.resetTypography();

				if ( 'undefined' !== typeof this.model.attributes.selectors ) {
					this.model.attributes.selectors[ 'class' ] += ' ' + this.className;
					this.setElementAttributes( this.$el, this.model.attributes.selectors );
				}

				// Using non debounced version for smoothness.
				this.refreshJs();
			},

			onCancel: function() {
				this.resetTypography();
			},

			/**
			 * Modify template attributes.
			 *
			 * @since 2.0
			 * @param {Object} atts - The attributes.
			 * @return {Object}
			 */
			filterTemplateAtts: function( atts ) {
				var attributes = {};

				// Validate values.
				this.validateValues( atts );
				this.extras = atts.extras;
				atts.parentCid = atts.parent;

				// Create attribute objects.
				this.buildAttr( atts );

				attributes.attrShortcodeIcon        = this.buildShortcodeIconAttr( atts );
				attributes.attrShortcodeIconParent  = this.buildShortcodeIconParentAttr( atts );
				attributes.attrShortcodeIconWrapper = this.buildShortcodeIconWrapperAttr( atts );
				attributes.attrContentBoxHeading    = this.buildContentBoxHeadingAttr( atts );
				attributes.attrHeadingWrapper       = this.buildContentBoxHeadingWrapperAttr( atts );
				attributes.attrContentContainer     = this.buildContentContainerAttr( atts );
				attributes.attrShortcodeTimeline    = this.buildShortcodeTimelineAttr( atts );
				attributes.attrContentWrapper       = this.buildContentWrapperAttr( atts );

				attributes.attrHeadingLink          = this.contentBoxShortcodeAttrs( false, 'heading-link', atts );
				attributes.attrReadMore             = this.contentBoxShortcodeAttrs( true, 'fusion-read-more', atts );
				attributes.attrButton               = this.contentBoxShortcodeAttrs( true, false, atts );

				// Build styles.
				attributes.styles = this.buildStyles( atts );

				// Any extras that need passed on.
				attributes.cid          = this.model.get( 'cid' );
				attributes.output       = atts.values.element_content;
				attributes.parentCid    = atts.parent;
				attributes.values       = atts.values;
				attributes.parentValues = atts.parentValues;

				attributes.usingDynamicParent = this.isParentHasDynamicContent( atts.parentValues );

				return attributes;
			},

			/**
			 * Modify values.
			 *
			 * @since 2.0
			 * @param {Object} atts - The attributes.
			 * @return {void}
			 */
			validateValues: function( atts ) {
				var values       = atts.values,
					parentValues = atts.parentValues,
					params       = this.model.get( 'params' ),
					queryData    = atts.query_data,
					parentView   = window.FusionPageBuilderViewManager.getView( this.model.get( 'parent' ) ),
					imageData    = false;

				// Case when image is set on parent element and icon on child element.
				if ( ( 'undefined' === typeof params.image || '' === params.image ) && ( 'undefined' !== typeof params.icon && '' !== params.icon ) ) {
					values.image = '';
				}

				// Backwards compatibility for when we had image width and height params.
				if ( 'undefined' !== typeof params.image_width && params.image_width ) {
					values.image_width = params.image_width;
				} else {
					values.image_width = values.image_max_width;
				}

				values.image_width  = _.fusionValidateAttrValue( values.image_width, '' );

				if ( 'undefined' !== typeof values.image && ( '' !== values.image || '' !== values.image_id ) ) {

					if ( 'undefined' !== typeof queryData && 'undefined' !== typeof queryData[ values.image ] ) {
						imageData = queryData[ values.image ];
					} else if ( 'undefined' !== typeof queryData && 'undefined' !== typeof queryData[ values.image_id ] ) {
						imageData = queryData[ values.image_id ];
					} else if ( 'undefined' !== typeof parentView.imageMap[ values.image ] ) {
						imageData = parentView.imageMap[ values.image ];
					} else if ( 'undefined' !== typeof parentView.imageMap[ values.image_id ] ) {
						imageData = parentView.imageMap[ values.image_id ];
					}

					if ( imageData ) {
						if ( -1 === parseInt( values.image_width ) || '' === values.image_width ) {
							values.image_width = 'undefined' !== typeof imageData.width ? imageData.width : '35';
						}

						values.image_height = 'undefined' !== typeof imageData.width ? Math.round( ( parseFloat( values.image_width ) / parseFloat( imageData.width ) ) * parseFloat( imageData.height ) * 100 ) / 100 : values.image_width;
					} else {
						if ( -1 === parseInt( values.image_width ) ) {
							values.image_width = '35';
						}

						values.image_height = values.image_width;
					}

				} else {
					values.image_width  = '' === values.image_width ? '35' : values.image_width;
					values.image_height = '35';
				}

				if ( values.linktarget ) {
					values.link_target = values.linktarget;
				}

				if ( 'parent' === parentValues.settings_lvl ) {
					values.backgroundcolor        = parentValues.backgroundcolor;
					values.circlecolor            = parentValues.circlecolor;
					values.circlebordercolor      = parentValues.circlebordercolor;
					values.circlebordersize       = parentValues.circlebordersize;
					values.outercirclebordercolor = parentValues.outercirclebordercolor;
					values.outercirclebordersize  = parentValues.outercirclebordersize;
					values.iconcolor              = parentValues.iconcolor;
					values.animation_type         = parentValues.animation_type;
					values.animation_direction    = parentValues.animation_direction;
					values.animation_speed        = parentValues.animation_speed;
					values.link_target            = parentValues.link_target;
				}

				if ( 'timeline-vertical' === parentValues.layout ) {
					parentValues.columns       = 1;
				}

				if ( 'timeline-vertical' === parentValues.layout || 'timeline-horizontal' === parentValues.layout ) {
					values.animation_speed     = 0.25;
					values.animation_type      = 'fade';
					values.animation_direction = '';
				}

				values.circlebordersize = _.fusionValidateAttrValue( values.circlebordersize, 'px' );
			},

			/**
			 * Set attributes in the model.
			 *
			 * @since 2.0
			 * @param {Object} atts - The attributes.
			 * @return {void}
			 */
			buildAttr: function( atts ) {
				var attr              = {
						class: 'fusion-column content-box-column',
						style: this.getChildCssVars( atts.values, atts.parentValues )
					},
					cid               = this.model.get( 'cid' ),
					values            = atts.values,
					parentValues      = atts.parentValues,
					rowCounter        = 1,
					numOfColumns      = parentValues.columns,
					columns           = '',
					borderColor       = '';

				if ( '' === numOfColumns || '0' === numOfColumns ) {
					numOfColumns = 1;
				} else if ( 6 < numOfColumns ) {
					numOfColumns = 6;
				}

				numOfColumns = parseInt( numOfColumns, 10 );

				columns = 12 / numOfColumns;

				if ( rowCounter > numOfColumns ) {
					rowCounter = 1;
				}

				attr[ 'class' ] += ' content-box-column content-box-column-cid-' + cid;
				attr[ 'class' ] += ' col-lg-' + columns;
				attr[ 'class' ] += ' col-md-' + columns;
				attr[ 'class' ] += ' col-sm-' + columns;

				if ( 5 === numOfColumns ) {
					attr[ 'class' ] = 'fusion-column content-box-column content-box-column-cid-' + cid + ' col-lg-2 col-md-2 col-sm-2';
				}

				attr[ 'class' ] += ' fusion-content-box-hover ';

				if ( 'timeline-vertical' === parentValues.layout || 'timeline-horizontal' === parentValues.layout ) {
					attr[ 'class' ] += ' fusion-appear';
				}

				if ( values.circlebordercolor ) {
					borderColor = values.circlebordercolor;
				}

				if ( values.outercirclebordercolor ) {
					borderColor = values.outercirclebordercolor;
				}

				if ( ! values.circlebordercolor && ! values.outercirclebordercolor ) {
					borderColor = '#f6f6f6';
				}

				if ( 1 === parseFloat( cid ) / parseFloat( numOfColumns ) ) {
					attr[ 'class' ] += ' content-box-column-first-in-row';
				}

				if ( atts.last ) {
					attr[ 'class' ] += ' content-box-column-last';
				}

				if ( parseFloat( cid ) === parseFloat( numOfColumns ) ) {
					attr[ 'class' ] += ' content-box-column-last-in-row';
				}

				if ( borderColor && -1 !== jQuery.inArray( parentValues.layout, [ 'clean-vertical', 'clean-horizontal' ] ) ) {
					attr.style += 'border-color:' + borderColor + ';';
				}

				if ( '' !== values[ 'class' ] ) {
					attr[ 'class' ] += ' ' + values[ 'class' ];
				}

				if ( '' !== values.id ) {
					attr.id = values.id;
				}

				this.model.set( 'selectors', attr );
			},

			getChildCssVars: function( values, parentValues ) {
				var cssVars = [
					'backgroundcolor',
					'iconcolor',
					'iconcolor_hover',
					'circlecolor_hover'
				],
					fullIconSize = '',
					customCssVars = [];
				this.values = values;

				if ( 'transparent' === values.circlecolor || 0 === jQuery.AWB_Color( values.circlecolor ).alpha() ) {
					customCssVars.circle_hover_accent_color = 'transparent';
				}

				if ( -1 !== jQuery.inArray( parentValues.layout, [ 'icon-on-side', 'timeline-vertical', 'clean-horizontal' ] ) && values.image && values.image_width && values.image_height ) {
					if ( 'right' === parentValues.icon_align ) {
						customCssVars[ 'content-padding-right' ] = ( parseFloat( values.image_width ) + 20 ) + 'px';
					} else {
						customCssVars[ 'content-padding-left' ] = ( parseFloat( values.image_width ) + 20 ) + 'px';
					}
				} else if ( -1 !== jQuery.inArray( parentValues.layout, [ 'icon-on-side', 'timeline-vertical', 'clean-horizontal' ] ) && values.icon ) {
					if ( 'yes' === parentValues.icon_circle ) {
						fullIconSize = ( parseFloat( parentValues.icon_size ) + parseFloat( values.circlebordersize ) + parseFloat( values.outercirclebordersize ) ) * 2;
					} else {
						fullIconSize = parentValues.icon_size;
					}

					if ( 'right' === parentValues.icon_align ) {
						customCssVars[ 'content-padding-right' ] = ( parseFloat( fullIconSize ) + 20 ) + 'px';
					} else {
						customCssVars[ 'content-padding-left' ] = ( parseFloat( fullIconSize ) + 20 ) + 'px';
					}
				}

				if ( -1 !== jQuery.inArray( parentValues.layout, [ 'icon-on-side', 'icon-with-title', 'timeline-vertical', 'clean-horizontal' ] ) ) {
					customCssVars[ 'content-text-align' ] = parentValues.icon_align;
				}

				return this.getCssVarsForOptions( cssVars ) + this.getCustomCssVars( customCssVars );
			},

			/**
			 * Builds attributes.
			 *
			 * @since 2.0
			 * @param {Object} atts - The attributes.
			 * @return {Object}
			 */
			buildShortcodeIconAttr: function( atts ) {
				var attr         = {
						class: '',
						style: '',
						'aria-hidden': 'true'
					},
					values       = atts.values,
					parentValues = atts.parentValues;

				if ( values.image ) {
					attr[ 'class' ] = 'image';

					if ( 'icon-boxed' === parentValues.layout && values.image_width && values.image_height ) {
						attr.style  = 'margin-left:-' + ( parseFloat( values.image_width ) / 2 ) + 'px;';
						attr.style += 'top:-' + ( ( parseFloat( values.image_height ) / 2 ) + 50 ) + 'px;';
					}
				} else if ( values.icon ) {

					attr[ 'class' ] = 'fontawesome-icon ' + _.fusionFontAwesome( values.icon );

					// Set parent values if child values are unset to get downwards compatibility.
					if ( ! values.circle ) {
						values.circle = parentValues.circle;
					}

					if ( 'yes' === parentValues.icon_circle ) {

						attr[ 'class' ] += ' circle-yes';

						if ( values.circlebordercolor ) {
							attr.style += 'border-color:' + values.circlebordercolor + ';';
						}

						if ( values.circlebordersize ) {
							attr.style += 'border-width:' + values.circlebordersize + ';';
						}

						if ( values.circlecolor ) {
							attr.style += 'background-color:' + values.circlecolor + ';';
						}

						attr.style += 'height:' + ( parseFloat( parentValues.icon_size ) * 2 ) + 'px;width:' + ( parseFloat( parentValues.icon_size ) * 2 ) + 'px;line-height:' + ( parseFloat( parentValues.icon_size ) * 2 ) + 'px;';

						if ( 'icon-boxed' === parentValues.layout && ( '' === values.outercirclebordercolor || '' === values.outercirclebordersize || '' !== parseFloat( values.outercirclebordersize ) ) ) {
							attr.style += 'top:-' + ( 50 + parseFloat( parentValues.icon_size ) ) + 'px;margin-left:-' + parseFloat( parentValues.icon_size ) + 'px;';
						}

						if ( 'round' === parentValues.icon_circle_radius ) {
							parentValues.icon_circle_radius = '100%';
						}

						attr.style += 'border-radius:' + parentValues.icon_circle_radius + ';';

						if ( values.outercirclebordercolor && values.outercirclebordersize && 0 !== parseFloat( values.outercirclebordersize ) ) {

							// If there is a thick border, kill border width and make it center aligned positioned.
							attr.style += 'position:relative;';
							attr.style += 'top:auto;';
							attr.style += 'left:auto;';
							attr.style += 'margin:0;';
							attr.style += 'box-sizing: content-box;';
						}
					} else {

						attr[ 'class' ] += ' circle-no';

						attr.style += 'background-color:transparent;border-color:transparent;height:auto;width: ' + _.fusionGetValueWithUnit( parentValues.icon_size ) + ';line-height:normal;';

						if ( 'icon-boxed' === parentValues.layout ) {
							attr.style += 'position:relative;left:auto;right:auto;top:auto;margin-left:auto;margin-right:auto;';
						}
					}

					if ( values.iconflip ) {
						attr[ 'class' ] += ' fa-flip-' + values.iconflip;
					}

					if ( values.iconrotate ) {
						attr[ 'class' ] += ' fa-rotate-' + values.iconrotate;
					}

					if ( 'yes' === values.iconspin ) {
						attr[ 'class' ] += ' fa-spin';
					}

					attr.style += 'font-size:' + parentValues.icon_size + ';';
				}

				return attr;
			},

			/**
			 * Builds attributes.
			 *
			 * @since 2.0
			 * @param {Object} atts - The attributes.
			 * @return {Object}
			 */
			buildShortcodeIconParentAttr: function( atts ) {
				var attr           = {
						class: 'icon',
						style: ''
					},
					values         = atts.values,
					parentValues   = atts.parentValues,
					animationDelay = '';

				if ( 'yes' !== parentValues.icon_circle && 'icon-boxed' === parentValues.layout ) {
					attr.style += 'position:absolute;width: 100%;top:-' + ( 50 + ( parseFloat( parentValues.icon_size ) / 2 ) ) + 'px;';
				}

				if ( 'timeline-vertical' === parentValues.layout && 'right' === parentValues.icon_align && ( ! values.outercirclebordercolor || ! values.circlebordersize ) ) {
					attr.style += 'padding-left:20px;';
				}

				if ( parentValues.animation_delay ) {
					animationDelay = parentValues.animation_delay;
					attr.style += '-webkit-animation-duration: ' + animationDelay + 'ms;';
					attr.style += 'animation-duration: ' + animationDelay + 'ms;';
				}

				return attr;
			},

			/**
			 * Builds attributes.
			 *
			 * @since 2.0
			 * @param {Object} atts - The attributes.
			 * @return {Object}
			 */
			buildShortcodeIconWrapperAttr: function( atts ) {
				var attr              = {
						class: 'icon',
						style: ''
					},
					values            = atts.values,
					parentValues      = atts.parentValues,
					marginDirection   = '',
					margin            = '',
					transparentCircle = 'transparent' === values.circlecolor || 0 === jQuery.AWB_Color( values.circlecolor ).alpha();

				if ( values.icon ) {

					attr[ 'class' ] = '';

					if ( 'yes' === parentValues.icon_circle ) {
						attr.style += 'height:' + ( ( parseFloat( parentValues.icon_size ) + parseFloat( values.circlebordersize ) ) * 2 ) + 'px;';
						attr.style += 'width:' + ( ( parseFloat( parentValues.icon_size ) + parseFloat( values.circlebordersize ) ) * 2 ) + 'px;';
						attr.style += 'line-height:' + ( parseFloat( parentValues.icon_size ) + ( parseFloat( values.circlebordersize ) * 2 ) ) + 'px;';

						if ( values.outercirclebordercolor ) {
							attr.style += 'border-color:' + values.outercirclebordercolor + ';';
						}

						if ( values.outercirclebordersize && 0 !== parseFloat( values.outercirclebordersize ) ) {
							attr.style += 'border-width:' + parseFloat( values.outercirclebordersize ) + 'px;';
						}

						attr.style += 'border-style:solid;';

						if ( values.circlebordercolor && 0 !== parseFloat( values.circlebordersize ) ) {
							attr.style += 'background-color:' + values.circlebordercolor + ';';
						} else if ( values.outercirclebordersize && 0 !== parseFloat( values.outercirclebordersize ) && ! transparentCircle ) {
							attr.style += 'background-color:' + values.outercirclebordercolor + ';';
						}

						if ( 'icon-boxed' === parentValues.layout ) {
							attr.style += 'position:absolute;';
							attr.style += 'top:-' + ( 50 + parseFloat( parentValues.icon_size ) + parseFloat( values.circlebordersize ) ) + 'px;';
							attr.style += 'margin-left:-' + ( parseFloat( parentValues.icon_size ) + parseFloat( values.circlebordersize ) ) + 'px;';
						}

						if ( 'round' === parentValues.icon_circle_radius ) {
							parentValues.icon_circle_radius = '100%';
						}

						if ( -1 !== jQuery.inArray( parentValues.layout, [ 'icon-on-side', 'timeline-vertical', 'clean-horizontal' ] ) ) {
							marginDirection = 'margin-right';
							if ( 'right' === parentValues.icon_align ) {
								marginDirection = 'margin-left';
							}

							margin = '20px';
							if ( 'timeline-vertical' === parentValues.layout && 'right' === parentValues.icon_align ) {
								margin = '10px';
							}

							attr.style += marginDirection + ':' + margin + ';';
						}

						attr.style += 'box-sizing:content-box;';
						attr.style += 'border-radius:' + parentValues.icon_circle_radius + ';';
					}
				}

				return attr;
			},

			/**
			 * Builds attributes.
			 *
			 * @since 2.0
			 * @param {Object} atts - The attributes.
			 * @return {Object}
			 */
			buildContentBoxHeadingAttr: function( atts ) {
				var attr           = {
						class: 'content-box-heading',
						style: this.getHeadingCssVars( atts.values )
					},
					values         = atts.values,
					parentValues   = atts.parentValues,
					fontSize       = '',
					fullIconSize   = '';

				if ( parentValues.title_size ) {
					fontSize = parseFloat( parentValues.title_size );

					attr.style += 'line-height:' + ( fontSize + 5 ) + 'px;';
					attr[ 'data-fontsize' ]          = fontSize;
					attr[ 'data-lineheight' ]        = ( fontSize + 5 );
					attr[ 'data-inline-fontsize' ]   = fontSize + 'px';
					attr[ 'data-inline-lineheight' ] =  ( fontSize + 5 ) + 'px';
				}

				if ( 'right' === parentValues.icon_align && '' !== attr.style && ( -1 !== jQuery.inArray( parentValues.layout, [ 'icon-on-side', 'icon-with-title', 'timeline-vertical', 'clean-horizontal' ] ) ) ) {
					attr.style += ' text-align:' + parentValues.icon_align + ';';
				} else if ( 'left' === parentValues.icon_align && jQuery( 'body' ).hasClass( 'rtl' ) && '' === attr.style && ( -1 !== jQuery.inArray( parentValues.layout, [ 'icon-on-side', 'icon-with-title', 'timeline-vertical', 'clean-horizontal' ] ) ) ) {
					attr.style += ' text-align:' + parentValues.icon_align + ';';
				}

				if ( 'icon-on-side' === parentValues.layout || 'clean-horizontal' === parentValues.layout ) {

					if ( '' !== values.image && '' !== values.image_width && '' !== values.image_height ) {

						if ( 'right' === parentValues.icon_align ) {
							attr.style += 'padding-right:' + ( parseFloat( values.image_width ) + 20 ) + 'px;';
						} else {
							attr.style += 'padding-left:' + ( parseFloat( values.image_width ) + 20 ) + 'px;';
						}
					} else if ( '' !== values.icon ) {
						if ( 'yes' === parentValues.icon_circle ) {
							fullIconSize = ( parseFloat( parentValues.icon_size ) + parseFloat( values.circlebordersize ) + parseFloat( values.outercirclebordersize ) ) * 2;
						} else {
							fullIconSize = parentValues.icon_size;
						}

						if ( 'right' === parentValues.icon_align ) {
							attr.style += 'padding-right:' + ( parseFloat( fullIconSize ) + 20 ) + 'px;';
						} else {
							attr.style += 'padding-left:' + ( parseFloat( fullIconSize ) + 20 ) + 'px;';
						}
					}
				}

				attr = _.fusionInlineEditor( {
					cid: this.model.get( 'cid' ),
					param: 'title',
					'disable-return': true,
					'disable-extra-spaces': true,
					toolbar: false
				}, attr );

				return attr;
			},

			getHeadingCssVars: function( values ) {
				this.values = values;
				const heading_tag = 'div' === values.heading_size || 'p' === values.heading_size ? values.heading_size : 'h' + values.heading_size;

				let cssVars = '';
				if ( values.title_size ) {
					cssVars = this.getHeadingFontVars( heading_tag, { 'font-size': _.fusionGetValueWithUnit( values.title_size, 'px' ) } );
				} else {
					cssVars = this.getHeadingFontVars( heading_tag, { 'font-size': 'var(--content_box_title_size)' } );
				}

				return cssVars;
			},

			/**
			 * Builds attributes.
			 *
			 * @since 2.0
			 * @param {Object} atts - The attributes.
			 * @return {Object}
			 */
			buildContentBoxHeadingWrapperAttr: function( atts ) {
				var attr         = {
						class: 'heading'
					},
					values       = atts.values,
					parentValues = atts.parentValues;

				if ( '' !== values.icon || '' !== values.image ) {
					attr[ 'class' ] += ' heading-with-icon';
				}

				if ( '' !== parentValues.icon_align ) {
					attr[ 'class' ] += ' icon-' + parentValues.icon_align;
				}

				return attr;
			},

			/**
			 * Builds attributes.
			 *
			 * @since 2.0
			 * @param {Object} atts - The attributes.
			 * @return {Object}
			 */
			buildContentContainerAttr: function( atts ) {
				var attr           = {
						class: 'content-container',
						style: ''
					},
					values         = atts.values,
					parentValues   = atts.parentValues,
					imageHeight    = '',
					fullIconSize   = '';

				if ( -1 !== jQuery.inArray( parentValues.layout, [ 'icon-on-side', 'timeline-vertical', 'clean-horizontal' ] ) && values.image && values.image_width && values.image_height ) {
					if ( 'timeline-vertical' === parentValues.layout ) {
						imageHeight = values.image_height;
						if ( imageHeight > parseFloat( parentValues.title_size ) && 0 < imageHeight - parseFloat( parentValues.title_size ) - 15 ) {
							attr.style += 'margin-top:-' + ( imageHeight - parseFloat( parentValues.title_size ) ) + 'px;';
						}
					}
				} else if ( -1 !== jQuery.inArray( parentValues.layout, [ 'icon-on-side', 'timeline-vertical', 'clean-horizontal' ] ) && values.icon ) {
					if ( 'timeline-vertical' === parentValues.layout ) {
						if ( fullIconSize > parseFloat( parentValues.title_size ) && 0 < fullIconSize - parseFloat( parentValues.title_size ) - 15 ) {
							if ( 'timeline-vertical' === parentValues.layout ) {
								attr.style += 'margin-top:-' + ( ( parseFloat( fullIconSize ) - parseFloat( parentValues.title_size ) ) / 2 ) + 'px;';
							} else {
								attr.style += 'margin-top:-' + ( parseFloat( fullIconSize ) - parseFloat( parentValues.title_size ) ) + 'px;';
							}
						}
					}
				}

				attr = _.fusionInlineEditor( {
					cid: this.model.get( 'cid' )
				}, attr );

				return attr;
			},

			/**
			 * Builds attributes.
			 *
			 * @since 2.0
			 * @param {Object} atts - The attributes.
			 * @return {Object}
			 */
			buildShortcodeTimelineAttr: function( atts ) {
				var attr                = {
						class: ''
					},
					values              = atts.values,
					parentValues        = atts.parentValues,
					borderColor         = '',
					fullIconSize        = '',
					positionTop         = '',
					positionHorizontal  = '',
					animationDelay      = '';

				if ( 'timeline-horizontal' === parentValues.layout ) {
					attr[ 'class' ] = 'content-box-shortcode-timeline';
					attr.style = '';

					if ( 'yes' === parentValues.icon_circle ) {
						if ( 0 !== parseFloat( values.outercirclebordersize ) ) {
							fullIconSize = ( parseFloat( parentValues.icon_size ) + parseFloat( values.circlebordersize ) + parseFloat( values.outercirclebordersize ) ) * 2;
						} else {
							fullIconSize = parseFloat( parentValues.icon_size ) * 2;
						}
					} else {
						fullIconSize = parseFloat( parentValues.icon_size );
					}

					positionTop = fullIconSize / 2;

					if ( values.backgroundcolor && 'transparent' !== values.backgroundcolor && 0 !== jQuery.AWB_Color( values.backgroundcolor ).alpha() ) {
						positionTop += 35;
					}

					if ( values.circlebordercolor ) {
						borderColor = values.circlebordercolor;
					}

					if ( values.outercirclebordercolor && values.outercirclebordersize ) {
						borderColor = values.outercirclebordercolor;
					}

					if ( ! values.circlebordercolor && ! values.outercirclebordercolor ) {
						borderColor = '#f6f6f6';
					}

					if ( borderColor ) {
						attr.style += 'border-color:' + borderColor + ';';
					}

					if ( positionTop ) {
						attr.style += 'top:' + parseFloat( positionTop ) + 'px;';
					}
				} else if ( 'timeline-vertical' === parentValues.layout ) {
					attr[ 'class' ] = 'content-box-shortcode-timeline-vertical';
					attr.style = '';

					if ( 'yes' === parentValues.icon_circle ) {
						if ( parseFloat( values.outercirclebordersize ) ) {
							fullIconSize = ( parseFloat( parentValues.icon_size ) + parseFloat( values.circlebordersize ) + parseFloat( values.outercirclebordersize ) ) * 2;
						} else {
							fullIconSize = parseFloat( parentValues.icon_size ) * 2;
						}
					} else {
						fullIconSize = parseFloat( parentValues.icon_size );
					}

					positionTop        = fullIconSize;
					positionHorizontal = fullIconSize / 2;
					if ( values.backgroundcolor && 'transparent' !== values.backgroundcolor && 0 !== jQuery.AWB_Color( values.backgroundcolor ).alpha() ) {
						positionTop        += 35;
						positionHorizontal += 35;
					}

					if ( values.circlebordercolor ) {
						borderColor = values.circlebordercolor;
					}

					if ( values.outercirclebordercolor && values.outercirclebordersize ) {
						borderColor = values.outercirclebordercolor;
					}

					if ( ! values.circlebordercolor && ! values.outercirclebordercolor ) {
						borderColor = '#f6f6f6';
					}

					if ( borderColor ) {
						attr.style += 'border-color:' + borderColor + ';';
					}

					if ( positionHorizontal ) {
						if ( 'right' === parentValues.icon_align ) {
							attr.style += 'right:' + parseFloat( positionHorizontal ) + 'px;';
						} else {
							attr.style += 'left:' + parseFloat( positionHorizontal ) + 'px;';
						}
					}

					if ( positionTop ) {
						attr.style += 'top:' + positionTop + 'px;';
					}
				}

				if ( parentValues.animationDelay ) {
					animationDelay = parentValues.animation_delay;
					attr.style += '-webkit-transition-duration: ' + animationDelay + 'ms;';
					attr.style += 'animation-duration: ' + animationDelay + 'ms;';
				}

				return attr;
			},

			/**
			 * Builds attributes.
			 *
			 * @since 2.0
			 * @param {Object} atts - The attributes.
			 * @return {Object}
			 */
			buildContentWrapperAttr: function( atts ) {
				var attr         = {
						class: 'col content-box-wrapper content-wrapper'
					},
					values       = atts.values,
					parentValues = atts.parentValues;

				// Set parent values if child values are unset to get downwards compatibility.
				if ( ! values.backgroundcolor ) {
					values.backgroundcolor = parentValues.backgroundcolor;
				}

				if ( values.backgroundcolor ) {
					if ( 'transparent' !== values.backgroundcolor && 0 !== jQuery.AWB_Color( values.backgroundcolor ).alpha() ) {
						attr[ 'class' ] += '-background';
					}
				}

				if ( 'icon-boxed' === parentValues.layout ) {
					attr[ 'class' ] += ' content-wrapper-boxed';
				}

				if ( values.link && 'box' === parentValues.link_area ) {
					attr[ 'data-link' ] = values.link;
					attr[ 'data-link-target' ] = values.link_target;
				}

				attr[ 'class' ] += ' link-area-' + parentValues.link_area;

				if ( values.link && parentValues.link_type ) {
					attr[ 'class' ] += ' link-type-' + parentValues.link_type;
				}

				if ( values.outercirclebordercolor && values.outercirclebordersize && parseFloat( values.outercirclebordersize ) ) {
					attr[ 'class' ] += ' content-icon-wrapper-yes';
				}
				if ( values.outercirclebordercolor && values.outercirclebordersize && 0 !== parseFloat( values.outercirclebordersize ) && 'pulsate' === parentValues.icon_hover_type ) {
					attr[ 'class' ] += ' icon-wrapper-hover-animation-' + parentValues.icon_hover_type;
				} else {
					attr[ 'class' ] += ' icon-hover-animation-' + parentValues.icon_hover_type;
				}

				if ( values.textcolor ) {
					attr.style += 'color:' + values.textcolor + ';';
				}

				if ( 'none' !== values.animation_type ) {
					if ( 'undefined' !== typeof values.animation_class ) {
						attr[ 'class' ] += ' ' + values.animation_class;
					}
				}

				if ( '' === values.animation_type ) {
					attr = _.fusionAnimations( parentValues, attr );
				} else {
					attr = _.fusionAnimations( values, attr );
				}

				return attr;
			},

			/**
			 * Builds styles.
			 *
			 * @since 2.0
			 * @param {Object} atts - The attributes.
			 * @return {string}
			 */
			buildStyles: function( atts ) {

				var styles                 = '',
					cid                    = this.model.get( 'cid' ), // eslint-disable-line no-unused-vars
					values                 = atts.values,
					parentValues           = atts.parentValues,
					parentCid              = atts.parentCid,
					circleHoverAccentColor = '',
					transparentChild       = false,
					hoverAccentColor       = '';

				if ( 'transparent' === values.circlecolor || 0 === jQuery.AWB_Color( values.circlecolor ).alpha() || 'no' === parentValues.icon_circle ) {
					transparentChild = true;
				}

				if ( true === transparentChild ) {
					hoverAccentColor       = parentValues.hover_accent_color;
					circleHoverAccentColor = 'transparent';

					styles += '.fusion-content-boxes-cid' + parentCid + ' .fusion-content-box-hover .heading-link:hover .icon i.circle-yes,.fusion-content-boxes-cid' + parentCid + ' .fusion-content-box-hover .link-area-box:hover .heading-link .icon i.circle-yes,.fusion-content-boxes-cid' + parentCid + ' .fusion-content-box-hover .link-area-link-icon-hover .heading .icon i.circle-yes,.fusion-content-boxes-cid' + parentCid + ' .fusion-content-box-hover .link-area-box-hover .heading .icon i.circle-yes { background-color: ' + circleHoverAccentColor + ' !important; border-color: ' + hoverAccentColor + ' !important;}';
				} else if ( false === transparentChild ) {
					hoverAccentColor = parentValues.hover_accent_color;

					styles += '.fusion-content-boxes-cid' + parentCid + ' .fusion-content-box-hover .heading-link:hover .icon i.circle-yes,.fusion-content-boxes-cid' + parentCid + ' .fusion-content-box-hover .link-area-box:hover .heading-link .icon i.circle-yes,.fusion-content-boxes-cid' + parentCid + ' .fusion-content-box-hover .link-area-link-icon-hover .heading .icon i.circle-yes,.fusion-content-boxes-cid' + parentCid + ' .fusion-content-box-hover .link-area-box-hover .heading .icon i.circle-yes {background-color: ' + hoverAccentColor + ' !important;border-color: ' + hoverAccentColor + ' !important;}';
				}

				return styles;
			},

			/**
			 * Builds attributes.
			 *
			 * @since 2.0
			 * @param {boolean} readmore - Whether we want a readmore link or not.
			 * @param {string} extraClass - Any extra classes that we want to add.
			 * @param {Object} atts - The attributes.
			 * @return {Object}
			 */
			contentBoxShortcodeAttrs: function( readmore, extraClass, atts ) {

				// contentBoxShortcodeLink Attributes.
				var contentBoxShortcodeLink = {
						class: '',
						style: ''
					},
					additionMargin          = '',
					fullIconSize            = '',
					values                  = atts.values,
					parentValues            = atts.parentValues,
					extras                  = atts.extras;

				if ( values.link ) {
					contentBoxShortcodeLink.href = values.link;
				}

				if ( values.link_target ) {
					contentBoxShortcodeLink.target = values.link_target;
				}
				if ( '_blank' === values.link_target ) {
					contentBoxShortcodeLink.rel = 'noopener noreferrer';
				}

				if ( readmore ) {
					if ( 'text' === parentValues.link_type || 'button-bar' === parentValues.link_type ) {
						contentBoxShortcodeLink[ 'class' ] += ' fusion-read-more';
						if ( 'button-bar' === parentValues.link_type ) {
							contentBoxShortcodeLink[ 'class' ] += ' fusion-button-bar';
						}

					} else if ( 'button' === parentValues.link_type ) {
						contentBoxShortcodeLink[ 'class' ] += 'fusion-read-more-button fusion-content-box-button fusion-button button-default fusion-button-default-size button-' + extras.button_type.toLowerCase();
					}
				}

				if ( 'button-bar' === parentValues.link_type && 'timeline-vertical' === parentValues.layout && readmore ) {

					additionMargin = 20 + 15;
					if ( values.backgroundcolor && 'transparent' !== values.backgroundcolor && 0 !== jQuery.AWB_Color( values.backgroundcolor ).alpha() ) {
						additionMargin += 35;
					}

					if ( values.image && values.image_width && values.image_height ) {
						fullIconSize = values.image_width;
					} else if ( values.icon ) {
						if ( 'yes' === parentValues.icon_circle ) {
							fullIconSize = ( parentValues.icon_size + parseFloat( values.circlebordersize ) + parseFloat( values.outercirclebordersize ) ) * 2;
						} else {
							fullIconSize = parentValues.icon_size;
						}
					}

					if ( 'right' === parentValues.icon_align ) {
						contentBoxShortcodeLink.style += 'margin-right:' + ( parseFloat( fullIconSize ) + parseFloat( additionMargin ) ) + 'px;';
					} else {
						contentBoxShortcodeLink.style += 'margin-left:' + ( parseFloat( fullIconSize ) + parseFloat( additionMargin ) ) + 'px;';
					}

					contentBoxShortcodeLink.style += 'width:calc(100% - ' + ( fullIconSize + additionMargin + 15 ) + 'px);';
				} else if ( -1 !== jQuery.inArray( parentValues.layout, [ 'icon-on-side', 'clean-horizontal', 'timeline-vertical' ] ) && -1 !== jQuery.inArray( parentValues.link_type, [ 'text', 'button' ] ) && readmore ) {

					additionMargin = 20;

					if ( values.image && values.image_width && values.mage_height ) {
						fullIconSize = values.image_width;
					} else if ( values.icon ) {
						if ( 'yes' === parentValues.icon_circle ) {
							fullIconSize = ( parseFloat( parentValues.icon_size ) + parseFloat( values.circlebordersize ) + parseFloat( values.outercirclebordersize ) ) * 2;
						} else {
							fullIconSize = parentValues.icon_size;
						}
					}

					if ( 'text' === parentValues.link_type || 'button' === parentValues.link_type ) {
						if ( 'right' === parentValues.icon_align ) {
							contentBoxShortcodeLink.style += 'float:' + parentValues.icon_align + ';';
							contentBoxShortcodeLink.style += 'margin-right:' + ( parseFloat( fullIconSize ) + parseFloat( additionMargin ) ) + 'px;';
						} else {
							contentBoxShortcodeLink.style += 'margin-left:' + ( parseFloat( fullIconSize ) + additionMargin ) + 'px;';
						}

						if ( 'yes' === parentValues.button_span ) {
							contentBoxShortcodeLink.style += 'width:calc( 100% - ' + ( parseFloat( fullIconSize ) + parseFloat( additionMargin ) ) + 'px );';
						}
					} else if ( 'right' === parentValues.icon_align ) {
						contentBoxShortcodeLink.style += 'margin-right:' + ( parseFloat( fullIconSize ) + parseFloat( additionMargin ) ) + 'px;';
					} else {
						contentBoxShortcodeLink.style += 'margin-left:' + ( parseFloat( fullIconSize ) + parseFloat( additionMargin ) ) + 'px;';
					}
				} else if ( 'icon-with-title' === parentValues.layout ) {
					contentBoxShortcodeLink.style += 'float:' + parentValues.icon_align + ';';
				}

				if ( -1 === jQuery.inArray( parentValues.layout, [ 'icon-on-side', 'clean-horizontal', 'timeline-vertical' ] ) && 'button' === parentValues.link_type && 'yes' === parentValues.button_span ) {
					contentBoxShortcodeLink.style += 'width: 100%;';
				}

				if ( extraClass ) {
					contentBoxShortcodeLink[ 'class' ] += ' ' + extraClass;
				}
				return contentBoxShortcodeLink;
			}
		} );
	} );
}( jQuery ) );
