function form($instance)
    {
        $defaults = array('text' => '', 'margin_bottom' => '20px');
        $instance = wp_parse_args($instance, $defaults);
        extract($instance);
        ?>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('text'));
        ?>
">
					Content
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_textarea('text', $block_id, $text, $size = 'full');
        ?>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('margin_bottom'));
        ?>
">
					Margin Bottom
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('margin_bottom', $block_id, $margin_bottom, 'min', 'number');
        ?>
px
			</span>
		</p>
		<p class="description">
			<span class="leftHalf ">
				<label for="<?php 
        echo esc_attr($this->get_field_id('fullwidthSlider'));
        ?>
">
					Full Width Shortcode ?
				</label>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        $sliders_options = array('normalwidth' => 'Normal Width', 'fullwidth' => 'Full Width');
        ?>
					<?php 
        echo circleflip_field_select('fullwidthSlider', $block_id, $sliders_options, isset($fullwidthSlider) ? $fullwidthSlider : 'normalwidth');
        ?>
				</span>
			</span>
		</p>
		<?php 
    }
    function form($instance)
    {
        //get all registered sidebars
        global $wp_registered_sidebars;
        $sidebar_options = array();
        $default_sidebar = '';
        foreach ($wp_registered_sidebars as $registered_sidebar) {
            $default_sidebar = empty($default_sidebar) ? $registered_sidebar['id'] : $default_sidebar;
            $sidebar_options[$registered_sidebar['id']] = $registered_sidebar['name'];
        }
        $defaults = array('sidebar' => $default_sidebar);
        $instance = wp_parse_args($instance, $defaults);
        extract($instance);
        ?>
		<p class="description half">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($block_id);
        ?>
_title">
					<?php 
        _e('Title', 'circleflip-builder');
        ?>
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('title', $block_id, $title, $size = 'full');
        ?>
			</span>
		</p>
		<p class="description half last">
			<span class="leftHalf">
				<label for="">
					<?php 
        _e('Pick a sidebar to display', 'circleflip-builder');
        ?>
				</label>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        echo circleflip_field_select('sidebar', $block_id, $sidebar_options, $sidebar);
        ?>
				</span>
			</span>
		</p>
		<?php 
    }
    function form($instance)
    {
        $defaults = array('text' => '', 'entrance_animation' => '');
        $instance = wp_parse_args($instance, $defaults);
        extract($instance);
        ?>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('text'));
        ?>
">
					<?php 
        _e('Embed URL', 'circleflip-builder');
        ?>
				</label>
				<span class="description_text">Enter your embed url here, ex: https://www.youtube.com/watch?v=2yS6HfMM7KY</span>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('text', $block_id, $text, $size = 'full');
        ?>
			</span>
		</p>
		</p>
		<p class="description half">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('entrance_animation'));
        ?>
">
					<?php 
        _e('Animation', 'circleflip-builder');
        ?>
				</label>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        $animation_options = array('default' => 'Default', 'noanimation' => 'no animation', 'cr_left' => 'Fade To Left', 'cr_right' => 'Fade To Right', 'cr_top' => 'Fade To Up', 'cr_bottom' => 'Fade To Down', 'cr_popup' => 'Popout', 'cr_fade' => 'Fade in');
        echo circleflip_field_select('entrance_animation', $block_id, $animation_options, $entrance_animation);
        ?>
				</span>
				<span class="entrance_animation_sim"></span>
			</span>
		</p>
		<?php 
    }
    function form($instance)
    {
        $defaults = array('text' => '', 'shortcut' => '', 'dribble' => '', 'twitter' => '', 'youtube' => '', 'ln' => '', 'fb' => '', 'author' => '', 'entrance_animation' => '', 'email' => '', 'bg_member_image' => '');
        $instance = wp_parse_args($instance, $defaults);
        extract($instance);
        ?>
		<p class="description half">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('entrance_animation'));
        ?>
">
					On-Scroll Animation
				</label>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        $animation_options = array('default' => 'Default', 'noanimation' => 'no animation', 'cr_left' => 'Fade To Left', 'cr_right' => 'Fade To Right', 'cr_top' => 'Fade To Up', 'cr_bottom' => 'Fade To Down', 'cr_popup' => 'Popout', 'cr_fade' => 'Fade in');
        echo circleflip_field_select('entrance_animation', $block_id, $animation_options, $entrance_animation);
        ?>
				</span>
				<span class="entrance_animation_sim"></span>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('member_image'));
        ?>
">
					Member Photo
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        $image_id = isset($member_imageid) ? $member_imageid : '';
        $image_value = isset($member_image) ? $member_image : '';
        echo circleflip_field_upload_new('member_image', $block_id, $image_value, $image_id);
        ?>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('bg_member_image'));
        ?>
">
					Background image Photo
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        $bg_image_id = isset($bg_member_imageid) ? $bg_member_imageid : '';
        $bg_image_value = isset($bg_member_image) ? $bg_member_image : '';
        echo circleflip_field_upload_new('bg_member_image', $block_id, $bg_image_value, $bg_image_id);
        ?>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('author'));
        ?>
">
					Member Name
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('author', $block_id, $author, $size = 'full');
        ?>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('shortcut'));
        ?>
">
					Job Title
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('shortcut', $block_id, $shortcut, $size = 'full');
        ?>
			</span>
		</p>
		<div class="description">
			<div class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('text'));
        ?>
">
					Biography
				</label>
			</div>
			<div class="rightHalf">
				<?php 
        //echo aq_field_textarea('text', $block_id, $text, $size = 'full')
        ?>
				<?php 
        echo wp_editor($text, $block_id, array('textarea_name' => 'aq_blocks[' . $block_id . '][text]', 'quicktags' => false));
        ?>
			</div>
		</div>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('email'));
        ?>
">
					Email
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('email', $block_id, $email, $size = 'full');
        ?>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('fb'));
        ?>
">
					Facebook Link
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('fb', $block_id, $fb, $size = 'full');
        ?>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('twitter'));
        ?>
">
					Twitter Link
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('twitter', $block_id, $twitter, $size = 'full');
        ?>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('ln'));
        ?>
">
					LinkedIn Link
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('ln', $block_id, $ln, $size = 'full');
        ?>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('shape'));
        ?>
">
					Layout
				</label>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        echo circleflip_field_select('shape', $block_id, array('Layout 1', 'Layout 2'), isset($shape) ? $shape : 'Layout 1', array('data-fd-handle="team_style"'));
        ?>
				</span>
			</span>
		</p>
		<p class="" data-fd-rules='["team_style:equal:0"]'>
			<img style="display: block;margin:0 auto;max-height: 250px;" src="<?php 
        echo esc_url(get_template_directory_uri() . '/creiden-framework/content-builder/assets/images/team_layout1.jpg');
        ?>
" alt=""/>
		</p>
		<p class="" data-fd-rules='["team_style:equal:1"]'>
			<img style="display: block;margin:0 auto;max-width: 100%;" src="<?php 
        echo esc_url(get_template_directory_uri() . '/creiden-framework/content-builder/assets/images/team_layout2.jpg');
        ?>
" alt=""/>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('animation_number'));
        ?>
">
					Hover Animation
				</label>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        echo circleflip_field_select('animation_number', $block_id, array('animation 1', 'animation 2', 'animation 3', 'animation 4'), isset($animation_number) ? $animation_number : 'animation 1');
        ?>
				</span>
			</span>
		</p>
		<?php 
    }
    function form($instance)
    {
        $defaults = array('link' => '#', 'sponsors_image' => '', 'entrance_animation' => '', 'Adsense_code' => '', 'ad_type' => 'image');
        $instance = wp_parse_args($instance, $defaults);
        extract($instance);
        ?>
		<p class="description" data-show="all">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('ad_type'));
        ?>
">
					<?php 
        _e('Ad Type', 'circleflip-builder');
        ?>
				</label>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select blockSelector">
					<?php 
        echo circleflip_field_select('ad_type', $block_id, array('image' => 'Image', 'adsense' => 'Google Adsense'), $ad_type, array('data-fd-handle="ad_type"'));
        ?>
				</span>
			</span>
		</p>
		<p class="description" data-fd-rules='["ad_type:!equal:adsense"]'>
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('link'));
        ?>
">
					Link
				</label>
				<span class="description_text">
					Enter the URL target of the ad
				</span>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('link', $block_id, $link, $size = 'full');
        ?>
			</span>
		</p>

		<p class="description"  data-fd-rules='["ad_type:!equal:adsense"]'>
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('sponsors_image'));
        ?>
">
					Image
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        $image_id = isset($sponsors_imageid) ? $sponsors_imageid : '';
        $image_value = isset($sponsors_image) ? $sponsors_image : '';
        echo circleflip_field_upload_new('sponsors_image', $block_id, $image_value, $image_id);
        ?>
			</span>
		</p>
		<p class="description"  data-fd-rules='["ad_type:equal:adsense"]'>
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('Adsense_code'));
        ?>
">
					Adsense Code
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_textarea('Adsense_code', $block_id, $Adsense_code);
        ?>
			</span>
		</p>
		<p class="description half">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('entrance_animation'));
        ?>
">
					On-Scroll Animation
				</label>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        $animation_options = array('default' => 'Default', 'noanimation' => 'no animation', 'cr_left' => 'Fade To Left', 'cr_right' => 'Fade To Right', 'cr_top' => 'Fade To Up', 'cr_bottom' => 'Fade To Down', 'cr_popup' => 'Popout', 'cr_fade' => 'Fade in');
        echo circleflip_field_select('entrance_animation', $block_id, $animation_options, $entrance_animation);
        ?>
				</span>
				<span class="entrance_animation_sim"></span>
			</span>
		</p>
		<?php 
    }
    function form($instance)
    {
        $defaults = array('horizontal_line' => 'none', 'line_color' => '#353535', 'pattern' => '1', 'height' => '20', 'height_line' => '2', 'Number of lines' => '1', 'divider_image' => '');
        $line_options = array('none' => 'None', 'line' => 'line', 'dotted' => 'Dotted', 'image' => 'Use Image');
        $instance = wp_parse_args($instance, $defaults);
        extract($instance);
        $line_color = isset($line_color) ? $line_color : '#353535';
        $number_lines = isset($number_lines) ? $number_lines : '1';
        $height_line = isset($height_line) ? $height_line : '2';
        ?>

		<p class="description note">
			<?php 
        _e('Use this block to clear the floats between two or more separate blocks vertically.', 'circleflip-builder');
        ?>
		</p>
		<p class="description fourth ClearType">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('line_color'));
        ?>
">
					<!--Pick a horizontal line-->
					<?php 
        _e('Divider style', 'circleflip-builder');
        ?>
				</label>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        echo circleflip_field_select('horizontal_line', $block_id, $line_options, $horizontal_line, array('data-fd-handle="line_type"'));
        ?>
				</span>
			</span>
		</p>
		<p class="description fourth ClearNumberOfLine" data-fd-rules='["line_type:regex:line|dotted"]'>
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('number_lines'));
        ?>
">
					<?php 
        _e('How many Lines ?', 'circleflip-builder');
        ?>
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('number_lines', $block_id, $number_lines, 'min', 'number');
        ?>
 Line(s)
			</span>
		</p>

		<div class="description fourth ClearHeight">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('height'));
        ?>
">
					<?php 
        _e('Height', 'circleflip-builder');
        ?>
				</label>
				<span class="description_text">
					<?php 
        _e('How much spacing around the divider, the value is split between up & bottom', 'circleflip-builder');
        ?>
				</span>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('height', $block_id, $height, 'min', 'number');
        ?>
 px
			</span>
		</div>
		<div class="description fourth ClearHeightLine" data-fd-rules='["line_type:regex:line|dotted"]'>
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('height_line'));
        ?>
">
					<?php 
        _e('Divider Thickness', 'circleflip-builder');
        ?>
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('height_line', $block_id, $height_line, 'min', 'number');
        ?>
 px
			</span>
		</div>
		<div class="description half last clearLineColor" data-fd-rules='["line_type:regex:line|dotted"]'>
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('line_color'));
        ?>
">
					Pick a line color
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_color_picker('line_color', $block_id, $line_color, $defaults['line_color']);
        ?>
			</span>
		</div>
		<div class="description half last clearLineImage" data-fd-rules='["line_type:equal:image"]'>
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('divider_image'));
        ?>
">
					Choose your image
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        $image_id = isset($divider_imageid) ? $divider_imageid : '';
        $image_value = isset($divider_image) ? $divider_image : '';
        echo circleflip_field_upload_new('divider_image', $block_id, $image_value, $image_id);
        ?>
			</span>
		</div>
		<?php 
    }
    function form($instance)
    {
        $defaults = array('title' => '', 'post_number' => '');
        $instance = wp_parse_args($instance, $defaults);
        extract($instance);
        ?>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('title'));
        ?>
