$(function() {

    
   
    
    $(".featured div").on({
        mouseenter: function() {
            $(this).children().fadeIn(300).show();
        },
        mouseleave: function() {
            $(this).children().fadeOut(300).hide();
        }
    });
    
    //project object
    function project(title, date, category, img, alt, page) {
        this.title = title;
        this.date = date; 
        this.category = category;
        this.img = img; //used as background img on projects.html
        this.alt = alt; //alt text for images
        this.page = page; //html file name, used to create link to page from projects.html 
    }
    
    let projects = [];
    
    let dawn = new project("Dawn Journals", "Spring 2025", "web", "../images/project-featured/dawnjournals.jpg", "Dawn Journals Cover Image" , "dawnJournals.html");
    let hyperstellar = new project("Hyperstellar", "Spring 2025", "web", "../images/project-featured/hyperstellar.jpg", "Hyperstellar Cover Image", "hyperstellar.html");
    let desn = new project("MiraCosta Design Department", "Fall 2024, Summer 2025", "web", "../images/project-featured/desndept.jpg", "MCC Design Dept Cover Image","mccDesnDept.html");
    let art = new project("MiraCosta Art Gallery", "Spring 2025", "web", "../images/project-featured/artgallery.jpg", "MCC Art Gallery Cover Image", "mccArtGallery.html");
    let photo = new project("Dulce's Photography Portfolio", "Fall 2024", "web", "../images/project-featured/photographyport.jpg", "Dulce's Photography Portfolio Cover Image", "photographyPort.html");
    let craps = new project("Craps", "Fall 2025", "interactive", "../images/project-featured/craps.jpg", "Craps Cover Image", "craps.html");
    let planner = new project("MiraCosta Student Planner", "Spring 2025", "graphic", "../images/project-featured/planner.jpg", "MCC Student Planner Cover Image", "studentPlanner.html");
    
    projects.push(dawn);
    projects.push(hyperstellar);
    projects.push(desn);
    projects.push(art);
    projects.push(photo);
    projects.push(craps);
    projects.push(planner);
    
    let webProjects = [];
    let interactiveProjects = [];
    let graphicProjects = [];
    
    
    //make an if so that it takes the name of the html and if it equals projects.html it executes this code

    let pathName = window.location.pathname;
    let desiredPage = "projects.html";
    let indexName = pathName.indexOf(desiredPage);
    let newPath = pathName.substring(indexName);
    
    
    //console.log(pathName);
    //console.log(desiredPage);
    //console.log(indexName);
    //console.log(newPath);
    
    if (newPath === desiredPage) {
        for (var a = 0; a < projects.length; a++) {
        //$(".projects").append("<div class='project'><h2 class='title'></h2><p class='year'></p></div>");
        //$(".projects").append("<a href='' class='toProject'><div class='project'><h2 class='title'></h2><p class='year'></p></div></a>");
        //$(".projects").append("<a href='' class='toProject'><div class='project'><div class='project-text'><h2 class='title'></h2><p class='year'></p></div><img src='' alt='' class='projectImage'></div></a>");
        $(".projects").append("<div class='project'><a href='' class='toProject'><div class='project-text'><h2 class='title'></h2><p class='year'></p></div><img src='' alt='' class='projectImage'></a></div>");
        let projectClasses = document.querySelectorAll(".project");
        //let projectDivs = 
        let titles = document.querySelectorAll(".title");
        let years = document.querySelectorAll(".year");
        let toProjects = document.querySelectorAll(".toProject");
        let images = document.querySelectorAll(".projectImage");
        
        titles[a].textContent = projects[a].title;
        years[a].textContent = projects[a].date;
        toProjects[a].setAttribute('href', 'projects/' + projects[a].page);
        images[a].src = projects[a].img;
        images[a].alt = projects[a].alt;
        //$(".project").css("background-image", projects[a].img);
        
       
        if (projects[a].category === "web") {
            $(projectClasses[a]).addClass("web");
            webProjects.push(projectClasses[a]);
        } else if (projects[a].category === "interactive") {
            $(projectClasses[a]).addClass("interactive");
            interactiveProjects.push(projectClasses[a]);
        } else if (projects[a].category === "graphic") {
            $(projectClasses[a]).addClass("graphic");
            graphicProjects.push(projectClasses[a]);
        }
    }
    }
    
    
    let all = $("#all");
    let web = $("#web");
    let interactive = $("#interactive");
    let graphic = $("#graphic");
    
    let allText = all.text();
    all.text(allText + " (" + projects.length + ")");
    
    let webText = web.text();
    web.text(webText + " (" + webProjects.length + ")");

    let graphicText = graphic.text();
    graphic.text(graphicText + " (" + graphicProjects.length + ")");
    
    let interactiveText = interactive.text();
    interactive.text(interactiveText + " (" + interactiveProjects.length + ")");
        
    let filters = [all, web, interactive, graphic];
    
    function removeSelected() {
        for (var b = 0; b < filters.length; b++) {
            filters[b].removeClass("selected");
        }
    }
    
    web.on("click", function() {
        removeSelected();
        $(this).addClass("selected");
        $(".graphic, .interactive").hide();
        $(".web").show();
    });
    
    interactive.on("click", function() {
        removeSelected();
        $(this).addClass("selected");
        $(".graphic, .web").hide();
        $(".interactive").show();
    });
    
    graphic.on("click", function() {
        removeSelected();
        $(this).addClass("selected");
        $(".interactive, .web").hide();
        $(".graphic").show();
    });
    
    all.on("click", function() {
        removeSelected();
        $(".graphic, .web, .interactive").show();
        $(this).addClass("selected");
    });
    
    //let filterMenu = $(".filter");
    //let filterIcon = $(".filter-button");
    //$(document).on("click", function() {
    //   if (!filterMenu.is(event.target) && filterMenu.has(event.target).length === 0 && !filterIcon.is(event.target)) {
    //       filterMenu.css({transform: translateX(0)});
    //   } 
    //});
    
    $(".filter-button").on("click", function() {
        $(this).siblings(".filter").toggleClass("open");
        $(this).parent().append("<div id='dim'></div>");
        //$(".filter, #dim").toggleClass("open");
    });
    
    $(".filter-back").on("click", function() {
        $(".filter").toggleClass("open");
        $(this).parent().parent().parent().siblings("#dim").remove();
    });
    
    $(".filter-reset").on("click", function() {
        removeSelected();
        $(".graphic, .web, .interactive").show();
    });

    
    
    
    //$(".project").on("hover", function() {
    //    console.log($(this));
    //    console.log($(this).children());
    //    console.log($(this).children().children(".project-text"));
    //    $(this).children().children(".project-text").css("display", "block");
    //});
    
    if (window.innerWidth > 900) {
        $(".project").on({
        mouseenter: function() {
            $(this).children().children(".project-text").fadeIn(300).show();
        },
        mouseleave: function() {
            $(this).children().children(".project-text").fadeOut().hide();
        }
    });
    }
    
    
    
    //web.on("click", function() {
    //   toggleProjectVisibility("web"); 
    //});
    
    //create a new class called unselected and one called "selected" which is display: none
    //when a filter item is clicked on, the projectsClasses array is looped through to see which one has the matching class. if it does add the class "selected", and add unselected to those who dont have it
    
    //function toggleProjectVisibility(category) {
    //    for (var b = 0; b < projects.length; b++) {
    //        //projects[b].addClass("unselected");
    //        if(projects[b].category === category) {
    //            projects[b].remove("unselected");
    //            projects[b].add("selected");
    //            
    //            console.log("category");
    //        }
    //    }
    //}
    
    //make an array of the projects. the object things would be TITLE, DATE, CATEGORY, FEATURED IMAGE - title is what it's called, date is when it was made, category, and featured image is the img that's used as the background img.
    
    
    
    //web.on("click", function() {
    //   $(this) 
    //});
    
    //let coverLink = document.getElementById("#cover-link");
    //window.scrollTo(0,1000);
    //$("#cover-Link").on("click", function() {
    //   
    //    
    //    window.scrollto(0,0); 
    //});
    //
    //$("#dawnJournals-logoLink").on("click", function(e) {
    //    e.preventDefault();
    //   let body = document.getElementById("body");
    //    body.scrollto(0,800); 
    //});
    //
    //$("#dawnJournals-logoLink").on("click", function() {
    //    console.log("working");
    //   document.body.scrollTo(100,800); 
    //});
    //
    
        
    //make an if so that this code only executes if pages have a specific class
    
    $(".profile a").on("click", function() {
        //IF ON CATEGORIES.HTML
        if ($(this).closest("header").hasClass("categories-header")) {
            $(this).attr("href", "profile.html");
        }
    });
    
    
    if ($("main").hasClass("project-page")) {
        document.querySelectorAll('a[href^="a"]').forEach(anchor => {
       anchor.addEventListener("click", function(e) {
            e.preventDefault();
           document.querySelector(this.getAttribute("href")).scrollIntoView({
                behavior: "smooth", 
           });
       });
    });
    

    
    let nav = document.querySelector(".project-nav");
    let nav2 = document.querySelector(".secondary-nav");
    console.log(nav);
    let lastScrollY = window.scrollY;
        
    window.addEventListener("scroll", () => {
        if (lastScrollY < window.scrollY) {
            nav.classList.add("nav-hidden");
            nav2.classList.remove("nav-there");
           
        } else {
            nav.classList.remove("nav-hidden");
             nav2.classList.add("nav-there");
        }
            
        lastScrollY = window.scrollY;
        
        if (window.scrollY <= 0) {
            nav.classList.remove("nav-hidden");
        }
    });
    }
    
    
    
    
    
    
    
    
    
    
    
    
});