<$
var ButPO = article.value("button-pos-oben","");
var ButPR = article.value("button-pos-rechts","");
var ButGr = article.value("button-schriftgroesse","");
var ButCol = article.value("button-schriftfarbe","");
var LetSp = article.value("letter-spacing","");
var ButFfam = article.value("btn-ffam","");
var ButFw = article.value("btn-fw","");
var BtnHg = article.value("btn-hg","");
var BtnCorner = article.value("btn-corner","");
var BtnPadHor = article.value("btn-pad-hor","");
var BtnPadVert = article.value("btn-pad-vert","");

var ButText = article.value("button-text","");
var ButSymb = article.value("menu-symb","");

var ButColHov = article.value("button-schriftfarbe-hover","");
var BtnHgHov = article.value("btn-hg-hov","");

var FullLinkGr = article.value("full-link-groesse","");
var FullFfam = article.value("full-ffam","");
var FullFw = article.value("full-fw","");
var FullColHg = article.value("full-farbe-hg","");
var FullColBgImage = article.value("full-bild-hg", "");
var FullColSch = article.value("full-farbe-schrift","");
var FullLetsp = article.value("letsp","");

var FullColSchHov = article.value("full-farbe-schrift-hover","");
var FullLetspHov = article.value("letsp-hov","");

var XAnitime = article.value("x-anitime","");
var XAni = article.value("x-ani","");

var XPosO = article.value("x-pos-oben","");
var XPosR = article.value("x-pos-rechts","");
var XGr = article.value("x-groesse","");

var xCol = article.value("x-farbe","");

var FullAbstLi = article.value("full-abstand-links","");

var textTransform = article.value("textTransform", "none");

var headstyle = "";

// MENU BUTTON
headstyle += '#wzp_fullscreenmenu_btn' + ' {';
headstyle += 'top:' + ButPO + ';';
headstyle += ' right:' + ButPR + ';';
headstyle += ' font-family:' + ButFfam + ';';
headstyle += ' font-weight:' + ButFw + ';';
headstyle += ' font-size:' + ButGr + ';';
headstyle += ' color:' + ButCol + ';';
headstyle += ' letter-spacing:' + LetSp + ';';
headstyle += ' background-color:' + BtnHg + ';';
headstyle += ' border-radius:' + BtnCorner + ';';
headstyle += ' padding:' + BtnPadVert + ' ' + BtnPadHor +';';
headstyle += '}\n';

headstyle += '#wzp_fullscreenmenu_btn:hover' + ' {';
headstyle += 'color:' + ButColHov + ' !important;';
headstyle += ' background-color:' + BtnHgHov + ';';
headstyle += '}\n';

// FULLPAGE
headstyle += 'nav#wzp_fullscreenmenu' + ' {';
headstyle += ' background:' + FullColHg + ';';
headstyle += '}\n';

// FULLPAGE HINTERGRUNDBILD
headstyle += 'nav#wzp_fullscreenmenu #wzp_fullscreenmenu__bgImage' + ' {';
headstyle += 'background: url(' + FullColBgImage + ');';
headstyle += 'background-size: cover;';
headstyle += 'background-position: center;';
headstyle += '}\n';

headstyle += 'nav#wzp_fullscreenmenu a' + ' {';
headstyle += 'color:' + FullColSch + ' !important;';
headstyle += 'font-size:' + FullLinkGr + ';';
headstyle += 'font-family:' + FullFfam + ';';
headstyle += 'font-weight:' + FullFw + ';';
headstyle += 'letter-spacing:' + FullLetsp + ';';
headstyle += 'text-transform:' + textTransform + ';'; 
headstyle += '}\n';


headstyle += 'nav#wzp_fullscreenmenu ul li a:hover' + ' {';
headstyle += 'color:' + FullColSchHov + ' !important;';
headstyle += ' letter-spacing:' + FullLetspHov + ';';
headstyle += '}\n';

// SCHLIESSEN X
headstyle += 'nav#wzp_fullscreenmenu #closex' + ' {';
headstyle += 'top:' + XPosO + ';';
headstyle += ' right:' + XPosR + ';';
headstyle += ' width:' + XGr + ';';
headstyle += ' height:' + XGr + ';';
headstyle += ' transition:all ' + XAnitime + 'ms !important;';
headstyle += '}\n';