">
					Title
				</label>
				<span class="description_text">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta arcu at odio venenatis tincidunt. Cras mollis mi gravida velit tincidunt porta. Donec bibendum leo at iaculis rhoncus. Sed rutrum,
				</span>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('title', $block_id, $title, $size = 'full');
        ?>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('post_type'));
        ?>
">
					Posts Type
				</label>
				<span class="description_text">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta arcu at odio venenatis tincidunt. Cras mollis mi gravida velit tincidunt porta. Donec bibendum leo at iaculis rhoncus. Sed rutrum,
				</span>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        echo circleflip_field_select('post_type', $block_id, array('Latest Posts', 'Popular Posts', 'Selected Posts'), isset($post_type) ? $post_type : 'Latest Posts', array('data-fd-handle="post_type"'));
        ?>
				</span>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('post_cat_type'));
        ?>
">
					Posts Category Type
				</label>
				<span class="description_text">
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta arcu at odio venenatis tincidunt. Cras mollis mi gravida velit tincidunt porta. Donec bibendum leo at iaculis rhoncus. Sed rutrum,
				</span>
			</span>
			<span class="rightHalf sel">
				<?php 
        echo circleflip_field_multiselect('post_cat_type', $block_id, array('blog', 'portfolio'), isset($post_cat_type) ? $post_cat_type : '');
        ?>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('post_selected_cats'));
        ?>
">
					Selected Categories
				</label>
				<span class="description_text">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta arcu at odio venenatis tincidunt. Cras mollis mi gravida velit tincidunt porta. Donec bibendum leo at iaculis rhoncus. Sed rutrum,
				</span>
			</span>
			<span class="rightHalf">
				<?php 
        $options_categories = circleflip_get_categories();
        echo circleflip_field_multiselect('post_selected_cats', $block_id, $options_categories, isset($post_selected_cats) ? $post_selected_cats : '');
        ?>
			</span>
		</p>
		<p class="description" data-fd-rules='["post_type:equal:2"]'>
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('post_selected_posts'));
        ?>
">
					Selected Posts
				</label>
				<span class="description_text">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta arcu at odio venenatis tincidunt. Cras mollis mi gravida velit tincidunt porta. Donec bibendum leo at iaculis rhoncus. Sed rutrum,
				</span>
			</span>
			<span class="rightHalf">
				<?php 
        $postNames = circleflip_get_posts();
        echo circleflip_field_multiselect('post_selected_posts', $block_id, $postNames, isset($post_selected_posts) ? $post_selected_posts : '');
        ?>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('post_order'));
        ?>
">
					Posts Order
				</label>
				<span class="description_text">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta arcu at odio venenatis tincidunt. Cras mollis mi gravida velit tincidunt porta. Donec bibendum leo at iaculis rhoncus. Sed rutrum,
				</span>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        echo circleflip_field_select('post_order', $block_id, array('asc' => 'Ascending', 'desc' => 'Descending'), isset($post_order) ? $post_order : 'asc');
        ?>
				</span>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('type'));
        ?>
">
					Layout Style
				</label>
				<span class="description_text">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta arcu at odio venenatis tincidunt. Cras mollis mi gravida velit tincidunt porta. Donec bibendum leo at iaculis rhoncus. Sed rutrum,
				</span>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        echo circleflip_field_select('type', $block_id, array('Thirds', 'Fourths'), isset($type) ? $type : 'Thirds');
        ?>
				</span>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
			<label for="<?php 
        echo esc_attr($this->get_field_id('post_number'));
        ?>
">
				Number of Posts
			</label>
			<span class="description_text">
						Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque porta arcu at odio venenatis tincidunt. Cras mollis mi gravida velit tincidunt porta. Donec bibendum leo at iaculis rhoncus. Sed rutrum,
				</span>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('post_number', $block_id, $post_number, $size = 'full');
        ?>
			</span>
		</p>
		<?php 
    }
    function form($instance)
    {
        $defaults = array('title' => '', 'margin_bottom' => '0px');
        $instance = wp_parse_args($instance, $defaults);
        extract($instance);
        ?>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('slider'));
        ?>
">
					Slider Type
				</label>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        $counter = 0;
        $sliders_options = array();
        if (cr_get_option('create_slider')) {
            foreach (cr_get_option('create_slider') as $key => $value) {
                $sliders_options[$counter] = $value;
                $counter++;
            }
            echo circleflip_field_select('slider', $block_id, $sliders_options, isset($slider) ? $slider : 'nivo_slider');
        }
        ?>
				</span>
			</span>

		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('margin_bottom'));
        ?>
">
					Margin Bottom
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('margin_bottom', $block_id, $margin_bottom, 'min', 'number');
        ?>
px
			</span>
		</p>
		<p class="description">
			<span class="leftHalf ">
				<label for="<?php 
        echo esc_attr($this->get_field_id('fullwidthSlider'));
        ?>
">
					Slider Size
				</label>
				<span class="description_text">
					Choose whether you want the slider to be limited to 1170 px (Normal Width) or to be full width.
				</span>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        $sliders_options = array('normalwidth' => 'Normal Width', 'fullwidth' => 'Full Width');
        ?>
					<?php 
        echo circleflip_field_select('fullwidthSlider', $block_id, $sliders_options, isset($fullwidthSlider) ? $fullwidthSlider : 'normalwidth');
        ?>
				</span>
			</span>
		</p>
		<?php 
    }
    function form($instance)
    {
        $defaults = array('text' => '', 'link' => '', 'target' => '', 'font_size' => '', 'color' => '', 'type' => '', 'color_button' => '#e32831', 'color_button_text' => '', 'entrance_animation' => '');
        $instance = wp_parse_args($instance, $defaults);
        extract($instance);
        ?>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('text'));
        ?>
">
					Text
				</label>
				<span class="description_text">
					Enter Text On Button
				</span>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('text', $block_id, $text, $size = 'full');
        ?>
			</span>
		</p>
		<p class="description ButtonCheckIcon">
			<span class="leftHalf ">
				<label for="<?php 
        echo esc_attr($this->get_field_id('checkIcon'));
        ?>
">
					Choose with Icon or without Icon
				</label>
				<span class="description_text">
				</span>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_checkbox('checkIcon', $block_id, isset($checkIcon) ? $checkIcon : 1, array('data-fd-handle="with_icons"'));
        ?>
			</span>
		</p>
		<div class="description ButtonIcon iconselector" data-fd-rules='["with_icons:checked"]'>
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('icon'));
        ?>
">
					icons
				</label>
				<span class="description_text">
					Choose Icon Button
				</span>
			</span>
			<span class="rightHalf icons">
				<?php 
        $icon_option = array('icon-plus', 'icon-minus', 'icon-info', 'icon-left-thin', 'icon-up-thin', 'icon-right-thin', 'icon-down-thin', 'icon-level-up', 'icon-level-down', 'icon-switch', 'icon-infinity', 'icon-plus-squared', 'icon-minus-squared', 'icon-home', 'icon-keyboard', 'icon-erase', 'icon-pause', 'icon-fast-forward', 'icon-fast-backward', 'icon-to-end', 'icon-to-start', 'icon-hourglass', 'icon-stop', 'icon-up-dir', 'icon-play', 'icon-right-dir', 'icon-down-dir', 'icon-left-dir', 'icon-adjust', 'icon-cloud', 'icon-star', 'icon-star-empty', 'icon-cup', 'icon-menu', 'icon-moon', 'icon-heart-empty', 'icon-heart', 'icon-note', 'icon-note-beamed', 'icon-layout', 'icon-flag', 'icon-tools', 'icon-cog', 'icon-attention', 'icon-flash', 'icon-record', 'icon-cloud-thunder', 'icon-tape', 'icon-flight', 'icon-mail', 'icon-pencil', 'icon-feather', 'icon-check', 'icon-cancel', 'icon-cancel-circled', 'icon-cancel-squared', 'icon-help', 'icon-quote', 'icon-plus-circled', 'icon-minus-circled', 'icon-right', 'icon-direction', 'icon-forward', 'icon-ccw', 'icon-cw', 'icon-left', 'icon-up', 'icon-down', 'icon-list-add', 'icon-list', 'icon-left-bold', 'icon-right-bold', 'icon-up-bold', 'icon-down-bold', 'icon-user-add', 'icon-help-circled', 'icon-info-circled', 'icon-eye', 'icon-tag', 'icon-upload-cloud', 'icon-reply', 'icon-reply-all', 'icon-code', 'icon-export', 'icon-print', 'icon-retweet', 'icon-comment', 'icon-chat', 'icon-vcard', 'icon-address', 'icon-location', 'icon-map', 'icon-compass', 'icon-trash', 'icon-doc', 'icon-doc-text-inv', 'icon-docs', 'icon-doc-landscape', 'icon-archive', 'icon-rss', 'icon-share', 'icon-basket', 'icon-shareable', 'icon-login', 'icon-logout', 'icon-volume', 'icon-resize-full', 'icon-resize-small', 'icon-popup', 'icon-publish', 'icon-window', 'icon-arrow-combo', 'icon-chart-pie', 'icon-language', 'icon-air', 'icon-database', 'icon-drive', 'icon-bucket', 'icon-thermometer', 'icon-down-circled', 'icon-left-circled', 'icon-right-circled', 'icon-up-circled', 'icon-down-open', 'icon-left-open', 'icon-right-open', 'icon-up-open', 'icon-down-open-mini', 'icon-left-open-mini', 'icon-right-open-mini', 'icon-up-open-mini', 'icon-down-open-big', 'icon-left-open-big', 'icon-right-open-big', 'icon-up-open-big', 'icon-progress-0', 'icon-progress-1', 'icon-progress-2', 'icon-progress-3', 'icon-back-in-time', 'icon-network', 'icon-inbox', 'icon-install', 'icon-lifebuoy', 'icon-mouse', 'icon-dot', 'icon-dot-2', 'icon-dot-3', 'icon-suitcase', 'icon-flow-cascade', 'icon-flow-branch', 'icon-flow-tree', 'icon-flow-line', 'icon-flow-parallel', 'icon-brush', 'icon-paper-plane', 'icon-magnet', 'icon-gauge', 'icon-traffic-cone', 'icon-cc', 'icon-cc-by', 'icon-cc-nc', 'icon-cc-nc-eu', 'icon-cc-nc-jp', 'icon-cc-sa', 'icon-cc-nd', 'icon-cc-pd', 'icon-cc-zero', 'icon-cc-share', 'icon-cc-remix', 'icon-github', 'icon-github-circled', 'icon-flickr', 'icon-flickr-circled', 'icon-vimeo', 'icon-vimeo-circled', 'icon-twitter', 'icon-twitter-circled', 'icon-facebook', 'icon-facebook-circled', 'icon-facebook-squared', 'icon-gplus', 'icon-gplus-circled', 'icon-pinterest', 'icon-pinterest-circled', 'icon-tumblr', 'icon-tumblr-circled', 'icon-linkedin', 'icon-linkedin-circled', 'icon-dribbble', 'icon-dribbble-circled', 'icon-stumbleupon', 'icon-stumbleupon-circled', 'icon-lastfm', 'icon-lastfm-circled', 'icon-rdio', 'icon-rdio-circled', 'icon-spotify', 'icon-spotify-circled', 'icon-qq', 'icon-instagram', 'icon-dropbox', 'icon-evernote', 'icon-flattr', 'icon-skype', 'icon-skype-circled', 'icon-renren', 'icon-sina-weibo', 'icon-paypal', 'icon-picasa', 'icon-soundcloud', 'icon-mixi', 'icon-behance', 'icon-google-circles', 'icon-vkontakte', 'icon-smashing', 'icon-db-shape', 'icon-sweden', 'icon-logo-db', 'icon-picture', 'icon-globe', 'icon-leaf', 'icon-graduation-cap', 'icon-mic', 'icon-palette', 'icon-ticket', 'icon-video', 'icon-target', 'icon-music', 'icon-trophy', 'icon-thumbs-up', 'icon-thumbs-down', 'icon-bag', 'icon-user', 'icon-users', 'icon-lamp', 'icon-alert', 'icon-water', 'icon-droplet', 'icon-credit-card', 'icon-monitor', 'icon-briefcase', 'icon-floppy', 'icon-cd', 'icon-folder', 'icon-doc-text', 'icon-calendar', 'icon-chart-line', 'icon-chart-bar', 'icon-clipboard', 'icon-attach', 'icon-bookmarks', 'icon-book', 'icon-book-open', 'icon-phone', 'icon-megaphone', 'icon-upload', 'icon-download', 'icon-box', 'icon-newspaper', 'icon-mobile', 'icon-signal', 'icon-camera', 'icon-shuffle', 'icon-loop', 'icon-arrows-ccw', 'icon-light-down', 'icon-light-up', 'icon-mute', 'icon-sound', 'icon-battery', 'icon-search', 'icon-key', 'icon-lock', 'icon-lock-open', 'icon-bell', 'icon-bookmark', 'icon-link', 'icon-back', 'icon-flashlight', 'icon-chart-area', 'icon-clock', 'icon-rocket', 'icon-block', 'icon-basket');
        ?>
				<?php 
        echo circleflip_field_radioButtonIcon('icon', $block_id, $icon_option, isset($icon) ? $icon : '');
        ?>
			</span>
		</div>
		<p class="description adminDropdownShape">
			<span class="leftHalf">
			<label for="<?php 
        echo esc_attr($this->get_field_id('shape'));
        ?>
