script.js

// Timeline data
const timelineData = [
    {
        year: 1900,
        title: "SSA begins tracking mortality data",
        description: "Social Security Administration's Office of the Chief Actuary begins tracking historical death probabilities.",
        category: "policy"
    },
    {
        year: 1984,
        title: "Social Security disability standards updated",
        description: "Amendments mandate development of new disability standards for mental disorders.",
        category: "policy"
    },
    {
        year: 1991,
        title: "Corpus callosum findings in ADHD",
        description: "Hynd et al. identify smaller corpus callosum in children with ADHD.",
        category: "neuroimaging"
    },
    {
        year: 2002,
        title: "Brain volume reductions in ADHD",
        description: "Castellanos et al. find significant reductions in cerebral and cerebellar volumes in children with ADHD.",
        category: "neuroimaging"
    },
    {
        year: 2007,
        title: "Cortical thickness delay in ADHD",
        description: "Shaw et al. demonstrate children with ADHD reach peak cortical thickness ~3 years later.",
        category: "neuroimaging"
    },
    {
        year: 2017,
        title: "Brain volume confirmation",
        description: "Hoogman et al. confirm smaller brain volumes in ADHD through mega-analysis.",
        category: "neuroimaging"
    },
    {
        year: 2019,
        title: "27 genome-wide significant risk loci",
        description: "Demontis et al. identify genetic associations with ADHD.",
        category: "genetics"
    },
    {
        year: 2021,
        title: "International Consensus Statement",
        description: "Faraone et al. publish comprehensive review affirming ADHD as valid diagnosis.",
        category: "treatment"
    },
    {
        year: 2024,
        title: "Brain connectivity findings",
        description: "Norman et al. re-analyze fMRI data revealing altered connections in ADHD.",
        category: "neuroimaging"
    }
];

// Researchers data
const researchersData = [
    {
        name: "Castellanos et al.",
        contribution: "Longitudinal brain volume studies in ADHD",
        category: "neuroimaging"
    },
    {
        name: "Shaw et al.",
        contribution: "Cortical maturation delay in ADHD",
        category: "neuroimaging"
    },
    {
        name: "Hoogman et al.",
        contribution: "Mega-analyses of brain structure in ADHD",
        category: "neuroimaging"
    },
    {
        name: "Demontis et al.",
        contribution: "Genome-wide association studies in ADHD",
        category: "genetics"
    },
    {
        name: "Faraone et al.",
        contribution: "International consensus statements on ADHD",
        category: "treatment"
    }
];

// Cases data
const casesData = [
    {
        name: "Caustin Lee McLaughlin",
        description: "Case study illustrating genetic profile and disability claims process",
        category: "policy"
    },
    {
        name: "Shelley C. v. SSA",
        description: "Landmark case reversing SSA's denial of ADHD disability benefits",
        category: "policy"
    }
];

// Initialize the page
document.addEventListener('DOMContentLoaded', function() {
    renderTimeline();
    renderResearchers();
    renderCases();
    setupFilterButtons();
});

function renderTimeline() {
    const container = document.getElementById('timeline-items');
    
    timelineData.sort((a, b) => a.year - b.year).forEach(item => {
        const itemElement = document.createElement('div');
        itemElement.className = `timeline-item ${item.category}`;
        
        itemElement.innerHTML = `
            <div class="timeline-dot"></div>
            <div class="bg-white p-6 rounded-lg shadow-md relative card-hover transition-all duration-300">
                <div class="absolute -left-2 top-6 w-4 h-4 bg-indigo-600 transform rotate-45"></div>
                <div class="flex items-center mb-2">
                    <span class="inline-block px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm font-medium">${item.year}</span>
                    <span class="ml-2 px-2 py-1 bg-gray-100 text-gray-800 rounded-full text-xs font-medium">${item.category}</span>
                </div>
                <h3 class="text-xl font-semibold text-gray-800 mb-2">${item.title}</h3>
                <p class="text-gray-600">${item.description}</p>
            </div>
        `;
        
        container.appendChild(itemElement);
    });
}

function renderResearchers() {
    const container = document.getElementById('researchers-list');
    
    researchersData.forEach(researcher => {
        const itemElement = document.createElement('div');
        itemElement.className = `researcher-item ${researcher.category} bg-gray-50 p-4 rounded-lg`;
        
        itemElement.innerHTML = `
            <h4 class="font-bold text-indigo-700">${researcher.name}</h4>
            <p class="text-gray-600 text-sm">${researcher.contribution}</p>
            <span class="inline-block mt-2 px-2 py-1 bg-indigo-100 text-indigo-800 rounded-full text-xs font-medium">${researcher.category}</span>
        `;
        
        container.appendChild(itemElement);
    });
}

function renderCases() {
    const container = document.getElementById('cases-list');
    
    casesData.forEach(caseItem => {
        const itemElement = document.createElement('div');
        itemElement.className = `case-item ${caseItem.category} bg-gray-50 p-4 rounded-lg`;
        
        itemElement.innerHTML = `
            <h4 class="font-bold text-indigo-700">${caseItem.name}</h4>
            <p class="text-gray-600 text-sm">${caseItem.description}</p>
            <span class="inline-block mt-2 px-2 py-1 bg-indigo-100 text-indigo-800 rounded-full text-xs font-medium">${caseItem.category}</span>
        `;
        
        container.appendChild(itemElement);
    });
}

function setupFilterButtons() {
    const filterButtons = document.querySelectorAll('.filter-btn');
    
    filterButtons.forEach(button => {
        button.addEventListener('click', function() {
            // Update active state
            filterButtons.forEach(btn => btn.classList.remove('active', 'bg-indigo-600', 'text-white'));
            filterButtons.forEach(btn => btn.classList.add('bg-gray-200', 'text-gray-700'));
            this.classList.add('active', 'bg-indigo-600', 'text-white');
            this.classList.remove('bg-gray-200', 'text-gray-700');
            
            // Filter items
            const category = this.dataset.category;
            filterItems(category);
        });
    });
}

function filterItems(category) {
    const timelineItems = document.querySelectorAll('.timeline-item');
    const researcherItems = document.querySelectorAll('.researcher-item');
    const caseItems = document.querySelectorAll('.case-item');
    
    if (category === 'all') {
        timelineItems.forEach(item => item.style.display = 'block');
        researcherItems.forEach(item => item.style.display = 'block');
        caseItems.forEach(item => item.style.display = 'block');
        return;
    }
    
    timelineItems.forEach(item => {
        item.style.display = item.classList.contains(category) ? 'block' : 'none';
    });
    
    researcherItems.forEach(item => {
        item.style.display = item.classList.contains(category) ? 'block' : 'none';
    });
    
    caseItems.forEach(item => {
        item.style.display = item.classList.contains(category) ? 'block' : 'none';
    });
}