<$
var FBr = article.value('f-br', '');
var SlideLR = article.value('slide-lr', '');
var FHg = article.value('f-hg', '');
var FPadO = article.value('f-pad-o', '');
var FPadLR = article.value('f-pad-lr', '');
var FTrans = article.value('f-trans', '');
var FZeit = article.value('f-zeit', '');

var LinkGr = article.value("link-groesse","");
var LinkFfam = article.value("link-ffam","");
var LinkFw = article.value("link-fw","");
var LinkColSch = article.value("link-farbe-schrift","");
var LinkLetsp = article.value("link-letsp","");
var LinkLineH = article.value("link-lineh","");

var LinkColSchHov = article.value("link-farbe-schrift-hover","");
var LinkLetspHov = article.value("link-letsp-hov","");

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 OvlDispl = article.value('ovl-displ', '');
var OvlCol = article.value('ovl-col', '');


var BtnPosLR = article.value('btn-pos-lr', '');
var BtnAbstLR = article.value('btn-abst-lr', '');
var BtnAbstO = article.value('btn-abst-o', '');
var BtnPad = article.value('btn-pad', '');
var BtnBg = article.value('btn-bg', 'transparent');
var BtnRadius = article.value('btn-radius', '0');
var Anitime = article.value('anitime', '');

var BtnAni = article.value('bild-ani', '');

var slideValue = FBr;

// Slide von oben / unten
if (SlideLR === 'top' || SlideLR === 'bottom') {
    slideValue = '100%';
}

var headstyle = "";
// FENSTER
headstyle += '.wzp-slidewindow-menu_id' + article.id + ' {';
headstyle += ' top:0;';
headstyle += 'max-width:' + FBr + ';';
headstyle += ' ' + SlideLR + ':-' + slideValue + ';';
headstyle += ' background-color:' + FHg + ';';
headstyle += ' padding:' + FPadO + ' ' + FPadLR + ' 0;';
headstyle += ' opacity:' + FTrans + ';';
headstyle += ' transition:' + FZeit + 'ms;';
headstyle += ' z-index:9998;';
headstyle += ' width:100%;';
headstyle += ' height:100%;';
headstyle += ' position:fixed;';
headstyle += ' overflow-x:hidden;';
headstyle += ' overflow-y:auto;';
headstyle += ' display:block;';
headstyle += '}\n';


// VERWEISE
headstyle += '.wzp-slidewindow-menu_id' + article.id + ' a {';
headstyle += 'color:' + LinkColSch + ' !important;';
headstyle += ' font-size:' + LinkGr + ';';
headstyle += ' font-family:' + LinkFfam + ';';
headstyle += ' font-weight:' + LinkFw + ';';
headstyle += ' line-height:' + LinkLineH + ';';
headstyle += ' letter-spacing:' + LinkLetsp + ';';
headstyle += ' text-decoration:none !important;';
headstyle += ' border-bottom:none !important;';
headstyle += ' transition:0.15s ease !important;';
headstyle += ' -webkit-transition:0.15s ease !important;';
headstyle += '}\n';

headstyle += '.wzp-slidewindow-menu_id' + article.id + ' a:hover {';
headstyle += 'color:' + LinkColSchHov + ' !important;';
headstyle += ' letter-spacing:' + LinkLetspHov + ';';
headstyle += '}\n';


// CLOSE X
headstyle += '.wzp-slidewindow-menu_closeX_id' + article.id + ' {';
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 += ' line-height:1.5 !important;';
headstyle += ' z-index:9999;';
headstyle += 'border: none;';
headstyle += 'background-color: transparent;';
headstyle += 'cursor: pointer;';
headstyle += '}\n';	

headstyle += '.wzp-slidewindow-menu_closeX_id' + article.id + ':hover {';
headstyle += '' + CloseAni + ';';
headstyle += '}\n';	



// OVERLAY
headstyle += '#wzp-slidewindow-menu_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 += ' z-index:9997;';
headstyle += '}\n';	


// MENUBUTTON
headstyle += '#wzp_slidewindow_menu_btn' + article.id + ' {';
headstyle += 'position:fixed;';

headstyle += ' ' + BtnPosLR + ':' + BtnAbstLR + ';';
headstyle += ' top:' + BtnAbstO + ';';
headstyle += ' padding:' + BtnPad + ';';
headstyle += ' z-index:9996;';
headstyle += ' cursor:pointer;';
headstyle += ' transition:all ' + Anitime + 'ms;';
headstyle += ' -webkit-transition:all ' + Anitime + 'ms;';
headstyle += 'border: none;';
headstyle += 'background-color: ' + (BtnBg || 'transparent') + ';';
headstyle += 'border-radius: ' + BtnRadius + ';';
headstyle += 'line-height: 0;';
headstyle += '}\n';