">
				Shape
			</label>
			<span class="description_text">
				Choose The Shape Button
			</span>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        echo circleflip_field_select('shape', $block_id, array('Rounded Corner', 'Square Corner', 'Announcement Button'), isset($shape) ? $shape : 'Boxed', array('data-fd-handle="icon_shape"'));
        ?>
				</span>
			</span>
		</p>
		<p class="description typeButtonAnnounce" data-fd-rules='["icon_shape:equal:2"]'>
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('type'));
        ?>
">
					Type Button
				</label>
				<span class="description_text">
					Enter Type Button
				</span>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('type', $block_id, $type, $size = 'full');
        ?>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
			<label for="<?php 
        echo esc_attr($this->get_field_id('btn_size'));
        ?>
">
				Size
			</label>
			<span class="description_text">
				Choose Size Button
			</span>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        echo circleflip_field_select('btn_size', $block_id, array('Large', 'Small', 'Full Size'), isset($btn_size) ? $btn_size : 'Large');
        ?>
				</span>
			</span>
		</p>
        <p class="description">
			<span class="leftHalf">
			<label for="<?php 
        echo esc_attr($this->get_field_id('btn_size'));
        ?>
">
				Font Size
			</label>
			<span class="description_text">
				Change Font Size, only numbers are allowed.
			</span>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        echo circleflip_field_input('font_size', $block_id, '13', $size = 'full', 'number');
        ?>
				</span>
			</span>
		</p>
		<p class="description adminSelectTypeColor">
			<span class="leftHalf">
			<label for="<?php 
        echo esc_attr($this->get_field_id('color'));
        ?>
">
				Color
			</label>
			<span class="description_text">
				Choose Color Button
			</span>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        $color_option = array('Custom', 'red', 'heavyRed', 'yellow', 'orange', 'grey', 'heavyGrey', 'green', 'heavyGreen', 'blue', 'heavyBlue', 'black');
        ?>
					<?php 
        echo circleflip_field_select('color', $block_id, $color_option, isset($color) ? $color : 'red', array('data-fd-handle="color"'));
        ?>
				</span>
			</span>
		</p>
		<div class="description half last adminColorButton" data-fd-rules='["color:equal:0"]'>
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('color_button'));
        ?>
">
					Pick a Background Color Button
				</label>
				<span class="description_text">
				</span>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_color_picker('color_button', $block_id, $color_button);
        ?>
			</span>
		</div>
		<div class="description half last adminColorButtonText" data-fd-rules='["color:equal:0"]'>
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('color_button_text'));
        ?>
">
					Pick a Color Text On Button
				</label>
				<span class="description_text">
				</span>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_color_picker('color_button_text', $block_id, $color_button_text);
        ?>
			</span>
		</div>
		<div class="description half last adminColorButtonTextShadow" data-fd-rules='["color:equal:0","icon_shape:equal:2"]'>
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('color_button_text_shadow'));
        ?>
">
					Text Shadow
				</label>
				<span class="description_text">
					Choose Text Shadow
				</span>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        echo circleflip_field_select('color_button_text_shadow', $block_id, array('none', 'white', 'black'), isset($color_button_text_shadow) ? $color_button_text_shadow : 'white');
        ?>
				</span>
			</span>
		</div>
		<p class="description">
			<span class="leftHalf">
			<label for="<?php 
        echo esc_attr($this->get_field_id('align'));
        ?>
">
				Align Direction
			</label>
			<span class="description_text">
				Choose Align Direction Button
			</span>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        echo circleflip_field_select('align', $block_id, array('left', 'center', 'right'), isset($align) ? $align : 'left');
        ?>
				</span>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
			<label for="<?php 
        echo esc_attr($this->get_field_id('link'));
        ?>
">
				Button Link
			</label>
			<span class="description_text">
			</span>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('link', $block_id, $link, $size = 'full');
        ?>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
			<label for="<?php 
        echo esc_attr($this->get_field_id('target'));
        ?>
">
				Link Target
			</label>
			<span class="description_text">
			</span>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('target', $block_id, $target, $size = 'full');
        ?>
			</span>
		</p>
		<p class="description half">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('entrance_animation'));
        ?>
">
					On-Scroll Animation
				</label>
				<span class="description_text">
				</span>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        $animation_options = array('default' => 'Default', 'noanimation' => 'no animation', 'cr_left' => 'Fade To Left', 'cr_right' => 'Fade To Right', 'cr_top' => 'Fade To Up', 'cr_bottom' => 'Fade To Down', 'cr_popup' => 'Popout', 'cr_fade' => 'Fade in');
        echo circleflip_field_select('entrance_animation', $block_id, $animation_options, $entrance_animation);
        ?>
				</span>
				<span class="entrance_animation_sim"></span>
			</span>
		</p>
		<?php 
    }
    function form($instance)
    {
        $defaults = array('text' => '', 'image_hover_style' => '', 'pretty' => '', 'link_target' => '', 'entrance_animation' => '', 'image_shape' => 'square');
        $instance = wp_parse_args($instance, $defaults);
        extract($instance);
        ?>
		<p class="description half">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('image_shape'));
        ?>
">
					<?php 
        _e('Image Shape', 'circleflip-builder');
        ?>
				</label>
				<span class="description_text">
					Choose shape of image
				</span>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        $shape_options = array('square' => 'Square', 'circle' => 'Circle');
        echo circleflip_field_select('image_shape', $block_id, $shape_options, $image_shape, array('data-fd-handle="image_shape"'));
        ?>
				</span>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('image_upload'));
        ?>
">
					Image
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        $image_id = isset($image_uploadid) ? $image_uploadid : '';
        $image_value = isset($image_upload) ? $image_upload : '';
        echo circleflip_field_upload_new('image_upload', $block_id, $image_value, $image_id);
        ?>
			</span>
		</p>
		<p class="description" data-fd-rules='["hover:equal:default", "image_shape:equal:square"]'>
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('image_hover_upload'));
        ?>
">
					Image Hover
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        $image_hover_id = isset($image_hover_uploadid) ? $image_hover_uploadid : '';
        $image_hover_value = isset($image_hover_upload) ? $image_hover_upload : '';
        echo circleflip_field_upload_new('image_hover_upload', $block_id, $image_hover_value, $image_hover_id);
        ?>
			</span>
		</p>
		<p class="description half" data-fd-rules='["image_shape:equal:square"]'>
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('image_hover_animation'));
        ?>
">
					<?php 
        _e('Hover', 'circleflip-builder');
        ?>
				</label>
				<span class="description_text">
					Choose hover effect for image
				</span>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        $animation_options = array('default' => 'No Hover', 'hover1' => 'Hover style 1', 'hover2' => 'Hover style 2');
        echo circleflip_field_select('image_hover_style', $block_id, $animation_options, $image_hover_style, array('data-fd-handle="hover"'));
        ?>
				</span>
			</span>
		</p>
		<!-- only visible when post_shape is circle -->
		<p class="description circlePostsShow" data-fd-rules='["image_shape:equal:circle"]'>
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('animation_number'));
        ?>
">
					<?php 
        _e('Hover style', 'circleflip-builder');
        ?>
				</label>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        echo circleflip_field_select('animation_number', $block_id, array('animation 1', 'animation 2', 'animation 3', 'animation 4'), isset($animation_number) ? $animation_number : 'animation 1');
        ?>
				</span>
			</span>
		</p>
		<p class="description" data-fd-rules='["hover:regex:hover(\\d)"]'>
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('pretty'));
        ?>
">
					Prettyphoto
				</label>
				<span class="description_text">
					Check to open image in prettyphoto
				</span>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_checkbox('pretty', $block_id, $pretty);
        ?>
			</span>
		</p>
		<p class="description" data-fd-rules='["image_shape:equal:square"]'>
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('link_target'));
        ?>
">
					Link
				</label>
				<span class="description_text">
					Add target link or leave it blank. 
				</span>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('link_target', $block_id, $link_target, $size = 'full');
        ?>
			</span>
		</p>
		<p class="description" data-fd-rules='["image_shape:equal:circle"]'>
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('link_target_circle'));
        ?>
">
					Link
				</label>
				<span class="description_text">
					Add target link or leave it blank. 
				</span>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('link_target_circle', $block_id, $link_target_circle, $size = 'full');
        ?>
			</span>
		</p>
		<p class="description" data-fd-rules='["image_shape:equal:circle"]'>
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('title_circle'));
        ?>
">
					Title
				</label>
				<span class="description_text">
					Write title to appear on hover 
				</span>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('title_circle', $block_id, $title_circle, $size = 'full');
        ?>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('imageMarginBottom'));
        ?>
">
					Image Margin Bottom
				</label>
				<span class="description_text">
				</span>
			</span>
			<span class="rightHalf">
					<?php 
        echo circleflip_field_input('imageMarginBottom', $block_id, isset($imageMarginBottom) ? $imageMarginBottom : '20', 'min', 'number');
        ?>
 px
			</span>
		</p>
		<p class="description half">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('entrance_animation'));
        ?>
">
					<?php 
        _e('Animation', 'circleflip-builder');
        ?>
				</label>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        $animation_options = array('default' => 'Default', 'noanimation' => 'no animation', 'cr_left' => 'Fade To Left', 'cr_right' => 'Fade To Right', 'cr_top' => 'Fade To Up', 'cr_bottom' => 'Fade To Down', 'cr_popup' => 'Popout', 'cr_fade' => 'Fade in');
        echo circleflip_field_select('entrance_animation', $block_id, $animation_options, $entrance_animation);
        ?>
				</span>
				<span class="entrance_animation_sim"></span>
			</span>
		</p>
		<?php 
    }
    function form($instance)
    {
        $defaults = array('title' => '', 'post_number' => '', 'entrance_animation' => '', 'post_cat_type' => 'blog', 'post_shape' => 'circle', 'hover_style' => 'squarestyle1', 'animation_number' => 0, 'post_style' => 'circle', 'post_type' => '', 'masonry' => false, 'check_element_color' => 0, 'elements_color' => '');
        $instance = wp_parse_args($instance, $defaults);
        extract($instance);
        $post_selected_cats = isset(${"post_selected_cats_{$post_cat_type}"}) ? ${"post_selected_cats_{$post_cat_type}"} : array();
        ?>
		<div class="block-container" data-post-shape="<?php 
        echo esc_attr($post_shape);
        ?>
" data-posts2show="<?php 
        echo esc_attr($post_type);
        ?>
">
			<p class="description">
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('title'));
        ?>
">
						<?php 
        _e('Block title', 'circleflip-builder');
        ?>
					</label>
				</span>
				<span class="rightHalf">
					<?php 
        echo circleflip_field_input('title', $block_id, $title, $size = 'full');
        ?>
				</span>
			</p>
			<p class="description">
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('titleIcon'));
        ?>
">
						Title Icon:
					</label>
				</span>
				<span class="rightHalf">
					<span class="rightHalf select">
						<?php 
        $titleIconOption = array('without Icon', 'with Icon');
        ?>
						<?php 
        echo circleflip_field_select('titleIcon', $block_id, $titleIconOption, isset($titleIcon) ? $titleIcon : 'without Icon');
        ?>
					</span>
				</span>
			</p>
			<p class="description crdn-post-shape">
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('post_shape'));
        ?>
