<?php defined('C5_EXECUTE') or die("Access Denied.");
 
View::getInstance()->requireAsset('javascript', 'jquery');
// CHANGES
View::getInstance()->requireAsset('javascript', 'core/lightbox/launcher');
View::getInstance()->requireAsset('javascript', 'core/lightbox');
View::getInstance()->requireAsset('css', 'core/lightbox');
// END CHANGES
 
$navItems = $controller->getNavItems();
 
 
/*** STEP 1 of 2: Determine all CSS classes (only 2 are enabled by default, but you can un-comment other ones or add your own) ***/
foreach ($navItems as $ni) {
    $classes = array();
 
    if ($ni->isCurrent) {
        //class for the page currently being viewed
        $classes[] = 'nav-selected';
    }
 
    if ($ni->inPath) {
        //class for parent items of the page currently being viewed
        $classes[] = 'nav-path-selected';
    }
 
    // CHANGES
    if ($ni->cObj->getCollectionPointerExternalLink()) {
        $classes[] = 'link-popup';
    }
    // END CHANGES
 
    //Put all classes together into one space-separated string
    $ni->classes = implode(" ", $classes);
}
 
 
//*** Step 2 of 2: Output menu HTML ***/
 
echo '<nav class="ccm-responsive-navigation original"><ul>'; //opens the top-level menu
 
foreach ($navItems as $ni) {
 
    echo '<li class="' . $ni->classes . '">'; //opens a nav item
    $name = (isset($translate) && $translate == true) ? t($ni->name) : $ni->name;
    echo '<a href="' . $ni->url . '" target="' . $ni->target . '" class="' . $ni->classes . '">' . $name . '</a>';
 
    if ($ni->hasSubmenu) {
        echo '<ul>'; //opens a dropdown sub-menu
    } else {
        echo '</li>'; //closes a nav item
        echo str_repeat('</ul></li>', $ni->subDepth); //closes dropdown sub-menu(s) and their top-level nav item(s)
    }
}
 
echo '</ul></nav>'; //closes the top-level menu
echo '<div class="ccm-responsive-menu-launch"><i></i></div>'; // empty i tag for attaching :after or :before psuedos for things like FontAwesome icons.
?>
 
<!-- CHANGES -->
<script>
$(document).ready(function() {
    $('a.link-popup').magnificPopup({
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,
        fixedContentPos: false
    });
});
</script>
<style>
    /*by default the max-width is 900px*/
    /*this can be changed*/
    .mfp-iframe-holder .mfp-content {
        /*max-width of none will fill the available width*/
        /*max-width: none;*/
 
        /*max-width can be given a set width*/
        /*max-width: 1200px;*/
        /*max-width: 90%;*/
    }
 
    /*change iframe height within media queries*/
    /*.mfp-content*/
    /*Examples:*/
    @media (min-width: 768px) {
        /*.mfp-content {
            height: 600px;
        }*/
    }
    @media (min-width: 1200px) {
        /*.mfp-content {
            height: 1000px;
        }*/
    }
</style>
<!-- END CHANGES -->