f<script type="text/javascript">
function generalAJAX(divName, URL, parameters) {
    // Alert for debugging
    // alert('generalAJAX: ' + divName + ' ' + URL + ' ' + parameters);

    // Check if divName is empty
    if (divName == "") {
        document.getElementById(divName).innerHTML = "";
        return;
    }

    // Create a local xmlhttp object
    var xmlhttp;
    if (window.XMLHttpRequest) {
        // code for modern browsers
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for older IE versions
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    // Define the callback function
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById(divName).innerHTML = xmlhttp.responseText;
        }
    };

    // Construct the URL with parameters
    if (parameters !== undefined || URL.indexOf("?") != -1) {
        if (parameters !== undefined) {
            URL += parameters + "&ajax=yes&divName=" + divName;
        } else {
            URL += "&ajax=yes&divName=" + divName;
        }
    } else {
        URL += "?ajax=yes&divName=" + divName;
    }

    // Debugging alert
    // alert('generalAJAX: ' + URL);

    // Open the request and send it
    xmlhttp.open("GET", URL, true);
    xmlhttp.send();
}


// Send an entire form via GET through generalAJAX
function formToAjax(formName, divName, URL)
{
   //alert('formToAjax: ' + formName + " - " + divName + " - " + URL);

    var str = URL;
    
    var elem = document.getElementById(formName).elements;

    str += "?";
    var realCount = 0;

    for(var i = 0; i < elem.length; i++)
    {
      if (elem[i].type !== "submit" && elem[i].type !== "div" && elem[i].type !== "form" && elem[i].type !== "button")
      {
        realCount = realCount+1;
        //alert(elem[i].name + ' kind: ' + elem[i].type);
        // For checkmarks named 'outcome' -- i.e., flashcards.php

        if (realCount > 1){str += "&";}

        if (elem[i].type === "checkbox" && elem[i].checked){str += elem[i].name + "=" + "checked";}
        else if (elem[i].type === "checkbox" && !elem[i].checked){str += elem[i].name + "=" + "notchecked";}                
        else if (elem[i].type === "select-multiple"){str += elem[i].id + "=" + getSelectedOptions(elem[i].id);}
        else {str += elem[i].name + "=" + elem[i].value;}        
      }
    } 
 

    //alert('formToAjax has finished (to ' + divName + ') : ' + str);
    generalAJAX(divName, str);
    //return false;   // <- Was turned on - affects other scripts??
}

function getSelectedOptions(selectName) {
  sel = document.getElementById(selectName);
    var opts = [];
    
    // loop through options in select list
    for (var i=0, len=sel.options.length; i<len; i++) {
        opt = sel.options[i];
        
        // check if selected
        if ( opt.selected ) {
            // add to array of option elements to return from this function
            opts.push(opt.value);
        }
    }

    return opts.toString();
}

function toggle_visibility(id) 
{
  //alert(id);
   var e = document.getElementById(id);
  if(e.style.display == 'block')
      {e.style.display = 'none';}
   else
      {e.style.display = 'block';}   
}

function toggle_visibility_inline(id) 
{
  //alert(id);
   var e = document.getElementById(id);

  if(e.style.display != 'none')
      {e.style.display = 'none';}
   else
      {e.style.display = 'block';}   
}


function toggle_visibility_inline2(id) 
{
  //alert(id);
   var e = document.getElementById(id);
   
  if(e.style.display != 'none')
      {e.style.display = 'none';}
   else
      {e.style.display = 'inline-block';}   
}

function toggle_visibility_tr(id) 
{
  //alert(id);
   var e = document.getElementById(id);
   
  if(e.style.display != 'none')
      {e.style.display = 'none';}
   else
      {e.style.display = 'table-row';}   
}


function showDiv(id) 
{
  //alert(id);
   var e = document.getElementById(id);
   e.style.display = 'block'; 
}

function hideDiv(id) 
{
  //alert(id);
   var e = document.getElementById(id);
   e.style.display = 'none'; 
}

function changeColor(id,color)
{
   var e = document.getElementById(id);
   e.style.backgroundColor = color; 
}


function validateAllRegistration() {
  if (validateEmail() && validatePassword() && validateConfirmPassword()){return true;}
  else{return false;}
}

function validateBothPasswords() {
  if (validatePassword() && validateConfirmPassword()){return true;}
  else{return false;}
}

function validateAllLogin() {
  if (validateEmail() && validatePassword())
  {
    return true;
  }

  else
  {
    //alert("There is a problem with the email or password. Please try again.");
    return false;
  }
}