">
						<?php 
        _e('Post shape', 'circleflip-builder');
        ?>
					</label>
				</span>
				<span class="rightHalf">
					<span class="rightHalf select postsStyle">
						<?php 
        //echo circleflip_field_select( 'post_shape', $block_id, array( 'circle' => 'Circle', 'square' => 'Square' ), $post_shape, array('data-fd-handle="post_shape"') )
        ?>
						<?php 
        echo circleflip_field_select('post_shape', $block_id, array('circle' => 'Circle', 'square' => 'Square', 'magazine' => 'Magazine'), $post_shape, array('data-fd-handle="post_shape"'));
        ?>
					</span>
				</span>
			</p>
			<!-- only visible when post_shape is square -->
			<p class="description" data-fd-rules='["post_shape:equal:square"]'>
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('hover_style'));
        ?>
">
						<?php 
        _e('Hover style', 'circleflip-builder');
        ?>
					</label>
				</span>
				<span class="rightHalf">
					<span class="rightHalf select postsStyle">
						<?php 
        echo circleflip_field_select('hover_style', $block_id, array('squarestyle1' => 'layout 1', 'squarestyle2' => 'layout 2', 'squarestyle3' => 'layout 3'), isset($post_style) ? $post_style : 'circle', array('data-fd-handle="post_hover"'));
        ?>
					</span>
				</span>
			</p>
			<p class="description" data-fd-rules='["post_shape:equal:square", "post_hover:equal:squarestyle1"]'>
				<img style="display: block;margin:0 auto; " src="<?php 
        echo get_template_directory_uri();
        ?>
/creiden-framework/content-builder/assets/images/hover_1.png" alt=""/>
			</p>
			<p class="description" data-fd-rules='["post_shape:equal:square", "post_hover:equal:squarestyle2"]'>
				<img style="display: block;margin:0 auto; " src="<?php 
        echo get_template_directory_uri();
        ?>
/creiden-framework/content-builder/assets/images/hover_2.png" alt=""/>
			</p>
			<p class="description" data-fd-rules='["post_shape:equal:square", "post_hover:equal:squarestyle3"]'>
				<img style="display: block;margin:0 auto; " src="<?php 
        echo get_template_directory_uri();
        ?>
/creiden-framework/content-builder/assets/images/hover_3.png" alt=""/>
			</p>
			<p class="description" data-fd-rules='["post_shape:equal:square"]'>
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('masonry'));
        ?>
">
						<?php 
        _e('Masonry', 'circleflip-builder');
        ?>
					</label>
				</span>
				<span class="rightHalf">
					<span class="rightHalf postsStyle">
						<?php 
        echo circleflip_field_checkbox('masonry', $block_id, $masonry, array('data-fd-handle="masonry"'));
        ?>
					</span>
				</span>
			</p>
			<!-- only visible when post_shape is circle -->
			<p class="description circlePostsShow" data-fd-rules='["post_shape:equal:circle"]'>
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('animation_number'));
        ?>
">
						<?php 
        _e('Hover style', 'circleflip-builder');
        ?>
					</label>
				</span>
				<span class="rightHalf">
					<span class="rightHalf select">
						<?php 
        echo circleflip_field_select('animation_number', $block_id, array('animation 1', 'animation 2', 'animation 3', 'animation 4'), isset($animation_number) ? $animation_number : 'animation 1');
        ?>
					</span>
				</span>
			</p>
			<!-- only visible when post_shape is Magazine -->
			<p class="description AnnouncementCheckIcon" data-fd-rules='["post_shape:equal:magazine"]'>
				<span class="leftHalf ">
					<label for="<?php 
        echo esc_attr($this->get_field_id('check_element_color'));
        ?>
">
						Do you want custom color for this block elements?
					</label>
				</span>
				<span class="rightHalf">
					<?php 
        echo circleflip_field_checkbox('check_element_color', $block_id, isset($check_element_color) ? $check_element_color : 0, array('data-fd-handle="check_element_color"'));
        ?>
				</span>
			</p>
			<div class="description half last adminColorButton" data-fd-rules='["post_shape:equal:magazine", "check_element_color:equal:1"]'>
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('elements_color'));
        ?>
">
						Main Color for this block elements
					</label>
					<span class="description_text">
					</span>
				</span>
				<span class="rightHalf">
					<?php 
        echo circleflip_field_color_picker('elements_color', $block_id, $elements_color);
        ?>
				</span>
			</div>
			<p class="description circlePostsShow" data-fd-rules='["post_shape:equal:magazine"]'>
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('magazine_style'));
        ?>
">
						<?php 
        _e('Magazine style', 'circleflip-builder');
        ?>
					</label>
				</span>
				<span class="rightHalf">
					<span class="rightHalf select">
						<?php 
        echo circleflip_field_select('magazine_style', $block_id, array('magazinestyle1' => 'Magazine Style 1', 'magazinestyle2' => 'Magazine Style 2', 'magazinestyle3' => 'Magazine Style 3', 'magazinestyle4' => 'Magazine Style 4'), isset($magazine_style) ? $magazine_style : 'magazinestyle1', array('data-fd-handle="magazine_style"'));
        ?>
					</span>
				</span>
			</p>
			<p class="description" data-fd-rules='["post_shape:equal:magazine", "magazine_style:equal:magazinestyle1"]'>
				<img style="display: block;margin:0 auto; " src="<?php 
        echo get_template_directory_uri();
        ?>
/creiden-framework/content-builder/assets/images/mag_style1.png" alt=""/>
			</p>
			<p class="description" data-fd-rules='["post_shape:equal:magazine", "magazine_style:equal:magazinestyle2"]'>
				<img style="display: block;margin:0 auto; " src="<?php 
        echo get_template_directory_uri();
        ?>
/creiden-framework/content-builder/assets/images/mag_style2.png" alt=""/>
			</p>
			<p class="description" data-fd-rules='["post_shape:equal:magazine", "magazine_style:equal:magazinestyle3"]'>
				<img style="display: block;margin:0 auto; " src="<?php 
        echo get_template_directory_uri();
        ?>
/creiden-framework/content-builder/assets/images/mag_style3.png" alt=""/>
			</p>
			<p class="description" data-fd-rules='["post_shape:equal:magazine", "magazine_style:equal:magazinestyle4"]'>
				<img style="display: block;margin:0 auto; " src="<?php 
        echo get_template_directory_uri();
        ?>
/creiden-framework/content-builder/assets/images/mag_style4.png" alt=""/>
			</p>
			<p class="description" data-fd-rules='["post_shape:regex:circle|square"]'>
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('type'));
        ?>
">
						Layout Style
					</label>
				</span>
				<span class="rightHalf">
					<span class="rightHalf select">
						<?php 
        echo circleflip_field_select('type', $block_id, array('Thirds', 'Fourths'), isset($type) ? $type : 'Thirds');
        ?>
					</span>
				</span>
			</p>
			<p class="description" data-fd-rules='["post_shape:equal:magazine"]'>
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('type_mag'));
        ?>
">
						Layout Style
					</label>
				</span>
				<span class="rightHalf">
					<span class="rightHalf select">
						<?php 
        echo circleflip_field_select('type_mag', $block_id, array('Thirds', 'Fourths', 'Half'), isset($type_mag) ? $type_mag : 'Half');
        ?>
					</span>
				</span>
			</p>
			<p class="description">
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('post_type'));
        ?>
">
						<?php 
        _e('Which posts to show ?', 'circleflip-builder');
        ?>
					</label>
				</span>
				<span class="rightHalf">
					<span class="rightHalf select">
						<?php 
        echo circleflip_field_select('post_type', $block_id, array('latest' => 'Latest Posts', 'popular' => 'Popular Posts', 'selected' => 'Selected Posts'), isset($post_type) ? $post_type : 'Latest Posts', array('data-fd-handle="post_type"'));
        ?>
					</span>
				</span>
			</p>
			<p class="description">
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('post_cat_type'));
        ?>
">
						Posts Category Type
					</label>
				</span>
				<span class="rightHalf">
					<span class="rightHalf select">
						<?php 
        $_post_cat_types = array('blog' => 'Blog');
        if (post_type_exists('circleflip-portfolio')) {
            $_post_cat_types['portfolio'] = 'Portfolio';
        } else {
            $_post_cat_type = 'blog';
        }
        echo circleflip_field_select('post_cat_type', $block_id, $_post_cat_types, isset($post_cat_type) ? $post_cat_type : '', array('data-fd-handle="post_cat_type"'));
        ?>
					</span>
				</span>
			</p>
			<div data-fd-rules='["post_cat_type:equal:blog"]'>
				<p class="description" data-fd-rules='["post_type:regex:latest|popular"]'>
					<span class="leftHalf">
						<label for="<?php 
        echo esc_attr($this->get_field_id('post_selected_cats_blog'));
        ?>
">
							Selected Categories
						</label>
					</span>
					<span class="rightHalf">
						<?php 
        $options_categories = circleflip_get_categories();
        echo circleflip_field_multiselect('post_selected_cats_blog', $block_id, $options_categories, isset($post_selected_cats) ? $post_selected_cats : '');
        ?>
					</span>
				</p>
				<p class="description" data-fd-rules='["post_type:equal:selected"]'>
					<span class="leftHalf">
						<label for="<?php 
        echo esc_attr($this->get_field_id('post_selected_posts_blog'));
        ?>
">
							Selected Posts
						</label>
					</span>
					<span class="rightHalf">
						<?php 
        $postNames = circleflip_get_posts();
        echo circleflip_field_multiselect('post_selected_posts_blog', $block_id, $postNames, isset($post_selected_posts_blog) ? $post_selected_posts_blog : '');
        ?>
					</span>
				</p>
			</div>
			<?php 
        if (post_type_exists('circleflip-portfolio')) {
            ?>
				<div data-fd-rules='["post_cat_type:equal:portfolio"]'>
					<p class="description" data-fd-rules='["post_type:regex:latest|popular"]'>
						<span class="leftHalf">
							<label for="<?php 
            echo esc_attr($this->get_field_id('post_selected_cats_portfolio'));
            ?>
">
								Selected Categories
							</label>
						</span>
						<span class="rightHalf">
							<?php 
            $options_categories = array();
            $port_cats = circleflip_get_portfolio_categories();
            if ($port_cats) {
                foreach ($port_cats as $cat) {
                    $options_categories[$cat->term_id] = $cat->name;
                }
            }
            echo circleflip_field_multiselect('post_selected_cats_portfolio', $block_id, $options_categories, isset($post_selected_cats_portfolio) ? $post_selected_cats_portfolio : '');
            ?>
						</span>
					</p>
					<p class="description" data-fd-rules='["post_type:equal:selected"]'>
						<span class="leftHalf">
							<label for="<?php 
            echo esc_attr($this->get_field_id('post_selected_posts_portfolio'));
            ?>
">
								Selected Posts
							</label>
						</span>
						<span class="rightHalf">
							<?php 
            $postNames = array();
            $port_items = circleflip_get_portfolio_items();
            foreach ($port_items as $item) {
                $postNames[$item->ID] = $item->post_title;
            }
            echo circleflip_field_multiselect('post_selected_posts_portfolio', $block_id, $postNames, isset($post_selected_posts_portfolio) ? $post_selected_posts_portfolio : '');
            ?>
						</span>
					</p>
				</div>
			<?php 
        }
        ?>
			<p class="description" data-fd-rules='["post_type:regex:latest|popular"]'>
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('post_number'));
        ?>
">
						<?php 
        _e('How many posts to show ?', 'circleflip-builder');
        ?>
					</label>
					<span sclass="description_text">-1 To Get All Posts</span>
				</span>
				<span class="rightHalf">
					<?php 
        echo circleflip_field_input('post_number', $block_id, $post_number, $size = 'full');
        ?>
				</span>
			</p>
			<p class="description">
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('reload_section'));
        ?>
">
						Reload Section
					</label>
				</span>
				<span class="rightHalf">
					<?php 
        echo circleflip_field_select('reload_section', $block_id, array('enable' => 'Enable', 'disable' => 'Disable'), isset($reload_section) ? $reload_section : '');
        ?>
				</span>
			</p>
			<p class="description half">
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('entrance_animation'));
        ?>
">
						<?php 
        _e('Animation', 'circleflip-builder');
        ?>
					</label>
				</span>
				<span class="rightHalf">
					<span class="rightHalf select">
						<?php 
        $animation_options = array('default' => 'Default', 'noanimation' => 'no animation', 'cr_left' => 'Fade To Left', 'cr_right' => 'Fade To Right', 'cr_top' => 'Fade To Up', 'cr_bottom' => 'Fade To Down', 'cr_popup' => 'Popout', 'cr_fade' => 'Fade in');
        echo circleflip_field_select('entrance_animation', $block_id, $animation_options, $entrance_animation);
        ?>
					</span>
					<span class="entrance_animation_sim"></span>
				</span>
			</p>
		</div>
		<?php 
    }
    function form($instance)
    {
        $defaults = array('text' => '', 'entrance_animation' => '', 'count' => 3);
        $instance = wp_parse_args($instance, $defaults);
        extract($instance);
        ?>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('title'));
        ?>
