"use strict";
$(document).ready(function() {

    var rows = 4; //change this also in css
    var cols = 6; //change this also in css
    var staggerTime = 150;

    var urls = [
        "https://i.ytimg.com/vi/1KDP8Oj1yI4/maxresdefault.jpg",
        "https://fishcoin.co/wp-content/uploads/2018/05/tuna.jpg",
        "https://cdn.ceoworld.biz/wp-content/uploads/2019/07/SEA-Aquarium-Sentosa-Island-Singapore.jpg",
        "https://images.myguide-cdn.com/dubai/companies/dubai-aquarium-and-underwater-zoo-day-ticket/large/dubai-aquarium-and-underwater-zoo-day-ticket-528689.jpg",
        "https://cdn.ceoworld.biz/wp-content/uploads/2019/07/Dubai-Aquarium-Underwater-Zoo-Dubai-United-Arab-Emirates-1.jpg",
        "https://www.galuxsee.com/wp-content/uploads/2014/09/Georgia-Aquarium-20150831-Instagram-User-shaym-Map.jpg",
        "https://stepcdn.com/assets/legacy/ce1/capture-2-700x.jpg",
        "http://d2e5ushqwiltxm.cloudfront.net/wp-content/uploads/sites/20/2018/04/25154225/Tunnel-Kids-at-the-tunnel.jpg",
        "https://www.skylandtourism.com/wp-content/uploads/2018/06/Aquarium-Dubai-Mall.jpg",
        "https://static.insydo.com/wp-content/uploads/2018/01/insane-experience-aquariums-in-dubai-Cropped.jpg",
        "https://media.tacdn.com/media/attractions-splice-spp-674x446/06/74/19/c4.jpg",
        "https://aws-tiqets-cdn.imgix.net/images/content/55a536f3444c42fdba9a84d37a44c627.jpg?auto=format&fit=crop&ixlib=python-1.1.2&q=25&s=965e3a93d4613415da5fa56d8376ffe7&w=400&h=320&dpr=2.625",
        "https://media.tacdn.com/media/attractions-splice-spp-674x446/07/74/ce/41.jpg",
        "https://www.arabian-adventures.com/images/atlantis_aquaventure_-_marine_and_waterpark_aquaventure_waterpark_1/",
        "http://www.destinationsbeyondindia.com/dubai/images/lost-chambers-aquarium.jpg",
        "https://oddviser.com/photo/place/1600/270.jpg",
        "https://ui.cltpstatic.com/camp/images/ai/000/931/656/931656/published/w/dubai-aquarium---underwater-zoo-1566123983-1.jpg",
        "https://www.dubai-online.com/wp-content/uploads/2012/05/ss_602168408.jpg",
        "https://d1sttufwfa12ee.cloudfront.net/uploads/deal/thumb/fdfa385749d57ada1f4c79d4f0131cfc6704451e.jpg",
        "https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Tunnelaquarium_14-05-2009_15-54-09.JPG/1200px-Tunnelaquarium_14-05-2009_15-54-09.JPG",
        "https://cdn.theculturetrip.com/wp-content/uploads/2017/02/leandro-neumann-ciuffo.jpg",
        "https://wtfares.com/wp-content/uploads/2017/07/dubai-aquarium-600x365.jpg",
        "https://live.staticflickr.com/2690/4140055341_8c3eb01a69_b.jpg",
        "https://blog.headout.com/wp-content/uploads/2017/06/Shark-dive.jpg"
    ];

    var $gallery = $(".gallery_box__gallery");
    var $help = $(".gallery_box__help");
    var partsArray = [];
    var reqAnimFr = (function() {
        return window.requestAnimationFrame || function(cb) {
            setTimeout(cb, 1000 / 60);
        }
    })();


    $gallery.html('');
    for (let row = 1; row <= rows; row++) {
        partsArray[row - 1] = [];
        for (let col = 1; col <= cols; col++) {
            $gallery.append(`<div class="show-front gallery_box__part gallery_box__part-${row}-${col}" row="${row}" col="${col}"><div class="gallery_box__part-back"><div class="gallery_box__part-back-inner"></div></div><div class="gallery_box__part-front"></div></div>`);
            partsArray[row - 1][col - 1] = new Part();
        }
    }

    var $parts = $(".gallery_box__part");
    var $image = $(".gallery_box__part-back-inner");
    var help = true;

    for (let i = 0; i < $parts.length; i++) {
        $parts.find(".gallery_box__part-front").eq(i).css("background-image", `url(${urls[i]})`);
    }

    $gallery.on("click", ".gallery_box__part-front", function() {

        $image.css("background-image", $(this).css("background-image"));
        if (help) {
            $help.html("Click any of the tiles to get back");
            help = false;
        }

        let row = +$(this).closest(".gallery_box__part").attr("row");
        let col = +$(this).closest(".gallery_box__part").attr("col");
        waveChange(row, col);
    });

    $gallery.on("click", ".gallery_box__part-back", function() {
        if (!isShowingBack()) return;

        $help.html(`Check out my other <a target="blank" href="https://codepen.io/kiyutink/">pens</a> and follow me on <a target="_blank" href="https://twitter.com/kiyutin_k">twitter</a>`);

        setTimeout(function() {
            for (let row = 1; row <= rows; row++) {
                for (let col = 1; col <= cols; col++) {
                    partsArray[row - 1][col - 1].showing = "front";
                }
            }
        }, staggerTime + $parts.length * staggerTime / 10);


        showFront(0, $parts.length);

    });

    function showFront(i, maxI) {
        if (i >= maxI) return;
        $parts.eq(i).addClass("show-front");

        reqAnimFr(function() {
            showFront(i + 1);
        });
    }

    function isShowingBack() {
        return partsArray[0][0].showing == "back" && partsArray[0][cols - 1].showing == "back" && partsArray[rows - 1][0].showing == "back" && partsArray[rows - 1][cols - 1].showing == "back";
    }

    function Part() {
        this.showing = "front";
    }

    function waveChange(rowN, colN) {
        if (rowN > rows || colN > cols || rowN <= 0 || colN <= 0) return;
        if (partsArray[rowN - 1][colN - 1].showing == "back") return;
        $(".gallery_box__part-" + rowN + "-" + colN).removeClass("show-front");
        partsArray[rowN - 1][colN - 1].showing = "back";
        setTimeout(function() {
            waveChange(rowN + 1, colN);
            waveChange(rowN - 1, colN);
            waveChange(rowN, colN + 1);
            waveChange(rowN, colN - 1);
        }, staggerTime);
    }
});