<?php
// Horizontal Category
function serpentsoft_horiz_cat($block_id, $cat_id, $title, $color = '', $posts_num) {
    global $post;
    if( empty($color) ) { $color = serpentsoft_get_theme_main_color(); } ?>

    <style type="text/css">
        #<?php echo $block_id; ?> .flexslider .flex-direction-nav > li:hover {
            background-color: <?php echo $color; ?>;
        }
        #<?php echo $block_id; ?> .cat-widget-title h3:after{
            background-color: <?php echo $color; ?>;
        }
        #<?php echo $block_id; ?> .cat-widget a:hover{
            color: <?php echo $color; ?>;
        }
        #<?php echo $block_id; ?> .cat-horiz a:hover{
            color: <?php echo $color; ?>;
        }
    </style>

    <?php $wp_query = new WP_Query(array('post_type' => 'post', 'posts_per_page' => $posts_num, 'cat' => $cat_id, 'post_status' => 'publish')); ?>
    <?php if ($wp_query->have_posts()) : ?>

        <section id="<?php echo $block_id; ?>" class="cat-widget h-cat-1">
            <div class="cat-widget-title">
                <h3>
                <?php if ($cat_id > 0): $cat_name = get_the_category_by_ID($cat_id); ?>
                    <a href="<?php echo get_category_link($cat_id); ?>" title="<?php echo esc_attr( sprintf( __('View All (%s) Category Posts', 'serpentsoft'), $cat_name) ); ?>"><?php echo $title; ?></a>
                
                <?php else: echo $title; endif; ?>
                </h3>
                
            </div>

            <div class="cat-widget-content">

                <?php $s_postcount = 0; $s_nd_part = 0; $s_rd_rowfluid = 0; $current_post = 0; ?>

                <?php $arr_rgb = hex2rgb($color, '0.7'); ?>

                <?php while ($wp_query->have_posts()) : $wp_query->the_post(); $current_post++; ?>

                    <!-- Create first post -->
            <?php if ($s_postcount == 0): ?>
                        <!-- last post -->
                        <div class="row-fluid cat-horiz">
                            <article class="last-post clearfix">

                                <div class="span5 img-container" title="">
                <?php serpentsoft_grab_post_banner_figure($post->ID); ?>

                                    <div class="img-meta">
                                        <div class="post-date" style="background-color: rgba(<?php echo $arr_rgb[0]; ?>, <?php echo $arr_rgb[1]; ?>, <?php echo $arr_rgb[2]; ?>, <?php echo $arr_rgb[3]; ?>);">
                                            <div class="date">
                                                <span class="month"><?php echo get_the_date('M'); ?></span>
                                                <span class="day"><?php echo get_the_date('d'); ?></span>
                                                <span class="month"><?php echo get_the_date('Y'); ?></span>
                                                <hr>
                                                <span class="time"><?php the_time( get_option('time_format') ); ?></span>
                                            </div>
                                        </div>
                                    </div>

                                    <a href="<?php the_permalink(); ?>" class="more" title="<?php the_title(); ?>"></a>
                                </div>

                                <div class="span7">
                                    <div class="post-info">
                                        <div class="post-title clearfix">
                                            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                                                <h4 class="pull-left"><?php the_title(); ?></h4>
                                            </a>
                                        </div>

                                        <div class="post-meta clearfix">
                                            <ul class="clearfix">
                                                <li><a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>" title="<?php echo sprintf( esc_attr__( 'View %s\'s posts' , 'serpentsoft' ), get_the_author() ); ?>"><i class="bo-icon-pencil"></i><?php the_author(); ?></a></li>

                                                <li><span><i class="bo-icon-comment"></i><?php comments_popup_link(__('Leave a comment', 'serpentsoft'), __('1 Comment', 'serpentsoft'), __('% Comments', 'serpentsoft')); ?></span></li>

                                                <li><span title="<?php echo sprintf( esc_attr__('Viewed: %s times', 'serpentsoft'), serpentsoft_get_post_views($post->ID) ); ?>"><i class="bo-icon-eye-open"></i><?php echo serpentsoft_get_post_views($post->ID); ?></span></li>
                                            </ul>
                                        </div>

                                        <div class="post-desc">
                <?php serpentsoft_cats_GetTheExcerpt(); ?>
                                        </div>

                                    </div>
                                </div>

                            </article>
                        </div>

                        <!-- Else Create Second Part Posts -->
                    <?php else: ?>

                        <!-- Create The Container of second part once -->
                <?php if ($s_nd_part == 0) : ?>
                            <div class="row-fluid cat-horiz">
                                <div class="cat-horiz-divider"></div>

                                <div class="related-posts clearfix">
                                    <div class="row-fluid modern-items-list">
                                        <div id="h_cat_slider_<?php echo $block_id; ?>" class="flexslider h_cat_slider1">
                                            <ul class="slides">

                                                <!-- End-if Second Part -->
                                            <?php endif;
                                            $s_nd_part = 1; ?>

                                                    <?php if ($s_postcount == 1): ?>
                                                <li>
                                                    <ul class="items left clearfix">

                                                        <?php endif; ?>

                <?php if ($s_rd_rowfluid == 0 || $s_rd_rowfluid % 2 == 0): ?>
                                                        <li class="row-fluid">
                <?php endif;
                $s_rd_rowfluid++; ?>

                                                        <div class="span6">
                                                            <article class="fold-item span12">
                                                                <div class="clearfix">
                                                                    <div class="post-img">
                <?php serpentsoft_grab_post_banner_figure($post->ID); ?>
                                                                    </div>

                                                                    <div class="description visible-part" style="background-color: rgba(<?php echo $arr_rgb[0]; ?>, <?php echo $arr_rgb[1]; ?>, <?php echo $arr_rgb[2]; ?>, <?php echo $arr_rgb[3]; ?>);">
                                                                        <h5 class="title"><?php the_title(); ?></h5>

                                                                        <div class="info">
                                                                            <span><i class="bo-icon-time bo-icon-white"></i><?php the_time(serpentsoft_getDateTimeFormat('dt')); ?></span>
                                                                            <span><i class="bo-icon-comment bo-icon-white"></i><?php comments_number('0', '1', '%'); ?></span>
                                                                            <span><i class="bo-icon-eye-open bo-icon-white"></i><?php echo serpentsoft_get_post_views($post->ID); ?></span>
                                                                        </div>

                                                                        <div class="text"><?php serpentsoft_cats_GetTheExcerpt(); ?></div>
                                                                    </div>

                                                                    <a href="<?php the_permalink(); ?>" class="more" title="<?php the_title(); ?>"></a>
                                                                </div>
                                                            </article>
                                                        </div>

                                                    <?php if ($s_rd_rowfluid % 2 == 0 || ($current_post == $wp_query->post_count) ): $s_rd_rowfluid = 0; ?>    
                                                        </li>
                <?php endif; ?>

                                            <?php if ($s_postcount % 4 == 0 || ($current_post == $wp_query->post_count)): ?>
                                                    </ul> <!-- post count -->
                                                </li>

                                                <?php $s_postcount = 0;
                                            endif; ?>

                                            <?php endif;
                                            $s_postcount++; ?>
                                        <?php endwhile; ?>

                                        <?php if ($s_nd_part == 1) : ?>
                                    </ul>

                                <!-- </div>-->
                            </div>
                        </div>

                    </div>

                </div>
        <?php endif; ?>

        <script type="text/javascript">
            //<![CDATA[
            jQuery(document).ready(function() {
                "use strict";
               var is_exist = jQuery('#h_cat_slider_<?php echo $block_id; ?>').length > 0 ? jQuery('#h_cat_slider_<?php echo $block_id; ?>').length : 0;

               if (is_exist > 0) {
                    jQuery('#h_cat_slider_<?php echo $block_id; ?>').flexslider({
                        slideshow: false,
                        animation: "slide",              //String: Select your animation type, "fade" or "slide"
                        easing: "swing",                 //{NEW} String: Determines the easing method used in $jqSlider transitions. $jqSlider easing plugin is supported!
                        direction: "horizontal"            // String: Select the sliding direction, "horizontal" or "vertical"
                    });
                }
            });
            //]]>
        </script>
        
    </div>
