<?php
/**
 * Child of the WP_Widget class
 *
 * @link https://organicthemes.com
 * @since 1.0.0
 *
 * @package Organic_Widgets
 * @subpackage Organic_Widgets/admin
 */

// Block direct requests.
if ( ! defined( 'ABSPATH' ) ) {
	die( '-1' );
}

/**
 * Class that implements our custom widget.
 *
 * @since 1.0.0
 *
 * @see WP_Widget
 */
class Organic_Widgets_Pro_Custom_Widget extends WP_Widget {

	/**
	 * The loader that's responsible for maintaining and registering all hooks that power
	 * the plugin.
	 *
	 * @since 1.0.0
	 * @access protected
	 * @var Organic_Widgets_Pro_Custom_Widget $id_prefix id_prefix for a class
	 */
	protected $id_prefix;

	/**
	 * Array containing the background options to allow for the section
	 *
	 * @since 1.0.0
	 * @access protected
	 * @var Organic_Widgets_Pro_Custom_Widget $bg_options array of options for backgrounds
	 */
	protected $bg_options;

	/**
	 * Array containing the font options to allow for the section
	 *
	 * @since 1.0.0
	 * @access protected
	 * @var Organic_Widgets_Pro_Custom_Widget $font_options array of options for fonts
	 */
	protected $font_options;

	/**
	 * Array containing the layout options to allow for the section
	 *
	 * @since 1.0.0
	 * @access protected
	 * @var Organic_Widgets_Pro_Custom_Widget $layout_options array of options for layouts
	 */
	protected $layout_options;

	/**
	 * Array containing the display options to allow for the section
	 *
	 * @since 1.0.0
	 * @access protected
	 * @var Organic_Widgets_Pro_Custom_Widget $display_options array of options for display visibility
	 */
	protected $display_options;

	/**
	 * Check if a given hex value is valid
	 *
	 * @since 1.0.0
	 * @param string $color_value The color value to check (hex code).
	 * @return boolean True if $color_value is a valid hex code, else False.
	 */
	protected function check_hex_color( $color_value ) {

		if ( preg_match( '/^#[a-f0-9]{6}$/i', $color_value ) ) {
			return true;
		}

		return false;

	}

	/**
	 * Check if a given video url is valid
	 *
	 * @since 1.0.0
	 * @param string $video_url The video url to check.
	 * @return boolean True if $video_url is an accepted url, false if not.
	 */
	protected function check_video_url( $video_url ) {

		if ( 'youtube' == $this->get_video_type( $video_url ) ) {
			return true;
		} else {
			return false;
		}

	}

	/**
	 * Get Source of Video
	 *
	 * @since 1.0.0
	 * @param string $video_url The video url to check.
	 * @return string Video source.
	 */
	protected function get_video_type( $video_url ) {

		if ( strpos( $video_url, 'youtube' ) !== -1 ) {

			return 'youtube';

		} elseif ( strpos( $video_url, 'vimeo' ) !== -1 ) {

			return 'vimeo';

		} else {

			return false;

		}

	}

