(function ($) {

	//Text Color Divi
	wp.customize('et_divi[et_pb_jt_counter-number_text_color]', function (value) {
		value.bind(function (to) {
			et_print_module_styles_css(
				'et_divi[et_pb_jt_counter-number_text_color]',
				'color',
				'.et_pb_jt_counter .et_pb_jt_counter_number',
				to,
				true
			);
		});
	});

	//Text Color Extra
	wp.customize('et_extra[et_pb_jt_counter-number_text_color]', function (value) {
		value.bind(function (to) {
			et_print_module_styles_css(
				'et_divi[et_pb_jt_counter-number_text_color]',
				'color',
				'.et_pb_jt_counter .et_pb_jt_counter_number',
				to,
				true
			);
		});
	});


	//Font Size Divi
	wp.customize('et_divi[et_pb_jt_counter-number_font_size]', function (value) {
		value.bind(function (to) {
			et_print_module_styles_css(
				'et_divi[et_pb_jt_counter-number_font_size]',
				'font-size',
				'.et_pb_jt_counter .et_pb_jt_counter_number',
				to,
				true
			);
		});
	});

	//Font Size Extra
	wp.customize('et_extra[et_pb_jt_counter-number_font_size]', function (value) {
		value.bind(function (to) {
			et_print_module_styles_css(
				'et_divi[et_pb_jt_counter-number_font_size]',
				'font-size',
				'.et_pb_jt_counter .et_pb_jt_counter_number',
				to,
				true
			);
		});
	});



	function et_print_module_styles_css(id, type, selector, value, important) {
		// sanitize id into safe style's ID
		var style_id = id.replace(/[ +\/\[\]]/g, '_').toLowerCase(),
			$style = $('#' + style_id),
			$style_length = $style.length;

		// create DOM
		var style = $('<style />', {
			id: style_id
		});

		// Determine important tag
		if (typeof important !== 'undefined') {
			var important_tag = '!important';
		} else {
			var important_tag = '';
		}

		// append style into DOM
		switch (type) {
			case 'font-size':
				style.text(selector + "{ font-size: " + value + "em " + important_tag + ";}");

				break;

			case 'font-styles':
				style.text(selector + " { " + et_set_font_styles(value, important_tag) + " }");
				break;

			case 'letter-spacing':
				style.text(selector + "{ letter-spacing: " + value + "px " + important_tag + ";}");
				break;

			case 'line-height':
				style.text(selector + "{ line-height: " + value + "em " + important_tag + ";}");
				break;

			case 'color':
				style.text(selector + "{ color: " + value + " " + important_tag + ";}");
				break;

			case 'background-color':
				style.text(selector + "{ background-color: " + value + " " + important_tag + ";}");
				break;

			case 'border-radius':
				style.text(selector + " { -moz-border-radius: " + value + "px; -webkit-border-radius: " + value + "px; border-radius: " + value + "px; }");
				break;

			case 'width':
				style.text(selector + "{ width: " + value + "px " + important_tag + ";}");
				break;

			case 'height':
				style.text(selector + "{ height: " + value + "px " + important_tag + ";}");
				break;

			case 'padding':
				style.text(selector + "{ padding: " + value + "px " + important_tag + ";}");
				break;

			case 'padding-top-bottom':
				style.text(selector + "{ padding: " + value + "px 0 " + important_tag + ";}");
				break;

			case 'padding-tabs':
				var padding_tab_top_bottom = parseInt(value) * 0.133333333,
					padding_tab_active_top = padding_tab_top_bottom + 1,
					padding_tab_active_bottom = padding_tab_top_bottom - 1,
					padding_tab_content = parseInt(value) * 0.8;

				// negative result will cause layout issue
				if (padding_tab_active_bottom < 0) {
					padding_tab_active_bottom = 0;
				}

				style.text(".et_pb_tabs_controls li{ padding: " + padding_tab_active_top + "px " + value + "px " + padding_tab_active_bottom + "px; } .et_pb_tabs_controls li.et_pb_tab_active{ padding: " + padding_tab_top_bottom + "px " + value + "px; }  .et_pb_all_tabs { padding: " + padding_tab_content + "px " + value + "px " + important_tag + ";}");
				break;

			case 'padding-slider':
				style.text(selector + "{ padding-top: " + value + "%; padding-bottom: " + value + "%; }");

				if ('et_pagebuilder_slider_padding' === id) {
					style.append('@media only screen and ( max-width: 767px ) { ' + selector + '{ padding-top: 16%; padding-bottom: 16%; } }');
				}

				break;

			case 'padding-call-to-action':
				value = parseInt(value);

				style.text(".et_pb_promo { padding: " + value + "px " + (value * (60 / 40)) + "px; }");
				style.append(".et_pb_column_1_2 .et_pb_promo, .et_pb_column_1_3 .et_pb_promo, .et_pb_column_1_4 .et_pb_promo { padding: " + value + "px; }");
				break;

			case 'social-icon-size':
				var icon_margin = parseInt(value) * 0.57;
				var icon_dimension = parseInt(value) * 2;

				style.text(".et_pb_social_media_follow li a.icon{ margin-right: " + icon_margin + "px; width: " + icon_dimension + "px; height: " + icon_dimension + "px; } .et_pb_social_media_follow li a.icon::before{ width: " + icon_dimension + "px; height: " + icon_dimension + "px; font-size: " + value + "px; line-height: " + icon_dimension + "px; } .et_pb_social_media_follow li a.follow_button{ font-size:" + value + "px; }");

				break;

			case 'border-top-style':
				style.text(selector + "{ border-top-style: " + value + " " + important_tag + "; }");
				break;

			case 'border-top-width':
				style.text(selector + "{ border-top-width: " + value + "px " + important_tag + "; }");
				break;
		}

		// Insert custom styling
		if ($style_length) {
			$style.replaceWith(style);
		} else {
			$('head').append(style);
		}
	}

	function et_set_font_styles(value, important_tag) {
		var font_styles = value.split('|'),
			style = '';

		if ($.inArray('bold', font_styles) >= 0) {
			style += "font-weight: bold " + important_tag + ";";
		} else {
			style += "font-weight: inherit " + important_tag + ";";
		}

		if ($.inArray('italic', font_styles) >= 0) {
			style += "font-style: italic " + important_tag + ";";
		} else {
			style += "font-style: inherit " + important_tag + ";";
		}

		if ($.inArray('underline', font_styles) >= 0) {
			style += "text-decoration: underline " + important_tag + ";";
		} else {
			style += "text-decoration: inherit " + important_tag + ";";
		}

		if ($.inArray('uppercase', font_styles) >= 0) {
			style += "text-transform: uppercase " + important_tag + ";";
		} else {
			style += "text-transform: inherit " + important_tag + ";";
		}

		return style;
	}

})(jQuery);