// Validate email
function validateEmail() {
  var tempEmail = document.forms["form"]["email"].value;
  if (tempEmail == "") {
    document.getElementById("email_err").innerHTML = "Please enter an email.";
    return false;
  } else if (!tempEmail.match(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/)) {
    document.getElementById("email_err").innerHTML = "Please enter a valid email.";
    return false;
  } else {
    document.getElementById("email_err").innerHTML = "";
    return true;
  }
}

function validateRegistrationEmail() {
  var tempEmail = document.getElementById("email").value;
  if (tempEmail == "") {
    document.getElementById("email_err").innerHTML = "Please enter an email.";
    return false;
  } else if (!tempEmail.match(/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/)) {
    document.getElementById("email_err").innerHTML = "Please enter a valid email.";
    return false;
  } else {
    document.getElementById("email_err").innerHTML = "";
    return true;
  }
}

// Validate password
function validatePassword() {
  var password = document.getElementById("password").value;
  if (password == "") {
    document.getElementById("password_err").innerHTML = "Please enter a password.";
    return false;
  } else if (password.length < 6) {
    document.getElementById("password_err").innerHTML = "Password must have at least 6 characters.";
    return false;
  } else {
    document.getElementById("password_err").innerHTML = "";
    return true;
  }
}

// Validate confirm password
function validateConfirmPassword() {
  var password = document.forms["form"]["password"].value;
  var confirmPassword = document.forms["form"]["confirm_password"].value;
  if (confirmPassword == "") {
    document.getElementById("confirm_password_err").innerHTML = "Please confirm password.";
     } else if (password != confirmPassword) {
    document.getElementById("confirm_password_err").innerHTML = "Password did not match.";
    return false;
  } else {
    document.getElementById("confirm_password_err").innerHTML = "";
    return true;
  }
}

// Validate form
function validateRegistrationForm() {
  if (validateEmail() && validatePassword() && validateConfirmPassword()) {
    return true;
  } else {
    return false;
  }
}

// Validate form
function validateLoginForm() {
  
  if (validateEmail() && validatePassword()) {
    return true;
  } else {
    return false;
  }
}

function toggleHideClass(className) {
    // Get all elements with the class 'hideRow'
    var elements = document.getElementsByClassName(className);
    
    // Loop through the NodeList object
    for (var i = 0; i < elements.length; i++) {
        // Check the current display style and toggle it
        if (elements[i].style.display === 'none') {
            elements[i].style.display = ''; // Will show the element
        } else {
            elements[i].style.display = 'none'; // Will hide the element
        }
    }
}

</script>
<html>
<head>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-KM8NXLZ5L7"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-KM8NXLZ5L7');
</script>
    
<title>Our Gymnastics</title>

<meta property='og:title' content='Our Gymnastics'>
<meta property='og:description' content='Skills, Drills, and More!'>
<meta property='og:image' content='http://ourgymnastics.com/images/fb_header.png'>
<meta property='og:url' content='https://ourgymnastics.com'>

<style>
a.buttonBlue{
display:inline-block;
padding:0.3em 1.2em;
margin:0 0.1em 0.1em 0;
border:0.16em solid rgba(255,255,255,0);
border-radius:2em;
box-sizing: border-box;
text-decoration:none;
font-family:'Roboto',sans-serif;
font-weight:300;
color:#000;
text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
text-align:center;
transition: all 0.2s;
background-color: #a1ecfe;
padding:5px; 
border-radius:20px; 
padding-left:10px;
padding-right:10px; 
font-size:15px; 
margin-top:5px;
}

a.fbButton{
display:inline-block;
padding:0.5em 1.2em;
margin:0 0.1em 0.1em 0;
border:0.16em solid rgba(255,255,255,0);
border-radius:2em;
box-sizing: border-box;
text-decoration:none;
font-family:'Roboto',sans-serif;
font-weight:300;
color:#000;
text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
text-align:center;
transition: all 0.2s;
background-color: #a1ecfe;
padding:3px 5px; 
border-radius:20px; 
padding-left:10px;
padding-right:10px; 
font-size:15px; 
margin-top:5px;
vertical-align: top;
}

a.buttonBlue:hover{
background-color: #ffeb9f;
}

@media all and (max-width:30em){
a.buttonBlue{
display:block;
margin:0.2em auto;
}
}

a.button4{
display:inline-block;
padding:0.3em 1.2em;
margin:0 0.1em 0.1em 0;
border:0.16em solid rgba(255,255,255,0);
border-radius:2em;
box-sizing: border-box;
text-decoration:none;
font-family:'Roboto',sans-serif;
font-weight:300;
color:#000;
text-shadow: 0 0.04em 0.04em rgba(0,0,0,0.35);
text-align:center;
transition: all 0.2s;
background-color: #ddd;
padding:5px; border-radius:20px; padding-left:10px;padding-right:10px; font-size:18px; margin-top:5px;
}