	/**
	 * Get YouTube Video ID
	 *
	 * @since 1.0.0
	 * @param string $video_url The video url to check.
	 * @return string Video ID.
	 */
	function youtube_id_from_url( $video_url ) {
		$pattern = '%^# Match any youtube URL
				(?:https?://)?	# Optional scheme. Either http or https
				(?:www\.)?			# Optional www subdomain
				(?:						 # Group host alternatives
					youtu\.be/		# Either youtu.be,
				| youtube\.com	# or youtube.com
					(?:					 # Group path alternatives
						/embed/		 # Either /embed/
					| /v/				 # or /v/
					| /watch\?v=	# or /watch\?v=
					)						 # End path alternatives.
				)							 # End host alternatives.
				([\w-]{10,12})	# Allow 10-12 for 11 char youtube id.
			$%x';
		$result = preg_match( $pattern, $video_url, $matches );
		if ( $result ) {
			return $matches[1];
		}
		return false;
	}

	/**
	 * Sanitize a String for a JS Variable Name
	 *
	 * @since 1.0.0
	 * @param string $input Input string.
	 * @return string Sanitized string.
	 */
	protected function sanitize_js_variable( $input ) {

		$pattern = '/[^a-zA-Z0-9]/';

		return preg_replace( $pattern, '', (string) $input );

	}

	/**
	 * Get a spelling of a number
	 *
	 * @since 1.0.0
	 * @param int $input Input number.
	 * @return string Spelled out number.
	 */
	protected function spell_number($input) {

		if ( 2 == $input ) return 'two';
		if ( 3 == $input ) return 'two';
		if ( 4 == $input ) return 'two';

		return '';

	}

	/**
	 * Get column string from int
	 *
	 * @since 1.0.0
	 * @param int $input Input number.
	 * @return string Column string.
	 */
	protected function column_string( $input ) {

		if ( 1 == $input ) return 'single';
		if ( 2 == $input ) return 'half';
		if ( 3 == $input ) return 'third';
		if ( 4 == $input ) return 'fourth';
		if ( 5 == $input ) return 'fifth';
		if ( 6 == $input ) return 'sixth';

		return '';

	}

	/**
	 * Enqueue Scripts for Background Color
	 *
	 * @since 1.0.0
	 */
	public function bg_color_scripts() {

		// Scripts for Color Picker.
		if ( ! wp_style_is( 'wp-color-picker', 'enqueued' ) ) {
			wp_enqueue_style( 'wp-color-picker' );
		}
		if ( ! wp_script_is( 'wp-color-picker', 'enqueued' ) ) {
			wp_enqueue_script( 'wp-color-picker' );
		}
		if ( ! wp_script_is( 'organic-widgets-module-color-picker', 'enqueued' ) ) {
			wp_enqueue_script( 'organic-widgets-module-color-picker', ORGANIC_WIDGETS_PRO_ADMIN_JS_DIR . 'organic-widgets-module-color-picker.js', array( 'jquery', 'media-upload', 'media-views', 'wp-color-picker' ), '1.0.0', true );
		}

	}

	/**
	 * Enqueue Scripts for Background Images
	 *
	 * @since 1.0.0
	 */
	public function bg_image_scripts() {

		// Scripts for Image Background Module.
		if ( ! wp_script_is( 'organic-widgets-module-image-background', 'enqueued' ) ) {
			wp_enqueue_script( 'organic-widgets-module-image-background', ORGANIC_WIDGETS_PRO_ADMIN_JS_DIR . 'organic-widgets-module-image-background.js', array( 'jquery', 'media-upload', 'media-views', 'wp-color-picker' ) );
		}
		if ( ! wp_script_is( 'organic-widgets-module-image-background', 'enqueued' ) ) {
			wp_localize_script( 'organic-widgets-module-image-background', 'OrganicWidgetBG', array(
				'frame_title'  => __( 'Select an Image', 'organic-widgets-pro' ),
				'button_title' => __( 'Insert Into Widget', 'organic-widgets-pro' ),
			) );
		}

	}

	/**
	 * Echo video scripts to page
	 *
	 * @since 1.0.0
	 * @param array $video_info Array of video backgrounds.
	 */
	protected function add_video_bg( $video_info ) {

		// Global Variable.
		global $organic_widgets_pro_video_bgs;

		if ( ! is_array( $organic_widgets_pro_video_bgs ) ) {
			$organic_widgets_pro_video_bgs = array();
		}

		array_push( $organic_widgets_pro_video_bgs, $video_info );

	}

	/**
	 * Echo Video Background HTML
	 *
	 * @since 1.0.0
	 * @param array $widget Widget array.
	 */
	protected function video_bg_html( $widget ) {

		if ( ! is_array( $widget ) || ! count( $widget ) ) {
			return false;
		}

		$widget['video_type'] = $this->get_video_type( $widget['video'] );
		if ( 'youtube' == $widget['video_type'] ) {
			$widget['video_id'] = $this->youtube_id_from_url( $widget['video'] );
			if ( $widget['video_id'] ) { ?>
			<div class="organic-widgets-video-bg-wrapper">
				<div class="organic-widgets-video-bg-container">
					<div class="organic-widgets-video-bg-center">
						<div id="<?php echo $this->sanitize_js_variable( $widget['widget_id'] ); ?>" class="organic-widgets-video-bg"></div>
					</div>
				</div>
				<div class="organic-widgets-video-bg-shade"></div>
			</div>
				<?php
			}
		}

	}

	/**
	 * Render the section background inputs
	 *
	 * @since 1.0.0
	 *
	 * @param array $instance Widget instance.
	 * @param array $bg_options Background options.
	 */
	protected function section_background_input_markup( $instance, $bg_options ) {

		$bg_card_color   = array_key_exists( 'bg_card_color', $instance ) && $instance['bg_card_color'] ? $instance['bg_card_color'] : false;
		$bg_color        = array_key_exists( 'bg_color', $instance ) && $instance['bg_color'] ? $instance['bg_color'] : false;
		$bg_image_id     = array_key_exists( 'bg_image_id', $instance ) && $instance['bg_image_id'] ? $instance['bg_image_id'] : false;
		$bg_image        = array_key_exists( 'bg_image', $instance ) && $instance['bg_image'] ? $instance['bg_image'] : false;
		$bg_image_fixed  = array_key_exists( 'bg_image_fixed', $instance ) && $instance['bg_image_fixed'] ? $instance['bg_image_fixed'] : false;
		$bg_image_repeat = array_key_exists( 'bg_image_repeat', $instance ) && $instance['bg_image_repeat'] ? $instance['bg_image_repeat'] : false;
		$bg_video        = array_key_exists( 'bg_video', $instance ) && $instance['bg_video'] ? $instance['bg_video'] : false;

		?>

		<div class="organic-widgets-options-container last">

			<h3 class="options-toggle background-options"><i class="fa fa-paint-brush"></i> <?php esc_html_e( 'Background Options', 'organic-widgets-pro' ); ?></h3>

			<div class="options-content">

				<?php if ( array_key_exists( 'color', $bg_options ) && $bg_options['color'] ) { ?>
					<p>
						<label for="<?php echo $this->get_field_name( 'bg_color' ); ?>"><?php esc_html_e( 'Widget Background Color:', 'organic-widgets-pro' ); ?></label><br>
						<input type="text" name="<?php echo $this->get_field_name( 'bg_color' ); ?>" id="<?php echo $this->get_field_id( 'bg_color' ); ?>" value="<?php echo esc_attr( $bg_color ); ?>" class="organic-widgets-color-picker" />
					</p>
				<?php } ?>

				<?php if ( array_key_exists( 'image', $bg_options ) && $bg_options['image'] ) { ?>
					<p>
						<label for="<?php echo $this->get_field_id( 'bg_image' ); ?>"><?php esc_html_e( 'Widget Background Image:', 'organic-widgets-pro' ); ?></label>
						<div class="uploader">
							<input type="submit" class="button" name="<?php echo $this->get_field_name( 'uploader_button' ); ?>" id="<?php echo $this->get_field_id( 'uploader_button' ); ?>" value="<?php if ( $bg_image_id ) { esc_html_e( 'Change Image', 'organic-widgets-pro' ); } else { esc_html_e( 'Select Image', 'organic-widgets-pro' ); }?>" onclick="organicWidgetBackgroundImage.uploader( '<?php echo $this->id; ?>', '<?php echo $this->id_prefix; ?>' ); return false;" />
							<input type="submit" class="organic-widgets-remove-image-button button" name="<?php echo $this->get_field_name( 'remover_button' ); ?>" id="<?php echo $this->get_field_id( 'remover_button' ); ?>" value="<?php esc_html_e( 'Remove Image', 'organic-widgets-pro' ); ?>" onclick="organicWidgetBackgroundImage.remover( '<?php echo $this->id; ?>', '<?php echo $this->id_prefix; ?>', 'remover_button' ); return false;" <?php if ( $bg_image_id < 1 ) { echo( 'style="display:none;"' ); } ?>/>
							<div class="organic-widgets-widget-image-preview" id="<?php echo $this->get_field_id( 'preview' ); ?>">
								<?php echo $this->get_image_html( $instance ); ?>
							</div>
							<input type="hidden" id="<?php echo $this->get_field_id( 'bg_image_id' ); ?>" name="<?php echo $this->get_field_name( 'bg_image_id' ); ?>" value="<?php echo absint( $bg_image_id ); ?>" />
							<input type="hidden" id="<?php echo $this->get_field_id( 'bg_image' ); ?>" name="<?php echo $this->get_field_name( 'bg_image' ); ?>" value="<?php echo esc_url( $bg_image ); ?>" />
						</div>
					</p>
				<?php } ?>

				<?php if ( array_key_exists( 'bg_fixed', $bg_options ) && $bg_options['bg_fixed'] ) { ?>
					<p>
						<input class="checkbox" type="checkbox" value="1" <?php checked( $bg_image_fixed, '1' ); ?> id="<?php echo $this->get_field_id( 'bg_image_fixed' ); ?>" name="<?php echo $this->get_field_name( 'bg_image_fixed' ); ?>" />
						<label for="<?php echo $this->get_field_id( 'bg_image_fixed' ); ?>"><?php esc_html_e( 'Fixed Position Background Image', 'organic-widgets-pro' ); ?></label>
					</p>
				<?php } ?>

				<?php if ( array_key_exists( 'bg_repeat', $bg_options ) && $bg_options['bg_repeat'] ) { ?>
					<p>
						<input class="checkbox" type="checkbox" value="1" <?php checked( $bg_image_repeat, '1' ); ?> id="<?php echo $this->get_field_id( 'bg_image_repeat' ); ?>" name="<?php echo $this->get_field_name( 'bg_image_repeat' ); ?>" />
						<label for="<?php echo $this->get_field_id( 'bg_image_repeat' ); ?>"><?php esc_html_e( 'Repeatable Background Image', 'organic-widgets-pro' ); ?></label>
					</p>
				<?php } ?>

				<?php if ( array_key_exists( 'video', $bg_options ) && $bg_options['video'] ) { ?>
					<p>
						<label for="<?php echo $this->get_field_id( 'bg_video' ); ?>"><?php esc_html_e( 'YouTube Background Video:', 'organic-widgets-pro' ) ?></label>
						<input class="widefat" type="text" id="<?php echo $this->get_field_id( 'bg_video' ); ?>" name="<?php echo $this->get_field_name( 'bg_video' ); ?>" value="<?php echo esc_url($bg_video); ?>" />
					</p>
				<?php } ?>

			</div>

		</div>

		<?php

	}

	/**
	 * Render the section font inputs
	 *
	 * @since 1.0.0
	 *
	 * @param array $instance Widget instance.
	 * @param array $instance Font options.
	 */
	protected function section_font_input_markup( $instance, $font_options ) {

		$title_text_heading = array_key_exists( 'title_text_heading', $instance ) && $instance['title_text_heading'] ? $instance['title_text_heading'] : 'h2';
		$title_font_family = array_key_exists( 'title_font_family', $instance ) && $instance['title_font_family'] ? $instance['title_font_family'] : false;
		$title_font_weight = array_key_exists( 'title_font_weight', $instance ) && $instance['title_font_weight'] ? $instance['title_font_weight'] : false;
		$title_letter_spacing = array_key_exists( 'title_letter_spacing', $instance ) && $instance['title_letter_spacing'] ? $instance['title_letter_spacing'] : false;
		$title_font_size = array_key_exists( 'title_font_size', $instance ) && $instance['title_font_size'] ? $instance['title_font_size'] : false;
		$title_text_color = array_key_exists( 'title_text_color', $instance ) && $instance['title_text_color'] ? $instance['title_text_color'] : false;
		$body_text_color = array_key_exists( 'body_text_color', $instance ) && $instance['body_text_color'] ? $instance['body_text_color'] : false;
		$content_heading_font_family = array_key_exists( 'content_heading_font_family', $instance ) && $instance['content_heading_font_family'] ? $instance['content_heading_font_family'] : false;
		$content_heading_font_weight = array_key_exists( 'content_heading_font_weight', $instance ) && $instance['content_heading_font_weight'] ? $instance['content_heading_font_weight'] : false;
		$content_heading_font_size = array_key_exists( 'content_heading_font_size', $instance ) && $instance['content_heading_font_size'] ? $instance['content_heading_font_size'] : false;
		$body_font_family = array_key_exists( 'body_font_family', $instance ) && $instance['body_font_family'] ? $instance['body_font_family'] : false;
		$text_align = array_key_exists( 'text_align', $instance ) && $instance['text_align'] ? $instance['text_align'] : false;

		$title_font_list = array(
			"— Theme Default —",
			"Abril Fatface", "Amatic SC", "Anton", "Arial", "Arimo", "Astloch",
			"Bangers", "Berkshire Swash", "Bitter", "Bungee Shade",
			"Chela One", "Cinzel", "Codystar", "Courgette", "Creepster",
			"Dancing Script", "Droid Serif", "Dosis",
			"Encode Sans", "Encode Sans Condensed",
			"Galada", "Georgia", "Great Vibes",
			"Helvetica", "Helvetica Neue",
			"Kaushan Script",
			"Lato", "Libre Baskerville", "Lily Script One", "Lobster Two", "Lora",
			"Merriweather", "Metal Mania", "Monoton", "Montserrat",
			"Nanum Gothic", "Noto Serif", "Nunito",
			"Open Sans", "Orbitron", "Oswald",
			"Pacifico", "Patua One", "Permanent Marker", "Playfair Display",
			"Poppins", "Press Start 2P", "PT Serif",
			"Quicksand",
			"Raleway", "Raleway Dots", "Roboto", "Roboto Slab", "Rubik", "Russo One",
			"Sacramento", "Satisfy", "Sigmar One", "Source Sans Pro",
			"Trade Winds",
			"Work Sans"
		);

		?>

		<div class="organic-widgets-options-container">

			<h3 class="options-toggle text-options"><i class="fa fa-font"></i> <?php esc_html_e( 'Text Options', 'organic-widgets-pro' ); ?></h3>

			<div class="options-content">

				<?php if ( array_key_exists( 'title_font', $font_options ) && $font_options['title_font'] ) { ?>
					<p>
						<label for="<?php echo $this->get_field_id( 'title_font_family' ); ?>"><?php esc_html_e( 'Title Font:', 'organic-widgets-pro' ); ?></label>
						<select id="<?php echo $this->get_field_id( 'title_font_family' ); ?>" name="<?php echo $this->get_field_name( 'title_font_family' ); ?>">
							<?php foreach ($title_font_list as $option => $value) : ?>
								<option value="<?php if ( $option != $value[0] ) { echo $value; } else { echo ''; } ?>" <?php if ( $title_font_family == $value ) { echo ' selected="selected"'; } ?>><?php echo $value; ?></option>
							<?php endforeach ?>
						</select>
					</p>
				<?php } ?>

				<?php if ( array_key_exists( 'title_heading', $font_options ) && $font_options['title_heading'] || array_key_exists( 'title_weight', $font_options ) && $font_options['title_weight'] ) { ?>
					<div class="organic-widgets-option-set">
					<?php if ( array_key_exists( 'title_heading', $font_options ) && $font_options['title_heading'] ) { ?>
						<p class="organic-widgets-input-half">
							<label for="<?php echo $this->get_field_id( 'title_text_heading' ); ?>"><?php esc_html_e( 'Title Heading:', 'organic-widgets-pro' ); ?>
								<select id="<?php echo $this->get_field_id( 'title_text_heading' ); ?>" name="<?php echo $this->get_field_name( 'title_text_heading' ); ?>" type="text">
									<option value="h1" <?php echo ( 'h1' == $title_text_heading ) ? 'selected' : ''; ?>><?php esc_html_e( 'Heading 1', 'organic-widgets-pro' ); ?></option>
									<option value="h2" <?php echo ( 'h2' == $title_text_heading ) ? 'selected' : ''; ?>><?php esc_html_e( 'Heading 2', 'organic-widgets-pro' ); ?></option>
									<option value="h3" <?php echo ( 'h3' == $title_text_heading ) ? 'selected' : ''; ?>><?php esc_html_e( 'Heading 3', 'organic-widgets-pro' ); ?></option>
									<option value="h4" <?php echo ( 'h4' == $title_text_heading ) ? 'selected' : ''; ?>><?php esc_html_e( 'Heading 4', 'organic-widgets-pro' ); ?></option>
									<option value="h5" <?php echo ( 'h5' == $title_text_heading ) ? 'selected' : ''; ?>><?php esc_html_e( 'Heading 5', 'organic-widgets-pro' ); ?></option>
									<option value="h6" <?php echo ( 'h6' == $title_text_heading ) ? 'selected' : ''; ?>><?php esc_html_e( 'Heading 6', 'organic-widgets-pro' ); ?></option>
								</select>
							</label>
						</p>
						<?php } ?>
						<?php if ( array_key_exists( 'title_weight', $font_options ) && $font_options['title_weight'] ) { ?>
						<p class="organic-widgets-input-half last">
							<label for="<?php echo $this->get_field_id( 'title_font_weight' ); ?>"><?php esc_html_e( 'Title Weight:', 'organic-widgets-pro') ?>
								<select id="<?php echo $this->get_field_id( 'title_font_weight' ); ?>" name="<?php echo $this->get_field_name( 'title_font_weight' ); ?>">
									<option value="normal" <?php echo ( 'normal' === $title_font_weight ) ? 'selected' : ''; ?>><?php esc_html_e( 'Normal', 'organic-widgets-pro' ); ?></option>
									<option value="lighter" <?php echo ( 'lighter' === $title_font_weight ) ? 'selected' : ''; ?>><?php esc_html_e( 'Light', 'organic-widgets-pro' ); ?></option>
									<option value="bold" <?php echo ( 'bold' === $title_font_weight ) ? 'selected' : ''; ?>><?php esc_html_e( 'Bold', 'organic-widgets-pro' ); ?></option>
								</select>
							</label>
						</p>
					<?php } ?>
					</div>
				<?php } ?>

				<?php if ( array_key_exists( 'title_spacing', $font_options ) && $font_options['title_spacing'] || array_key_exists( 'title_size', $font_options ) && $font_options['title_size'] ) { ?>
					<div class="organic-widgets-option-set">
						<?php if ( array_key_exists( 'title_size', $font_options ) && $font_options['title_size'] ) { ?>
						<p class="organic-widgets-input-half unit">
							<label for="<?php echo $this->get_field_id( 'title_font_size' ); ?>"><?php esc_html_e( 'Title Size', 'organic-widgets-pro' ); ?></label>
							<input class="widefat" type="number" id="<?php echo $this->get_field_id( 'title_font_size' ); ?>" name="<?php echo $this->get_field_name( 'title_font_size' ); ?>" value="<?php if ( ! empty( $instance['title_font_size'] ) ) echo $instance['title_font_size']; ?>" />
							<span><?php esc_html_e( 'px', 'organic-widgets-pro' ); ?></span>
						</p>
						<?php } ?>
						<?php if ( array_key_exists( 'title_spacing', $font_options ) && $font_options['title_spacing'] ) { ?>
						<p class="organic-widgets-input-half unit last">
							<label for="<?php echo $this->get_field_id( 'title_letter_spacing' ); ?>"><?php esc_html_e( 'Title Spacing', 'organic-widgets-pro' ); ?></label>
							<input class="widefat" type="number" id="<?php echo $this->get_field_id( 'title_letter_spacing' ); ?>" name="<?php echo $this->get_field_name( 'title_letter_spacing' ); ?>" value="<?php if ( ! empty( $instance['title_letter_spacing'] ) ) echo $instance['title_letter_spacing']; ?>" />
							<span><?php esc_html_e( 'px', 'organic-widgets-pro' ); ?></span>
						</p>
						<?php } ?>
					</div>
				<?php } ?>

				<?php if ( array_key_exists( 'title_color', $font_options ) && $font_options['title_color'] ) { ?>
					<p>
						<label for="<?php echo $this->get_field_name( 'title_text_color' ); ?>"><?php esc_html_e( 'Title Color:', 'organic-widgets-pro' ); ?></label><br>
						<input type="text" name="<?php echo $this->get_field_name( 'title_text_color' ); ?>" id="<?php echo $this->get_field_id( 'title_text_color' ); ?>" value="<?php echo esc_attr( $title_text_color ); ?>" class="organic-widgets-color-picker" />
					</p>
				<?php } ?>

				<?php if ( array_key_exists( 'content_heading_font', $font_options ) && $font_options['content_heading_font'] ) { ?>
					<p><strong><?php esc_html_e( 'Content Text Options', 'organic-widgets-pro' ) ?></strong></p>
					<hr />
					<p>
						<label for="<?php echo $this->get_field_id( 'content_heading_font_family' ); ?>"><?php esc_html_e( 'Heading Font:', 'organic-widgets-pro' ); ?></label>
						<select id="<?php echo $this->get_field_id( 'content_heading_font_family' ); ?>" name="<?php echo $this->get_field_name( 'content_heading_font_family' ); ?>">
							<?php foreach ( $title_font_list as $option => $value ) : ?>
								<option value="<?php if ($option != $value[0]) { echo $value; } else { echo ''; } ?>" <?php if ( $content_heading_font_family == $value ) { echo ' selected="selected"'; } ?>><?php echo $value; ?></option>
							<?php endforeach ?>
						</select>
					</p>
				<?php } ?>

				<?php if ( array_key_exists( 'content_heading_weight', $font_options ) && $font_options['content_heading_weight'] && array_key_exists( 'content_heading_size', $font_options ) && $font_options['content_heading_size'] ) { ?>
					<div class="organic-widgets-option-set">
					<p class="organic-widgets-input-half unit">
						<label for="<?php echo $this->get_field_id( 'content_heading_font_size' ); ?>"><?php esc_html_e( 'Heading Size', 'organic-widgets-pro' ); ?></label>
						<input class="widefat" type="number" id="<?php echo $this->get_field_id( 'content_heading_font_size' ); ?>" name="<?php echo $this->get_field_name( 'content_heading_font_size' ); ?>" value="<?php if ( ! empty( $instance['content_heading_font_size'] ) ) echo $instance['content_heading_font_size']; ?>" />
						<span><?php esc_html_e( 'px', 'organic-widgets-pro' ); ?></span>
					</p>
					<p class="organic-widgets-input-half last">
						<label for="<?php echo $this->get_field_id( 'content_heading_font_weight' ); ?>"><?php esc_html_e( 'Heading Weight:', 'organic-widgets-pro' ); ?>
							<select id="<?php echo $this->get_field_id( 'content_heading_font_weight' ); ?>" name="<?php echo $this->get_field_name( 'content_heading_font_weight' ); ?>">
								<option value="normal" <?php echo ( $content_heading_font_weight === 'normal' ) ? 'selected' : ''; ?>><?php esc_html_e( 'Normal', 'organic-widgets-pro' ); ?></option>
								<option value="lighter" <?php echo ( $content_heading_font_weight === 'lighter' ) ? 'selected' : ''; ?>><?php esc_html_e( 'Light', 'organic-widgets-pro' ); ?></option>
								<option value="bold" <?php echo ( $content_heading_font_weight === 'bold' ) ? 'selected' : ''; ?>><?php esc_html_e( 'Bold', 'organic-widgets-pro' ); ?></option>
							</select>
						</label>
					</p>
					</div>
				<?php } ?>

				<?php if ( array_key_exists( 'body_font', $font_options ) && $font_options['body_font'] ) { ?>
					<p>
						<label for="<?php echo $this->get_field_id( 'body_font_family' ); ?>"><?php esc_html_e( 'Body Font:', 'organic-widgets-pro' ); ?></label>
						<select id="<?php echo $this->get_field_id( 'body_font_family' ); ?>" name="<?php echo $this->get_field_name( 'body_font_family' ); ?>">
							<option value="inherit" <?php echo ($body_font_family == 'inherit') ? 'selected' : ''; ?>><?php esc_html_e( '— Theme Default —', 'organic-widgets-pro' ); ?></option>
							<option value="Arial" <?php echo ($body_font_family == 'Arial') ? 'selected' : ''; ?>><?php esc_html_e( 'Arial', 'organic-widgets-pro' ); ?></option>
							<option value="Arimo" <?php echo ($body_font_family == 'Arimo') ? 'selected' : ''; ?>><?php esc_html_e( 'Arimo', 'organic-widgets-pro' ); ?></option>
							<option value="Bitter" <?php echo ($body_font_family == 'Bitter') ? 'selected' : ''; ?>><?php esc_html_e( 'Bitter', 'organic-widgets-pro' ); ?></option>
							<option value="Cinzel" <?php echo ($body_font_family == 'Cinzel') ? 'selected' : ''; ?>><?php esc_html_e( 'Cinzel', 'organic-widgets-pro' ); ?></option>
							<option value="Droid Serif" <?php echo ($body_font_family == 'Droid Serif') ? 'selected' : ''; ?>><?php esc_html_e( 'Droid Serif', 'organic-widgets-pro' ); ?></option>
							<option value="Dosis" <?php echo ($body_font_family == 'Dosis') ? 'selected' : ''; ?>><?php esc_html_e( 'Dosis', 'organic-widgets-pro' ); ?></option>
							<option value="Encode Sans" <?php echo ($body_font_family == 'Encode Sans') ? 'selected' : ''; ?>><?php esc_html_e( 'Encode Sans', 'organic-widgets-pro' ); ?></option>
							<option value="Encode Sans Condensed" <?php echo ($body_font_family == 'Encode Sans Condensed') ? 'selected' : ''; ?>><?php esc_html_e( 'Encode Sans Condensed', 'organic-widgets-pro' ); ?></option>
							<option value="Helvetica" <?php echo ($body_font_family == 'Helvetica') ? 'selected' : ''; ?>><?php esc_html_e( 'Helvetica', 'organic-widgets-pro' ); ?></option>
							<option value="Helvetica Neue" <?php echo ($body_font_family == 'Helvetica Neue') ? 'selected' : ''; ?>><?php esc_html_e( 'Helvetica Neue', 'organic-widgets-pro' ); ?></option>
							<option value="Lato" <?php echo ($body_font_family == 'Lato') ? 'selected' : ''; ?>><?php esc_html_e( 'Lato', 'organic-widgets-pro') ?></option>
							<option value="Libre Baskerville" <?php echo ($body_font_family == 'Libre Baskerville') ? 'selected' : ''; ?>><?php esc_html_e( 'Libre Baskerville', 'organic-widgets-pro' ); ?></option>
							<option value="Lora" <?php echo ($body_font_family == 'Lora') ? 'selected' : ''; ?>><?php esc_html_e( 'Lora', 'organic-widgets-pro' ); ?></option>
							<option value="Merriweather" <?php echo ($body_font_family == 'Merriweather') ? 'selected' : ''; ?>><?php esc_html_e( 'Merriweather', 'organic-widgets-pro' ); ?></option>
							<option value="Montserrat" <?php echo ($body_font_family == 'Montserrat') ? 'selected' : ''; ?>><?php esc_html_e( 'Montserrat', 'organic-widgets-pro' ); ?></option>
							<option value="Nanum Gothic" <?php echo ($body_font_family == 'Nanum Gothic') ? 'selected' : ''; ?>><?php esc_html_e( 'Nanum Gothic', 'organic-widgets-pro' ); ?></option>
							<option value="Noto Serif" <?php echo ($body_font_family == 'Noto Serif') ? 'selected' : ''; ?>><?php esc_html_e( 'Noto Serif', 'organic-widgets-pro' ); ?></option>
							<option value="Nunito" <?php echo ($body_font_family == 'Nunito') ? 'selected' : ''; ?>><?php esc_html_e( 'Nunito', 'organic-widgets-pro' ); ?></option>
							<option value="Open Sans" <?php echo ($body_font_family == 'Open Sans') ? 'selected' : ''; ?>><?php esc_html_e( 'Open Sans', 'organic-widgets-pro' ); ?></option>
							<option value="Oswald" <?php echo ($body_font_family == 'Oswald') ? 'selected' : ''; ?>><?php esc_html_e( 'Oswald', 'organic-widgets-pro' ); ?></option>
							<option value="Playfair Display" <?php echo ($body_font_family == 'Playfair Display') ? 'selected' : ''; ?>><?php esc_html_e( 'Playfair Display', 'organic-widgets-pro' ); ?></option>
							<option value="Poppins" <?php echo ($body_font_family == 'Poppins') ? 'selected' : ''; ?>><?php esc_html_e( 'Poppins', 'organic-widgets-pro' ); ?></option>
							<option value="PT Serif" <?php echo ($body_font_family == 'PT Serif') ? 'selected' : ''; ?>><?php esc_html_e( 'PT Serif', 'organic-widgets-pro' ); ?></option>
							<option value="Quicksand" <?php echo ($body_font_family == 'Quicksand') ? 'selected' : ''; ?>><?php esc_html_e( 'Quicksand', 'organic-widgets-pro' ); ?></option>
							<option value="Raleway" <?php echo ($body_font_family == 'Raleway') ? 'selected' : ''; ?>><?php esc_html_e( 'Raleway', 'organic-widgets-pro' ); ?></option>
							<option value="Roboto" <?php echo ($body_font_family == 'Roboto') ? 'selected' : ''; ?>><?php esc_html_e( 'Roboto', 'organic-widgets-pro' ); ?></option>
							<option value="Roboto Slab" <?php echo ($body_font_family == 'Roboto Slab') ? 'selected' : ''; ?>><?php esc_html_e( 'Roboto Slab', 'organic-widgets-pro' ); ?></option>
							<option value="Rubik" <?php echo ($body_font_family == 'Rubik') ? 'selected' : ''; ?>><?php esc_html_e( 'Rubik', 'organic-widgets-pro' ); ?></option>
							<option value="Source Sans Pro" <?php echo ($body_font_family == 'Source Sans Pro') ? 'selected' : ''; ?>><?php esc_html_e( 'Source Sans Pro', 'organic-widgets-pro' ); ?></option>
							<option value="Work Sans" <?php echo ($body_font_family == 'Work Sans') ? 'selected' : ''; ?>><?php esc_html_e( 'Work Sans', 'organic-widgets-pro' ); ?></option>
						</select>
					</p>
				<?php } ?>

				<?php if ( array_key_exists( 'body_color', $font_options ) && $font_options['body_color'] ) { ?>
					<p>
						<label for="<?php echo $this->get_field_name( 'body_text_color' ); ?>"><?php esc_html_e( 'Body Color:', 'organic-widgets-pro' ); ?></label><br>
						<input type="text" name="<?php echo $this->get_field_name( 'body_text_color' ); ?>" id="<?php echo $this->get_field_id( 'body_text_color' ); ?>" value="<?php echo esc_attr( $body_text_color ); ?>" class="organic-widgets-color-picker" />
					</p>
				<?php } ?>

				<?php if ( array_key_exists( 'text_alignment', $font_options ) && $font_options['text_alignment'] ) { ?>
					<br/>
					<label for="<?php echo $this->get_field_id( 'text_align' ); ?>"><?php esc_html_e( 'Text Alignment:', 'organic-widgets-pro' ); ?></label>
					<div class="text-align-options">
						<p>
							<input type="radio" value="left" id="<?php echo $this->get_field_id( 'text_align' ); ?>-left" name="<?php echo $this->get_field_name( 'text_align' ); ?>" <?php if ($text_align == 'left') { ?>checked="yes"<?php } ?> />
							<label for="<?php echo $this->get_field_id( 'text_align' ); ?>-left"><?php esc_html_e( 'Left', 'organic-widgets-pro' ); ?></label>
						</p>
						<p>
							<input type="radio" value="center" id="<?php echo $this->get_field_id( 'text_align' ); ?>-center" name="<?php echo $this->get_field_name( 'text_align' ); ?>" <?php if ($text_align == 'center') { ?>checked="yes"<?php } ?> />
							<label for="<?php echo $this->get_field_id( 'text_align' ); ?>-center"><?php esc_html_e( 'Center', 'organic-widgets-pro' ); ?></label>
						</p>
						<p>
							<input type="radio" value="right" id="<?php echo $this->get_field_id( 'text_align' ); ?>-right" name="<?php echo $this->get_field_name( 'text_align' ); ?>" <?php if ($text_align == 'right') { ?>checked="yes"<?php } ?> />
							<label for="<?php echo $this->get_field_id( 'text_align' ); ?>-right"><?php esc_html_e( 'Right', 'organic-widgets-pro' ); ?></label>
						</p>
					</div>
				<?php } ?>

			</div>

		</div>

		<?php

	}

	/**
	 * Render the section layout inputs
	 *
	 * @since 1.0.0
	 *
	 * @param array $instance Widget instance.
	 * @param array $layout_options Layout options.
	 */
	protected function section_layout_input_markup( $instance, $layout_options ) {

		$alignment = array_key_exists( 'alignment', $instance ) && $instance['alignment'] ? $instance['alignment'] : false;
		$orientation = array_key_exists( 'orientation', $instance ) && $instance['orientation'] ? $instance['orientation'] : 'vertical';
		$widget_padding_top = array_key_exists( 'widget_padding_top', $instance ) && $instance['widget_padding_top'] ? $instance['widget_padding_top'] : '';
		$widget_padding_bottom = array_key_exists( 'widget_padding_bottom', $instance ) && $instance['widget_padding_bottom'] ? $instance['widget_padding_bottom'] : '';
		$widget_custom_height = array_key_exists( 'widget_custom_height', $instance ) && $instance['widget_custom_height'] ? $instance['widget_custom_height'] : false;
		$widget_custom_width = array_key_exists( 'widget_custom_width', $instance ) && $instance['widget_custom_width'] ? $instance['widget_custom_width'] : false;
		$content_max_width = array_key_exists( 'content_max_width', $instance ) && $instance['content_max_width'] ? $instance['content_max_width'] : false;
		$full_window_height = array_key_exists( 'full_window_height', $instance ) && $instance['full_window_height'] ? $instance['full_window_height'] : false;

		?>

		<div class="organic-widgets-options-container">

			<h3 class="options-toggle layout-options"><i class="fa fa-arrows-alt"></i> <?php esc_html_e( 'Layout Options', 'organic-widgets-pro' ); ?></h3>

			<div class="options-content">

				<?php if ( array_key_exists( 'content_aligner', $layout_options ) && $layout_options['content_aligner'] ) { ?>
					<?php $this->content_aligner_input_markup( $instance ); ?>
				<?php } ?>

				<?php if ( array_key_exists( 'content_orientation', $layout_options ) && $layout_options['content_orientation'] ) { ?>
				<label for="<?php echo $this->get_field_id( 'orientation' ); ?>"><?php esc_html_e( 'Content Orientation:', 'organic-widgets-pro' ); ?></label>
				<div class="organic-widgets-option-set">
					<p class="organic-widgets-input-half">
						<input type="radio" value="vertical" id="<?php echo $this->get_field_id( 'orientation' ); ?>-vertical" name="<?php echo $this->get_field_name( 'orientation' ); ?>" <?php if ( $orientation == 'vertical' ) { ?>checked="yes"<?php } ?> />
						<label for="<?php echo $this->get_field_id( 'orientation' ); ?>-vertical"><?php esc_html_e( 'Vertical', 'organic-widgets-pro' ); ?></label>
					</p>
					<p class="organic-widgets-input-half last">
						<input type="radio" value="horizontal" id="<?php echo $this->get_field_id( 'orientation' ); ?>-horizontal" name="<?php echo $this->get_field_name( 'orientation' ); ?>" <?php if ( $orientation == 'horizontal' ) { ?>checked="yes"<?php } ?>  />
						<label for="<?php echo $this->get_field_id( 'orientation' ); ?>-horizontal"><?php esc_html_e( 'Horizontal', 'organic-widgets-pro' ); ?></label>
					</p>
				</div>
				<?php } ?>

				<?php if ( array_key_exists( 'padding_top', $layout_options ) && $layout_options['padding_top'] && array_key_exists( 'padding_bottom', $layout_options ) && $layout_options['padding_bottom'] ) { ?>
					<div class="organic-widgets-option-set">
						<p class="organic-widgets-input-half unit">
							<label for="<?php echo $this->get_field_id( 'widget_padding_top' ); ?>"><?php esc_html_e( 'Padding Top', 'organic-widgets-pro' ); ?></label>
							<input class="widefat" type="number" min="0" id="<?php echo $this->get_field_id( 'widget_padding_top' ); ?>" name="<?php echo $this->get_field_name( 'widget_padding_top' ); ?>" value="<?php if ( '' !== $instance['widget_padding_top'] ) echo $instance['widget_padding_top']; ?>" />
							<span><?php esc_html_e( 'px', 'organic-widgets-pro' ); ?></span>
						</p>
						<p class="organic-widgets-input-half unit last">
							<label for="<?php echo $this->get_field_id( 'widget_padding_bottom' ); ?>"><?php esc_html_e( 'Padding Bottom', 'organic-widgets-pro' ); ?></label>
							<input class="widefat" type="number" min="0" id="<?php echo $this->get_field_id( 'widget_padding_bottom' ); ?>" name="<?php echo $this->get_field_name( 'widget_padding_bottom' ); ?>" value="<?php if ( '' !== $instance['widget_padding_bottom'] ) echo $instance['widget_padding_bottom']; ?>" />
							<span><?php esc_html_e( 'px', 'organic-widgets-pro' ); ?></span>
						</p>
					</div>
				<?php } ?>

				<?php if ( array_key_exists( 'custom_height', $layout_options ) && $layout_options['custom_height'] && array_key_exists( 'custom_width', $layout_options ) && $layout_options['custom_width'] ) { ?>
					<div class="organic-widgets-option-set">
						<p class="organic-widgets-input-half unit">
							<label for="<?php echo $this->get_field_id( 'widget_custom_height' ); ?>"><?php esc_html_e( 'Widget Height', 'organic-widgets-pro' ); ?></label>
							<input class="widefat" type="number" id="<?php echo $this->get_field_id( 'widget_custom_height' ); ?>" name="<?php echo $this->get_field_name( 'widget_custom_height' ); ?>" value="<?php if ( ! empty( $instance['widget_custom_height'] ) ) echo $instance['widget_custom_height']; ?>" />
							<span><?php esc_html_e( 'px', 'organic-widgets-pro' ); ?></span>
						</p>
						<p class="organic-widgets-input-half unit last">
							<label for="<?php echo $this->get_field_id( 'widget_custom_width' ); ?>"><?php esc_html_e( 'Widget Width', 'organic-widgets-pro' ); ?></label>
							<input class="widefat" type="number" placeholder="100" id="<?php echo $this->get_field_id( 'widget_custom_width' ); ?>" name="<?php echo $this->get_field_name( 'widget_custom_width' ); ?>" value="<?php if ( ! empty( $instance['widget_custom_width'] ) ) echo $instance['widget_custom_width']; ?>" />
							<span><?php esc_html_e( '%', 'organic-widgets-pro' ); ?></span>
						</p>
					</div>
				<?php } ?>

				<?php if ( array_key_exists( 'content_width', $layout_options ) && $layout_options['content_width'] ) { ?>
					<p class="unit">
						<label for="<?php echo $this->get_field_id( 'content_max_width' ); ?>"><?php esc_html_e( 'Content Max Width', 'organic-widgets-pro' ); ?></label>
						<input class="widefat" type="number" placeholder="1240" id="<?php echo $this->get_field_id( 'content_max_width' ); ?>" name="<?php echo $this->get_field_name( 'content_max_width' ); ?>" value="<?php if ( ! empty( $instance['content_max_width'] ) ) echo $instance['content_max_width']; ?>" />
						<span><?php esc_html_e( 'px', 'organic-widgets-pro' ); ?></span>
					</p>
				<?php } ?>

				<?php if ( array_key_exists( 'full_height', $layout_options ) && $layout_options['full_height'] ) { ?>
					<p style="margin-top: 16px;">
						<input class="checkbox" type="checkbox" value="1" <?php checked( $full_window_height, '1' ); ?> id="<?php echo $this->get_field_id( 'full_window_height' ); ?>" name="<?php echo $this->get_field_name( 'full_window_height' ); ?>" />
						<label for="<?php echo $this->get_field_id( 'full_window_height' ); ?>"><?php esc_html_e( 'Full Window Height Widget', 'organic-widgets-pro' ); ?></label>
					</p>
				<?php } ?>

			</div>

		</div>

		<?php

	}

	/**
	 * Render the section display inputs
	 *
	 * @since 1.0.0
	 *
	 * @param array $instance Widget instance.
	 * @param array $instance Display options.
	 */
	protected function section_display_input_markup( $instance, $display_options ) {

		$hide_post_title = array_key_exists( 'hide_post_title', $instance ) && $instance['hide_post_title'] ? $instance['hide_post_title'] : false;
		$hide_post_meta = array_key_exists( 'hide_post_meta', $instance ) && $instance['hide_post_meta'] ? $instance['hide_post_meta'] : false;
		$hide_post_button = array_key_exists( 'hide_post_button', $instance ) && $instance['hide_post_button'] ? $instance['hide_post_button'] : false;
		$hide_post_content = array_key_exists( 'hide_post_content', $instance ) && $instance['hide_post_content'] ? $instance['hide_post_content'] : false;
		$hide_content_bg = array_key_exists( 'hide_content_bg', $instance ) && $instance['hide_content_bg'] ? $instance['hide_content_bg'] : false;

		?>

		<div class="organic-widgets-options-container">

			<h3 class="options-toggle display-options"><i class="fa fa-eye-slash"></i> <?php esc_html_e( 'Display Options', 'organic-widgets-pro' ); ?></h3>

			<div class="options-content">

				<?php if ( array_key_exists( 'hide_title', $display_options ) && $display_options['hide_title'] ) { ?>
					<p>
						<input class="checkbox" type="checkbox" value="1" <?php checked( $hide_post_title, '1' ); ?> id="<?php echo $this->get_field_id( 'hide_post_title' ); ?>" name="<?php echo $this->get_field_name( 'hide_post_title' ); ?>" />
						<label for="<?php echo $this->get_field_id( 'hide_post_title' ); ?>"><?php esc_html_e( 'Hide Post Title', 'organic-widgets-pro' ); ?></label>
					</p>
				<?php } ?>

				<?php if ( array_key_exists( 'hide_meta', $display_options ) && $display_options['hide_meta'] ) { ?>
					<p>
						<input class="checkbox" type="checkbox" value="1" <?php checked( $hide_post_meta, '1' ); ?> id="<?php echo $this->get_field_id( 'hide_post_meta' ); ?>" name="<?php echo $this->get_field_name( 'hide_post_meta' ); ?>" />
						<label for="<?php echo $this->get_field_id( 'hide_post_meta' ); ?>"><?php esc_html_e( 'Hide Post Meta', 'organic-widgets-pro' ); ?></label>
					</p>
				<?php } ?>

				<?php if ( array_key_exists( 'hide_button', $display_options ) && $display_options['hide_button'] ) { ?>
					<p>
						<input class="checkbox" type="checkbox" value="1" <?php checked( $hide_post_button, '1' ); ?> id="<?php echo $this->get_field_id( 'hide_post_button' ); ?>" name="<?php echo $this->get_field_name( 'hide_post_button' ); ?>" />
						<label for="<?php echo $this->get_field_id( 'hide_post_button' ); ?>"><?php esc_html_e( 'Hide Post Button', 'organic-widgets-pro' ); ?></label>
					</p>
				<?php } ?>

				<?php if ( array_key_exists( 'hide_content', $display_options ) && $display_options['hide_content'] ) { ?>
					<p>
						<input class="checkbox" type="checkbox" value="1" <?php checked( $hide_post_content, '1' ); ?> id="<?php echo $this->get_field_id( 'hide_post_content' ); ?>" name="<?php echo $this->get_field_name( 'hide_post_content' ); ?>" />
						<label for="<?php echo $this->get_field_id( 'hide_post_content' ); ?>"><?php esc_html_e( 'Hide Post Content', 'organic-widgets-pro' ); ?></label>
					</p>
				<?php } ?>

				<?php if ( array_key_exists( 'hide_bg', $display_options ) && $display_options['hide_bg'] ) { ?>
					<p>
						<input class="checkbox" type="checkbox" value="1" <?php checked( $hide_content_bg, '1' ); ?> id="<?php echo $this->get_field_id( 'hide_content_bg' ); ?>" name="<?php echo $this->get_field_name( 'hide_content_bg' ); ?>" />
						<label for="<?php echo $this->get_field_id( 'hide_content_bg' ); ?>"><?php esc_html_e( 'Hide Background Card', 'organic-widgets-pro' ); ?></label>
					</p>
				<?php } ?>

			</div>

		</div>

		<?php

	}

	/**
	 * Render the content aligner input
	 *
	 * @since 1.0.0
	 *
	 * @param array $instance
	 */
	protected function content_aligner_input_markup( $instance ) {

		?>
		<label for="<?php echo $this->get_field_id( 'alignment' ); ?>"><?php esc_html_e( 'Content Alignment', 'organic-widgets-pro' ); ?></label>
		<div class="organic-widgets-content-alignment">
			<table class="organic-widgets-content-alignment-table">
				<tr>
					<td class="organic-widgets-top-left" data-alignment="top-left" data-selected="<?php if ( ! empty( $instance['alignment'] ) && 'top-left' == $instance['alignment'] ) { echo 'true'; } ?>"><i class="fa fa-angle-left organic-widget-fa-rotate-45" aria-hidden="true"></i></td>
					<td class="organic-widgets-top-center" data-alignment="top-center" data-selected="<?php if ( ! empty( $instance['alignment'] ) && 'top-center' == $instance['alignment'] ) { echo 'true'; } ?>"><i class="fa fa-angle-up" aria-hidden="true"></i></td>
					<td class="organic-widgets-top-right" data-alignment="top-right" data-selected="<?php if ( ! empty( $instance['alignment'] ) && 'top-right' == $instance['alignment'] ) { echo 'true'; } ?>"><i class="fa fa-angle-up organic-widget-fa-rotate-45" aria-hidden="true"></i></td>
				</tr>
				<tr>
					<td class="organic-widgets-middle-left" data-alignment="middle-left" data-selected="<?php if ( ! empty( $instance['alignment'] ) && 'middle-left' == $instance['alignment'] ) { echo 'true'; } ?>"><i class="fa fa-angle-left" aria-hidden="true"></i></td>
					<td class="organic-widgets-middle-center" data-alignment="middle-center" data-selected="<?php if ( empty( $instance['alignment'] ) || 'middle-center' == $instance['alignment'] ) { echo 'true'; } ?>"><i class="fa fa-circle" aria-hidden="true"></i></td>
					<td class="organic-widgets-middle-right" data-alignment="middle-right" data-selected="<?php if ( ! empty( $instance['alignment'] ) && 'middle-right' == $instance['alignment'] ) { echo 'true'; } ?>"><i class="fa fa-angle-right" aria-hidden="true"></i></td>
				</tr>
				<tr>
					<td class="organic-widgets-bottom-left" data-alignment="bottom-left" data-selected="<?php if ( ! empty( $instance['alignment'] ) && 'bottom-left' == $instance['alignment'] ) { echo 'true'; } ?>"><i class="fa fa-angle-down organic-widget-fa-rotate-45" aria-hidden="true"></i></td>
					<td class="organic-widgets-bottom-center" data-alignment="bottom-center" data-selected="<?php if ( ! empty( $instance['alignment'] ) && 'bottom-center' == $instance['alignment'] ) { echo 'true'; } ?>"><i class="fa fa-angle-down" aria-hidden="true"></i></td>
					<td class="organic-widgets-bottom-right" data-alignment="bottom-right" data-selected="<?php if ( ! empty( $instance['alignment'] ) && 'bottom-right' == $instance['alignment'] ) { echo 'true'; } ?>"><i class="fa fa-angle-right organic-widget-fa-rotate-45" aria-hidden="true"></i></td>
				</tr>
			</table>
			<input class="widefat" type="hidden" id="<?php echo $this->get_field_id( 'alignment' ); ?>" name="<?php echo $this->get_field_name( 'alignment' ); ?>" value="<?php if ( ! empty( $instance['alignment'] ) ) echo $instance['alignment']; ?>" />
		</div>
		<?php

	}

	/**
	 * Markup for Repeatable Form Items
	 *
	 * @since 1.0.0
	 *
	 * @param array  $repeatable_array An array of the repeatable form items.
	 * @param string $form_item_title The display text for the form item.
	 * @param array  $instance Widget instance.
	 */
	protected function repeatable_form_item_inputs_markup( $repeatable_array, $form_item_title, $instance = false ) {

		?>
		<p>
			<label for="<?php echo $this->get_field_id( 'repeatable_array' ); ?>"><h4><?php esc_html_e( $form_item_title, 'organic-widgets-pro' ) ?></h4></label>

			<?php
			// Loop through each item and echo form section.
			$form_keys   = array();
			$form_orders = array();
			if ( is_array( $repeatable_array ) ) {
				usort( $repeatable_array, array( $this, 'sort_by_order' ) );
				foreach ( $repeatable_array as $key => $repeatable ) {

					if ( isset( $repeatable['order'] ) ) {
						$order = $repeatable['order'];
					} else {
						$order = $key;
					}

					// Echo Form Item.
					$this->echo_repeatable_form_item( $key, $order, $repeatable, $instance );

					// Add Key to Array.
					array_push( $form_keys, $key );
					array_push( $form_orders, $order );

				}
			}

			// Get Next ID.
			if ( count( $form_keys ) > 0 ) {
				$key = max( $form_keys ) + 1;
			} else {
				$key = 1;
			}

			// Get Next Order.
			if ( count( $form_orders ) > 0 ) {
				$order = max( $form_orders ) + 1;
			} else {
				$order = 0;
			}

			// Echo Form Item.
			$this->echo_repeatable_form_item( $key, $order );

			?>

			<div class="organic-widgets-repeatable-add-item">
				<i class="fa fa-plus"></i>
			</div>

			<input type="hidden" class="organic-widgets-repeatable-hidden-input" id="<?php echo $this->get_field_id( 'repeatable_array' ); ?>" name="<?php echo $this->get_field_name( 'repeatable_array' ); ?>" value='<?php if ( is_array( $repeatable_array ) && count( $repeatable_array ) > 0 ) { echo wp_json_encode( $repeatable_array ); } ?>' />

			<?php $this->echo_repeatable_form_item(); ?>

		</p><?php

	}

	/**
	 * Echo the actions to move repeatable items up, down and delete
	 *
	 * @since 1.0.0
	 */
	protected function echo_repeatable_form_item_actions() { ?>

		<div class="organic-widgets-repeatable-actions">
			<div class="organic-widgets-repeatable-move-button organic-widgets-move-up">
					<i class="fa fa-angle-up"></i>
			</div>
			<div class="organic-widgets-repeatable-move-button organic-widgets-move-down">
					<i class="fa fa-angle-down"></i>
			</div>
			<div class="organic-widgets-repeatable-delete-button">
				<i class="fa fa-trash"></i>
			</div>
			<div class="organic-widgets-clear"></div>
		</div>

		<?php

	}

	/**
	 * Render the image html output.
	 *
	 * @since 1.0.0
	 *
	 * @param array $instance Widget instance.
	 * @param array $repeatable Repeatable item.
	 * @return string image html
	 */
	protected function get_image_html( $instance, $repeatable = false ) {

		if ( ! $repeatable ) {
			if ( isset( $instance['bg_image_id'] ) ) {
				$image_id = $instance['bg_image_id'];
			} else {
				$image_id = 0;
			}
		} else {
			if ( isset( $repeatable['icon'] ) ) {
				$image_id = $repeatable['icon'];
			} elseif ( isset( $repeatable['image'] ) ) {
				$image_id = $repeatable['image'];
			} else {
				$image_id = 0;
			}
		}

		// If there is an bg_image, use it to render the image. Eventually we should kill this and simply rely on bg_image_ids.
		if ( (int) $image_id > 0 ) {
			$size      = 'organic-widgets-featured-large';
			$img_array = wp_get_attachment_image( $image_id, 'full', false );
			if ( is_array( $img_array ) ) {
				$output = '<img src="' . $img_array[0] . '" />';
			} else {
				$output = $img_array;
			}
		} else {
			$output = '';
		}

		return $output;

	}

	/**
	 * Function for sorting arrays with usort
	 *
	 * @since 1.0.0
	 *
	 * @param array $item to be compared with b
	 * @param array $item to be compared with a
	 *
	 * @return int comparator
	 */
	protected function sort_by_order( $a, $b ) {

		if ( isset( $a['order'] ) && isset( $b['order'] ) ) {
			return $a['order'] - $b['order'];
		} else {
			return -1;
		}

	}

	/**
	 * Outputs HTML for Selecting fontAwesome Icons
	 *
	 * @since 1.0.0
	 */
	protected function getIconOptionsDivs() { ?>

		<div class="organic-widgets-feature-select-item" data-val="fa-archive">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class ="fa fa-archive"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-balance-scale">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class ="fa fa-balance-scale"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-university">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class ="fa fa-university"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-bar-chart">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class ="fa fa-bar-chart"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-pie-chart">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class ="fa fa-pie-chart"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-beer">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-beer"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-bell">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-bell"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-bolt">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-bolt"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-book">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-book"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-briefcase">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-briefcase"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-bullhorn">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-bullhorn"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-calendar">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-calendar"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-camera">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-camera"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-camera-retro">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-camera-retro"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-check">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-check"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-cloud">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-cloud"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-coffee">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-coffee"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-cog">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-cog"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-cogs">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-cogs"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-comment">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-comment"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-comments">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-comments"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-credit-card">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-credit-card"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-dashboard">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-tachometer-alt"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-database">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-database"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-desktop">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-desktop"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-diamond">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="far fa-gem"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-download">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-download"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-edit">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-edit"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-envelope">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-envelope"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-exchange">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-exchange-alt"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-film">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-film"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-gamepad">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-gamepad"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-cutlery">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-utensils"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-flag">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-flag"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-folder-open">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-folder-open"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-gift">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-gift"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-glass">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-glass"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-globe">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-globe"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-group">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-group"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-headphones">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-headphones"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-heart">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-heart"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-home">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-home"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-inbox">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-inbox"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-key">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-key"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-leaf">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-leaf"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-laptop">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-laptop"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-legal">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-legal"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-lock">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-lock"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-unlock">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-unlock"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-magic">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-magic"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-magnet">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-magnet"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-map-marker">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-map-marker"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-mobile-phone">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-mobile-phone"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-money">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-money"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-music">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-music"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-pencil">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-pencil-alt"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-plane">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-plane"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-plug">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-plug"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-plus">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-plus"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-minus">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-minus"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-print">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-print"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-puzzle-piece">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-puzzle-piece"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-qrcode">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-qrcode"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-random">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-random"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-refresh">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-refresh"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-road">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-road"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-rocket">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-rocket"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-rss">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-rss"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-search">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-search"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-server">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-server"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-share-alt">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-share-alt"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-shield-alt">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-shield-alt"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-shopping-cart">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-shopping-cart"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-signal">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-signal"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-sitemap">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-sitemap"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-beer">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-beer"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-ban">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-ban"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-star">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-star"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-life-ring">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-life-ring"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-tablet">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-tablet"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-tags">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-tags"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-tasks">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-tasks"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-paper-plane">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-paper-plane"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-thumbs-down">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-thumbs-down"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-thumbs-up">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-thumbs-up"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-tint">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-tint"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-trash">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-trash"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-trophy">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-trophy"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-truck">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-truck"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-umbrella">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-umbrella"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-upload">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-upload"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-user">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-user"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-volume-up">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-volume-up"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-exclamation-triangle">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-exclamation-triangle"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-wifi">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-wifi"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-wrench">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-wrench"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-phone">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-phone"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-facebook">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fab fa-facebook"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-twitter">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fab fa-twitter"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-github">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fab fa-github"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-linkedin">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fab fa-linkedin"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-pinterest">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fab fa-pinterest"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-google-plus">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fab fa-google"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-ambulance">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-ambulance"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-user-md">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-user-md"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-user-circle">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-user-circle"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-bullseye">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-bullseye"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-anchor">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-anchor"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-bomb">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-bomb"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-code">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-code"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-cube">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-cube"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-cubes">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-cubes"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-eye">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-eye"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-flask">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-flask"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-graduation-cap">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-graduation-cap"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-hourglass-half">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-hourglass-half"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-id-card">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-id-card"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-lightbulb-o">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-lightbulb-o"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-location-arrow">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-location-arrow"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-map">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-map"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-podcast">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-podcast"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-microphone">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-microphone"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-paint-brush">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-paint-brush"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-map-signs">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-map-signs"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-paw">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-paw"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-newspaper-o">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-newspaper-o"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-moon-o">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-moon-o"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-sun-o">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-sun-o"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-thumb-tack">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-thumb-tack"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-ticket">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-ticket-alt"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-tree">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-tree"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-wheelchair">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-wheelchair"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-hand-peace-o">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-hand-peace-o"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-bicycle">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-bicycle"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-car">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-car"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-paypal">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fab fa-paypal"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-link">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-link"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-cut">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-cut"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-repeat">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-repeat"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-undo">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-undo"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-arrow-up">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-arrow-up"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-arrow-down">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-arrow-down"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-arrows-alt">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fa fa-arrows-alt"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-instagram">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fab fa-instagram"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-youtube">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fab fa-youtube"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-yelp">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fab fa-yelp"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-github-alt">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fab fa-github-alt"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-apple">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fab fa-apple"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-html5">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fab fa-html5"></i>
			</div>
		</div>
		<div class="organic-widgets-feature-select-item" data-val="fa-css3">
			<div class="organic-widgets-feature-select-item-sizer"></div>
			<div class="organic-widgets-feature-select-item-content">
				<i class="fab fa-css3"></i>
			</div>
		</div>
		<?php
	}

	/**
	 * Returns an array showing if a groupable array is first, last, and what the id of the first element is
	 *
	 * @since		1.0.0
	 *
	 * @param 	array 	$args 	Widget arguments to determine groupability
	 * @return 	array 	Information about the widget's placement in a group
	 */
	protected function organic_widgets_pro_groupable_widget( $args = false ) {

		$return_array = array(
			'first' => true,
			'last' => true,
			'group_id' => false,
		);

		if ( $args ) {

			// Get widget info and widget area info.
			$widget_area_id = $args['id'];
			$widget_name = $args['widget_name'];
			$widget_id = $args['widget_id'];
			$widget_id_base = _get_widget_id_base( $widget_id );

			// Get widget before and check to see if it is same type.
			$widget_areas = wp_get_sidebars_widgets();
			$this_widget_area = $widget_areas[$widget_area_id];

			// Evaluate FIRST.
			// If widget is first in area, return true.
			if ( $this_widget_area[0] == $widget_id ) {
				$return_array['first'] = true;
			} else {
				$this_widget_key = array_search( $widget_id, $this_widget_area );

				// Get previous widget.
				$prev_widget_id = $this_widget_area[ $this_widget_key - 1 ];
				$prev_widget_id_base = _get_widget_id_base( $prev_widget_id );

				// If previous widget is of same type, return false.
				if ( $prev_widget_id_base == $widget_id_base ) {
					$return_array['first'] = false;
				}
			}

			// Evaluation LAST.
			// If widget is last in area, return true.
			$length = count($this_widget_area);
			if ( $this_widget_area[ $length -1 ] == $widget_id ) {
				$return_array['last'] = true;
			} else {
				$this_widget_key = array_search( $widget_id, $this_widget_area );

				// Get next widget.
				$next_widget_id = $this_widget_area[ $this_widget_key + 1 ];
				$next_widget_id_base = _get_widget_id_base( $next_widget_id );

				// If previous widget is of same type, return false.
				if ( $next_widget_id_base == $widget_id_base ) {
					$return_array['last'] = false;
				}
			}

			// Group ID.
			if ( $return_array['first'] ) {
				$return_array['group_id'] = $widget_id;
			} else {
				$test_widget_id_base = $widget_id_base;
				$test_widget_key = $this_widget_key;
				while ( $test_widget_id_base == $widget_id_base && $test_widget_key > 0 ) {
					// Get previous widget.
					$test_widget_key = $test_widget_key - 1;
					$test_widget_id = $this_widget_area[ $test_widget_key ];
					$test_widget_id_base = _get_widget_id_base( $test_widget_id );
					if ($test_widget_id_base == $widget_id_base) {
						$return_array['group_id'] = $test_widget_id;
					}
				}
			}

			return $return_array;

		} else {

			return $return_array;

		}

	}

	/**
	 * Sanitize Slideshow Transition Interval.
	 *
	 * @param int or string $input Sanitizes user input.
	 * @return array
	 */
	function organic_widgets_sanitize_transition_interval( $input ) {
		$valid = array(
			2000 		=> esc_html__( '2 Seconds', 'organic-widgets-pro' ),
			4000 		=> esc_html__( '4 Seconds', 'organic-widgets-pro' ),
			6000 		=> esc_html__( '6 Seconds', 'organic-widgets-pro' ),
			8000 		=> esc_html__( '8 Seconds', 'organic-widgets-pro' ),
			10000 	=> esc_html__( '10 Seconds', 'organic-widgets-pro' ),
			12000 	=> esc_html__( '12 Seconds', 'organic-widgets-pro' ),
			20000 	=> esc_html__( '20 Seconds', 'organic-widgets-pro' ),
			30000 	=> esc_html__( '30 Seconds', 'organic-widgets-pro' ),
			60000 	=> esc_html__( '1 Minute', 'organic-widgets-pro' ),
			999999999	=> esc_html__( 'Hold Frame', 'organic-widgets-pro' ),
		);

		if ( array_key_exists( $input, $valid ) ) {
			return $input;
		} else {
			return '';
		}
	}

	/**
	 * Sanitize Slideshow Transition Style.
	 *
	 * @param string $input Sanitizes user input.
	 * @return array
	 */
	function organic_widgets_sanitize_transition_style( $input ) {
		$valid = array(
			'fade'  => esc_html__( 'Fade', 'organic-widgets-pro' ),
			'slide' => esc_html__( 'Slide', 'organic-widgets-pro' ),
		);

		if ( array_key_exists( $input, $valid ) ) {
			return $input;
		} else {
			return '';
		}
	}

} // class Organic_Widgets_Pro_Custom_Widget