</section>

    <?php endif; 
}

// ======================================================    
// Vertical Category
// ======================================================
function serpentsoft_vertical_cat($block_order_ver1, $cat_id, $cat_title, $cat_color, $cat_posts_num, $block_order_ver2, $cat_id_2, $cat_title_2, $cat_color_2, $cat_posts_num_2) {
    global $post;
    if( empty($cat_color) ) { $cat_color = serpentsoft_get_theme_main_color(); }
    if( empty($cat_color_2) ) { $cat_color_2 = serpentsoft_get_theme_main_color(); } ?>

    <style type="text/css">
        #<?php echo $block_order_ver1; ?> .flexslider .flex-direction-nav > li:hover {
            background-color: <?php echo $cat_color; ?>;
        }
        #<?php echo $block_order_ver1; ?> .cat-widget-title h3:after{
            background-color: <?php echo $cat_color; ?>;
        }
        #<?php echo $block_order_ver1; ?> .cat-widget a:hover{
            color: <?php echo $cat_color; ?>;
        }
        #<?php echo $block_order_ver1; ?> .cat-vertical a:hover{
            color: <?php echo $cat_color; ?>;
        }
        
        #<?php echo $block_order_ver2; ?> .flexslider .flex-direction-nav > li:hover {
            background-color: <?php echo $cat_color_2; ?>;
        }
        #<?php echo $block_order_ver2; ?> .cat-widget-title h3:after{
            background-color: <?php echo $cat_color_2; ?>;
        }
        #<?php echo $block_order_ver2; ?> .cat-widget a:hover{
            color: <?php echo $cat_color_2; ?>;
        }
        #<?php echo $block_order_ver2; ?> .cat-vertical a:hover{
            color: <?php echo $cat_color_2; ?>;
        }
    </style>

    <div class="row-fluid">

        <!-- First Vertical Category --> 
    <?php $wp_query = new WP_Query(array('post_type' => 'post', 'posts_per_page' => $cat_posts_num, 'cat' => $cat_id, 'post_status' => 'publish')); ?>
    <?php if ($wp_query->have_posts()) : ?>


            <div class="span6">
                <section id="<?php echo $block_order_ver1; ?>" class="cat-widget v-cat-1">
                    <div class="cat-widget-title">
                        <h3>
                        <?php if ($cat_id > 0): $cat_name = get_the_category_by_ID($cat_id); ?>
                            
                            <a href="<?php echo get_category_link($cat_id); ?>" title="<?php echo esc_attr( sprintf( __('View All (%s) Category Posts', 'serpentsoft'), $cat_name) ); ?>"><?php echo $cat_title; ?></a>

                        <?php else: echo $cat_title; endif; ?>
                        </h3>
                        
                    </div>
                    
                    <div class="cat-vertical-widget-content">
                        <?php $s_postcount = 0; $s_nd_part = 0; $s_rd_rowfluid = 0; $s_current_post = 0; ?>

                        <?php $arr_rgb = hex2rgb($cat_color, '0.7'); ?>

                        <!-- Related Content -->
                        <div class="row-fluid cat-vertical">

                        <?php while ($wp_query->have_posts()) : $wp_query->the_post();
                            $s_current_post++; ?>
                                <!-- Create first post -->
                        <?php if ($s_postcount == 0) { ?>

                                <!-- First Post -->
                                    <div class="span12 last-post clearfix">
                                        <article class="post-info">
                                            <div>
                                                <div class="span12 img-container">
                <?php serpentsoft_grab_post_banner_figure($post->ID); ?>

                                                    <div class="img-meta">
                                                        <div class="post-date" style="background-color: rgba(<?php echo $arr_rgb[0]; ?>, <?php echo $arr_rgb[1]; ?>, <?php echo $arr_rgb[2]; ?>, <?php echo $arr_rgb[3]; ?>);">
                                                            <div class="date">
                                                                <span class="month"><?php echo get_the_date('M'); ?></span>
                                                                <span class="day"><?php echo get_the_date('d'); ?></span>
                                                                <span class="month"><?php echo get_the_date('Y'); ?></span>
                                                                <hr>
                                                                <span class="time"><?php the_time( get_option('time_format') ); ?></span>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <a href="<?php the_permalink(); ?>" class="more" title="<?php the_title(); ?>"></a>
                                                </div>

                                                <a href="<?php the_permalink(); ?>" class="clearfix" title="<?php the_title(); ?>">
                                                    <h4><?php the_title(); ?></h4>
                                                </a>
                                            </div>

                                            <div class="post-meta clearfix">
                                                <ul class="clearfix">
                                                    <li><a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>" title="<?php echo sprintf( esc_attr__( 'View %s\'s posts' , 'serpentsoft' ), get_the_author() ); ?>"><i class="bo-icon-pencil"></i><?php the_author(); ?></a></li>

                                                <?php if (comments_open()) : ?>
                                                        <li><span><i class="bo-icon-comment"></i><?php comments_popup_link(__('Leave a comment', 'serpentsoft'), __('1 Comment', 'serpentsoft'), __('% Comments', 'serpentsoft')); ?></span></li>
                <?php endif; ?>

                                                    <li><span title="<?php echo sprintf( esc_attr__('Viewed: %s times', 'serpentsoft'), serpentsoft_get_post_views($post->ID) ); ?>"><i class="bo-icon-eye-open"></i><?php echo serpentsoft_get_post_views($post->ID); ?></span></li>
                                                </ul>
                                            </div>

                                            <div class="post-desc">
                                                <?php serpentsoft_cats_GetTheExcerpt(); ?>
                                            </div>

                                        </article>
                                    </div>

                                    <!-- Else Create Second Part Posts -->
                        <?php } else {
                            if ($s_nd_part == 0): ?>

                            <div class="cat-vert-divider"></div>

                            <div class="span12 related-posts">
                                <div class="row-fluid modern-items-list">
                                    <div id="v_cat_slider_<?php echo $block_order_ver1; ?>" class="flexslider">
                                        <ul class="slides">
                                <?php endif; $s_nd_part = 1; 
                        } ?>

                                    <!-- Create The Container of second part once -->
                                <?php if ($s_postcount == 1) { ?>
                                        <li>
                                            <ul class="items left clearfix">
<?php } if ($s_postcount >= 1) { ?>

                                                <li>

                                                    <article class="fold-item span12">
                                                        <div class="clearfix">
    <?php //the_post_thumbnail('post-thumbnail', array('class' => 'post-img'));  ?> 
    <?php serpentsoft_grab_post_banner_figure($post->ID, array('class' => 'post-img')); ?>

                                                            <div class="description visible-part" style="background-color: rgba(<?php echo $arr_rgb[0]; ?>, <?php echo $arr_rgb[1]; ?>, <?php echo $arr_rgb[2]; ?>, <?php echo $arr_rgb[3]; ?>);">
                                                                <h5 class="title"><?php the_title(); ?></h5>

                                                                <div class="info">
                                                                    <span><i class="bo-icon-time bo-icon-white"></i><?php the_time(serpentsoft_getDateTimeFormat('dt')); ?></span>
                                                                    <span><i class="bo-icon-comment bo-icon-white"></i><?php comments_number('0', '1', '%'); ?></span>
                                                                    <span><i class="bo-icon-eye-open bo-icon-white"></i><?php echo serpentsoft_get_post_views($post->ID); ?></span>
                                                                </div>

                                                                <div class="text">
                                                                    <?php serpentsoft_cats_GetTheExcerpt(); ?>
                                                                </div>
                                                            </div>

                                                            <a href="<?php the_permalink(); ?>" class="more" title="<?php the_title(); ?>"></a>
                                                        </div>
                                                    </article>

                                                </li>

                                                <!-- End-of Second Part -->

                                        <?php if ($s_postcount < 2 && $s_current_post == $wp_query->post_count) { ?>
                                            <style>.li-width294{ height: 190px; width: 294px; }</style>
                                            <li class="li-width294"></li>
                                        <?php } ?>

                                                <!-- End-of Second Part -->
<?php } if ($s_postcount != 0 && ( $s_postcount % 2 == 0 || $s_current_post == $wp_query->post_count) ) { ?>
                                            </ul><!-- End of first ul -->
                                        </li>
    <?php $s_postcount = 0;
} $s_postcount++; ?>

