(function($){

	FLBuilder.registerModuleHelper('callout', {

		init: function()
		{
			var form  = $('.fl-builder-settings'),
				align = form.find('input[name=align]'),
				iconSize = form.find( '#fl-field-icon_size input[type=number]' ),
				buttonBgColor = form.find( 'input[name=btn_bg_color]' );

			// Preview events.
			align.on('change', this._previewAlign);
			iconSize.on( 'input', this._previewIconSize );
			buttonBgColor.on( 'change', this._previewButtonBackground );
		},

		_previewAlign: function()
		{
			var form   = $('.fl-builder-settings'),
				align  = form.find('input[name=align]').val(),
				wrap   = FLBuilder.preview.elements.node.find('.fl-callout');

			wrap.removeClass('fl-callout-left');
			wrap.removeClass('fl-callout-center');
			wrap.removeClass('fl-callout-right');
			wrap.addClass('fl-callout-' + align);
		},

		_previewIconSize: function() {
			var preview = FLBuilder.preview,
				iconSelector = preview._getPreviewSelector( preview.classes.node, '.fl-icon i' ),
				beforeSelector = preview._getPreviewSelector( preview.classes.node, '.fl-icon i::before' ),
				form = $( '.fl-builder-settings' ),
				field = form.find( '#fl-field-icon_size .fl-field-responsive-setting:visible' ),
				size = field.find( 'input[type=number]' ).val(),
				unit = field.find( 'select' ).val(),
				bgColor = form.find( 'input[name=icon_bg_color]' ).val(),
				value = '' === size ? '' : size + unit + ' !important',
				height = '' === size ? '' : ( size * 1.75 ) + unit + ' !important';

			preview.updateCSSRule( iconSelector, 'font-size', value, true );
			preview.updateCSSRule( beforeSelector, 'font-size', value, true );

			if ( '' === bgColor ) {
				preview.updateCSSRule( iconSelector, {
					'line-height': '1',
					'height': 'auto !important',
					'width': 'auto !important',
				}, undefined, true );
			} else {
				preview.updateCSSRule( iconSelector, {
					'line-height': height,
					'height': height,
					'width': height,
				}, undefined, true );
			}
		},

		_previewButtonBackground: function( e ) {
			var preview	= FLBuilder.preview,
				selector = preview.classes.node + ' a.fl-button, ' + preview.classes.node + ' a.fl-button:visited',
				form = $( '.fl-builder-settings:visible' ),
				style = form.find( 'select[name=btn_style]' ).val(),
				bgColor = form.find( 'input[name=btn_bg_color]' ).val();

			if ( 'flat' === style ) {
				if ( '' !== bgColor && bgColor.indexOf( 'rgb' ) < 0 ) {
					bgColor = '#' + bgColor;
				}
				preview.updateCSSRule( selector, 'background-color', bgColor );
				preview.updateCSSRule( selector, 'border-color', bgColor );
			} else {
				preview.delayPreview( e );
			}
		},
	});

})(jQuery);
