<?php
/**
 * Particles Shortcode
 * [kleo_particles]
 * 
 * @package WordPress
 * @subpackage K Elements
 * @author SeventhQueen <themesupport@seventhqueen.com>
 * @since K Elements 3.0
 */


$output = $color = $lines_color = '';
extract( shortcode_atts( array(
    'color' => '#ffffff',
	'lines_color' => '#ffffff',
    'number' => '80',
    'size' => '4',
	'class' => '',

), $atts ) );


$class = ( $class != '' ) ? 'kleo-particles ' . esc_attr( $class ) : 'kleo-particles';

$output .= "<div class='" . $class . "' id='particles-js'></div>";

$output .= <<<EOT
<script>
jQuery(window).load(function(){

    jQuery.when( jQuery('#particles-js').parentsUntil('section').css({position: 'static'}), jQuery('#particles-js').closest('.wpb_column').siblings().css( {"z-index" : "1", "position": "relative"} ), jQuery('#particles-js').siblings().css( {"z-index" : "1", "position": "relative"} ) ).then(function() {

        particlesJS("particles-js", {
          "particles": {
            "number": {
              "value": $number,
              "density": {
                "enable": true,
                "value_area": 800
              }
            },
            "color": {
              "value": "$color"
            },
            "shape": {
              "type": "circle",
              "stroke": {
                "width": 0,
                "color": "#000000"
              },
              "polygon": {
                "nb_sides": 5
              },
              "image": {
                "src": "img/github.svg",
                "width": 100,
                "height": 100
              }
            },
            "opacity": {
              "value": 0.5,
              "random": false,
              "anim": {
                "enable": false,
                "speed": 1,
                "opacity_min": 0.1,
                "sync": false
              }
            },
            "size": {
              "value": $size,
              "random": true,
              "anim": {
                "enable": false,
                "speed": 40,
                "size_min": 0.5,
                "sync": false
              }
            },
            "line_linked": {
              "enable": true,
              "distance": 150,
              "color": "$lines_color",
              "opacity": 0.4,
              "width": 1
            },
            "move": {
              "enable": true,
              "speed": 6,
              "direction": "none",
              "random": false,
              "straight": false,
              "out_mode": "out",
              "bounce": false,
              "attract": {
                "enable": false,
                "rotateX": 600,
                "rotateY": 1200
              }
            }
          },
          "interactivity": {
            "detect_on": "canvas",
            "events": {
              "onhover": {
                "enable": true,
                "mode": "grab"
              },
              "onclick": {
                "enable": true,
                "mode": "push"
              },
              "resize": true
            },
            "modes": {
              "grab": {
                "distance": 140,
                "line_linked": {
                  "opacity": 1
                }
              },
              "bubble": {
                "distance": 400,
                "size": 40,
                "duration": 2,
                "opacity": 8,
                "speed": 3
              },
              "repulse": {
                "distance": 200,
                "duration": 0.4
              },
              "push": {
                "particles_nb": 4
              },
              "remove": {
                "particles_nb": 2
              }
            }
          },
          "retina_detect": true
        });
    });
});

</script>

EOT;

wp_enqueue_script( 'particles-js' );
