<?php
/**
 * Shortcode attributes
 * @var $atts
 * @var $number
 * @var $text
 */

if( !function_exists('yolo_shortcode_about_us') ){
  function yolo_shortcode_about_us($atts, $content){
    extract(shortcode_atts(array(
      'images'          => '',
      'custom_text'     => '',
      'auto_play'       =>  'false',
      
       // just a default value
       ),$atts));
    
    ob_start();
    
    $control_class = 'about-list-'.uniqid();
    wp_enqueue_script('yolo-flipster');
    /*wp_enqueue_style('yolo-flipster');*/
      if (isset($custom_text)):
            $text = explode(',', $custom_text);
        endif;
        if (isset($images)):
            $images_id = explode(',', $images);
        endif;
        if (isset($images_id) && !empty($images_id)):
    ?>
    <!-- About Us -->
  <div class="about-wrapper <?php echo esc_attr($control_class); ?>" >
    <div class="yolo-container">    
      <!-- Tab switcher -->
      <!-- tab content index-2 -->
      <div class="tab-content index-2">
        <div id="tab-2index-2" class="tab-pane active">
          <!-- Owl Carousel -->
          
          <div class="my-flipster">
             <!-- owl item 1 -->
           <ul>
            <?php foreach ($images_id as $i => $id): ?>
            <?php if (($i <= count($text) - 1) && isset($text) && count($text) >= 1): ?>
            <li>
                <?php echo wp_get_attachment_image(esc_attr($id),$size='full'); ?>
                <p><?php echo wp_kses($text[$i], yolo_allowed_html()); ?></p>
            </li>
            <?php else: ?>
            <li>
              <?php echo wp_get_attachment_image(esc_attr($id),$size='full'); ?>
            </li>
             <?php endif; ?>
            <?php endforeach; ?>
           </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

   <script>
    jQuery(document).ready(function($){
        $('.my-flipster').flipster({
          start: 'center',
          // ['center'|number]
          // Zero based index of the starting item, or use 'center' to start in the middle

          fadeIn: 400,
          // [milliseconds]
          // Speed of the fade in animation after items have been setup

          loop: false,
          // [true|false]
          // Loop around when the start or end is reached

          autoplay: false,
          // [false|milliseconds]
          // If a positive number, Flipster will automatically advance to next item after that number of milliseconds

          pauseOnHover: true,
          // [true|false]
          // If true, autoplay advancement will pause when Flipster is hovered

          style: 'flat',
          // [coverflow|carousel|flat|...]
          // Adds a class (e.g. flipster--coverflow) to the flipster element to switch between display styles
          // Create your own theme in CSS and use this setting to have Flipster add the custom class

          spacing: -0.7,
          // [number]
          // Space between items relative to each item's width. 0 for no spacing, negative values to overlap

          click: true,
          // [true|false]
          // Clicking an item switches to that item

          keyboard: true,
          // [true|false]
          // Enable left/right arrow navigation

          scrollwheel: true,
          // [true|false]
          // Enable mousewheel/trackpad navigation; up/left = previous, down/right = next

          touch: true,
          // [true|false]
          // Enable swipe navigation for touch devices

          nav: false,
          // [true|false|'before'|'after']
          // If not false, Flipster will build an unordered list of the items
          // Values true or 'before' will insert the navigation before the items, 'after' will append the navigation after the items

          buttons: false,
          // [true|false|'custom']
          // If true, Flipster will insert Previous / Next buttons with SVG arrows
          // If 'custom', Flipster will not insert the arrows and will instead use the values of `buttonPrev` and `buttonNext`

          buttonPrev: 'Previous',
          // [text|html]
          // Changes the text for the Previous button

          buttonNext: 'Next',
          // [text|html]
          // Changes the text for the Next button

          onItemSwitch: false
        });
      }); 
   </script>
    <?php endif; ?>
    <?php
    $about_us = ob_get_contents();
    ob_end_clean();
    return $about_us;
  }
  add_shortcode('yolo_about_us','yolo_shortcode_about_us');
}
?>