MediaWiki:Common.js: Difference between revisions

From :: ChromeRivals Wiki ::
Jump to navigation Jump to search
No edit summary
No edit summary
Line 673: Line 673:
});
});


// Collapse part of tables
$(document).ready(function() {
$('.JS-Toggle').click(function() {
$(this).closest('table').find('.JS-Toggle-Row').toggle();
          });
      });
     
// Mission Table Script to color monster numbers and Before SPI values
// Mission Table Script to color monster numbers and Before SPI values
$('.MT-Value > ul > li').each(function() {
$('.MT-Value > ul > li').each(function() {

Revision as of 11:03, 24 April 2024

// Under Construction Page
// Set this variable to true to enable the script and false to disable it
var scriptEnabled = false;

// Check if the user is logged in
function checkUserLoggedIn() {
    if (!scriptEnabled) return; // Check if the script is enabled

    var apiUrl = mw.config.get('wgScriptPath') + '/api.php';
    
    $.ajax({
        url: apiUrl,
        dataType: 'json',
        data: {
            action: 'query',
            meta: 'userinfo',
            format: 'json'
        },
        success: function(data) {
            if (data && data.query && data.query.userinfo && data.query.userinfo.id !== 0) {
                // User is logged in, do nothing
                console.log('Construction Page active - User is logged in');
            } else {
                // User is not logged in, run the script
                console.log('Construction Page active - User is not logged in, running the script');
                runScript();
            }
        },
        error: function(xhr, status, error) {
            console.error('Error occurred while checking user login status:', error);
        }
    });
}

// Function to run the script for non-logged-in users
function runScript() {
    if (!scriptEnabled) return; // Check if the script is enabled

var css = 
    'body {' +
    '  overflow: hidden ' +   /* Remove if want OFF */
    '}' +
    '' +
    '#UnderC {' +
    '  display:flex; ' +    /* put "display:none!important" if want OFF */
    '  width:100%;' +
    '  height:100%;' +
    '  top:0;' +
    '  z-index:99;' +
    '  background-color: gray;' +
    '  position:fixed;' +
    '  align-items:center;' +
    '  justify-content:center;' +
    '  flex-direction:column;' +
    '  background-image:linear-gradient(to right, #232526 30%, #414345 70%);' +
    '  user-select:none;' +
    '}' +
    '' +
    '#UnderC img {' +
    '  max-width: 90%;' + // New CSS rule
    '}' +
    '' +
    '#UnderC p  {' +
    '  font-family:hacked;' +
    '  margin-top:2em;' +
    '  font-size:2em' +
    '}' +
    '' +
    '#content, #mw-panel, #footer, #p-search, #left-navigation {' +
    '  display:none;' +
    '}';
    // Create a style element
    var style = document.createElement('style');
    style.appendChild(document.createTextNode(css));

    // Append the style to the head of the document
    document.head.appendChild(style);

    // Create a new div element
    var UnderC = document.createElement("div");

    // Set some attributes for the div (optional)
    UnderC.id = "UnderC";

    // Create an image element
    var image = document.createElement("img");
    image.src = "/images/6/6e/CR_Wiki_Logo_1267x204_wrap_crop.png";
    image.alt = "CR Wiki Logo"; // Optional, alt attribute for accessibility

    // Append the image to the UnderC
    UnderC.appendChild(image);

    // Create a paragraph element for the text
    var paragraph = document.createElement("p");
    paragraph.textContent = "Under maintenance ";

    // Append the paragraph to the UnderC
    UnderC.appendChild(paragraph);

    // Get a reference to the element with id "content"
    var contentElement = document.getElementById("content");

    // Insert the new div before the content element
    document.body.insertBefore(UnderC, contentElement);
}

// Call the function when the DOM is ready
$(document).ready(function() {
    checkUserLoggedIn();
});

  
// Tabber loading animation
$(function() {
    // Check if .tabber element is present on the page
    if ($('.tabber').length) {
      // Create and append the loader dynamically
      var loader = $('<div class="loader"></div>').hide();
      $('body').append(loader);

      // Display the loading spinner
      loader.show();

      // Simulate a delay for demonstration purposes
      setTimeout(function() {
        // Hide the loading spinner
        loader.hide();
        // Show the tabber element after loading is complete
        $('.tabber').show();
      }, 2000); // 2s as element fully loads on page
    }
  });
  
// Tabs loading animation (New Tabber)
$(document).ready(function() {
    setTimeout(function() {
        $('.tabs, .tabs-tabbox').animate({
            opacity: 1,
            top: '0'
        }, 'slow');
    }, 300);
});

// Fixes Table hover script
$(document).ready(function () {
    // When hovering over a cell in any FixesTable
    $('.FixesTable').each(function () {
        var currentTable = $(this);

        currentTable.find('td, th').hover(function () {
            // Get the index of the cell's column
            var columnIndex = $(this).index();

            // Exclude the first column (index 0)
            if (columnIndex > 0) {
                // Remove highlight from the previous column within the same table
                currentTable.find('td, th').filter(':nth-child(' + (columnIndex + 1) + ')').addClass('highlight');
            }
        }, function () {
            // Remove highlight from all columns within the same table when not hovering
            currentTable.find('td, th').removeClass('highlight');
        });
    });
});


// Toggle Fixes Tables
$(document).ready(function() {
    var tableBefore1 = $('#TableBefore1');
    var weaponFixBtn = $('.WeaponFixBtn');

    weaponFixBtn.click(function() {
      // Toggle the styles
      if (tableBefore1.css('max-height') === '100%') {
        tableBefore1.css({
          'max-height': '50em',
          'overflow-y': 'auto'
        });
        weaponFixBtn.text('Expand');
      } else {
        tableBefore1.css({
          'max-height': '100%',
          'overflow-y': 'initial'
        });
        weaponFixBtn.text('Collapse');
      }
    });
  });

$(document).ready(function() {
    var tableBefore2 = $('#TableBefore2');
    var armorFixBtn = $('.ArmorFixBtn');

    armorFixBtn.click(function() {
      // Toggle the styles
      if (tableBefore2.css('max-height') === '100%') {
        tableBefore2.css({
          'max-height': '50em',
          'overflow-y': 'auto'
        });
        armorFixBtn.text('Expand');
      } else {
        tableBefore2.css({
          'max-height': '100%',
          'overflow-y': 'initial'
        });
        armorFixBtn.text('Collapse');
      }
    });
  });

$(document).ready(function() {
    var tableBefore3 = $('#TableBefore3');
    var PETFixBtn = $('.PETFixBtn');

    PETFixBtn.click(function() {
      // Toggle the styles
      if (tableBefore3.css('max-height') === '100%') {
        tableBefore3.css({
          'max-height': '50em',
          'overflow-y': 'auto'
        });
        PETFixBtn.text('Expand');
      } else {
        tableBefore3.css({
          'max-height': '100%',
          'overflow-y': 'initial'
        });
        PETFixBtn.text('Collapse');
      }
    });
  });

// Toggle Sidebar
$(document).ready(function() {
    // Function to get the current state from local storage
    function getState() {
        return localStorage.getItem('sidebarState') === 'expanded';
    }

    // Function to save the current state to local storage
    function saveState(isExpanded) {
        localStorage.setItem('sidebarState', isExpanded ? 'expanded' : 'collapsed');
    }

    // Create a new div element for the sidebar toggle button
    var newDiv = $('<div class="SidePanelButton" title="Click to expand/collapse the Sidebar"><span>&#x25C0;</span></div>');

    // Find the left-navigation element by its ID
    var leftNavigation = $('#left-navigation');

    // Insert the new div into the left-navigation element
    if (leftNavigation.length) {
        leftNavigation.append(newDiv);
    }

    // Function to update the UI based on the current state
    function updateUI(isExpanded) {
        $('#content, #left-navigation, #footer').css({
            'margin-left': isExpanded ? '0' : '176px',
            'transition': 'margin-left 0.3s ease'
        });

        $('#mw-panel').css({
            'transform': isExpanded ? 'translateX(-176px)' : 'translateX(0)',
            'transition': 'transform 0.3s ease'
        });

        $('#p-logo a').css({
            'margin-left': isExpanded ? '9em' : '0',
            'transform': isExpanded ? 'scale(0.65) translateY(-3em)' : 'scale(1) translateY(0)',
            'transition': 'transform 0.3s ease, margin-left 0.3s ease, margin-top 0.3s ease'
        });

        newDiv.find('span').html(isExpanded ? '&#x25B6;' : '&#x25C0;');

        newDiv.css({
            'margin-left': isExpanded ? '7em' : '0',
            'transition': 'margin-left 0.3s ease'
        });
    }

    // Initialize the state based on local storage
    var isExpanded = getState();
    updateUI(isExpanded);

    // Add click event handler to the sidebar button
    newDiv.on('click', function() {
        // Toggle the 'expanded' class on the leftNavigation element
        leftNavigation.toggleClass('expanded');

        // Check if the sidebar is currently expanded
        isExpanded = leftNavigation.hasClass('expanded');

        // Save the current state to local storage
        saveState(isExpanded);

        // Update the UI based on the current state
        updateUI(isExpanded);
    });
});

//Side panel script (separate headers)
$(document).ready(function () {
    var headers = $('#mw-panel h3');

    headers.each(function (index, header) {
        if (index !== 0 && index !== 1) {
            var arrow = $('<span class="toggle-arrow">&#x25BC;</span>');
            arrow.attr('title', 'Click to expand/collapse');
            $(header).append(arrow);

            $(header).click(function () {
                var nextElement = $(this).next();

                while (nextElement.length !== 0 && !nextElement.is('h3')) {
                    if (nextElement.is(':hidden')) {
                        nextElement.slideDown('fast');
                        arrow.text('\u25B2');
                        // Save toggle state in a cookie
                        document.cookie = 'toggleState-' + index + '=expanded; path=/';
                    } else {
                        nextElement.slideUp('fast');
                        arrow.text('\u25BC');
                        // Remove toggle state cookie
                        document.cookie = 'toggleState-' + index + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
                    }
                    nextElement = nextElement.next();
                }
            });

            // Retrieve toggle state from cookie
            var savedToggleState = getCookie('toggleState-' + index);
            if (savedToggleState === 'expanded') {
                var contentToShow = $(header).nextUntil('h3').filter('p, ul, div');
                contentToShow.show();
                arrow.text('\u25B2');
            } else {
                var contentToHide = $(header).next();

                while (contentToHide.length !== 0 && !contentToHide.is('h3')) {
                    contentToHide.hide();
                    contentToHide = contentToHide.next();
                }
            }
        }
    });

    // Expand the third header on script load (1st = 0, 2nd = 1 etc..)
    var thirdHeader = headers.eq(2);
    var thirdContent = thirdHeader.nextUntil('h3').filter('p, ul, div');
    var thirdArrow = thirdHeader.find('.toggle-arrow');

    // Check if the third header has a saved state
    var savedThirdToggleState = getCookie('toggleState-2');
    if (savedThirdToggleState === 'expanded') {
        thirdContent.show();
        thirdArrow.text('\u25B2');
    } else {
        thirdContent.hide();
        thirdArrow.text('\u25BC');
    }

    // Function to get a cookie value by name
    function getCookie(name) {
        var match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
        if (match) return match[2];
    }
});


// Bottom scroll buttons
        $(document).ready(function() {
            // Scroll-to-top button
            var scrollToTopBtn = document.createElement("div");
            scrollToTopBtn.className = "scroll-btn";
            scrollToTopBtn.id = "scrollToTopBtn";
            scrollToTopBtn.innerHTML = "&#x25B2"; // Unicode character for an upward-pointing arrow
            scrollToTopBtn.title = "Scroll to Top"; // Tooltip text
            document.body.appendChild(scrollToTopBtn);

/*            // Random page button 
            var randomPageBtn = document.createElement("div");
            randomPageBtn.className = "scroll-btn";
            randomPageBtn.id = "randomPageBtn";
            randomPageBtn.innerHTML = "&#x1F3B2"; // Unicode character for a dice
            randomPageBtn.title = "Psst.. Wanna check some random page?";
            document.body.appendChild(randomPageBtn);*/

/*            // Info page button 
            var InfoPageBtn = document.createElement("div");
            InfoPageBtn.className = "scroll-btn";
            InfoPageBtn.id = "infoPageBtn";
            InfoPageBtn.innerHTML = "&#x003F;"; // Unicode character for question mark
            InfoPageBtn.title = "If you have any suggestions or found some bugs/incorrect information about this wiki, please contact Ranzu#4202 on ChromeRivals Discord.";
            document.body.appendChild(InfoPageBtn);*/

            // Show/hide the buttons based on page scroll
            window.onscroll = function() {
                scrollFunction();
            };

            function scrollFunction() {
                if (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) {
                    scrollToTopBtn.style.display = "block";
                    // randomPageBtn.style.display = "block";
                    // InfoPageBtn.style.display = "block";
                } else {
                    scrollToTopBtn.style.display = "none";
                    // randomPageBtn.style.display = "none";
                    // InfoPageBtn.style.display = "none";
                }
            }

            // Scroll to the top of the page with animation
            scrollToTopBtn.addEventListener("click", function() {
                scrollToTopAnimated();
            });

            function scrollToTopAnimated() {
                var start = document.documentElement.scrollTop || document.body.scrollTop;
                var duration = 300; // duration in milliseconds
                var startTime = null;

                function scrollStep(timestamp) {
                    if (!startTime) startTime = timestamp;
                    var progress = Math.min((timestamp - startTime) / duration, 1);

                    document.body.scrollTop = start + progress * (0 - start);
                    document.documentElement.scrollTop = start + progress * (0 - start);

                    if (progress < 1) {
                        window.requestAnimationFrame(scrollStep);
                    }
                }

                window.requestAnimationFrame(scrollStep);
            }

            // // Add click event for the random-page button
            // randomPageBtn.addEventListener("click", function() {
            //     window.location.href = "https://wiki.chromerivals.net/index.php?title=Special:Random";
            // });
            
            // // Add click event for the info button
            // InfoPageBtn.addEventListener("click", function() {
            //     window.location.href = "https://discord.chromerivals.net";
            // });
        });
        
/*
// Add New tab - Timer
$.when(mw.loader.using('mediawiki.util'), $.ready).then(
  function () {
    mw.util.addPortletLink('p-views', '', '', 'server-time-href', '', 'accesskey', '#ca-view');
  }
);


// Current Event Tab
+(function () {
  var eventData = fetch('https://api.chromerivals.net/info/server/events', {
    method: 'GET',
    headers: {
      'Cr-Api-Key': 'CR-Wiki-Public-jagAA4388DSfjk3'
    }
  }).then(function (response) {
    return response.json();
  });
  $.when(mw.loader.using('mediawiki.util'), $.ready).then(function () {
    setTimeout(function () {
      eventData.then(function (response) {
        var event = '';
        if (response.result.length == 0) {
          event += '<li class="mw-list-item mw-list-item-js" id="current-events-no">Current Events <br> There are no events running</li>';
        } else {
          //event += '<li class="mw-list-item mw-list-item-js current-events" id="current-events-no">Current Events <br></li>';    
          for (var i = 0; i < response.result.length; i++) {
            var eventName = response.result[i].mapsName.replaceAll(/\\./g, '');
            event += '<li class="mw-list-item mw-list-item-js current-events" id="=current-events-' + i + '">' + '<img src="https://download.chromerivals.net/resources/maps/big/' + response.result[i].maps[0] + '.png" width="30px">' + 'Current Events <br>' + eventName + '</li>';
          }
        }
        $(event).insertAfter("#server-time-href");
        var clockTime = function clockTime() {
          var date = new Date();
          var label = document.getElementById('server-time-label');
          var href = document.getElementById('server-time-href');
          if (label) label.innerHTML = date.toLocaleTimeString('en-gb', {
            timeZone: "etc/GMT-1",
            hour12: false
          });
          if (href) href.innerHTML = 'Server Time <br>' + date.toLocaleString('en-gb', {
            timeZone: "etc/GMT-1",
            timeZoneName: 'short',
            hour12: false
          });
        };
        clockTime();
        setInterval(clockTime, 1000);
      });
    }, 10); // Make sure we are after the droplet is added. Better would be to signal this from the addPortletLink code
  });
})();
*/

/* Notes
PortletID:
p-namespaces - Left tab
p-views - Right tab
pt-userpage - Top tab
*/

/*
// Footer
// CC
var element = document.createElement("div");
element.id = "footerCC";
document.getElementById('footer').appendChild(element);
 
document.getElementById('footerCC').innerHTML = '<p xmlns:cc="http://creativecommons.org/ns#" >This work is licensed under <a href="http://creativecommons.org/licenses/by/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY 4.0<img alt="Creative Commons Attribution Icon" src="https://wiki.chromerivals.net/images/c/c6/Attribution_icon_white_x2.png"><img alt="Creative Commons Attribution Icon 2" src="https://wiki.chromerivals.net/images/1/15/Cc_icon_white_x2.png"></a></p>';

// PoweredBY
var element = document.createElement("div");
element.id = "footerPBY";
document.getElementById('footer').appendChild(element);
 
document.getElementById('footerPBY').innerHTML = '<a href="http://chromerivals.net/" target="_blank"> <img src="https://wiki.chromerivals.net/images/f/f4/Poweredby.png"></a>';
*/

// Create CC element
var elementCC = document.createElement("div");
elementCC.id = "footerCC";
elementCC.innerHTML = '<p xmlns:cc="http://creativecommons.org/ns#" >This work is licensed under <a href="http://creativecommons.org/licenses/by/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY 4.0<img alt="Creative Commons Attribution Icon" src="https://wiki.chromerivals.net/images/c/c6/Attribution_icon_white_x2.png"><img alt="Creative Commons Attribution Icon 2" src="https://wiki.chromerivals.net/images/1/15/Cc_icon_white_x2.png"></a></p>';

// Create PoweredBY element
var elementPBY = document.createElement("div");
elementPBY.id = "footerPBY";
elementPBY.innerHTML = '<a href="http://chromerivals.net/" target="_blank"> <img src="https://wiki.chromerivals.net/images/f/f4/Poweredby.png"></a>';

// Append both elements to the footer
var footer = document.getElementById('footer');
footer.appendChild(elementCC);
footer.appendChild(elementPBY);




/*
// Countdown Timer - CDTimer
// <div id="CDTimer" title="TEXT"></div> / Update the LINK(561) and END_TEXT(568) below 
// Set the date we're counting down to
var countDownDate = new Date("Mar 16, 2024 22:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

  // Get today's date and time
  var now = new Date().getTime();
    
  // Find the distance between now and the count down date
  var distance = countDownDate - now;
    
  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
  // Output the result in an element with id="CDTimer"
	document.getElementById("CDTimer").innerHTML = "<a href='LINK'>" + days + "<span>d&nbsp;</span>" + hours + "<span>h&nbsp;</span>" + minutes + "<span>m&nbsp;</span>" + seconds + "<span>s&nbsp;</span></a>";
  // Fade-in animation
   document.getElementById("CDTimer").style.opacity = 1;
  
  // If the count down is over, write some text 
  if (distance < 0) {
    clearInterval(x);
    document.getElementById("CDTimer").innerHTML = "END_TEXT";
  }
}, 1000);
*/

// Row click link TableShops, CrystalShop(s)
$(document).ready(function() {
    var rows = $('.TableShops, .ShopsTable, .CrystalShop1, .CrystalShop2, .CrystalShop3').find('tr');
    rows.on('click', function() {
        var row = $(this);
        console.log(row);
        if (row.find('a') !== null) {
            window.location = row.find('a').attr('href');
        }
    });       
});


// Cell click link CRPShopTable
$(document).ready(function() {
    var rows = $('.CRPShopTable').find('td');
    rows.on('click', function() {
        var row = $(this);
        console.log(row);
        if (row.find('a') !== null) {
            window.location = row.find('a').attr('href');
        }
    });       
});


// Tooltip on whole row hover FixesTable
var rows = $('.FixesTable').find('tr');
rows.each(function() {
    var row = $(this);
    row.attr('title', row.find('td').attr('title'));
});

// New expand/collapse button - all
$(document).ready(function() {
var coll = document.getElementsByClassName("ToggleElement");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
  
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
});

// New expand/collapse BUTTON - text
$(document).ready(function(){
	$(".ToggleElement").click(function(){
		$(this).text($(this).text() == 'Expand' ? 'Collapse' : 'Expand');
		});
    });
   
// New expand/collapse button - animation
$(document).ready(function(){
var coll = document.getElementsByClassName("ToggleElement");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.maxHeight){
      content.style.maxHeight = null;
    } else {
      content.style.maxHeight = content.scrollHeight + "1px";
    }
  });
}
});