">
					<?php 
        _e('Title', 'circleflip-builder');
        ?>
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('title', $block_id, $title, $size = 'full');
        ?>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('titleIcon'));
        ?>
">
					Title Icon:
				</label>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        $titleIconOption = array('without Icon', 'with Icon');
        ?>
					<?php 
        echo circleflip_field_select('titleIcon', $block_id, $titleIconOption, isset($titleIcon) ? $titleIcon : 'without Icon');
        ?>
				</span>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('text'));
        ?>
">
					<?php 
        _e('Username', 'circleflip-builder');
        ?>
				</label>
				<span class="description_text">
					<?php 
        _e("the twitter username whose feed will be shown", 'circleflip-builder');
        ?>
				</span>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('text', $block_id, $text, $size = 'full');
        ?>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('count'));
        ?>
">
						<?php 
        _e('How many tweets to show ?', 'circleflip-builder');
        ?>
					</label>
				</span>
				<span class="rightHalf">
					<?php 
        echo circleflip_field_input('count', $block_id, $count, $size = 'full');
        ?>
				</span>
			</p>
			<p class="description half">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('entrance_animation'));
        ?>
">
					<?php 
        _e('Animation', 'circleflip-builder');
        ?>
				</label>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        $animation_options = array('default' => 'Default', 'noanimation' => 'no animation', 'cr_left' => 'Fade To Left', 'cr_right' => 'Fade To Right', 'cr_top' => 'Fade To Up', 'cr_bottom' => 'Fade To Down', 'cr_popup' => 'Popout', 'cr_fade' => 'Fade in');
        echo circleflip_field_select('entrance_animation', $block_id, $animation_options, $entrance_animation);
        ?>
				</span>
				<span class="entrance_animation_sim"></span>
			</span>
		</p>
		<?php 
    }
    function form($instance)
    {
        $defaults = array('heading' => '', 'align' => '', 'custom_image' => '', 'entrance_animation' => '', 'headcolor' => '#2a2a2a', 'headMarginBottom' => '20');
        $instance = wp_parse_args($instance, $defaults);
        extract($instance);
        ?>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('heading'));
        ?>
">
					Heading Text
				</label>
				<span class="description_text">
					Write your heading text.
				</span>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('heading', $block_id, $heading, $size = 'full');
        ?>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('headsize'));
        ?>
">
					Heading Size
				</label>
				<span class="description_text">
					Choose the size.
				</span>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        $head_array = array('h1', 'h2', 'h3', 'h4', 'h5', 'h6');
        ?>
					<?php 
        echo circleflip_field_select('headsize', $block_id, $head_array, isset($headsize) ? $headsize : 'h1');
        ?>
				</span>
			</span>
		</p>
		<div class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('headcolor'));
        ?>
">
					Heading Color
				</label>
				<span class="description_text">
					Choose the color.
				</span>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_color_picker('headcolor', $block_id, $headcolor, $defaults['headcolor']);
        ?>
			</span>
		</div>
		<p class="description headingSelect">
			<span class="leftHalf">
			<label for="<?php 
        echo esc_attr($this->get_field_id('type'));
        ?>
">
				Heading Type
			</label>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        echo circleflip_field_select('type', $block_id, array('Without Default Icon', 'With Default Icon', 'Choose Your Icon'), isset($type) ? $type : 'without dot', array('data-fd-handle="type"'));
        ?>
				</span>
			</span>
		</p>
		<div class="description ButtonIcon iconselector" data-fd-rules='["type:equal:2"]'>
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('custom_icon'));
        ?>
">
					Custom Icon
				</label>
				<span class="description_text">
					Choose your heading icon.
				</span>
			</span>
			<span class="rightHalf icons">
				<?php 
        $icon_option = array('icon-plus', 'icon-minus', 'icon-info', 'icon-left-thin', 'icon-up-thin', 'icon-right-thin', 'icon-down-thin', 'icon-level-up', 'icon-level-down', 'icon-switch', 'icon-infinity', 'icon-plus-squared', 'icon-minus-squared', 'icon-home', 'icon-keyboard', 'icon-erase', 'icon-pause', 'icon-fast-forward', 'icon-fast-backward', 'icon-to-end', 'icon-to-start', 'icon-hourglass', 'icon-stop', 'icon-up-dir', 'icon-play', 'icon-right-dir', 'icon-down-dir', 'icon-left-dir', 'icon-adjust', 'icon-cloud', 'icon-star', 'icon-star-empty', 'icon-cup', 'icon-menu', 'icon-moon', 'icon-heart-empty', 'icon-heart', 'icon-note', 'icon-note-beamed', 'icon-layout', 'icon-flag', 'icon-tools', 'icon-cog', 'icon-attention', 'icon-flash', 'icon-record', 'icon-cloud-thunder', 'icon-tape', 'icon-flight', 'icon-mail', 'icon-pencil', 'icon-feather', 'icon-check', 'icon-cancel', 'icon-cancel-circled', 'icon-cancel-squared', 'icon-help', 'icon-quote', 'icon-plus-circled', 'icon-minus-circled', 'icon-right', 'icon-direction', 'icon-forward', 'icon-ccw', 'icon-cw', 'icon-left', 'icon-up', 'icon-down', 'icon-list-add', 'icon-list', 'icon-left-bold', 'icon-right-bold', 'icon-up-bold', 'icon-down-bold', 'icon-user-add', 'icon-help-circled', 'icon-info-circled', 'icon-eye', 'icon-tag', 'icon-upload-cloud', 'icon-reply', 'icon-reply-all', 'icon-code', 'icon-export', 'icon-print', 'icon-retweet', 'icon-comment', 'icon-chat', 'icon-vcard', 'icon-address', 'icon-location', 'icon-map', 'icon-compass', 'icon-trash', 'icon-doc', 'icon-doc-text-inv', 'icon-docs', 'icon-doc-landscape', 'icon-archive', 'icon-rss', 'icon-share', 'icon-basket', 'icon-shareable', 'icon-login', 'icon-logout', 'icon-volume', 'icon-resize-full', 'icon-resize-small', 'icon-popup', 'icon-publish', 'icon-window', 'icon-arrow-combo', 'icon-chart-pie', 'icon-language', 'icon-air', 'icon-database', 'icon-drive', 'icon-bucket', 'icon-thermometer', 'icon-down-circled', 'icon-left-circled', 'icon-right-circled', 'icon-up-circled', 'icon-down-open', 'icon-left-open', 'icon-right-open', 'icon-up-open', 'icon-down-open-mini', 'icon-left-open-mini', 'icon-right-open-mini', 'icon-up-open-mini', 'icon-down-open-big', 'icon-left-open-big', 'icon-right-open-big', 'icon-up-open-big', 'icon-progress-0', 'icon-progress-1', 'icon-progress-2', 'icon-progress-3', 'icon-back-in-time', 'icon-network', 'icon-inbox', 'icon-install', 'icon-lifebuoy', 'icon-mouse', 'icon-dot', 'icon-dot-2', 'icon-dot-3', 'icon-suitcase', 'icon-flow-cascade', 'icon-flow-branch', 'icon-flow-tree', 'icon-flow-line', 'icon-flow-parallel', 'icon-brush', 'icon-paper-plane', 'icon-magnet', 'icon-gauge', 'icon-traffic-cone', 'icon-cc', 'icon-cc-by', 'icon-cc-nc', 'icon-cc-nc-eu', 'icon-cc-nc-jp', 'icon-cc-sa', 'icon-cc-nd', 'icon-cc-pd', 'icon-cc-zero', 'icon-cc-share', 'icon-cc-remix', 'icon-github', 'icon-github-circled', 'icon-flickr', 'icon-flickr-circled', 'icon-vimeo', 'icon-vimeo-circled', 'icon-twitter', 'icon-twitter-circled', 'icon-facebook', 'icon-facebook-circled', 'icon-facebook-squared', 'icon-gplus', 'icon-gplus-circled', 'icon-pinterest', 'icon-pinterest-circled', 'icon-tumblr', 'icon-tumblr-circled', 'icon-linkedin', 'icon-linkedin-circled', 'icon-dribbble', 'icon-dribbble-circled', 'icon-stumbleupon', 'icon-stumbleupon-circled', 'icon-lastfm', 'icon-lastfm-circled', 'icon-rdio', 'icon-rdio-circled', 'icon-spotify', 'icon-spotify-circled', 'icon-qq', 'icon-instagram', 'icon-dropbox', 'icon-evernote', 'icon-flattr', 'icon-skype', 'icon-skype-circled', 'icon-renren', 'icon-sina-weibo', 'icon-paypal', 'icon-picasa', 'icon-soundcloud', 'icon-mixi', 'icon-behance', 'icon-google-circles', 'icon-vkontakte', 'icon-smashing', 'icon-db-shape', 'icon-sweden', 'icon-logo-db', 'icon-picture', 'icon-globe', 'icon-leaf', 'icon-graduation-cap', 'icon-mic', 'icon-palette', 'icon-ticket', 'icon-video', 'icon-target', 'icon-music', 'icon-trophy', 'icon-thumbs-up', 'icon-thumbs-down', 'icon-bag', 'icon-user', 'icon-users', 'icon-lamp', 'icon-alert', 'icon-water', 'icon-droplet', 'icon-credit-card', 'icon-monitor', 'icon-briefcase', 'icon-floppy', 'icon-cd', 'icon-folder', 'icon-doc-text', 'icon-calendar', 'icon-chart-line', 'icon-chart-bar', 'icon-clipboard', 'icon-attach', 'icon-bookmarks', 'icon-book', 'icon-book-open', 'icon-phone', 'icon-megaphone', 'icon-upload', 'icon-download', 'icon-box', 'icon-newspaper', 'icon-mobile', 'icon-signal', 'icon-camera', 'icon-shuffle', 'icon-loop', 'icon-arrows-ccw', 'icon-light-down', 'icon-light-up', 'icon-mute', 'icon-sound', 'icon-battery', 'icon-search', 'icon-key', 'icon-lock', 'icon-lock-open', 'icon-bell', 'icon-bookmark', 'icon-link', 'icon-back', 'icon-flashlight', 'icon-chart-area', 'icon-clock', 'icon-rocket', 'icon-block', 'icon-basket');
        ?>
				<?php 
        echo circleflip_field_radioButtonIcon('custom_icon', $block_id, $icon_option, isset($custom_icon) ? $custom_icon : '');
        ?>
			</span>
		</div>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('align'));
        ?>
">
					Heading Align
				</label>
				<span class="description_text">
				</span>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        $align_array = array('left', 'center', 'right');
        ?>
					<?php 
        echo circleflip_field_select('align', $block_id, $align_array, isset($align) ? $align : 'left');
        ?>
				</span>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('headMarginBottom'));
        ?>
">
					Heading Margin Bottom
				</label>
				<span class="description_text">
				</span>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('headMarginBottom', $block_id, $headMarginBottom, 'min', 'number');
        ?>
 px
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('weight'));
        ?>
">
					font-style
				</label>
				<span class="description_text">
					Choose font style.
				</span>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        $weight_array = array('normal', 'bold');
        ?>
					<?php 
        echo circleflip_field_select('weight', $block_id, $weight_array, isset($weight) ? $weight : 'left');
        ?>
				</span>
			</span>
		</p>
		<p class="description half">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('entrance_animation'));
        ?>