<?php endwhile; ?>

<?php if ($s_nd_part == 1) { ?>

                                </ul><!-- End of ul slides -->
                            </div><!-- End of flexslider -->

                        </div><!-- End of row-fluid modern-items-list-->
                    </div> <!-- End of Related Posts -->

            <?php } ?>

                        </div> <!-- End of Row-fluid -->
                    </div> <!-- End of cat-vertical-widget-content -->

                </section><!-- End of cat-widget v-cat-1 -->

            <script type="text/javascript">
                //<![CDATA[
                jQuery(document).ready(function() {
                    "use strict";
                   var is_exist = jQuery('#v_cat_slider_<?php echo $block_order_ver1; ?>').length > 0 ? jQuery('#v_cat_slider_<?php echo $block_order_ver1; ?>').length : 0;

                   if (is_exist > 0) {
                        jQuery('#v_cat_slider_<?php echo $block_order_ver1; ?>').flexslider({
                            slideshow: false,
                            animation: "slide",              //String: Select your animation type, "fade" or "slide"
                            easing: "swing",                 //{NEW} String: Determines the easing method used in $jqSlider transitions. $jqSlider easing plugin is supported!
                            direction: "horizontal"            // String: Select the sliding direction, "horizontal" or "vertical"
                        });
                    }
                });
                //]]>
            </script>

            </div><!-- End of Span6 -->
                
    <?php endif; ?> <!-- End Of First Vertical Cat -->


        <!-- Second Vertical Category --> 
    <?php // $block_order_ver2, $cat_id_2, $cat_title_2, $cat_color_2, $cat_posts_num_2  ?>

    <?php $wp_query = new WP_Query(array('post_type' => 'post', 'posts_per_page' => $cat_posts_num_2, 'cat' => $cat_id_2, 'post_status' => 'publish')); ?>
    <?php if ($wp_query->have_posts()) : ?>


            <div class="span6">
                <section id="<?php echo $block_order_ver2; ?>" class="cat-widget v-cat-1">
                    <div class="cat-widget-title">
                        <h3>
                        <?php if ($cat_id_2 > 0): $cat_name = get_the_category_by_ID($cat_id_2); ?>
                            <a href="<?php echo get_category_link($cat_id_2); ?>" title="<?php echo esc_attr( sprintf( __('View All (%s) Category Posts', 'serpentsoft'), $cat_name) ); ?>"><?php echo $cat_title_2; ?></a>

                        <?php else: echo $cat_title_2; endif; ?>
                        </h3>
                        
                    </div>


                    <div class="cat-vertical-widget-content">

                            <?php $s_postcount = 0; $s_nd_part = 0; $s_rd_rowfluid = 0; $s_current_post = 0; ?>

                            <?php $arr_rgb = hex2rgb($cat_color_2, '0.7'); ?>

                        <!-- Related Content -->
                        <div class="row-fluid cat-vertical">

        <?php while ($wp_query->have_posts()) : $wp_query->the_post();
            $s_current_post++; ?>
                                <!-- Create first post -->
            <?php if ($s_postcount == 0) { ?>

                                    <div class="span12 last-post clearfix">
                                        <article class="post-info">
                                            <div>
                                                <div class="span12 img-container">
                <?php //the_post_thumbnail();  ?>
                <?php serpentsoft_grab_post_banner_figure($post->ID); ?>

                                                    <div class="img-meta">
                                                        <div class="post-date" style="background-color: rgba(<?php echo $arr_rgb[0]; ?>, <?php echo $arr_rgb[1]; ?>, <?php echo $arr_rgb[2]; ?>, <?php echo $arr_rgb[3]; ?>);">
                                                            <div class="date">
                                                                <span class="month"><?php echo get_the_date('M'); ?></span>
                                                                <span class="day"><?php echo get_the_date('d'); ?></span>
                                                                <span class="month"><?php echo get_the_date('Y'); ?></span>
                                                                <hr>
                                                                <span class="time"><?php the_time( get_option('time_format') ); ?></span>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <a href="<?php the_permalink(); ?>" class="more" title="<?php the_title(); ?>"></a>
                                                </div>

                                                <a href="<?php the_permalink(); ?>" class="clearfix" title="<?php the_title(); ?>">
                                                    <h4><?php the_title(); ?></h4>
                                                </a>
                                            </div>

                                            <div class="post-meta clearfix">
                                                <ul class="clearfix">
                                                    <li><a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>" title="<?php echo sprintf( esc_attr__( 'View %s\'s posts' , 'serpentsoft' ), get_the_author() ); ?>"><i class="bo-icon-pencil"></i><?php the_author(); ?></a></li>

                <?php if (comments_open()) : ?>
                                                        <li><span><i class="bo-icon-comment"></i><?php comments_popup_link(__('Leave a comment', 'serpentsoft'), __('1 Comment', 'serpentsoft'), __('% Comments', 'serpentsoft')); ?></span></li>
                                    <?php endif; ?>

                                                    <li><span title="<?php echo sprintf( esc_attr__('Viewed: %s times', 'serpentsoft'), serpentsoft_get_post_views($post->ID) ); ?>"><i class="bo-icon-eye-open"></i><?php echo serpentsoft_get_post_views($post->ID); ?></span></li>
                                                </ul>
                                            </div>

                                            <div class="post-desc">
                <?php serpentsoft_cats_GetTheExcerpt(); ?>
                                            </div>

                                        </article>
                                    </div>

                                    <!-- Else Create Second Part Posts -->
                                    <?php } else { if ($s_nd_part == 0) { ?>

                                        <div class="cat-vert-divider"></div>

                                        <div class="span12 related-posts">
                                            <div class="row-fluid modern-items-list">
                                                <div id="v_cat_slider_<?php echo $block_order_ver2; ?>" class="flexslider">
                                                    <ul class="slides">
                <?php } $s_nd_part = 1;
            } ?>

                                                <!-- Create The Container of second part once -->
            <?php if ($s_postcount == 1) { ?>
                                                    <li>
                                                        <ul class="items left clearfix">
            <?php } if ($s_postcount >= 1) { ?>

                                                            <li>

                                                                <article class="fold-item span12">
                                                                    <div class="clearfix">
                <?php serpentsoft_grab_post_banner_figure($post->ID, array('class' => 'post-img')); ?>

                                                                        <div class="description visible-part" style="background-color: rgba(<?php echo $arr_rgb[0]; ?>, <?php echo $arr_rgb[1]; ?>, <?php echo $arr_rgb[2]; ?>, <?php echo $arr_rgb[3]; ?>);">
                                                                            <h5 class="title"><?php the_title(); ?></h5>

                                                                            <div class="info">
                                                                                <span><i class="bo-icon-time bo-icon-white"></i><?php the_time(serpentsoft_getDateTimeFormat('dt')); ?></span>
                                                                                <span><i class="bo-icon-comment bo-icon-white"></i><?php comments_number('0', '1', '%'); ?></span>
                                                                                <span><i class="bo-icon-eye-open bo-icon-white"></i><?php echo serpentsoft_get_post_views($post->ID); ?></span>
                                                                            </div>

                                                                            <div class="text">
                                                            <?php serpentsoft_cats_GetTheExcerpt(); ?>
                                                                            </div>
                                                                        </div>

                                                                        <a href="<?php the_permalink(); ?>" class="more" title="<?php the_title(); ?>"></a>
                                                                    </div>
                                                                </article>

                                                            </li>

                                                            <!-- End-of Second Part -->

                <?php if ($s_postcount < 2 && $s_current_post == $wp_query->post_count) { ?>
                                                                <style>.li-width294{ height: 190px; width: 294px; }</style>
                                                                <li class="li-width294"></li>
                <?php } ?>

                                                            <!-- End-of Second Part -->
                                <?php } if ($s_postcount != 0 && ( $s_postcount % 2 == 0 || $s_current_post == $wp_query->post_count) ) { ?>
                                                        </ul><!-- End of first ul -->
                                                    </li>
                <?php $s_postcount = 0;
            } $s_postcount++; ?>

        <?php endwhile; ?>

            <?php if ($s_nd_part == 1) { ?>

                                            </ul><!-- End of ul slides -->
                                        </div><!-- End of flexslider -->

                                    </div><!-- End of row-fluid modern-items-list-->
                                </div> <!-- End of Related Posts -->

        <?php } ?>

                        </div> <!-- End of Row-fluid -->
                    </div> <!-- End of cat-vertical-widget-content -->

                </section><!-- End of cat-widget v-cat-1 -->
                
                <script type="text/javascript">
                //<![CDATA[
                jQuery(document).ready(function() {
                    "use strict";
                    var is_exist = jQuery('#v_cat_slider_<?php echo $block_order_ver2; ?>').length > 0 ? jQuery('#v_cat_slider_<?php echo $block_order_ver2; ?>').length : 0;

                    if (is_exist > 0) {
                         jQuery('#v_cat_slider_<?php echo $block_order_ver2; ?>').flexslider({
                             slideshow: false,
                             animation: "slide",              //String: Select your animation type, "fade" or "slide"
                             easing: "swing",                 //{NEW} String: Determines the easing method used in $jqSlider transitions. $jqSlider easing plugin is supported!
                             direction: "horizontal"            // String: Select the sliding direction, "horizontal" or "vertical"
                         });
                     }
                 });
                //]]>
                </script>

            </div><!-- End of Span6 -->

    <?php endif; ?>


    </div>