// New expand/collapse TABLE
$(document).ready(function(){
  $(".r-collapsible-table").click(function(){
    var $table = $(this).closest('table');
    var $rows = $table.find('tr').not(':has(.r-collapsible-title)');
    $rows.toggle();
  });

// Collapse tables by default
$(".r-collapsed").each(function() {
    var $table = $(this).closest('table');
    var $rows = $table.find('tr').not(':has(.r-collapsible-title)');
    $rows.hide();
  });
});

// Collapse part of tables
$(document).ready(function() {
	$('.JS-Toggle').click(function() {
		$(this).closest('table').find('.JS-Toggle-Row').toggle();
           });
       });
       
// Mission Table Script to color monster numbers and Before SPI values
$('.MT-Value > ul > li').each(function() {
    var text = $(this).text();
    if (text.includes('SPI')) {
        var index = text.indexOf('SPI');
        $(this).html('<span style="color:black">' + text.substring(0, index) + '</span>' + text.substring(index));
    }
    var numbersWithX = text.match(/\d+x/g);
    if (numbersWithX) {
        numbersWithX.forEach(function(num) {
            text = text.replace(num, '<span style="color:black">' + num + '</span>');
        });
        $(this).html(text);
    }
});

// Characters Page Selector
$(document).ready(function() {

if ( mw.config.get( 'wgPageName' ) === 'Characters' ) {
$('.FirstActive').addClass('on');
    }
});