">
					On-Scroll Animation
				</label>
				<span class="description_text">
					Choose the heading scroll animation.
				</span>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        $animation_options = array('default' => 'Default', 'noanimation' => 'no animation', 'cr_left' => 'Fade To Left', 'cr_right' => 'Fade To Right', 'cr_top' => 'Fade To Up', 'cr_bottom' => 'Fade To Down', 'cr_popup' => 'Popout', 'cr_fade' => 'Fade in');
        echo circleflip_field_select('entrance_animation', $block_id, $animation_options, $entrance_animation);
        ?>
				</span>
				<span class="entrance_animation_sim"></span>
			</span>
		</p>
		<?php 
    }
    function form($instance)
    {
        $defaults = array('main_title' => 'Pricing Table', 'price' => '$20', 'active' => '', 'btnText' => 'Buy', 'btnLink' => '', 'tabs' => array(1 => array('title' => 'Feature', 'content' => 'Feature Description', 'imagesrc' => '')), 'type' => 'tab');
        $instance = wp_parse_args($instance, $defaults);
        extract($instance);
        ?>
		<div class="description cf">
				<p class="description">
					<span class="leftHalf">
						<label for="<?php 
        echo esc_attr($this->get_field_id('main_title'));
        ?>
">
							Main Title
						</label>
						<span class="description_text">
							Ex. Best Bundle
						</span>
					</span>
					<span class="rightHalf">
						<?php 
        echo circleflip_field_input('main_title', $block_id, $main_title, $size = 'full');
        ?>
					</span>
				</p>
				<p class="description">
					<span class="leftHalf">
						<label for="<?php 
        echo esc_attr($this->get_field_id('price'));
        ?>
">
							Price
						</label>
						<span class="description_text">
							Ex. $50
						</span>
					</span>
					<span class="rightHalf">
						<?php 
        echo circleflip_field_input('price', $block_id, $price, $size = 'full');
        ?>
					</span>
				</p>
				<p class="description">
					<span class="leftHalf">
						<label for="<?php 
        echo esc_attr($this->get_field_id('active'));
        ?>
">
							Highlighted
						</label>
 					</span>
					<span class="rightHalf">
						<?php 
        echo circleflip_field_checkbox('active', $block_id, $active);
        ?>
					</span>
				</p>
				<p class="description">
					<span class="leftHalf">
						<label for="<?php 
        echo esc_attr($this->get_field_id('btnText'));
        ?>
">
							Button Text
						</label>
						<span class="description_text">
							Ex. Join Now
						</span>
					</span>
					<span class="rightHalf">
						<?php 
        echo circleflip_field_input('btnText', $block_id, $btnText, $size = 'full');
        ?>
					</span>
				</p>
				<p class="description">
					<span class="leftHalf">
						<label for="<?php 
        echo esc_attr($this->get_field_id('btnLink'));
        ?>
">
							Button Link
						</label>
					</span>
					<span class="rightHalf">
						<?php 
        echo circleflip_field_input('btnLink', $block_id, $btnLink, $size = 'full');
        ?>
					</span>
				</p>
				<ul id="aq-sortable-list-<?php 
        echo esc_attr($block_id);
        ?>
" class="aq-sortable-list" rel="<?php 
        echo esc_attr($block_id);
        ?>
">
					<?php 
        $tabs = is_array($tabs) ? $tabs : $defaults['tabs'];
        $count = 1;
        foreach ($tabs as $tab) {
            $this->tab($tab, $count);
            $count++;
        }
        ?>
				</ul>
				<p></p>
				<a href="#" rel="pt_tab" class="aq-sortable-add-new button">Add New</a>
				<p></p>
			</div>
		<?php 
    }
    function form($instance)
    {
        $defaults = array('text' => '', 'entrance_animation' => '', 'textMarginBottom' => '20');
        $instance = wp_parse_args($instance, $defaults);
        extract($instance);
        ?>
		<div class="description">
			<div class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('text'));
        ?>
">
					<?php 
        _e('Text', 'circleflip-builder');
        ?>
				</label>
			</div>
			<div class="rightHalf">
				<?php 
        echo wp_editor($text, $block_id, array('textarea_name' => 'aq_blocks[' . $block_id . '][text]', 'quicktags' => false));
        ?>
			</div>
		</div>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('textMarginBottom'));
        ?>
">
					Block Margin Bottom
				</label>
				<span class="description_text">
				</span>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('textMarginBottom', $block_id, $textMarginBottom, 'min', 'number');
        ?>
 px
			</span>
		</p>
		<p class="description half">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('entrance_animation'));
        ?>
">
					<?php 
        _e('Animation', 'circleflip-builder');
        ?>
				</label>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        $animation_options = array('default' => 'Default', 'noanimation' => 'no animation', 'cr_left' => 'Fade To Left', 'cr_right' => 'Fade To Right', 'cr_top' => 'Fade To Up', 'cr_bottom' => 'Fade To Down', 'cr_popup' => 'Popout', 'cr_fade' => 'Fade in');
        echo circleflip_field_select('entrance_animation', $block_id, $animation_options, $entrance_animation);
        ?>
				</span>
				<span class="entrance_animation_sim"></span>
			</span>
		</p>
		<?php 
    }
    function form($instance)
    {
        $defaults = array('tabs' => array(1 => array('link' => '#', 'content' => 'My tab contents', 'image' => '', 'imagesrc' => '')), 'type' => 'tab', 'entrance_animation' => '');
        $instance = wp_parse_args($instance, $defaults);
        extract($instance);
        $tab_types = array('tab' => 'Tabs', 'toggle' => 'Toggles', 'accordion' => 'Accordion');
        $animation_options = array('default' => 'Default', 'noanimation' => 'no animation', 'cr_left' => 'Fade To Left', 'cr_right' => 'Fade To Right', 'cr_top' => 'Fade To Up', 'cr_bottom' => 'Fade To Down', 'cr_popup' => 'Popout', 'cr_fade' => 'Fade in');
        ?>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('title'));
        ?>
">
					Section Title
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('title', $block_id, $title, $size = 'full');
        ?>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('titleIcon'));
        ?>
">
					Title Icon:
				</label>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        $titleIconOption = array('without Icon', 'with Icon');
        ?>
					<?php 
        echo circleflip_field_select('titleIcon', $block_id, $titleIconOption, isset($titleIcon) ? $titleIcon : 'without Icon');
        ?>
				</span>
			</span>
		</p>
		<p class="description half">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('entrance_animation'));
        ?>
">
					On-Scroll Animation
				</label>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        $animation_options = array('noanimation' => 'no animation', 'cr_left' => 'Fade To Left', 'cr_right' => 'Fade To Right', 'cr_top' => 'Fade To Up', 'cr_bottom' => 'Fade To Down', 'cr_popup' => 'Popout', 'cr_fade' => 'Fade in');
        echo circleflip_field_select('entrance_animation', $block_id, $animation_options, $entrance_animation);
        ?>
				</span>
				<span class="entrance_animation_sim"></span>
			</span>
		</p>
		<div class="description cf">
			<ul id="aq-sortable-list-<?php 
        echo esc_attr($block_id);
        ?>
" class="aq-sortable-list" rel="<?php 
        echo esc_attr($block_id);
        ?>
">
				<?php 
        $tabs = is_array($tabs) ? $tabs : $defaults['tabs'];
        $count = 1;
        foreach ($tabs as $tab) {
            $this->tab($tab, $count);
            $count++;
        }
        ?>
			</ul>
			<p></p>
			<a href="#" rel="carousel" class="aq-sortable-add-new button">Add New</a>
			<p></p>
		</div>
		<?php 
    }
    function form($instance)
    {
        $defaults = array('counternumber' => '', 'counterunit' => '', 'custom_icon' => '', 'counter_color' => '', 'entrance_animation' => '');
        $instance = wp_parse_args($instance, $defaults);
        extract($instance);
        ?>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('counternumber'));
        ?>
">
					<?php 
        _e('Number', 'circleflip-builder');
        ?>
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('counternumber', $block_id, $counternumber);
        ?>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('counterunit'));
        ?>
">
					<?php 
        _e('Unit', 'circleflip-builder');
        ?>
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('counterunit', $block_id, $counterunit);
        ?>
			</span>
		</p>
		<div class="description ButtonIcon iconselector" >
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('custom_icon'));
        ?>
">
					Pick an icon
				</label>
			</span>
			<span class="rightHalf icons">
				<?php 
        $icon_option = array('icon-plus', 'icon-minus', 'icon-info', 'icon-left-thin', 'icon-up-thin', 'icon-right-thin', 'icon-down-thin', 'icon-level-up', 'icon-level-down', 'icon-switch', 'icon-infinity', 'icon-plus-squared', 'icon-minus-squared', 'icon-home', 'icon-keyboard', 'icon-erase', 'icon-pause', 'icon-fast-forward', 'icon-fast-backward', 'icon-to-end', 'icon-to-start', 'icon-hourglass', 'icon-stop', 'icon-up-dir', 'icon-play', 'icon-right-dir', 'icon-down-dir', 'icon-left-dir', 'icon-adjust', 'icon-cloud', 'icon-star', 'icon-star-empty', 'icon-cup', 'icon-menu', 'icon-moon', 'icon-heart-empty', 'icon-heart', 'icon-note', 'icon-note-beamed', 'icon-layout', 'icon-flag', 'icon-tools', 'icon-cog', 'icon-attention', 'icon-flash', 'icon-record', 'icon-cloud-thunder', 'icon-tape', 'icon-flight', 'icon-mail', 'icon-pencil', 'icon-feather', 'icon-check', 'icon-cancel', 'icon-cancel-circled', 'icon-cancel-squared', 'icon-help', 'icon-quote', 'icon-plus-circled', 'icon-minus-circled', 'icon-right', 'icon-direction', 'icon-forward', 'icon-ccw', 'icon-cw', 'icon-left', 'icon-up', 'icon-down', 'icon-list-add', 'icon-list', 'icon-left-bold', 'icon-right-bold', 'icon-up-bold', 'icon-down-bold', 'icon-user-add', 'icon-help-circled', 'icon-info-circled', 'icon-eye', 'icon-tag', 'icon-upload-cloud', 'icon-reply', 'icon-reply-all', 'icon-code', 'icon-export', 'icon-print', 'icon-retweet', 'icon-comment', 'icon-chat', 'icon-vcard', 'icon-address', 'icon-location', 'icon-map', 'icon-compass', 'icon-trash', 'icon-doc', 'icon-doc-text-inv', 'icon-docs', 'icon-doc-landscape', 'icon-archive', 'icon-rss', 'icon-share', 'icon-basket', 'icon-shareable', 'icon-login', 'icon-logout', 'icon-volume', 'icon-resize-full', 'icon-resize-small', 'icon-popup', 'icon-publish', 'icon-window', 'icon-arrow-combo', 'icon-chart-pie', 'icon-language', 'icon-air', 'icon-database', 'icon-drive', 'icon-bucket', 'icon-thermometer', 'icon-down-circled', 'icon-left-circled', 'icon-right-circled', 'icon-up-circled', 'icon-down-open', 'icon-left-open', 'icon-right-open', 'icon-up-open', 'icon-down-open-mini', 'icon-left-open-mini', 'icon-right-open-mini', 'icon-up-open-mini', 'icon-down-open-big', 'icon-left-open-big', 'icon-right-open-big', 'icon-up-open-big', 'icon-progress-0', 'icon-progress-1', 'icon-progress-2', 'icon-progress-3', 'icon-back-in-time', 'icon-network', 'icon-inbox', 'icon-install', 'icon-lifebuoy', 'icon-mouse', 'icon-dot', 'icon-dot-2', 'icon-dot-3', 'icon-suitcase', 'icon-flow-cascade', 'icon-flow-branch', 'icon-flow-tree', 'icon-flow-line', 'icon-flow-parallel', 'icon-brush', 'icon-paper-plane', 'icon-magnet', 'icon-gauge', 'icon-traffic-cone', 'icon-cc', 'icon-cc-by', 'icon-cc-nc', 'icon-cc-nc-eu', 'icon-cc-nc-jp', 'icon-cc-sa', 'icon-cc-nd', 'icon-cc-pd', 'icon-cc-zero', 'icon-cc-share', 'icon-cc-remix', 'icon-github', 'icon-github-circled', 'icon-flickr', 'icon-flickr-circled', 'icon-vimeo', 'icon-vimeo-circled', 'icon-twitter', 'icon-twitter-circled', 'icon-facebook', 'icon-facebook-circled', 'icon-facebook-squared', 'icon-gplus', 'icon-gplus-circled', 'icon-pinterest', 'icon-pinterest-circled', 'icon-tumblr', 'icon-tumblr-circled', 'icon-linkedin', 'icon-linkedin-circled', 'icon-dribbble', 'icon-dribbble-circled', 'icon-stumbleupon', 'icon-stumbleupon-circled', 'icon-lastfm', 'icon-lastfm-circled', 'icon-rdio', 'icon-rdio-circled', 'icon-spotify', 'icon-spotify-circled', 'icon-qq', 'icon-instagram', 'icon-dropbox', 'icon-evernote', 'icon-flattr', 'icon-skype', 'icon-skype-circled', 'icon-renren', 'icon-sina-weibo', 'icon-paypal', 'icon-picasa', 'icon-soundcloud', 'icon-mixi', 'icon-behance', 'icon-google-circles', 'icon-vkontakte', 'icon-smashing', 'icon-db-shape', 'icon-sweden', 'icon-logo-db', 'icon-picture', 'icon-globe', 'icon-leaf', 'icon-graduation-cap', 'icon-mic', 'icon-palette', 'icon-ticket', 'icon-video', 'icon-target', 'icon-music', 'icon-trophy', 'icon-thumbs-up', 'icon-thumbs-down', 'icon-bag', 'icon-user', 'icon-users', 'icon-lamp', 'icon-alert', 'icon-water', 'icon-droplet', 'icon-credit-card', 'icon-monitor', 'icon-briefcase', 'icon-floppy', 'icon-cd', 'icon-folder', 'icon-doc-text', 'icon-calendar', 'icon-chart-line', 'icon-chart-bar', 'icon-clipboard', 'icon-attach', 'icon-bookmarks', 'icon-book', 'icon-book-open', 'icon-phone', 'icon-megaphone', 'icon-upload', 'icon-download', 'icon-box', 'icon-newspaper', 'icon-mobile', 'icon-signal', 'icon-camera', 'icon-shuffle', 'icon-loop', 'icon-arrows-ccw', 'icon-light-down', 'icon-light-up', 'icon-mute', 'icon-sound', 'icon-battery', 'icon-search', 'icon-key', 'icon-lock', 'icon-lock-open', 'icon-bell', 'icon-bookmark', 'icon-link', 'icon-back', 'icon-flashlight', 'icon-chart-area', 'icon-clock', 'icon-rocket', 'icon-block', 'icon-basket');
        ?>
				<?php 
        echo circleflip_field_radioButtonIcon('custom_icon', $block_id, $icon_option, isset($custom_icon) ? $custom_icon : '');
        ?>
			</span>
		</div>
		<div class="description half last adminColorButtonText">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('counter_color'));
        ?>