headstyle += '#wzp-slidewindow_menu_btn' + article.id + ':hover {';
headstyle +=  BtnAni + ';';
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 <$= article.value('closeklick') $>>
    <div id="wzp_slidewindow_menu<$=article.id$>" class="wzp-slidewindow-menu_id<$=article.id$>" style="text-align:<$= article.value('f-ausr') $>; <$= article.value('inline-css') $>">
        <button class="wzp-slidewindow-menu_closeX_id<$=article.id$>" data-wzp-action="close" aria-description="Navigations-Menü schließen">
           <svg xmlns="http://www.w3.org/2000/svg" width="<$= article.value('close-gr') $>" height="<$= article.value('close-gr') $>" fill="<$= article.value('close-col') $>" <$= article.value('close-x-btn') $></svg>
        </button>

        <ul style="list-style:none;">
        <$
        var image = project.getImage(article.value("bild-1"));
        if ( !isNull(image) ){
            var altText = system.htmlEncode(system.removeHtmlTags(image.altText));
            var beschreibung = image.description;
            var title = system.htmlEncode(system.removeHtmlTags(image.description));
            var imageWidth = article.value("bild-br", "");
            var imgsrc = image.workingCopyPath;
            if (!isNull(imageWidth) && imageWidth !== '') {
                image.ensureContentCopy(article, Math.round(imageWidth * 2)); // request twice the width for retina displays
                imgsrc = image.contentCopyPath;
            }
        $>
            <li style="padding-left:0; list-style:none;">
                <img style="max-width:100%; height:auto; margin-bottom:<$= article.value("bild-abst") $>px; padding:10px; border:0; box-shadow:none;" 
                     src="<$= imgsrc $>" alt="<$= altText $>" title="<$= title $>" width="<$= imageWidth $>">
                <hr class="zpSO-separator" style="margin:0 auto; display:<$= article.value("hr-anz") $>; max-width:<$= article.value("hr-br") $>; border:none; height:1px; line-height:1px; color:<$= article.value("hr-col") $>; background-color:<$= article.value("hr-col") $>; margin-bottom:<$= article.value("hr-abst") $>;" />	
            </li>
        <$ } $>
        <$
        for ( var i = 1; i <= 14; i++){
            var LINKTEXT = (article.value("linktext-" + i));
            if ( isNull(LINKTEXT) ){
                continue;
            }

            var LINK = "link-" + i;
            
        $>
            <li style="padding-left:0; list-style:none;"><a <$= system.partial('zplink-expanded.html',  LINK) $>><$= LINKTEXT $></a></li>
        <$ } $>

        <$
        var HTMLEDIT = (article.value("htmledit-1"));
        if ( !isNull(HTMLEDIT) ){
        $>
            <$= HTMLEDIT $>
        <$ } $>
        </ul>
    </div>
</div>

<button id="wzp_slidewindow_menu_btn<$=article.id$>" aria-description="Navigations-Menü öffnen">
    <svg xmlns="http://www.w3.org/2000/svg" width="<$= article.value('svg-gr') $>" height="<$= article.value('svg-gr') $>" fill="<$= article.value('svg-col') $>" <$= article.value('icon-svg') $></svg>
</button>

<script>
document.addEventListener('DOMContentLoaded', function () {
    window.$wzp.slideDiv({
        trigger: '#wzp_slidewindow_menu_btn<$=article.id$>', 
        target: '#wzp_slidewindow_menu<$=article.id$>', 
        overlay: '#wzp-slidewindow-menu_overlay<$=article.id$>', 
        dir: '<$= article.value("slide-lr") $>', 
        slideValue: '<$= slideValue $>',
        moveTrigger: true,
        id : '<$= article.id $>'
    });
});
</script>

<$ if ( system.preview ) { $>
<!-- Preview-Code nur für internen Vorschau -->
<div style="background-color:#d7daee; padding:15px; border-radius: 10px; box-shadow: inset 0px 0px 20px rgba(0, 51, 255, 0.99);">
    <img src="https://www.zella.de/widget/bilder/wzp.png" style="float:left; margin-right:33px;">
    <p style="font-size: 1.2em; font-weight: bold; color:#0371df">Side Menü</p>
    <p style="color:#0371df">Hier k&#246;nnen Sie das Widget &#246;ffnen oder l&#246;schen. Dieser Hinweis wird nur in der internen Vorschau angezeigt.</p>
</div>
<$ } $>

<$=system.partial("article-end.html")$>