<?php } //Function End 

// ===============================================
// Horizontal Divided Category
// ===============================================
function serpentsoft_horizDivided_cat($block_id, $cat_id, $title, $color = '', $posts_num) {
    global $post;
    if( empty($color) ) { $color = serpentsoft_get_theme_main_color(); } ?>

    <?php $arr_rgb = hex2rgb($color, '0.9'); ?>

    <style type="text/css">
        #<?php echo $block_id; ?> .last-post .img-container .img-meta .post-date {
            background-color: rgba(<?php echo $arr_rgb[0]; ?>, <?php echo $arr_rgb[1]; ?>, <?php echo $arr_rgb[2]; ?>, <?php echo $arr_rgb[3]; ?>);
        }

        #<?php echo $block_id; ?> .thumb-effect:hover .mask {
            background-color: rgba(<?php echo $arr_rgb[0]; ?>, <?php echo $arr_rgb[1]; ?>, <?php echo $arr_rgb[2]; ?>, <?php echo $arr_rgb[3]; ?>) !important;
        }

        #<?php echo $block_id; ?> .cat-widget-title h3:after{
            background-color: <?php echo $color; ?>;
        }
        #<?php echo $block_id; ?> .cat-widget a:hover{
            color: <?php echo $color; ?>;
        }
        #<?php echo $block_id; ?> .cat-horiz-divided a:hover{
            color: <?php echo $color; ?>;
        }
        #<?php echo $block_id; ?> .cat-horiz-divided .related-posts .media-list a:hover{
            color: <?php echo $color; ?>;
        }
    </style>

    <?php $wp_query = new WP_Query(array('post_type' => 'post', 'posts_per_page' => $posts_num, 'cat' => $cat_id, 'post_status' => 'publish')); ?>
    <?php if ($wp_query->have_posts()) : ?>

        <section id="<?php echo $block_id; ?>" class="cat-widget hd-cat-1">
            <div class="cat-widget-title">
                <h3>
                <?php if ($cat_id > 0): $cat_name = get_the_category_by_ID($cat_id); ?>
                    <a href="<?php echo get_category_link($cat_id); ?>" title="<?php echo esc_attr( sprintf( __('View All (%s) Category Posts', 'serpentsoft'), $cat_name) ); ?>"><?php echo $title; ?></a>
                
                <?php else: echo $title; endif; ?>
                </h3>
            </div>

            <div class="cat-widget-content">

        <?php $s_is_first = true;
        $s_nd_part = true; ?>

        <div class="row-fluid cat-horiz-divided">

        <?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

                        <!-- Create first post -->
            <?php if ($s_is_first): ?>
                            <!-- last post -->

                    <article class="span6 last-post clearfix">
                        <div>
                            <div class="span12 img-container">
        <?php serpentsoft_grab_post_banner_figure($post->ID); ?>

                                <div class="img-meta">
                                    <div class="post-date">
                                        <div class="date">
                                            <span class="month"><?php echo get_the_date('M'); ?></span>
                                            <span class="day"><?php echo get_the_date('d'); ?></span>
                                            <span class="month"><?php echo get_the_date('Y'); ?></span>
                                            <hr>
                                            <span class="time"><?php the_time( get_option('time_format') ); ?></span>
                                        </div>
                                    </div>
                                </div>

                                <a href="<?php the_permalink(); ?>" class="more"></a>
                            </div>

                            <a href="<?php the_permalink(); ?>" class="clearfix" title="<?php the_title(); ?>">
                                <h4><?php the_title(); ?></h4>
                            </a>
                        </div>

                        <div class="post-meta clearfix">
                            <ul class="clearfix">
                                <li><a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>" title="<?php echo sprintf( esc_attr__( 'View %s\'s posts' , 'serpentsoft' ), get_the_author() ); ?>"><i class="bo-icon-pencil"></i><?php the_author(); ?></a></li>

                    <?php if (comments_open()) : ?>
                                    <li><span><i class="bo-icon-comment"></i><?php comments_popup_link(__('Leave a comment', 'serpentsoft'), __('1 Comment', 'serpentsoft'), __('% Comments', 'serpentsoft')); ?></span></li>
        <?php endif; ?>

                                <li><span title="<?php echo sprintf( esc_attr__('Viewed: %s times', 'serpentsoft'), serpentsoft_get_post_views($post->ID) ); ?>"><i class="bo-icon-eye-open"></i><?php echo serpentsoft_get_post_views($post->ID); ?></span></li>
                            </ul>
                        </div>

                        <div class="post-desc">
        <?php serpentsoft_cats_GetTheExcerpt(); ?>
                        </div>

                    </article>

                <?php $s_is_first = false;
            else: ?><!-- Second Term -->

                            <!-- Create Second Part -->
                <?php if ($s_nd_part): ?>
                                <div class="span6">
                                    <div class="related-posts">
                                        <ul class="media-list">
                    <?php $s_nd_part = false;
                endif; ?>

                    <!-- Create li in the second part -->
                    <li class="media">
                        <article>
                            <a href="<?php the_permalink(); ?>" class="span3" title="<?php the_title(); ?>">
                                <div class="media-object thumb-effect">

                                    <div class="mask"></div>