$(document).ready(function() {
if ( mw.config.get( 'wgPageName' ) === 'Characters' ) {
$("img").click(function(){
	$("img").removeClass('on');
	$(this).addClass('on');
	
});
}
});

// Characters Page
$(document).ready(function(){
	$("#CharactersTable > table > tbody > tr:nth-child(1) > td:nth-child(1) > img").click(function(){ //selector
	document.querySelector("#CharName").innerHTML="<b>Name</b>: Ceris Valdergrann";
	document.querySelector("#CharAge").innerHTML="<b>Age</b>: 28";
	document.querySelector("#CharHeight").innerHTML="<b>Height</b>: 172 cm";
	document.querySelector("#CharWeight").innerHTML="<b>Weight</b>: 52 kg";
	document.querySelector("#CharDesc").innerHTML="She is a gifted pilot with great practical abilities with her GEAR. As beautiful as she is skilled, Ceris is one of the best known pilots to date. Her character is not introspective, but she has a strange atmosphere around her that makes it hard for others to talk to her. Therefore she doesn't have many friends. Just a little drop of alcohol turns her though into a very talkative person. Usually, she talks very frankly and abusively, but when she had a drink she changes completely and becomes a very communicative and funny person. She has a somewhat dark side, and tends to think deeply about things in a pessimistic manner, turning her into being very cold and unforgiving in combat. She has a peculiar voice that can be identified as soon as one hears her transmission. The art of her speech seems to have a special power which motivates and activates other people. However, she also has a dull side to her character. She is slow at calculations and inexperienced concerning the world. Recently, she was interested in a duet with Lena Anderson, a former operator, now a government official. After the outbreak of the war, she was disgusted with the present Bygeniou government, and moved to A.N.I, which is of anti-government character. There, she met the person she may be destined to spend her life with.";
	document.getElementById("CharactersImgContainer").innerHTML="<img src=/images/0/01/Ceris.png>";
        });
    });

