<$
var SlideLR = article.value('slide-lr', 'left');
var FBr = article.value('f-br', '');
var FHg = article.value('f-hg', '');
var FPadO = article.value('f-pad-o', '');
var FPadU = article.value('f-pad-u', '');
var FPadLR = article.value('f-pad-lr', '');
var FTrans = article.value('f-trans', '');
var FZeit = article.value('f-zeit', '');
var FZindex = article.value('f-zindex', '');

var CloseGr = article.value('close-gr', '');
var CloseCol = article.value('close-col', '');
var CloseAnitime = article.value('close-anitime', '');
var CloseAbstO = article.value('close-abst-o', '');
var CloseAbstR = article.value('close-abst-r', '');

var CloseAni = article.value('close-ani', '');
var CloseColHov = article.value('close-col-hov', '');

var OvlDispl = article.value('ovl-displ', '');
var OvlCol = article.value('ovl-col', '');

var BtnAusr = article.value('btn-ausr', '');
var BtnBr = article.value('btn-br', '');
var BtnFArt = article.value('btn-fart', '');
var BtnGr = article.value('btn-gr', '');
var BtnFw = article.value('btn-fw', '');
var BtnBordBr = article.value('btn-bordbr', '');
var BtnBordCol = article.value('btn-bordcol', '');
var BtnCol = article.value('btn-col', '');
var BtnHg = article.value('btn-hg', '');
var BtnCorner = article.value('btn-corner', '');

var BtnBordColHov = article.value('btn-bordcol-hov', '');
var BtnColHov = article.value('btn-col-hov', '');
var BtnHgHov = article.value('btn-hg-hov', '');

var slideValue = FBr + 'px';

// Slide von oben / unten
if (SlideLR === 'top' || SlideLR === 'bottom') {
    slideValue = '100%';
}

// If we want to display the menu full-width, we have to account for the padding on the sides
if (FBr === '100%') {
    FBr = 'calc(100% - (' + FPadLR + ' * 2))';
}

var headstyle = "";
// FENSTER
headstyle += '#wzp_slidewindow' + article.id + ' {';
headstyle += ' top:0;';
headstyle += 'max-width:' + FBr + 'px;';
headstyle += SlideLR + ' :-' + slideValue + ';';
headstyle += ' background-color:' + FHg + ';';
headstyle += ' padding:' + FPadO + ' ' + FPadLR + ' ' + FPadU + ';';
headstyle += ' opacity:' + FTrans + ';';
headstyle += ' transition:' + FZeit + 'ms;';
headstyle += ' z-index:' + FZindex + ';';
headstyle += ' width:100%;';
headstyle += ' height:100%;';
headstyle += ' position:fixed;';
headstyle += ' overflow-x:hidden;';
headstyle += ' overflow-y:auto;';
headstyle += ' display:block;';
headstyle += '}\n';


// CLOSE X
headstyle += '#wzp_slidewindow_closeX' + article.id + ' {';
headstyle += 'font-size:' + CloseGr + ';';
headstyle += ' color:' + CloseCol + ' !important;';
headstyle += ' transition:all ' + CloseAnitime + 'ms !important;';
headstyle += ' position:absolute;';
headstyle += ' top:' + CloseAbstO + ';';
headstyle += ' right:' + CloseAbstR + ';';
headstyle += ' padding:10px;';
headstyle += ' text-align:center;';
headstyle += ' text-decoration:none !important;';
headstyle += ' border-bottom:none !important;';
headstyle += ' border: none;';
headstyle += 'background-color: transparent;';
headstyle += 'cursor: pointer;';
headstyle += '}\n';	

headstyle += '#wzp_slidewindow_closeX' + article.id + ':hover {';
headstyle += '' + CloseAni + ';';
headstyle += ' color:' + CloseColHov + ' !important;';
headstyle += '}\n';	



// OVERLAY
headstyle += '#wzp_slidewindow_overlay' + article.id + ' {';
headstyle += 'display:' + OvlDispl + ';';
headstyle += ' background-color:' + OvlCol + ';';
headstyle += ' transition:' + FZeit + 'ms;';
headstyle += ' position:fixed;';
headstyle += ' width:100%;';
headstyle += ' height:100%;';
headstyle += ' top:0;';
headstyle += ' left:0;';
headstyle += ' right:0;';
headstyle += ' bottom:0;';
headstyle += ' cursor:pointer;';
headstyle += ' visibility:hidden;';
headstyle += ' opacity:0;';
headstyle += '}\n';	


// BUTTON
headstyle += '#wzp_slidewindow_btn' + article.id + ' {';
headstyle += '' + BtnAusr + '';
headstyle += ' max-width:' + BtnBr + ';';
headstyle += ' font-family:' + BtnFArt + ';';
headstyle += ' font-size:' + BtnGr + ';';
headstyle += ' font-weight:' + BtnFw + ';';
headstyle += ' border:solid ' + BtnBordBr + ' ' + BtnBordCol + ';';
headstyle += ' border-radius:' + BtnCorner + ';';
headstyle += ' color:' + BtnCol + ';';
headstyle += ' background-color:' + BtnHg + ';';
headstyle += ' cursor:pointer;';
headstyle += ' text-align:center;';
headstyle += ' padding:8px 16px;';
headstyle += ' transition:all 0.3s;';
headstyle += '}\n';

headstyle += '#wzp_slidewindow_btn' + article.id + ':hover {';
headstyle += 'border:solid ' + BtnBordBr + ' ' + BtnBordColHov + ';';
headstyle += ' color:' + BtnColHov + ';';
headstyle += ' background-color:' + BtnHgHov + ';';
headstyle += '}';


system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>

<!--
***********************************************************************************
* Widget ZP / Widgets fuer Zeta Producer
* <$= article.widgetName $>
* Mario Gross / widget-zp.de
***********************************************************************************
-->

<$=system.partial("article-begin.html")$>

<div id="wzp_slidewindow<$=article.id$>" style="<$= article.value('inline-css') $>">
   <button id="wzp_slidewindow_closeX<$=article.id$>" data-wzp-action="close"><$= article.value('close-btn') $></button>
    <$
    var TEXTEDIT = (article.value("textedit-1"));
    if ( !isNull(TEXTEDIT) ){
    $>
        <$= TEXTEDIT $>
    <$ } $>
    
    <$
    var HTMLEDIT = (article.value("htmledit-1"));
    if ( !isNull(HTMLEDIT) ){
    $>
        <$= HTMLEDIT $>
    <$ } $>
</div>
<button id="wzp_slidewindow_btn<$=article.id$>"><$= article.value('text-btn') $></button>

<script>
document.addEventListener('DOMContentLoaded', function () {
    window.$wzp.slideDiv({
        trigger: '#wzp_slidewindow_btn<$=article.id$>', 
        target: '#wzp_slidewindow<$=article.id$>', 
        overlay: '#wzp_slidewindow_overlay<$=article.id$>', 
        dir: '<$= SlideLR $>', 
        slideValue: '<$= slideValue $>'
    });
});
</script>

<$=system.partial("article-end.html")$>