<$
var CardMinH = article.value('card-minh', '');
var CardHg = article.value('card-hg', '');
var CardPad = article.value('card-pad', '');
var CardBordBr = article.value('card-bordbr', '');
var CardBordCol = article.value('card-bordcol', '');

var ButGr = article.value('but-gr', '');
var ButGew = article.value('but-gew', '');
var ButLineh = article.value('but-lineh', '');
var ButCol = article.value('but-col', '');
var ButHg = article.value('but-hg', '');
var ButColHov = article.value('but-col-hov', '');
var ButHgHov = article.value('but-hg-hov', '');
var ButCorner = article.value('but-corner', '');

var NavSize = article.value('nav-size', '');
var NavCol = article.value('nav-col', '');
var NavColHov = article.value('nav-col-hov', '');
var NavbordCol = article.value('navbord-col', '');
var NavbordBr = article.value('navbord-br', '');

var ImgBordr = article.value('img-bordr', '');
var ImgFilter = article.value('img-filter', '');
var ImgFilterHov = article.value('img-filter-hov', '');
var ImgBreite = article.value('img-breite', '');

var NavAbst = article.value('nav-abst', '');
var NavTop = article.value('nav-top', '');

var NavHovEinbl = article.value('nav-hov-einbl', '');

var headstyle = "";

headstyle += '.wzp_carcard_box_id' + article.id + ' {';
headstyle += 'min-height:' + CardMinH + ';';
headstyle += ' background-color:' + CardHg + ';';
headstyle += ' padding:' + CardPad + ';';
headstyle += ' border:solid ' + CardBordBr + ' ' + CardBordCol + ';';
headstyle += '}\n';

headstyle += '.wzp_carcard_button_id' + article.id + ' a {';
headstyle += 'font-size:' + ButGr + ';';
headstyle += ' font-weight:' + ButGew + ';';
headstyle += ' line-height:' + ButLineh + ';';
headstyle += ' padding:5px 10px !important;';
headstyle += ' color:' + ButCol + ' !important;';
headstyle += ' background-color:' + ButHg + ' !important;';
headstyle += ' border-radius:' + ButCorner + ';';
headstyle += ' text-decoration:none !important;';
headstyle += ' border-bottom:none !important;';
headstyle += ' transition:all .2s !important;';
headstyle += ' font-style:normal !important;';
headstyle += '}\n';

headstyle += '.wzp_carcard_button_id' + article.id + ' a:hover {';
headstyle += ' color:' + ButColHov + ' !important;';
headstyle += ' background-color:' + ButHgHov + ' !important;';
headstyle += '}\n';

headstyle += '.wzp_carcard_box_id' + article.id + ' img {';
headstyle += 'border-radius:' + ImgBordr + ';';
headstyle += ' width:' + ImgBreite + ' !important;';
headstyle += ' margin:auto;';
headstyle += ' filter:' + ImgFilter + ';';
headstyle += ' transition:all .2s !important;';
headstyle += '}\n';

headstyle += '.wzp_carcard_box_id' + article.id + ':hover img {';
headstyle += 'filter:' + ImgFilterHov + ';';
headstyle += '}\n';

headstyle += '.wzp_carcard_box_id' + article.id + ' a {';
headstyle += ' text-decoration:none !important;';
headstyle += ' border-bottom:none !important;';
headstyle += '}\n';

headstyle += '.wzp_carcard_id' + article.id + '.owl-theme .owl-nav [class*=owl-] {';
headstyle += 'font-size:' + NavSize + ' !important;';
headstyle += ' color:' + NavCol + ' !important;';
headstyle += ' padding:0 22px !important;';
headstyle += ' text-shadow: ' + NavbordBr + ' ' + NavbordBr + ' ' + NavbordBr + ' ' + NavbordCol + ', ' + NavbordBr + ' -' + NavbordBr + ' ' + NavbordBr + ' ' + NavbordCol + ', -' + NavbordBr + '  ' + NavbordBr + ' ' + NavbordBr + ' ' + NavbordCol + ', -' + NavbordBr + ' -' + NavbordBr + ' ' + NavbordBr + ' ' + NavbordCol + ' !important;';
headstyle += '}\n';

headstyle += '.wzp_carcard_id' + article.id + '.owl-theme .owl-nav [class*=owl-]:hover {';
headstyle += 'color:' + NavColHov + ' !important;';
headstyle += '}\n';

headstyle += '.wzp_carcard_id' + article.id + ' .owl-next {';
headstyle += 'position:relative;';
headstyle += ' left:calc(' + NavAbst + ' / 2);';
headstyle += ' top:-' + NavTop + ';';
headstyle += '}\n';

