
<?php

include 'component/nav.php';
$arr = array();
$dirs = array();

$pages = '';
$thumbnails = '';


$mainDir = 'files/images/gallery/';
$galleryRoot = array_values(array_diff(scandir($mainDir), array('.', '..')));
$gallery = "";

foreach ($galleryRoot as $gr) {
    $path = $mainDir.$gr;
    if (is_dir($path)) {

        $pos = stripos($gr, "home_");
        $name = $gr;
        if (strlen($pos) > 0) {
            $name = str_replace("home_", "", $gr);

            $files = preg_grep('/^([^.])/', scandir($path));
            foreach ($files as $file) {
                if (strlen(pathinfo($file, PATHINFO_EXTENSION)) > 1) {
                    $ext = pathinfo($file, PATHINFO_EXTENSION);
                    if ($ext === 'jpg' || $ext === 'png') {

                        array_push($arr, $file);
                    }
                }
            }
            $gallery = $gr;
        }
        array_push($dirs, $name);
    }

}


$className = 'thumbnail-image';
$articleClassName = 'thumbnail';
for ($i = 0; $i < count($arr); $i++ ) {
    $thumbnails .= '<div id="thumbnail-image-' . $i . '" class="'. $className .'" style="background-image: url(\'files/images/gallery/' . $gallery . '/' . $arr[$i] . '\')" data-id="files/images/gallery/' . $gallery . '/' .$arr[$i].'"></div>';
    $pages .= '<a href="#thumbnail-image-' . $i . '" class="thumb-link"><div></div></a>';
}



?>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gallery</title>
    <link href="assets/font.css" rel="stylesheet" />
    <link href="assets/customs/css/reset.css" rel="stylesheet" />
    <link href="assets/customs/css/nav/nav.css" rel="stylesheet" />
    <link href="assets/customs/css/nav/nav-grid.css" rel="stylesheet" />
    <link href="assets/customs/css/nav/nav-position.css" rel="stylesheet" />
    <link href="assets/customs/css/general.css" rel="stylesheet" />
    <link href="assets/customs/css/footer/footer.css" rel="stylesheet" />
    <link href="assets/customs/css/gallery/gallery.css" rel="stylesheet" />
    <link href="assets/customs/css/gallery/gallery-grid.css" rel="stylesheet" />
</head>
<body>
<div class="container">
    <?php
    getNav(false, 'Mojtaba Rezaei');
    ?>
    <article class="content">

        <div class="frame" >
            <img id="frame-image" src="files/images/gallery/<?php
            echo $gallery . "/";
            if (count($arr) > 0) {
                echo $arr[0];
            }
            ?>" alt="Poster Frame">
            <footer>
                <a href="#">
                    <p class="copy-right">
                        &copy; Mojtaba Rezaei
                    </p>
                </a>
            </footer>
        </div>

    </article>
    <div class="pages">
        <div class="flex-container">
            <?php echo $pages; ?>
        </div>
    </div>
    <article class="<?php echo $articleClassName;?>">
        <?php
        echo $thumbnails;
        ?>
    </article>
    <div class="clear"></div>

</div>

<script src="assets/customs/js/nav.js"></script>
<script>
    var nodes = document.querySelectorAll('.thumbnail-image, .thumbnail-image-few');
    var frame = document.getElementById('frame-image');
    var nodeBtn = document.getElementsByClassName('thumb-link');

    for (let i = 0; i < nodeBtn.length; i++) {
        nodeBtn[i].addEventListener('click', function (e) {
            var tar = e.target;
            var button = tar.tagName === 'A' ? tar : tar.parentNode;
            setOffPages()
            button.setAttribute('class', 'thumb-link active');
        });
    }

    for (let i = 0; i < nodes.length; i++) {
        nodes[i].addEventListener('click', changeImage);
    }

    function changeImage(e) {
        var node = e.target;
        var src = node.getAttribute('data-id');
        var id = node.getAttribute('id');
        frame.setAttribute('src', src);
        setOffPages();
        let handle = document.querySelector('a.thumb-link[href="#' + id + '"]');
        handle.setAttribute('class', 'thumb-link active');

    }
    function setOffPages() {
        for (let j = 0; j < nodeBtn.length; j++) {
            nodeBtn[j].setAttribute('class', 'thumb-link');
        }
    }
</script>
</body>
</html>