headstyle += 'nav#wzp_fullscreenmenu #closex:hover' + ' {';
headstyle += '' + XAni + ' !important;';
headstyle += '}\n';


headstyle += 'nav#wzp_fullscreenmenu #closex::before, nav #closex::after' + ' {';
headstyle += 'background:' + xCol + ';';
headstyle += '}\n';

// FULLPAGE ABSTAND
headstyle += 'nav#wzp_fullscreenmenu ul li' + ' {';
headstyle += 'margin-top:' + FullAbstLi + ';';
headstyle += ' margin-bottom:' + FullAbstLi + ';';
headstyle += '}';


var Breakpoint = article.value("mobile-breite","");
var MobPosO = article.value("mobile-pos-oben","");
var MobPosR = article.value("mobile-pos-rechts","");
var MobButGr = article.value("mobile-button-groesse","");

var MobFullSchGr = article.value("mobile-fullpage-schriftgroesse","");

var MobFullAbst = article.value("mobile-fullpage-abstand-links","");

var MobPosXO = article.value("mobile-x-pos-oben","");
var MobPosXR = article.value("mobile-x-pos-rechts","");
var MobXGr = article.value("mobile-x-groesse","");


headstyle += '@media (max-width: ' + Breakpoint + ') {\n';

headstyle += '#wzp_fullscreenmenu_btn' + ' {';
headstyle += 'top:' + MobPosO + ';';
headstyle += ' right:' + MobPosR + ';';
headstyle += ' font-size:' + MobButGr + ';';
headstyle += '}\n';

headstyle += 'nav#wzp_fullscreenmenu a' + ' {';
headstyle += 'font-size:' + MobFullSchGr + ';';
headstyle += '}\n';

headstyle += 'nav#wzp_fullscreenmenu ul li' + ' {';
headstyle += 'margin-top:' + MobFullAbst + ';';
headstyle += ' margin-bottom:' + MobFullAbst + ';';
headstyle += '}\n';

headstyle += 'nav#wzp_fullscreenmenu #closex' + ' {';
headstyle += 'top:' + MobPosXO + ';';
headstyle += ' right:' + MobPosXR + ';';
headstyle += ' width:' + MobXGr + ';';
headstyle += ' height:' + MobXGr + ';';
headstyle += '}';

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_fullscreenmenu_wrapper" data-item-id="<$= article.id $>">
    <button id="wzp_fullscreenmenu_btn" aria-label="Navigation öffnen"><$= (ButSymb || "") $><$= !isNull(ButText) ? (" " + ButText) : "" $></button>

    <nav id="wzp_fullscreenmenu">
        <button id="closex">Navigation schließen</button>

        <div id="wzp_fullscreenmenu__bgImage" class="wzp_fullscreenmenu_bg" <$ if (parseInt(article.value("bg-closeOnClick", 0)) == 1) {$>data-wzp-close<$ } $>></div>
        <$ for(var i = 1; i <= article.value("header-count"); i++) {
            var image = project.getImage(article.value("image-" + i));
            if (isNull(image)) {
                continue;
            }
        $>
            <img src="<$= image.workingCopyPath $>" class="wzp_fullscreenmenu_bg" data-wzp-item="<$= i $>" loading="lazy" alt="">
        <$ } $>
        <ul> 
        <$
        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 fullsrc = image.workingCopyPath;
        $>
            <li>
                <img style="max-width:100%; height:auto; margin-bottom:<$= article.value("bild-abst") $>px; padding:10px; border:0; box-shadow:none;" 
                    src="<$= fullsrc $>" alt="<$= altText $>" title="<$= title $>" width="<$= article.value("bild-br") $>">
                <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 <= article.value("header-count"); i++){
            var LINKTEXT = article.value("linktext-" + i);
            if (isNull(LINKTEXT)){
                continue;
            }

            var LINK = "link-" + i;
            
            $>
            <li><a <$= system.partial('zplink-expanded.html',  LINK) $> data-wzp-item="<$= i $>"><$= LINKTEXT $></a></li>
        <$ } $>

        <$
        var HTML = article.value("html-1");
        if (!isNull(HTML)){
        $>
            <li style="margin-top:<$= article.value("abst-html") $>;">
                <$= HTML $>
            </li>
        <$ } $>
        </ul>
    </nav>
</div>

<$ 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">Fullscreen 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")$>