headstyle += '.wzp_carcard_id' + article.id + ' .owl-prev {';
headstyle += 'position:relative;';
headstyle += ' right:calc(' + NavAbst + ' / 2);';
headstyle += ' top:-' + NavTop + ';';
headstyle += '}\n';

headstyle += '.wzp_carcard_id' + article.id + ' .owl-next, .wzp_carcard_id' + article.id + ' .owl-prev {';
headstyle += 'opacity:' + NavHovEinbl + ';';
headstyle += '}\n';

headstyle += '.wzp_carcard_id' + article.id + ':hover .owl-next, .wzp_carcard_id' + article.id + ':hover .owl-prev {';
headstyle += 'opacity:1; transform:scale(1);';
headstyle += '}';

system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>

<$
    if ( article.value('vollebreite') == "1" ){ var myClassName = "zpBreakout"; }
    else{ var myClassName = ""; }
$>
<!--
***********************************************************************************
* Widget ZP / Widgets fuer Zeta Producer
* <$= article.widgetName $>
* Mario Gross / widget-zp.de
***********************************************************************************
-->
<$=system.partial('article-begin.html', myClassName)$>

<div class="wzp_carcard_id<$=article.id$> owl-carousel owl-theme" style="padding:0 <$= article.value('cont-abst-re-li') $> 0; margin-top:<$= article.value('cont-marg-top') $>; margin-bottom:<$= article.value('cont-marg-bot') $>;">
    <$ for (var i = 1; i <= 20; i++){
        var image = project.getImage(article.value("bild-" + i));
        if ( isNull(image) ){
            continue;
        }
        var altText = system.htmlEncode(system.removeHtmlTags(image.altText));
        var beschreibung = image.description;
        var title = system.htmlEncode(system.removeHtmlTags(image.description));
        var imgsrc = image.contentCopyPath;
        var fullsrc = image.workingCopyPath;
        var HTML = article.value("html-" + i, "");
        var linkname = "link-" + i;
        var linktext = article.value("linktext-" + i, "");
        var linkWholeCard = article.value("linkWholeCard-" + i, 0) == 1;
        $>
        <$ if (linkWholeCard){ $>
            <a <$= system.partial('zplink-expanded.html', linkname) $> class="wzp_carcard__wrapperLink">
        <$ } $>
        <div class="item wzp_carcard_box_id<$=article.id$>">
            <img style="text-align: center;" src="<$= imgsrc $>" alt="<$= altText $>" title="<$= title $>" loading="<$= article.value("imgload") $>">
            <p class="wzp_carcard_button_id<$=article.id$>" style="margin:<$= article.value('but-margtop') $> 0 <$= article.value('but-margbot') $>; text-align:<$= article.value('but-ausr') $>;"><$ if (!linkWholeCard){ $><a <$= system.partial('zplink-expanded.html',  linkname) $>><$ } $><$= linktext $><$ if (!linkWholeCard){ $></a><$ } $></p>
            <$= HTML $>
        </div>
        <$ if (linkWholeCard){ $>
            </a>
        <$ } $>
    <$ } $>
</div>
<script>
jQuery(document).ready(function($) {
  $('.wzp_carcard_id<$=article.id$>').owlCarousel({
    dots: false,
    margin: <$= article.value('abst') $>,
    center: <$= article.value('center') $>,
    navSpeed: <$= article.value('nav-speed') $>,
    mouseDrag: <$= article.value('mouse-swipe') $>,
    touchDrag: <$= article.value('touch-swipe') $>,
    loop: <$= article.value('schleife') $>,
    autoplay: <$= article.value('autoplay') $>,
    autoplaySpeed: <$= article.value('aplay-speed') $>,
    autoplayTimeout: <$= article.value('aplay-time') $>,
    autoplayHoverPause: <$= article.value('aplay-hov') $>,
    responsive: {
      0: {
        items: <$= article.value('anz-1') $>,
          nav: <$= article.value('nav-onoff-1') $>
      },
      660: {
        items: <$= article.value('anz-2') $>,
          nav: <$= article.value('nav-onoff-2') $>
      },
      1060: {
        items: <$= article.value('anz-3') $>,
          nav: <$= article.value('nav-onoff-3') $>
      },
      1460: {
        items: <$= article.value('anz-4') $>,
          nav: <$= article.value('nav-onoff-4') $>
      }
    }
  })
})
</script>

<$=system.partial("article-end.html")$>