$(document).ready(function(){
	$("#CharactersTable > table > tbody > tr:nth-child(2) > td:nth-child(1) > img").click(function(){ //selector
	document.querySelector("#CharName").innerHTML="<b>Name</b>: Jennifer Alexandria";
	document.querySelector("#CharAge").innerHTML="<b>Age</b>: 28";
	document.querySelector("#CharHeight").innerHTML="<b>Height</b>: 165 cm";
	document.querySelector("#CharWeight").innerHTML="<b>Weight</b>: 42 kg";
	document.querySelector("#CharDesc").innerHTML="She is an unlucky pilot who was raised in an unfortunate environment. When she was young, she lost her father, an aviation mechanic, and her mother, a nurse, by a bombing from a Phillon attack. At the age of 3 she was sent to an orphanage. A cold image and her fierce eyes shadow her inner character of awful sadness and pure sensitivity. Her original dream was to become a writer, but her drive to avenge her parents' death led her to become a pilot. However, she does not regret her choice. Her determination and impulse are outstanding, and her quick judgment and resolution stand out to others who watch her. Due to her memories of her youth, she bears a big antipathy towards the anti-government, so she stays at B.C.U. Her record of the war in her diary plays a great part as a history book after the war.";
	document.getElementById("CharactersImgContainer").innerHTML="<img src=/images/c/ce/Jennifer.png>";
        });
    });
	
