<$
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 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 += 'label#navtoggler' + ' {';
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 += '}\n';

headstyle += 'label#navtoggler::before' + ' {';
headstyle += 'content: "' + ButSymb + ' ' + ButText + '";';
headstyle += '}\n';
headstyle += 'label#navtoggler: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__fullpagemenu__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 label#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 label#closex:hover' + ' {';
headstyle += '' + XAni + ' !important;';
headstyle += '}\n';



headstyle += 'nav#wzp_fullscreenmenu label#closex::before, nav label#closex::after' + ' {';
headstyle += 'background:' + xCol + ';';
headstyle += '}\n';

// FULLPAGE ABSTAND
headstyle += 'nav#wzp_fullscreenmenu ul li' + ' {';
headstyle += 'margin-top:' + FullAbstLi + ';';
headstyle += ' margin-bottom:' + FullAbstLi + ';';
headstyle += '}';


system.addHtmlHeadElement("<st" + "yle>\n" + headstyle + "\n</st" + "yle>");
$>


<$
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","");


var headstyle = '@media (max-width: ' + Breakpoint + ') {\n';

headstyle += 'label#navtoggler' + ' {';
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 label#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">
    <input type="checkbox" id="togglebox"/>
    <label for="togglebox" id="navtoggler"></label>

    <nav id="wzp_fullscreenmenu">
        <label for="togglebox" id="closex">Close</label>
        <label class="wzp__fullpagemenu__bgImage" for="togglebox"></label>
        <$ if (parseInt(article.value("bg-closeOnClick", 0)) == 1) {$>
            <label class="wzp__fullpagemenu__bgImage" for="togglebox"></label>
        <$ } else { $>
            <div class="wzp__fullpagemenu__bgImage"></div>
        <$ } $>
        <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 imgsrc = image.contentCopyPath;
            var fullsrc = image.workingCopyPath;
        $>
            <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="<$= 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 <= 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 HTML = article.value("html-1");
        if ( !isNull(HTML) ){
        $>
            <li style="margin-top:<$= article.value("abst-html") $>; padding-left:0; list-style:none;">
                <$= 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>
<$ } $>

<script>
(function () {
/* Move the menu div to be a direct child of the body, in order to avoid problems with layouts like
 * Poster Responsive
 */
const newDiv = document.createElement('div');
const toCopy = document.querySelector('#wzp_fullscreenmenu_wrapper');
newDiv.innerHTML = toCopy.innerHTML;

toCopy.remove();
document.body.appendChild(newDiv);
})();
</script>

<$=system.partial("article-end.html")$>