<?php
/**
* J51_GridGallery
* Version		: 1.0
* Created by	: Joomla51
* Email			: [email protected]
* URL			: www.joomla51.com
* License GPLv2.0 - http://www.gnu.org/licenses/gpl-2.0.html
*/

// no direct access
defined('_JEXEC') or die('Restricted access');

$baseurl 		= JURI::base();
$j51_moduleid       = $module->id;
$animateIn = $params->get( 'animateIn' );
$animateOut = $params->get( 'animateOut' );

$j51slideimages = $params->get('j51slideimages');
$j51_slideimage = $params->get('j51_slideimage');
$j51_slidetitle = $params->get('j51_slidetitle');
$j51_slidecaption = $params->get('j51_slidecaption');
$j51_slidelink = $params->get('j51_slidelink');
$j51_title_color = $params->get('j51_title_color');
$j51_text_color = $params->get('j51_text_color');
$j51_icon = $params->get('j51_icon');
$j51_icon_color = $params->get('j51_icon_color');
$autoplaySpeed = $params->get('autoplaySpeed');
$speed = $params->get('speed');
$j51_max_height = $params->get('j51_max_height');

// Load CSS/JS
$document = JFactory::getDocument();

$document->addStyleSheet (JURI::base() . 'modules/mod_j51layerslideshow/css/style.css' );

$style = '
    .layerslideshow .item h2 {
        color:'. $j51_title_color .';
    }

    .layerslideshow .item .caption {
        color:'. $j51_text_color .';
    }

    .layerslideshow .item i::before {
        color:'. $j51_icon_color .';
    }
    .layerslideshow, .layerslideshow .img-fill {
        max-height: '. $j51_max_height .'px;
        overflow: hidden;
    }
}
';

$document->addStyleDeclaration( $style );

	echo '<div class="layerslideshow module'.$j51_moduleid.'">';
	
    // if(is_array($j51slideimages)) {
        foreach ($j51slideimages as $item) {
            echo '<div class="item">';
            echo '<div class="img-fill">';
            echo '<img src="'.$item->j51_slideimage.'" alt="'.$item->j51_slidetitle.'">';
            echo '<div class="info"><div class="wrapper960">';
            if (!empty($item->j51_slidetitle)) {
                echo '<h2>'.$item->j51_slidetitle.'</h2>';
            }
            if (!empty($item->j51_slidecaption)) {
                echo '<div class="caption">'.$item->j51_slidecaption.'</div>';
            }
            if (!empty($item->j51_icon)) {
                echo '<i class="fa '.$j51_icon.'"></i>';
            }
            echo '</div>';
            if (!empty($item->j51_slidelink)) {
                echo '<a href="'.$item->j51_slidelink.'" class="slidelink"></a>';
            }
            echo '</div></div></div>';
        } 
    // } 
    echo '</div>';
?>

<?php $document->addScript('modules/mod_j51layerslideshow/js/slick.js', 'text/javascript'); ?>
<script type="text/javascript">
jQuery(document).ready(function() {
     
    jQuery(".layerslideshow").slick({
        autoplay:true,
        autoplaySpeed:<?php echo $autoplaySpeed; ?>,
        speed:<?php echo $speed; ?>,
        slidesToShow:1,
        slidesToScroll:1,
        pauseOnHover:false,
        dots:false,
        pauseOnDotsHover:true,
        cssEase:'linear',
        fade:true,
        draggable:false,
        prevArrow:'<button class="PrevArrow"></button>',
        nextArrow:'<button class="NextArrow"></button>',
    });
     
 });

</script>