<$
var FBr = article.value('f-br', '');
var FMaxHeight = article.value('f-maxHeightPx', '');
var FMaxHeightPercent = article.value('f-maxHeightPercent', '');
var FPos = article.value('f-pos', 'top:0;');
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 FTransDir = article.value('f-transDirection', 'left');
var FZeit = article.value('f-zeit', '');
var FZindex = article.value('f-zindex', '');

var CloseGr = article.value('close-gr', '');
var ClosePos = article.value('close-pos', 'right');
var CloseCol = article.value('close-col', '');
var CloseAnitime = article.value('close-anitime', '');
var CloseAbstO = article.value('close-abst-o', '');
var CloseAbstSide = article.value('close-abst-side', '7px');

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 headstyle = "";
													// FENSTER
   				headstyle += '.wzp-slidewindow_id' + article.id + ' {';
   headstyle += 'max-width:' + FBr + 'px;';
   headstyle += 'max-height:' + FMaxHeight + 'px;';
   headstyle += 'max-height:max(' + FMaxHeight + 'px,' + FMaxHeightPercent +'%);';

   // Pruefen, ob einfahren von rechts/links
   if (FTransDir === 'left' || FTransDir === 'right'){
        headstyle += 'transform: translateX(' + (FTransDir === 'right' ? '' : '-') + '100%);';
   } else {
        headstyle += 'transform: translateY(' + (FTransDir === 'top' ? '-' : '') + '100%);';
   }
   headstyle += ' background-color:' + FHg + ';';
   headstyle += ' padding:' + FPadO + ' ' + FPadLR + ' ' + FPadU + ';';
   headstyle += ' opacity:' + FTrans + ';';
   headstyle += ' transition:' + FZeit + 'ms;';
   headstyle += ' z-index:' + FZindex + ';';
   headstyle += ' width:100%;';
   headstyle += FPos; // Position
   headstyle += ' height:100%;';
   headstyle += ' position:fixed;';
   headstyle += ' left:0;';
   headstyle += ' overflow-x:hidden;';
   headstyle += ' overflow-y:auto;';
   headstyle += ' display:block;';
   headstyle += ' pointer-events:none;';
headstyle += '}\n';


													// CLOSE X
   				headstyle += '.wzp-slidewindow_closeX_id' + article.id + ' {';
   headstyle += 'font-size:' + CloseGr + ';';
   headstyle += ' color:' + CloseCol + ' !important;';
   headstyle += ' transition:all ' + CloseAnitime + 'ms !important;';
   headstyle += ' position:absolute;';
   headstyle += ' top:' + CloseAbstO + ';';
   headstyle +=  ClosePos + ':' + CloseAbstSide + ';';
   headstyle += ' padding:10px;';
   headstyle += ' text-align:center;';
   headstyle += ' text-decoration:none !important;';
   headstyle += ' border-bottom:none !important;';
headstyle += '}\n';	

   				headstyle += '.wzp-slidewindow_closeX_id' + article.id + ':hover {';
   headstyle += '' + CloseAni + ';';
   headstyle += ' color:' + CloseColHov + ' !important;';
headstyle += '}\n';	



													// OVERLAY
   				headstyle += '#wzp-slidewindow_overlay_id' + 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_id' + 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_id' + 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="mySidenav_id<$=article.id$>" class="wzp-slidewindow_id<$=article.id$>" style="<$= article.value('inline-css') $>">
   <a href="javascript:void(0)" class="wzp-slidewindow_closeX_id<$=article.id$>" onclick="closeNav_id<$=article.id$>()"><$= article.value('close-btn') $></a>
    <$
    for ( var i = 1; i <= 1; i++){
        var TEXTEDIT = (article.value("textedit-" + i));
        if ( isNull(TEXTEDIT) ){
            continue;
        }
        $>
<$= TEXTEDIT $>
        <$
    }
    $>
    <$
    for ( var i = 1; i <= 1; i++){
        var HTMLEDIT = (article.value("htmledit-" + i));
        if ( isNull(HTMLEDIT) ){
            continue;
        }
        $>
<$= HTMLEDIT $>
        <$
    }
    $>
</div>
   <div class="wzp-slidewindow_btn_id<$=article.id$>" onclick="openNav_id<$=article.id$>()"><$= article.value('text-btn') $></div>
      <div id="wzp-slidewindow_overlay_id<$=article.id$>" onclick="closeNav_id<$=article.id$>()"></div>

<script>
function openNav_id<$=article.id$>() {
      document.getElementById("mySidenav_id<$=article.id$>").style.transform = "translate(0,0)";
      document.getElementById("mySidenav_id<$=article.id$>").style.opacity = "1";
      document.getElementById("mySidenav_id<$=article.id$>").style.pointerEvents = "all";
        document.getElementById("wzp-slidewindow_overlay_id<$=article.id$>").style.visibility = "visible";
        document.getElementById("wzp-slidewindow_overlay_id<$=article.id$>").style.opacity = "1";
}
function closeNav_id<$=article.id$>() {
    <$ // Pruefen, ob einfahren von rechts/links
   if (FTransDir === 'left' || FTransDir === 'right'){$>
    document.getElementById("mySidenav_id<$=article.id$>").style.transform = "translateX(<$= FTransDir === 'right' ? '' : '-' $>100%)";
   <$ } else { $>
    document.getElementById("mySidenav_id<$=article.id$>").style.transform = "translateY(<$= FTransDir === 'top' ? '-' : '' $>100%)";
   <$ } $>
      document.getElementById("mySidenav_id<$=article.id$>").style.opacity = "<$= article.value('f-trans') $>";
      document.getElementById("mySidenav_id<$=article.id$>").style.pointerEvents = "none";
        document.getElementById("wzp-slidewindow_overlay_id<$=article.id$>").style.visibility = "hidden";
        document.getElementById("wzp-slidewindow_overlay_id<$=article.id$>").style.opacity = "0";
}
</script>

<$=system.partial("article-end.html")$>