<?php serpentsoft_grab_post_banner_figure($post->ID); ?>

                                </div>
                            </a>

                            <div class="media-body span9">
                                <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                                    <h5 class="media-heading"><?php the_title(); ?></h5>
                                </a>

                                <div class="media post-meta">
                                    <ul>
                                        <li><a href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>" title="<?php echo sprintf( esc_attr__( 'View %s\'s posts' , 'serpentsoft' ), get_the_author() ); ?>"><i class="bo-icon-pencil"></i><?php the_author(); ?></a></li>
                                        
                                        <li><span title="<?php echo sprintf( esc_attr__( 'Published on %s at %s' , 'serpentsoft' ), get_the_time(get_option('date_format')), get_the_time(get_option('time_format')) ) ?>"><i class="bo-icon-time"></i><?php the_time( get_option('date_format') ); ?></span></li>

                                    </ul>
                                </div>
                            </div>
                        </article>
                    </li>


            <?php endif; ?><!-- First & Second -->
        <?php endwhile; ?>

        <?php if (!$s_nd_part): ?>
                                </ul>
                            </div>
                        </div>
        <?php endif; ?>

                </div>
            </div>
        </section>

    <?php endif; //have posts
    
 } //Function End
 
// ===============================================
// Advertisement Box
// ===============================================
 function serpentsoft_advertisement_cat($block_id, $title = '', $advcode = '') { ?>

        <section id="<?php echo $block_id; ?>" class="cat-widget adv-cat-<?php echo $block_id; ?>">
            <?php if (isset($title) && !empty($title) ){ ?><div class="cat-widget-title"><h3><?php echo $title; ?></h3></div><?php } ?>

            <div class="cat-widget-content">
                <div class="text-center">
                    <?php echo $advcode; ?>
                </div>
            </div>
        </section>

<?php } // Function Adv End ?>