$(document).ready(function(){
	$("#CharactersTable > table > tbody > tr:nth-child(3) > td:nth-child(1) > img").click(function(){ //selector
	document.querySelector("#CharName").innerHTML="<b>Name</b>: Heilyss Gile Railbrande";
	document.querySelector("#CharAge").innerHTML="<b>Age</b>: 20";
	document.querySelector("#CharHeight").innerHTML="<b>Height</b>: 162 cm";
	document.querySelector("#CharWeight").innerHTML="<b>Weight</b>: 49 kg";
	document.querySelector("#CharDesc").innerHTML="The youngest person to ever become a combat pilot. Even though the beginning rank is Staff sergeant, she is only at the age of a private in the regular army. Her passionate, positive and optimistic characteristics make others always happy to be around her. Above all, her special record of minor dubbing artist makes her more lovable to other comrades. In other words, she is like a mascot of the army. Quite normal, she is a shy girl who loves to sleep, is interested in boys of her age and loves chocolate, snacks and candies. When it comes to combat though, she shows great concentration and aptitude, her contributions are greatly positive for the development of any situation. Her flighty personality and her three-forked hair are parts of her charm. Even at an early age her national conception is definite and her patriotism is strong. So she stays in B.C.U Aerial Cry and with this, she parts from her mentor Ceris Valdergrann.";
	document.getElementById("CharactersImgContainer").innerHTML="<img src=/images/f/f4/Gile.png>";    
        });
    });
	
$(document).ready(function(){
	$("#CharactersTable > table > tbody > tr:nth-child(4) > td:nth-child(1) > img").click(function(){ //selector
	document.querySelector("#CharName").innerHTML="<b>Name</b>: Renia Rain";
	document.querySelector("#CharAge").innerHTML="<b>Age</b>: 25";
	document.querySelector("#CharHeight").innerHTML="<b>Height</b>: 167 cm";
	document.querySelector("#CharWeight").innerHTML="<b>Weight</b>: 44 kg";
	document.querySelector("#CharDesc").innerHTML="She is the second lieutenant of the 2nd information HQ under the Decaian regular army which has Bygeniou City as the center. She is the second daughter of the Bygeniou citys regular army commander, but this information remains secret. Within the army she is known as Renia Howard, using her fathers middle name. While she was at university she double majored in space aeronautics and computer science, still finishing 2 years earlier than the others. After her studies the airforce recognized her abilities and scouted her. They gave her the privilege of a commission to the rank of second lieutenant. Extremely proficient in information analysis, part of her excellent talent, she is a vital part of the 2nd information HQ. As she belongs to the Bygeniou government, she is assigned to B.C.U, but not very fond of this situation. She is cheerful and broad-minded, but full of mischief. Right now, she is in love with Narrwiettue Marrer who isn t in love with her.";
	document.getElementById("CharactersImgContainer").innerHTML="<img src=/images/3/34/Renia.png>";    
        });
    });

