<?php
defined('_JEXEC') or die('Direct Access to this location is not allowed.');

if (empty($data))
    return;
?>

<style type="text/css">

<? if (!$params->get('slide_css_use_ids')): ?>

    .je-slide-title {
    position:absolute;
    top:176px;
    left:200px;
    color:#fff;
    font-size:50px;
    line-height:20px;
    font-family:Raleway, sans-serif;
    white-space:nowrap;
    text-transform:uppercase;
    text-shadow:0 2px 5px rgba(0,0,0,0.5);
    font-weight:700;
    border-style:none;
    border-width:0;
    margin:0;
    }

    .je-slide-address {
    position:absolute;
    top:220px;
    left:200px;
    color:#fff;
    font-size:30px;
    line-height:20px;
    font-family:Raleway, sans-serif;
    white-space:nowrap;
    text-transform:uppercase;
    text-shadow:0 2px 5px rgba(0,0,0,0.5);
    border-style:none;
    border-width:0;
    margin:0;
    }

    .je-slide-link {
    position:absolute;
    top:330px;
    left:700px;
    text-slhadow:none;
    line-height:20px;
    font-family:Raleway, sans-serif;
    white-space:nowrap;
    text-shadow:0 2px 5px rgba(0,0,0,0.5);
    border-style:none;
    border-width:0;
    margin:0;
    }

    .je-slide-link a {
    color:orange;
    font-size:20px;
    text-transform:lowercase;
    }
<?php else: ?>

    <?php echo $params->get('slide_css'); ?>

<?php endif; ?>
</style>

<div class="je-fullwidthbanner-container">
    <div class="fullwidthbanner">
        <ul>
        <?php foreach ($data AS $d): ?>

            <li data-transition="<?=$params->get('slide_trans'); ?>" data-slotamount="10" data-masterspeed="300">
                <img src="<?=$d->image ?>" alt="<?=$d->title ?>" />
                <div class="caption je-slide-title<? if ($params->get('slide_css_use_ids')) echo $d->id; ?> sft"
                     data-speed="300"
                     data-start="300"
                     data-easing="easeOutExpo"><?=$d->title ?></div>
                <? if ($params->get('slide_show_address')): ?>
                 <div class="caption je-slide-address<? if ($params->get('slide_css_use_ids')) echo $d->id; ?> sfb"
                     data-speed="300"
                     data-start="500"
                     data-easing="easeOutExpo"
                     data-end="8800"
                     data-endspeed="300"
                     data-endeasing="easeInSine" ><?= $d->address ?></div>
                <?php endif; ?>
                <? if ($params->get('slide_show_descr')): ?>
                <div class="caption je-slide-descr<? if ($params->get('slide_css_use_ids')) echo $d->id; ?> sfb"
                     data-speed="300"
                     data-start="700"
                     data-easing="easeOutExpo" data-end="8800" data-endspeed="300" data-endeasing="easeInSine"  ><?= wordwrap($d->introtext, 40); ?></div>
                <?php endif; ?>
                <div class="caption je-slide-link<? if ($params->get('slide_css_use_ids')) echo $d->id; ?> sfl"
                     data-speed="300"
                     data-start="700"
                     data-easing="easeOutExpo"
                     data-end="8800"
                     data-endspeed="300"
                     data-endeasing="easeInSine"  ><a href="<?= $d->link ?>"><?php echo JText::_('MOD_JOMESTATE_SLIDE_VIEW_MORE'); ?></a></div>
            </li>

        <?php endforeach; ?>
        </ul>
        <div class="tp-bannertimer tp-bottom"></div>
    </div>
</div>


<script type="text/javascript">

    var tpj = jQuery;
    tpj.noConflict();

    tpj(document).ready(function() {

        if (tpj.fn.cssOriginal != undefined)
            tpj.fn.css = tpj.fn.cssOriginal;

        var api = tpj('.fullwidthbanner').revolution(
                {
                    delay: <?=$params->get('slide_delay');?>,
                    startwidth: <?=$params->get('slide_width');?>,
                    startheight: <?=$params->get('slide_height');?>,
                    onHoverStop: "on", // Stop Banner Timet at Hover on Slide on/off

                    thumbWidth: 100, // Thumb With and Height and Amount (only if navigation Tyope set to thumb !)
                    thumbHeight: 50,
                    thumbAmount: 3,
                    hideThumbs: 0,
                    navigationType: "<?=$params->get('slide_nav');?>", // bullet, thumb, none
                    navigationArrows: "solo", // nexttobullets, solo (old name verticalcentered), none

                    navigationStyle: "round", // round,square,navbar,round-old,square-old,navbar-old, or any from the list in the docu (choose between 50+ different item), custom


                    navigationHAlign: "center", // Vertical Align top,center,bottom
                    navigationVAlign: "bottom", // Horizontal Align left,center,right
                    navigationHOffset: 30,
                    navigationVOffset: 10,
                    soloArrowLeftHalign: "left",
                    soloArrowLeftValign: "center",
                    soloArrowLeftHOffset: 20,
                    soloArrowLeftVOffset: 0,
                    soloArrowRightHalign: "right",
                    soloArrowRightValign: "center",
                    soloArrowRightHOffset: 20,
                    soloArrowRightVOffset: 0,
                    touchenabled: "on", // Enable Swipe Function : on/off


                    stopAtSlide: -1, // Stop Timer if Slide "x" has been Reached. If stopAfterLoops set to 0, then it stops already in the first Loop at slide X which defined. -1 means do not stop at any slide. stopAfterLoops has no sinn in this case.
                    stopAfterLoops: -1, // Stop Timer if All slides has been played "x" times. IT will stop at THe slide which is defined via stopAtSlide:x, if set to -1 slide never stop automatic

                    hideCaptionAtLimit: 0, // It Defines if a caption should be shown under a Screen Resolution ( Basod on The Width of Browser)
                    hideAllCaptionAtLilmit: 0, // Hide all The Captions if Width of Browser is less then this value
                    hideSliderAtLimit: 0, // Hide the whole slider, and stop also functions if Width of Browser is less than this value


                    fullWidth: "<?=$params->get('slide_full_width');?>",
                    shadow: <?=$params->get('slide_shadow');?>								//0 = no Shadow, 1,2,3 = 3 Different Art of Shadows -  (No Shadow in Fullwidth Version !)

                });


        // TO HIDE THE ARROWS SEPERATLY FROM THE BULLETS, SOME TRICK HERE:
        // YOU CAN REMOVE IT FROM HERE TILL THE END OF THIS SECTION IF YOU DONT NEED THIS !
        api.bind("revolution.slide.onloaded", function(e) {


            jQuery('.tparrows').each(function() {
                var arrows = jQuery(this);

                var timer = setInterval(function() {

                    if (arrows.css('opacity') == 1 && !jQuery('.tp-simpleresponsive').hasClass("mouseisover"))
                        arrows.fadeOut(300);
                }, 3000);
            })

            jQuery('.tp-simpleresponsive, .tparrows').hover(function() {
                jQuery('.tp-simpleresponsive').addClass("mouseisover");
                jQuery('body').find('.tparrows').each(function() {
                    jQuery(this).fadeIn(300);
                });
            }, function() {
                if (!jQuery(this).hasClass("tparrows"))
                    jQuery('.tp-simpleresponsive').removeClass("mouseisover");
            })
        });
        // END OF THE SECTION, HIDE MY ARROWS SEPERATLY FROM THE BULLETS

    });



</script>