a.button4:hover{
background-color: #ffffbf;
}

@media all and (max-width:30em){
a.button4{
display:block;
margin:0.2em auto;
}
}


.tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 360px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.question-mark {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #555;
  color: #fff;
  text-align: center;
  line-height: 20px;
  margin-bottom:2px;
}

.fixed-footer {
    position: fixed;
    right: 0;
    bottom: 0;
    width: 300px; /* Footer width */
    height: 50px; /* Footer height */
    background: black;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    border-top-left-radius: 20px; /* Adjust the radius as needed */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: -2px 0 5px rgba(0,0,0,0.5); /* Optional: add a shadow for better visibility */
}

#topcontainer {
  position: relative;
  width: 100%;
  /* Additional styles for your container */
}

#header {
  width: 100%;
  /* Additional styles for your header */
}

#right-div {
  width: 500px;
  position: absolute;
  right: 0;
  background-color: #ddd;
  padding:10px;
  border-bottom-left-radius: 10px; /* Adjust the radius value as needed */
  border-bottom-right-radius: 10px; /* Adjust the radius value as needed */  
  top: 100%; /* Positions the div directly below the header */
  cursor:pointer;
  /* Adjust this value if you want a gap between the header and the right-div */
}

html, body { height: auto; }
</style>

</head>
<body bgcolor=#000>
<footer class="fixed-footer">
<a href='privacy-tos.php' class='buttonBlue' tabindex='-1' style='margin-right:3px; margin-left:3px'>Privacy Policy</a>
<a href='privacy-tos.php' class='buttonBlue' tabindex='-1' style='margin-right:3px; margin-left:3px'>Terms of Service</a>
</footer>
<center>

<div id="topcontainer">
<div id='header' style='background-color:#030D14; text-align: center; padding-bottom:5px'>

<a href='/'><img src='/images/header.png' height=150px></a>
<br>

<a href='/skills/' class='buttonBlue' tabindex='-1' style='margin-right:3px; margin-left:3px'>Skills Database</a>
<a href='/requests.php' class='buttonBlue' tabindex='-1' style='margin-right:3px; margin-left:3px'>Feedback</a>
<a href='/contact.php' class='buttonBlue' tabindex='-1' style='margin-right:3px; margin-left:3px'>Contact</a>

<a href='/login.php' class='buttonBlue' tabindex='-1' style='margin-right:3px; margin-left:3px'>Log In</a>

<a href='https://www.facebook.com/groups/ourgymnastics' class='fbButton' target='_blank' tabindex='-1' style='margin-right:3px; margin-left:3px'>
  <img src='/images/fbicon.png' style='height:20px; vertical-align:top'> Our Group
</a>


</div>
</div>



<div style='background-color: #fff; min-height:100%'><br>
<center>


<br>
<h1>Feature Requests and Bug Updates</h1>
