$(document).ready(function(){
	$("#CharactersTable > table > tbody > tr:nth-child(5) > td:nth-child(1) > img").click(function(){ //selector
	document.querySelector("#CharName").innerHTML="<b>Name</b>: Cristine Yeena Schumaiihel";
	document.querySelector("#CharAge").innerHTML="<b>Age</b>: 22";
	document.querySelector("#CharHeight").innerHTML="<b>Height</b>: 170 cm";
	document.querySelector("#CharWeight").innerHTML="<b>Weight</b>: 52 kg";
	document.querySelector("#CharDesc").innerHTML="An economics student of world's best university, 'Aribe Academy,' she is left her schooling for personal reasons. Her reason for staying out of school is because she is eldest of Schumaiihel the family, where many famous pilots were raised. She joined the air force with her parents' solicitation and influence. After successful flight at the age of 20, she joined the regular army, but was disgusted at its command system and resigned some time after. She left with the highest flight distance to sortie ratio, shoot-down ratio, and survival percentage than that of any female pilot. With cheerful characteristics, she was loved by others. Her, easy yet refined characteristics earned her many friends of the opposite sex, but she herself does not think of them as a boyfriends. But even Yeena has one person that she loves, and that is 'Michael Bogman Guierrhajre.' When the war started to form composition, she joins 'Etranger Chevalier' of the A.N.I against the wishes of her family. It is still to be seen whether she is going to meet her lover Micheal at the battlefield.";
	document.getElementById("CharactersImgContainer").innerHTML="<img src=/images/6/6e/Yeena.png>";    
        });
    });

$(document).ready(function(){
	$("#CharactersTable > table > tbody > tr:nth-child(6) > td:nth-child(1) > img").click(function(){ //selector
	document.querySelector("#CharName").innerHTML="<b>Name</b>: Agnes Alicia";
	document.querySelector("#CharAge").innerHTML="<b>Age</b>: 127";
	document.querySelector("#CharHeight").innerHTML="<b>Height</b>: 175 cm";
	document.querySelector("#CharWeight").innerHTML="<b>Weight</b>: 27 kg";
	document.querySelector("#CharDesc").innerHTML="Youngest daughter of Agnes royal family. After her realization of Vatallus' dark intention, she defected to the Decan Nations. She is actively participating in FreeSKA mercenary army as Princess of Vatallus and also as a pilot. With her family longing for her return, she has her reasons other than justice that lead her to FreeSKA mercenary army. Her admiration and love for Krueitoen Andersson. But with no idea about her love, he only focuses in leading the team. Agnes Alicia's flight style fully emphasizes her status as princess of the royal family. With her attention to detail, and strong flight skills, she is one of the best in the mercenary army.";
	document.getElementById("CharactersImgContainer").innerHTML="<img src=/images/1/11/Alicia.png>";    
        });
    });

$(document).ready(function(){
	$("#CharactersTable > table > tbody > tr:nth-child(7) > td:nth-child(1) > img").click(function(){ //selector
	document.querySelector("#CharName").innerHTML="<b>Name</b>: Karin";
	document.querySelector("#CharAge").innerHTML="<b>Age</b>: Unknown";
	document.querySelector("#CharHeight").innerHTML="<b>Height</b>: Unknown";
	document.querySelector("#CharWeight").innerHTML="<b>Weight</b>: Unknown";
	document.querySelector("#CharDesc").innerHTML="Unknown";
	document.getElementById("CharactersImgContainer").innerHTML="<img src=/images/5/50/Karin.png>";    
        });
    });

$(document).ready(function(){
	$("#CharactersTable > table > tbody > tr:nth-child(8) > td:nth-child(1) > img").click(function(){ //selector
	document.querySelector("#CharName").innerHTML="<b>Name</b>: Monique";
	document.querySelector("#CharAge").innerHTML="<b>Age</b>: Unknown";
	document.querySelector("#CharHeight").innerHTML="<b>Height</b>: Unknown";
	document.querySelector("#CharWeight").innerHTML="<b>Weight</b>: Unknown";
	document.querySelector("#CharDesc").innerHTML="Unknown";
	document.getElementById("CharactersImgContainer").innerHTML="<img src=/images/d/dc/Monique.png>";    
        });
    });


$(document).ready(function(){
	$("#CharactersTable > table > tbody > tr:nth-child(1) > td:nth-child(2) > img").click(function(){ //selector
	document.querySelector("#CharName").innerHTML="<b>Name</b>: Narrwiettue Marrer";
	document.querySelector("#CharAge").innerHTML="<b>Age</b>: 26";
	document.querySelector("#CharHeight").innerHTML="<b>Height</b>: 178 cm";
	document.querySelector("#CharWeight").innerHTML="<b>Weight</b>: 69 kg";
	document.querySelector("#CharDesc").innerHTML="He is an excellent pilot who establishes the best formations with Michael Bogman Guierrhajre. His abilities are shown by his achievements which are impressive to say at least. His control ability is miraculous with 277 operation sorties, bringing down 16,211 enemy planes, 13.4% damage rate, and a flight distance of 1443,214 km - but especially by not refusing missions in gorges, valleys and mountain ranges where flying is very hard. He is known as a natural leader in his field. His official rank is first lieutenant, but the mercenary army doesn't pay much attention to rank. In fact there are no others than the operation commander and the Chief of staff who can order this charismatic and skillful person. He has a hot temper mixing with a very strong ambition for victory. He doesn't talk much, has a stern appearance, and is fairly impatient. It pains him to see his old comrades and friends separating into B.C.U and A.N.I for whatever reason. He tends to follow his instincts and ends up at A.N.I. - though the choice was not due to political reasons but of a match against his most formidable rival, Michael Bogman Guierrhajre. He is a pragmatic person who values friendship higher than money - and comrades' more than superior officers.";
	document.getElementById("CharactersImgContainer").innerHTML="<img src=/images/b/bc/Narrwiettue.png>";    
        });
    });