">
					Pick a Color Text On Button
				</label>
				<span class="description_text">
				</span>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_color_picker('counter_color', $block_id, $counter_color);
        ?>
			</span>
		</div>
		<p class="description half">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('entrance_animation'));
        ?>
">
					<?php 
        _e('Animation', 'circleflip-builder');
        ?>
				</label>
				<span class="description_text">
					<?php 
        _e('Choose the animation that you like', 'circleflip-builder');
        ?>
				</span>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        $animation_options = array('default' => 'Default', 'noanimation' => 'no animation', 'cr_left' => 'Fade To Left', 'cr_right' => 'Fade To Right', 'cr_top' => 'Fade To Up', 'cr_bottom' => 'Fade To Down', 'cr_popup' => 'Popout', 'cr_fade' => 'Fade in');
        echo circleflip_field_select('entrance_animation', $block_id, $animation_options, $entrance_animation);
        ?>
				</span>
				<span class="entrance_animation_sim"></span>
			</span>
		</p>
		<?php 
    }
    function form($instance)
    {
        $defaults = array('title_block' => '', 'text' => '', 'count' => '', 'displayButton' => '', 'tabs' => array(1 => array('imagesrc' => '')), 'type' => 'tab');
        $instance = wp_parse_args($instance, $defaults);
        extract($instance);
        ?>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('title_block'));
        ?>
">
					Title
				</label>
				<span class="description_text">
					Write a title for the block, or leave it blank.
				</span>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('title_block', $block_id, $title_block, $size = 'full');
        ?>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('titleIcon'));
        ?>
">
					Title Icon:
				</label>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        $titleIconOption = array('without Icon', 'with Icon');
        ?>
					<?php 
        echo circleflip_field_select('titleIcon', $block_id, $titleIconOption, isset($titleIcon) ? $titleIcon : 'without Icon');
        ?>
				</span>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('displayButton'));
        ?>
">
					Display Navigation Buttons
				</label>
			</span>
				<?php 
        echo circleflip_field_checkbox('displayButton', $block_id, isset($displayButton) ? $displayButton : 0);
        ?>
		</p>
		<div class="description cf">
				<ul id="aq-sortable-list-<?php 
        echo esc_attr($block_id);
        ?>
" class="aq-sortable-list" rel="<?php 
        echo esc_attr($block_id);
        ?>
">
					<?php 
        $tabs = is_array($tabs) ? $tabs : $defaults['tabs'];
        $count = 1;
        foreach ($tabs as $tab) {
            $this->tab($tab, $count);
            $count++;
        }
        ?>
				</ul>
				<br />
				<a href="#" rel="ImageSlider" class="aq-sortable-add-new button">Add New</a>
				<br />
		</div>
		<?php 
    }
    function form($instance)
    {
        $defaults = array('title' => 'Contact Details', 'entrance_animation' => '', 'tabs' => array(0 => array('title_branch' => 'Main Branch', 'text' => 'Circle Flip inc. <br /> 701 First Avenue, Sunnyvalesa, CA', 'postal' => '94089', 'tel' => '(408) 349-3300', 'fax' => '(408) 349-3301', 'mail' => '*****@*****.**')));
        $instance = wp_parse_args($instance, $defaults);
        extract($instance);
        ?>
		<div class="description cf">
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('title'));
        ?>
">
					Section Title
				</label>
			</span>
			<span class="rightHalf">
				<?php 
        echo circleflip_field_input('title', $block_id, $title, $size = 'full');
        ?>
			</span>
		</p>
		<p class="description">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('titleIcon'));
        ?>
">
					Title Icon:
				</label>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        $titleIconOption = array('without Icon', 'with Icon');
        ?>
					<?php 
        echo circleflip_field_select('titleIcon', $block_id, $titleIconOption, isset($titleIcon) ? $titleIcon : 'without Icon');
        ?>
				</span>
			</span>
		</p>
		<p class="description half">
			<span class="leftHalf">
				<label for="<?php 
        echo esc_attr($this->get_field_id('entrance_animation'));
        ?>
">
					On-Scroll Animation
				</label>
			</span>
			<span class="rightHalf">
				<span class="rightHalf select">
					<?php 
        $animation_options = array('default' => 'Default', 'noanimation' => 'no animation', 'cr_left' => 'Fade To Left', 'cr_right' => 'Fade To Right', 'cr_top' => 'Fade To Up', 'cr_bottom' => 'Fade To Down', 'cr_popup' => 'Popout', 'cr_fade' => 'Fade in');
        echo circleflip_field_select('entrance_animation', $block_id, $animation_options, $entrance_animation);
        ?>
				</span>
				<span class="entrance_animation_sim"></span>
			</span>
		</p>
		<ul id="aq-sortable-list-<?php 
        echo esc_attr($block_id);
        ?>
" class="aq-sortable-list" rel="<?php 
        echo esc_attr($block_id);
        ?>
">
			<?php 
        $tabs = is_array($tabs) ? $tabs : $defaults['tabs'];
        $count = 1;
        if (isset($tabs)) {
            foreach ($tabs as $tab) {
                $this->tab($tab, $count);
                $count++;
            }
        }
        ?>
		</ul>
		<p></p>
		<a href="#" rel="cd_tab" class="aq-sortable-add-new button">Add New</a>
		<p></p>
		</div>
		<?php 
    }
        function form($instance)
        {
            $defaults = array('content' => '', 'type' => 'note', 'style' => '', 'entrance_animation' => '');
            $instance = wp_parse_args($instance, $defaults);
            extract($instance);
            $type_options = array('default' => 'Standard', 'info' => 'Info', 'note' => 'Notification', 'warn' => 'Warning', 'tips' => 'Tips');
            ?>
			<p class="description">
				<span class="leftHalf">
					<label for="<?php 
            echo esc_attr($this->get_field_id('title'));
            ?>
">
						<?php 
            _e('Title', 'circleflip-builder');
            ?>
					</label>
				</span>
				<span class="rightHalf">
					<?php 
            echo circleflip_field_input('title', $block_id, $title);
            ?>
				</span>
			</p>
			<div class="description">
				<div class="leftHalf">
					<label for="<?php 
            echo esc_attr($this->get_field_id('content'));
            ?>
">
						<?php 
            _e('Content', 'circleflip-builder');
            ?>
					</label>
				</div>
				<div class="rightHalf">
					<?php 
            echo wp_editor($content, $block_id, array('textarea_name' => 'aq_blocks[' . $block_id . '][content]', 'quicktags' => false, 'editor_class' => 'iframeclass'));
            ?>
				</div>

			</div>
			<p class="description half">
				<span class="leftHalf">
					<label for="<?php 
            echo esc_attr($this->get_field_id('type'));
            ?>
">
						<?php 
            _e('Type', 'circleflip-builder');
            ?>
					</label>
				</span>
				<span class="rightHalf">
					<span class="rightHalf select">
						<?php 
            echo circleflip_field_select('type', $block_id, $type_options, $type);
            ?>
					</span>
				</span>
			</p>
			<p class="description half">
				<span class="leftHalf">
					<label for="<?php 
            echo esc_attr($this->get_field_id('entrance_animation'));
            ?>
">
						<?php 
            _e('Animation', 'circleflip-builder');
            ?>
					</label>
					<span class="description_text">
						<?php 
            _e('Choose the animation that you like', 'circleflip-builder');
            ?>
					</span>
				</span>
				<span class="rightHalf">
					<span class="rightHalf select">
						<?php 
            $animation_options = array('default' => 'Default', 'noanimation' => 'no animation', 'cr_left' => 'Fade To Left', 'cr_right' => 'Fade To Right', 'cr_top' => 'Fade To Up', 'cr_bottom' => 'Fade To Down', 'cr_popup' => 'Popout', 'cr_fade' => 'Fade in');
            echo circleflip_field_select('entrance_animation', $block_id, $animation_options, $entrance_animation);
            ?>
					</span>
					<span class="entrance_animation_sim"></span>
				</span>
			</p>
			<?php 
        }
    function extra_column_fields($instance)
    {
        extract($instance);
        ?>
			<div class="description half">
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('center_blocks'));
        ?>
">
						Center Blocks
					</label>
					<span class="description_text">
						Center the Blocks inside it, mainly used to wrap and center the pricing tables
					</span>
				</span>
				<span class="rightHalf">
					<?php 
        echo circleflip_field_checkbox('center_blocks', 'aq_block_' . $number, isset($center_blocks) ? $center_blocks : 0);
        ?>
				</span>
			</div>
			<div class="description half last clearLineColor">
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('background_color'));
        ?>
">
						Background Color
					</label>
					<span class="description_text">
						Choose background color section <b>Note: This color makes the background applied to the whole row and doesn't depend on the size of the block</b>
					</span>
				</span>
				<span class="rightHalf">
					<?php 
        echo circleflip_field_color_picker('background_color', 'aq_block_' . $number, $background_color);
        ?>
				</span>
			</div>
			<div class="description">
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('background_image'));
        ?>
">
						Background Image
					</label>
				</span>
				<span class="rightHalf">
					<?php 
        $image_id = isset($image_uploadid) ? $image_uploadid : '';
        $image_value = isset($image_upload) ? $image_upload : '';
        echo circleflip_field_upload_new('image_upload', 'aq_block_' . $number, $image_value, $image_id);
        ?>
				</span>
			</div>
			<p class="description">
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('background_video'));
        ?>
">
						Background Video
					</label>
					<span class="description_text">
						Enter Video link
					</span>
				</span>
				<span class="rightHalf">
					<?php 
        echo circleflip_field_input('background_video', 'aq_block_' . $number, $background_video, $size = 'full');
        ?>
				</span>
			</p>
			<p class="description">
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('opacityBG'));
        ?>
">
						Background opacity
					</label>
					<span class="description_text">
						Enter opacity for background color/image/video as a number between (0 and 1), <br />
						Example: 0.8, default value is 1
					</span>
				</span>
				<span class="rightHalf">
					<?php 
        echo circleflip_field_input('opacityBG', 'aq_block_' . $number, $opacityBG, $size = 'full');
        ?>
				</span>
			</p>
			<p class="description">
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('padding_col'));
        ?>
">
						Padding Size
					</label>
				</span>
				<span class="rightHalf">
					<span class="rightHalf select">
						<?php 
        echo circleflip_field_select('padding_col', 'aq_block_' . $number, array('None', 'small', 'medium', 'large'), isset($padding_col) ? $padding_col : 'None');
        ?>
					</span>
				</span>
			</p>
			<p class="description AnnouncementCheckIcon">
				<span class="leftHalf ">
					<label for="<?php 
        echo esc_attr($this->get_field_id('checkParallax'));
        ?>
">
						Enable Parallax
					</label>
				</span>
				<span class="rightHalf">
					<?php 
        echo circleflip_field_checkbox('checkParallax', 'aq_block_' . $number, isset($checkParallax) ? $checkParallax : 0);
        ?>
				</span>
			</p>
			<p class="description">
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('highlight'));
        ?>