<style>
    .lower-underline {
    text-decoration: underline;
    text-underline-position: under;
    text-decoration-skip-ink: none;
    text-decoration-thickness: 1px;
    text-underline-offset: -1px;
    }
        .request-form-container {
            max-width: 600px;
            margin: auto;
            padding: 10px 20px; /* Reduced padding */
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
            background-color: #f9f9f9;
            font-family: Arial, sans-serif;
            display: none; /* Initially hidden */
            position: relative;
            margin-bottom:40px;
        }
        .request-form-container h2 {
            text-align: center;
            color: #333;
            margin: 5px 0; /* Reduced margin */
        }
        .request-form-container textarea {
            padding: 10px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            resize: none;
            width: 100%;
            height: 100px;
            margin-bottom: 10px;
            text-align: center; /* Center align text */
        }
        .request-form-container .form-row {
            display: flex;
            flex-direction: column; /* Stack elements vertically */
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        .request-form-container .toggle-buttons {
            display: flex;
            width: 260px; /* Set specific width */
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            overflow: hidden;
            margin-bottom: 10px; /* Add some space below the toggle buttons */
            position: relative;
        }
        .toggle-buttons::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 1px;
            background-color: #e0e0e0; /* Distinct line between the two halves */
        }
        .toggle-buttons label {
            flex: 1;
            text-align: center;
            padding: 10px;
            cursor: pointer;
        }
        .toggle-buttons input[type="radio"] {
            opacity: 0;
            position: absolute;
            width: 0;
            height: 0;
        }
        .toggle-buttons input[type="radio"]:checked + label.feature {
            background-color: #d5fdd5;
        }
        .toggle-buttons input[type="radio"]:checked + label.bug {
            background-color: #ffbbbb;
        }
        .request-form-container button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
        }
        .request-form-container button:hover {
            background-color: #45a049;
        }
        .error-message {
            color: red;
            display: none;
            margin-top: 10px;
        }
        .submit-button-container {
            text-align: center;
            margin: 20px 0;
        }
        .submit-button-container button {
            background-color: #4CAF50;
            color: white;
            padding: 15px 30px;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            font-size: 18px;
        }
        .submit-button-container button:hover {
            background-color: #45a049;
        }
        .close-button {
            position: absolute;
            top: 5px; /* Adjust top position */
            right: 10px;
            background-color: #e0e0e0 !important; /* Ensure background color is applied */
            color:black !important; /* Ensure text color is applied */
            border: none;
            border-radius: 50%;
            padding: 2px 6px; /* Further reduced padding */
            cursor: pointer;
            font-size: 20px; /* Increased font size */
            line-height: 1; /* Adjust line height */
            margin: 0; /* Ensure no additional margin */
            box-sizing: content-box; /* Ensure padding is applied correctly */
        }
    </style>
    <script>
        function validateForm(event) {
            var textArea = document.getElementById("request-text");
            var feature = document.getElementById("feature");
            var bug = document.getElementById("bug");
            var errorMessage = document.getElementById("error-message");
            var textLengthError = document.getElementById("text-length-error");

            errorMessage.style.display = 'none'; // Hide error message initially
            textLengthError.style.display = 'none'; // Hide text length error message initially

            if (textArea.value.length > 1000) {
                textLengthError.style.display = 'block';
                event.preventDefault(); // Prevent form submission
                return false;
            }
            if (!feature.checked && !bug.checked) {
                errorMessage.style.display = 'block';
                event.preventDefault(); // Prevent form submission
                return false;
            }
            return true;
        }

        function showForm() {
            document.getElementById('request-form-container').style.display = 'block';
            document.getElementById('submit-button-container').style.display = 'none';
        }

        function hideForm() {
            document.getElementById('request-form-container').style.display = 'none';
            document.getElementById('submit-button-container').style.display = 'block';
        }

        document.addEventListener('DOMContentLoaded', function () {
            var form = document.querySelector('form');
            form.addEventListener('submit', validateForm);
        });
    </script>
</head>
<body>
    














<div>
    <button class="tablink" onclick="openTab('Requested', this)" id="defaultOpen">Requested (0)</button><button class="tablink" onclick="openTab('InProgress', this)" >In Progress (0)</button><button class="tablink" onclick="openTab('Completed', this)" >Completed (0)</button>
</div>
<br>


<script>
function openTab(tabName, elmnt) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
  }
  document.getElementById(tabName).style.display = "block";
  elmnt.style.backgroundColor = "#ffffbb";
}

document.addEventListener('DOMContentLoaded', function() {
  // Get the element with id="defaultOpen" and click on it
  document.getElementById("defaultOpen").click();
});
</script>


	<style>
.tablink {
  background-color: #ddd;
  border-radius: 20px;
  padding: 10px 20px;
  margin: 0px 10px;
  margin-top:10px;
  cursor:pointer;
  font-size:18px;
}
</style>


















<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">




<style>
    .table-container {
        width: 100%;
        max-width: 800px;
        margin: auto;
        font-family: Arial, sans-serif;
        position: relative;
    }
    .table-row {
        padding: 10px 15px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-bottom: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        position: relative;
    }

    .row-top {
    align-items: center;
    width: 100%;
    }

    .thumbs-up {
    color: grey;
    font-size: 30px;
    cursor: pointer;
}

.thumbs-up.blue {
    color: blue;
}
.votes-container {
    align-items: center;
    text-align:center;
    justify-content: center;
    padding: 10px 10px;
    padding-left:15px;
    background-color: #ddd;
    border-radius: 20px;
    margin-right:10px;
}
    .votes {
        align-items: center;
        font-size: 20px;
        margin-bottom: 0px;
    }
    .vote-count {
        margin-right: 4px;
    }
    .comments {
        color: #000;
        font-size: 14px;
        cursor: pointer;
        text-align: center;
    }
    .description-container {
    }
    .description {
        color: #333;
        font-size: 16px;
        text-align: left;
    }
    .timestamp {
        color: #999;
        font-size: 12px;
        text-align: right;
        align-items: center;
    }
    .comment-box {
        margin-left: 70px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-bottom: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        text-align: left;
        padding:5px;
        padding-top:10px;
        align-items:center;
    }
    .type-feature {
        background-color: #d5fdd5;
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 12px;
        margin-right: 8px;
        color:#000;
    }
    .type-bug {
        background-color: #ffbbbb;
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 12px;
        margin-right: 8px;
        color:#000;
    }

    .type-comment {
        background-color: #dddddd;
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 12px;
        margin-right: 8px;
        color:#000;
        cursor: pointer;
    } 

    .type-time {
        background-color: #fff;
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 12px;
        margin-right: 8px;
        color:#000;
        border:1px solid #e0e0e0;
        border-radius: 8px;
    } 

    
    .your-post-container {
    margin-top:10px;
    padding: 5px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #d5fdd5;
    color: black;
    font-size: 13px;
    box-sizing: border-box;
    align-items: center;
    text-align: center;
    width: 145px;
}