$(document).ready(function(){
	$("#CharactersTable > table > tbody > tr:nth-child(2) > td:nth-child(2) > img").click(function(){ //selector
	document.querySelector("#CharName").innerHTML="<b>Name</b>: Michael Bogman Guierrhajre";
	document.querySelector("#CharAge").innerHTML="<b>Age</b>: 29";
	document.querySelector("#CharHeight").innerHTML="<b>Height</b>: 182 cm";
	document.querySelector("#CharWeight").innerHTML="<b>Weight</b>: 68 kg";
	document.querySelector("#CharDesc").innerHTML="A top-notch pilot but very cold-blooded and bears the call sign \"Cold Tower\", that's Narrwiettue Marrer. He has achieved great results in battle with calm and daring judgment. Judging from his outward appearance, he looks highly sensitive with lean looks, making him hard to approach. Because of this, he is a bit of a loner. In fact, he does not talk much and when he talks, it comes with high persuasive power, so his comrades avoid him. He does have a sense of humor, but most find hard to grasp, which doesn't really bother him. He also possesses high class combat programming skills. He used to be a lover of Cristine Yeena Schumaiihel of the same unit but they broke up due to character differences. Recently, love rose again between them. Unlike his looks, he has a simple, non-flexible brain which makes him an object of ridicule from time to time. These character traits and thoughts make him stay at B.C.U, as he does not want to immerse himself in a new group. Later, he becomes a pilot of Aerial Cry.";
	document.getElementById("CharactersImgContainer").innerHTML="<img src=/images/f/f3/Michael.png>";    
        });
    });

$(document).ready(function(){
	$("#CharactersTable > table > tbody > tr:nth-child(3) > td:nth-child(2) > img").click(function(){ //selector
	document.querySelector("#CharName").innerHTML="<b>Name</b>: Hamed Al Arii";
	document.querySelector("#CharAge").innerHTML="<b>Age</b>: 24";
	document.querySelector("#CharHeight").innerHTML="<b>Height</b>: 182 cm";
	document.querySelector("#CharWeight").innerHTML="<b>Weight</b>: 74 kg";
	document.querySelector("#CharDesc").innerHTML="He is a humorous person, being the center of attention within the mercenary soldier squad because of his cheerful and optimistic disposition. He volunteered to join the army at the age of 18. Flight training was conducted at the age of 20 and, 2 years later, he participated as one of the I-GEAR test pilots. At the age of 24 he joined the war in the regular army but struggling with the strict military laws and continuous interference from officials, he resigned from the army. At present, he is actively participating as a pilot in various programs. Although he is crazy about money, he is also a spender who enjoys drinking with his comrades. Because of all the drinking, his financial standing is precarious to say the least. His family consists of 3 sisters and himself with him as second eldest in his family. Even though he is a little stubborn and waywardly, his sunny character enables him to have little ill will to anyone so he doesn't hold grudges. He is not married, although he has proposed to another pilot in the same unit and was flatly rebuffed. Later, he became dissatisfied with the Bygeniou regular force and joined A.N.Is Etranger Chevalier.";
	document.getElementById("CharactersImgContainer").innerHTML="<img src=/images/8/86/Hamed.png>";    
        });
    });

$(document).ready(function(){
	$("#CharactersTable > table > tbody > tr:nth-child(4) > td:nth-child(2) > img").click(function(){ //selector
	document.querySelector("#CharName").innerHTML="<b>Name</b>: Michell Sevastianne Atelier";
	document.querySelector("#CharAge").innerHTML="<b>Age</b>: 30";
	document.querySelector("#CharHeight").innerHTML="<b>Height</b>: 188 cm";
	document.querySelector("#CharWeight").innerHTML="<b>Weight</b>: 83 kg";
	document.querySelector("#CharDesc").innerHTML="He used to be a basketball player and photographer. He keeps his head shaved, as a reminder for the time when he played basketball. Everyone gets along well with him as he is very humorous and enjoys playing a joke, unlike his looks. He likes to show off, throwing himself into any situation with gusto. His photography skills are excellent, so when he is not at the battlefield, he goes to the air and takes panoramic views of the beautiful Phillon planet. With these pictures, he opened an exhibition. The reactions to his exhibition were surprisingly great, so he opens his exhibition at regular intervals. Although he always makes other people laugh and happy, he has a lot of dignity and pride within himself as he has first-class knowledge and experience about piloting. He has Ceris Valdergrann in his heart but he was always too shy to confess his true feelings to her. When the war started and everyone broke up due to their political or individual reason, he followed Ceris Valdergrann to A.N.I. His GEAR ability lacks a little bit, but when his knowledge from 20 years of exercise and precise judgment comes into play, it is shown most satisfactory.";
	document.getElementById("CharactersImgContainer").innerHTML="<img src=images/e/e1/Atelier.png>";    
        });
    });