">
						Map
					</label>
					<span class="description_text">
						use the first map block inside the column as a background
					</span>
				</span>
				<span class="rightHalf">
					<span class="rightHalf">
						<?php 
        echo circleflip_field_checkbox('map_background', 'aq_block_' . $number, isset($map_background) ? $map_background : false);
        ?>
					</span>
				</span>
			</p>
		<?php 
    }
        function form($instance)
        {
            $defaults = array('title' => 'Clients', 'perGroupNumber' => '3', 'tabs' => array(1 => array('imagesrc' => '', 'link1' => '')), 'type' => 'tab');
            $instance = wp_parse_args($instance, $defaults);
            extract($instance);
            ?>
			<p class="description">
				<span class="leftHalf">
					<label for="<?php 
            echo esc_attr($this->get_field_id('title'));
            ?>
">
						Title
					</label>
					<span class="description_text">
					Write main title for the block here.
					</span>
				</span>
				<span class="rightHalf">
					<?php 
            echo circleflip_field_input('title', $block_id, $title, $size = 'full');
            ?>
				</span>
			</p>
			<p class="description">
				<span class="leftHalf">
					<label for="<?php 
            echo esc_attr($this->get_field_id('titleIcon'));
            ?>
">
						Title Icon:
					</label>
				</span>
				<span class="rightHalf">
					<span class="rightHalf select">
						<?php 
            $titleIconOption = array('without Icon', 'with Icon');
            ?>
						<?php 
            echo circleflip_field_select('titleIcon', $block_id, $titleIconOption, isset($titleIcon) ? $titleIcon : 'without Icon');
            ?>
					</span>
				</span>
			</p>
			<p class="description">
				<span class="leftHalf">
					<label for="<?php 
            echo esc_attr($this->get_field_id('perGroupNumber'));
            ?>
">
						Clients number per slide
					</label>
					<span class="description_text">
						Write Clients number to display per once.
					</span>
				</span>
				<span class="rightHalf">
					<?php 
            echo circleflip_field_input('perGroupNumber', $block_id, $perGroupNumber, $size = 'full');
            ?>
				</span>
			</p>
			<div class="description cf">
				<ul id="aq-sortable-list-<?php 
            echo esc_attr($block_id);
            ?>
" class="aq-sortable-list" rel="<?php 
            echo esc_attr($block_id);
            ?>
">
					<?php 
            $tabs = is_array($tabs) ? $tabs : $defaults['tabs'];
            $count = 1;
            foreach ($tabs as $tab) {
                $this->tab($tab, $count);
                $count++;
            }
            ?>
				</ul>
				<br />
				<a href="#" rel="clients" class="aq-sortable-add-new button">Add New</a>
				<br />
			</div>
			<?php 
        }
    function form($instance)
    {
        $defaults = array('title' => '', 'post_number' => '', 'entrance_animation' => '', 'post_cat_type' => 'offer', 'post_shape' => 'circle', 'hover_style' => 'squarestyle1', 'animation_number' => 0, 'post_style' => 'circle', 'post_type' => '', 'masonry' => false, 'check_element_color' => 0, 'elements_color' => '');
        $instance = wp_parse_args($instance, $defaults);
        extract($instance);
        $post_selected_cats = isset(${"post_selected_cats_{$post_cat_type}"}) ? ${"post_selected_cats_{$post_cat_type}"} : array();
        ?>
		<div class="block-container" data-post-shape="<?php 
        echo esc_attr($post_shape);
        ?>
" data-posts2show="<?php 
        echo esc_attr($post_type);
        ?>
">
			<p class="description">
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('title'));
        ?>
">
						<?php 
        _e('Block title', 'circleflip-builder');
        ?>
					</label>
				</span>
				<span class="rightHalf">
					<?php 
        echo circleflip_field_input('title', $block_id, $title, $size = 'full');
        ?>
				</span>
			</p>
			<p class="description">
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('titleIcon'));
        ?>
">
						Title Icon:
					</label>
				</span>
				<span class="rightHalf">
					<span class="rightHalf select">
						<?php 
        $titleIconOption = array('without Icon', 'with Icon');
        ?>
						<?php 
        echo circleflip_field_select('titleIcon', $block_id, $titleIconOption, isset($titleIcon) ? $titleIcon : 'without Icon');
        ?>
					</span>
				</span>
			</p>
			<p class="description">
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('post_type'));
        ?>
">
						<?php 
        _e('Which posts to show ?', 'circleflip-builder');
        ?>
					</label>
				</span>
				<span class="rightHalf">
					<span class="rightHalf select">
						<?php 
        echo circleflip_field_select('post_type', $block_id, array('latest' => 'Latest Posts', 'selected' => 'Selected Posts'), isset($post_type) ? $post_type : 'Latest Posts', array('data-fd-handle="post_type"'));
        ?>
					</span>
				</span>
			</p>
			<?php 
        if (post_type_exists('circleflip-offer')) {
            ?>
				<p class="description" data-fd-rules='["post_type:regex:latest|popular"]'>
					<span class="leftHalf">
						<label for="<?php 
            echo esc_attr($this->get_field_id('post_selected_cats_offer'));
            ?>
">
							Selected Categories
						</label>
					</span>
					<span class="rightHalf">
						<?php 
            $options_categories = array();
            $port_cats = circleflip_get_offer_categories();
            if ($port_cats) {
                foreach ($port_cats as $cat) {
                    $options_categories[$cat->term_id] = $cat->name;
                }
            }
            echo circleflip_field_multiselect('post_selected_cats_offer', $block_id, $options_categories, isset($post_selected_cats_offer) ? $post_selected_cats_offer : '');
            ?>
					</span>
				</p>
				<p class="description" data-fd-rules='["post_type:equal:selected"]'>
					<span class="leftHalf">
						<label for="<?php 
            echo esc_attr($this->get_field_id('post_selected_posts_offer'));
            ?>
">
							Selected Posts
						</label>
					</span>
					<span class="rightHalf">
						<?php 
            $postNames = array();
            $port_items = circleflip_get_offer_items();
            foreach ($port_items as $item) {
                $postNames[$item->ID] = $item->post_title;
            }
            echo circleflip_field_multiselect('post_selected_posts_offer', $block_id, $postNames, isset($post_selected_posts_offer) ? $post_selected_posts_offer : '');
            ?>
					</span>
				</p>
			<?php 
        }
        ?>
			<p class="description" data-fd-rules='["post_type:regex:latest|popular"]'>
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('post_number'));
        ?>
">
						<?php 
        _e('How many posts to show ?', 'circleflip-builder');
        ?>
					</label>
					<span sclass="description_text">-1 To Get All Posts</span>
				</span>
				<span class="rightHalf">
					<?php 
        echo circleflip_field_input('post_number', $block_id, $post_number, $size = 'full');
        ?>
				</span>
			</p>
			<p class="description">
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('type'));
        ?>
">
						Layout Style
					</label>
				</span>
				<span class="rightHalf">
					<span class="rightHalf select">
						<?php 
        echo circleflip_field_select('type', $block_id, array('Thirds', 'Fourths'), isset($type) ? $type : 'Thirds');
        ?>
					</span>
				</span>
			</p>
			<p class="description half">
				<span class="leftHalf">
					<label for="<?php 
        echo esc_attr($this->get_field_id('entrance_animation'));
        ?>
">
						<?php 
        _e('Animation', 'circleflip-builder');
        ?>
					</label>
				</span>
				<span class="rightHalf">
					<span class="rightHalf select">
						<?php 
        $animation_options = array('default' => 'Default', 'noanimation' => 'no animation', 'cr_left' => 'Fade To Left', 'cr_right' => 'Fade To Right', 'cr_top' => 'Fade To Up', 'cr_bottom' => 'Fade To Down', 'cr_popup' => 'Popout', 'cr_fade' => 'Fade in');
        echo circleflip_field_select('entrance_animation', $block_id, $animation_options, $entrance_animation);
        ?>
					</span>
					<span class="entrance_animation_sim"></span>
				</span>
			</p>
		</div>
		<?php 
    }
        function form($instance)
        {
            $defaults = array('title' => 'Testimonials', 'tabs' => array(1 => array('text' => '', 'imagesrc' => '', 'name' => '', 'job' => '')), 'type' => 'tab', 'entrance_animation' => '');
            $instance = wp_parse_args($instance, $defaults);
            extract($instance);
            ?>
			<p class="description">
				<span class="leftHalf">
					<label for="<?php 
            echo esc_attr($this->get_field_id('title'));
            ?>
">
						Title
					</label>
					<span class="description_text">
						Write a title here
					</span>
				</span>
				<span class="rightHalf">
					<?php 
            echo circleflip_field_input('title', $block_id, $title, $size = 'full');
            ?>
				</span>
			</p>
			<p class="description">
				<span class="leftHalf">
					<label for="<?php 
            echo esc_attr($this->get_field_id('titleIcon'));
            ?>
">
						Title Icon:
					</label>
				</span>
				<span class="rightHalf">
					<span class="rightHalf select">
						<?php 
            $titleIconOption = array('without Icon', 'with Icon');
            ?>
						<?php 
            echo circleflip_field_select('titleIcon', $block_id, $titleIconOption, isset($titleIcon) ? $titleIcon : 'without Icon');
            ?>
					</span>
				</span>
			</p>
			<p class="description">
				<span class="leftHalf">
					<label for="<?php 
            echo esc_attr($this->get_field_id('arrows'));
            ?>
">
						Navigation type:
					</label>
					<span class="description_text">
					</span>
				</span>
				<span class="rightHalf">
					<span class="rightHalf select">
						<?php 
            $arrows_type = array('arrows', 'bullets', 'none');
            ?>
						<?php 
            echo circleflip_field_select('arrows', $block_id, $arrows_type, isset($arrows) ? $arrows : 'arrows');
            ?>
					</span>
				</span>
			</p>
			<p class="description">
				<span class="leftHalf">
					<label for="<?php 
            echo esc_attr($this->get_field_id('testmonial_type'));
            ?>
">
						Testmonials Style:
					</label>
					<span class="description_text">
					</span>
				</span>
				<span class="rightHalf">
					<span class="rightHalf select">
						<?php 
            $test_type = array('Testmonials Style1', 'Testmonials Style2');
            ?>
						<?php 
            echo circleflip_field_select('testmonial_type', $block_id, $test_type, isset($testmonial_type) ? $testmonial_type : 'Testmonials Style1', array('data-fd-handle="testimonial_style"'));
            ?>
					</span>
				</span>
			</p>
			<p class="description" data-fd-rules='["testimonial_style:equal:0"]'>
				<img style="display: block;margin:0 auto;max-width: 100%;" src="<?php 
            echo get_template_directory_uri();
            ?>
/creiden-framework/content-builder/assets/images/testimonial1.jpg" alt=""/>
			</p>
			<p class="description" data-fd-rules='["testimonial_style:equal:1"]'>
				<img style="display: block;margin:0 auto;max-width: 100%;" src="<?php 
            echo get_template_directory_uri();
            ?>
/creiden-framework/content-builder/assets/images/testimonial2.jpg" alt=""/>
			</p>
			<div class="description cf">
				<p class="description half">
					<span class="leftHalf">
						<label for="<?php 
            echo esc_attr($this->get_field_id('entrance_animation'));
            ?>
">
							On-Scroll Animation
						</label>
					</span>
					<span class="rightHalf">
						<span class="rightHalf select">
							<?php 
            $animation_options = array('default' => 'Default', 'noanimation' => 'no animation', 'cr_left' => 'Fade To Left', 'cr_right' => 'Fade To Right', 'cr_top' => 'Fade To Up', 'cr_bottom' => 'Fade To Down', 'cr_popup' => 'Popout', 'cr_fade' => 'Fade in');
            echo circleflip_field_select('entrance_animation', $block_id, $animation_options, $entrance_animation);
            ?>
						</span>
						<span class="entrance_animation_sim"></span>
					</span>
				</p>
				<ul id="aq-sortable-list-<?php 
            echo esc_attr($block_id);
            ?>
" class="aq-sortable-list" rel="<?php 
            echo esc_attr($block_id);
            ?>
">
					<?php 
            $tabs = is_array($tabs) ? $tabs : $defaults['tabs'];
            $count = 1;
            foreach ($tabs as $tab) {
                $this->tab($tab, $count);
                $count++;
            }
            ?>
				</ul>
				<br />
				<a href="#" rel="testimonials" class="aq-sortable-add-new button">Add New</a>
				<br />
			</div>
			<?php 
        }