.notify-me-container {
    display: none;
    margin-top:10px;
    padding: 5px 10px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #f9f9f9;
    color: black;
    font-size: 13px;
    box-sizing: border-box;
    align-items: center;
    width: 145px;
}

    .star {
        color: gold;
        font-size: 30px;
        margin-right: 5px;
        position: absolute;
        left: -50px;
        top: 50%;
        transform: translateY(-50%);
    }
    .add-comment {
        margin-left: 70px;
        padding: 10px;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-bottom: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
        text-align: left;
        position: relative;
        background-color: #f9f9f9;
    }
    .add-comment textarea {
        width: calc(100% - 20px);
        padding: 10px;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
        resize: none;
    }
    .add-comment button {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        margin-top: 10px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
    }
    .add-comment button:hover {
        background-color: #45a049;
    }
    .votes-comments-container {}

    .admin-tag {
    background-color: #d4ebf2;
    color: black;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    margin-right: 8px;
    }    

    .hello-container {
    margin-top: 10px;
    padding: 5px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background-color: #f9f9f9;
    color: black;
    width: 100px;
    font-size: 13px;
    box-sizing: border-box;
    position: absolute;
    right: -107px;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    text-align: center;
}
</style>

<div id='Requested' class='tabcontent'><br><br>No requests in this area yet - check back later or <a href='login.php'>log in</a> to send in your own request!
        <div class="table-container">
                    </div>
    </div>
<div id='InProgress' class='tabcontent'><br><br>No requests in this area yet - check back later or <a href='login.php'>log in</a> to send in your own request!
        <div class="table-container">
                    </div>
    </div>
<div id='Completed' class='tabcontent'><br><br>No requests in this area yet - check back later or <a href='login.php'>log in</a> to send in your own request!
        <div class="table-container">
                    </div>
    </div>
<br><br>

<script>
document.addEventListener('DOMContentLoaded', function () {


  document.querySelectorAll('.thumbs-up').forEach(function(thumb) {
      thumb.addEventListener('click', function() {
          var requestid = this.id.split('-').pop();
          var voteCount = document.getElementById('vote-count-' + requestid);
          var count = parseInt(voteCount.textContent);

          if (this.classList.contains('blue')) {
              this.classList.remove('blue');
              voteCount.textContent = count - 1;
              generalAJAX('updateThumbs'+requestid,'/includes/ajax.php','?function=RemoveRequestVote&requestid='+requestid);
            } else {
              this.classList.add('blue');
              voteCount.textContent = count + 1;
              generalAJAX('updateThumbs'+requestid,'/includes/ajax.php','?function=addRequestVote&requestid='+requestid);
          }

          var notifyMe = document.getElementById('notify-' + requestid);
          if (notifyMe) {
              notifyMe.style.display = this.classList.contains('blue') ? 'flex' : 'none';
          }
      });
  });

  document.querySelectorAll('.type-comment').forEach(function(commentToggle) {
      commentToggle.addEventListener('click', function() {
          var requestid = this.id.split('-').pop();
          var commentSection = document.getElementById('comments-section-' + requestid);
          commentSection.style.display = commentSection.style.display === 'block' ? 'none' : 'block';
      });
  });

  document.querySelectorAll('input[id^="notify-checkbox-"]').forEach(function(checkbox) {
      checkbox.addEventListener('change', function() {
          var requestid = this.id.split('-').pop();
          if (this.checked) {
            generalAJAX('updateThumbs'+requestid,'/includes/ajax.php','?function=AddRequestSubscription&requestid='+requestid);
          } else {
            generalAJAX('updateThumbs'+requestid,'/includes/ajax.php','?function=RemoveRequestSubscription&requestid='+requestid);
          }
      });
  });

  // Initialize comment sections as hidden
  document.querySelectorAll('[id^="comments-section-"]').forEach(function(section) {
      section.style.display = 'none';
  });
});
</script>