$(document).ready(function(){
	$("#CharactersTable > table > tbody > tr:nth-child(5) > td:nth-child(2) > img").click(function(){ //selector
	document.querySelector("#CharName").innerHTML="<b>Name</b>: Krueitoen Andersson";
	document.querySelector("#CharAge").innerHTML="<b>Age</b>: 43";
	document.querySelector("#CharHeight").innerHTML="<b>Height</b>: 188 cm";
	document.querySelector("#CharWeight").innerHTML="<b>Weight</b>: 85 kg";
	document.querySelector("#CharDesc").innerHTML="This guy is acting as a drill instructor and as the commander of the mercenary army. His call sign is \"Skyrunner\". With his realistic way of thinking, charisma and strong leadership he unites the mercenary unit, turning it into a well-oiled machine. Originally he used to have a strong accent but it is much better now. Only in emergency situations his accent comes back into play. From first impressions, he is not much to look at and people tend to underestimate him. He has a vast knowledge of the GEARs design and mechanisms, so he personally maintains his rookie gears from time to time. As a native of the Bygeniou regular army, he joined B.C.U, but it does not look like he is thinking that the Bygeniou government is correct. There seem to be more reasons for him staying at B.C.U. than is apparent. He is a very good example of the old saying: \"Never judge a book by its cover.\".";
	document.getElementById("CharactersImgContainer").innerHTML="<img src=/images/6/6c/Krueitoen.png>";    
        });
    });

$(document).ready(function(){
	$("#CharactersTable > table > tbody > tr:nth-child(6) > td:nth-child(2) > img").click(function(){ //selector
	document.querySelector("#CharName").innerHTML="<b>Name</b>: Yamak Barbatos";
	document.querySelector("#CharAge").innerHTML="<b>Age</b>: 142";
	document.querySelector("#CharHeight").innerHTML="<b>Height</b>: 186 cm";
	document.querySelector("#CharWeight").innerHTML="<b>Weight</b>: 112 kg";
	document.querySelector("#CharDesc").innerHTML="Being a renowned warrior in Vatallus, he is the bodyguard for Agnes Alicia. Also a promising pilot, Yamak volunteered for the position of bodyguard when he had an opportunity to be part of the government. The reason behind such actions was his love for Alicia. By working as her bodyguard, he too joined FreeSKA mercenary army automatically. Although his recent finding of Alicia's love for Krueitoen Andersson has left him heartbroken, but he has never mentioned any word about it. He is willing to risk his life for Alicia, which continues to refine is combat skill. His flight style is very aggressive, most often charging into battle with extreme finesse.";
	document.getElementById("CharactersImgContainer").innerHTML="<img src=/images/f/f3/Barbatos.png>";    
        });
    });

$(document).ready(function(){
	$("#CharactersTable > table > tbody > tr:nth-child(7) > td:nth-child(2) > img").click(function(){ //selector
	document.querySelector("#CharName").innerHTML="<b>Name</b>: Ian";
	document.querySelector("#CharAge").innerHTML="<b>Age</b>: Unknown";
	document.querySelector("#CharHeight").innerHTML="<b>Height</b>: Unknown";
	document.querySelector("#CharWeight").innerHTML="<b>Weight</b>: Unknown";
	document.querySelector("#CharDesc").innerHTML="Unknown";
	document.getElementById("CharactersImgContainer").innerHTML="<img src=/images/1/1c/Ian.png>";    
        });
    });

$(document).ready(function(){
	$("#CharactersTable > table > tbody > tr:nth-child(8) > td:nth-child(2) > img").click(function(){ //selector
	document.querySelector("#CharName").innerHTML="<b>Name</b>: Nivram";
	document.querySelector("#CharAge").innerHTML="<b>Age</b>: Unknown";
	document.querySelector("#CharHeight").innerHTML="<b>Height</b>: Unknown";
	document.querySelector("#CharWeight").innerHTML="<b>Weight</b>: Unknown";
	document.querySelector("#CharDesc").innerHTML="Unknown";
	document.getElementById("CharactersImgContainer").innerHTML="<img src=/images/4/47/Nivram.png>";    
        });
    });
    
// Skills Pages
$(document).ready(function() {
    var lastClicked = "";

    for (var i = 1; i <= 24; i++) {
        $(".Skills.Sk_" + i).click(function(num) {
            return function() {
                if (lastClicked === "Sk_" + num) {
                    $(".Skills.Sk_" + num).css({
                        "background-color": "",
                        "outline": ""
                    });
                    $(".Skills-Output").html("");
                    lastClicked = "";
                } else {
                    toggleText("Sk_" + num, $(".Skills-Input-" + num).html());
                    $(".Skills.Sk_" + num).css({
                        "background-color": "#4A4A4A",
                        "outline": "1px solid white"
                    });
                    $('html, body').animate({
                        scrollTop: $(".Skills-Output").offset().top
                    }, 500); // Scroll duration
                }
            };
        }(i));
    }

    function toggleText(className, content) {
        if (lastClicked !== "") {
            $(".Skills." + lastClicked).css({
                "background-color": "",
                "outline": ""
            });
        }
        $(".Skills-Output").html(content);
        lastClicked = className;
    }
});

// Hover sript
$(document).ready(function(){
  $('body').on('mouseenter', '.SkillTable tr', function(){
      $(this).addClass('highlight');
      if ($(this).next('tr').find('td').length == 1) {
          $(this).next('tr').addClass('highlight');
      } else if ($(this).find('td').length == 1) {       
          $(this).prev('tr').addClass('highlight');
      }
  });
  $('body').on('mouseleave', '.SkillTable tr', function(){
      $(this).removeClass('highlight');
      if ($(this).next('tr').find('td').length == 1) {
          $(this).next('tr').removeClass('highlight');
      } else if ($(this).find('td').length == 1) {      
          $(this).prev('tr').removeClass('highlight');
      }
  });
});