/* /////////////////////////////////////////////////
////  PERIODIC TABLE ///////////////////////////
//////////////////////////////////////////////// */

( function ( $ ) {
  'use strict';



  $(document).ready(function() {

    $('#nonmetal').mouseenter(function() {
      $('#periodicTable').find('div.ppActive').removeClass("ppActive").addClass("ppInActive");
      $('#periodicTable').find('div.ppLaAcCell').addClass("ppInActive");
      $('#periodicTable').find('div.ppCell.nonmetal').removeClass("ppInActive").addClass("ppActive");
      // var elementType = $(this).find('.ppColorCodeName').text();
      // var $html = '<div class="elementClassTitle"> ' + elementType + '</div> '
      // $('.ppInfo').html($html);
      // fRemoveInfoClass();
      // $('.ppInfo').addClass('nonmetal');
      // fShowInfo();
    });
    $('#nonmetal').mouseleave(function() {
      $('#periodicTable').find('div.ppInActive').removeClass("ppInActive").addClass("ppActive");
      $('#periodicTable').find('div.ppLaAcCell').removeClass("ppActive");
      // fHideInfo();
    });

    $('#alkali').mouseenter(function() {
      $('#periodicTable').find('div.ppActive').removeClass("ppActive").addClass("ppInActive");
      $('#periodicTable').find('div.ppLaAcCell').addClass("ppInActive");
      $('#periodicTable').find('div.ppCell.alkali').removeClass("ppInActive").addClass("ppActive");
      // var elementType = $(this).find('.ppColorCodeName').text();
      // var $html = '<div class="elementClassTitle"> ' + elementType + '</div> '
      // $('.ppInfo').html($html);
      // fRemoveInfoClass();
      // $('.ppInfo').addClass('alkali');
      // fShowInfo();
    });
    $('#alkali').mouseleave(function() {
      $('#periodicTable').find('div.ppInActive').removeClass("ppInActive").addClass("ppActive");
      $('#periodicTable').find('div.ppLaAcCell').removeClass("ppActive");
      // fHideInfo();
    });

    $('#alkaliearth').mouseenter(function() {
      $('#periodicTable').find('div.ppActive').removeClass("ppActive").addClass("ppInActive");
      $('#periodicTable').find('div.ppCell.alkaliearth').removeClass("ppInActive").addClass("ppActive");
      $('#periodicTable').find('div.ppLaAcCell').addClass("ppInActive");
      // var elementType = $(this).find('.ppColorCodeName').text();
      // var $html = '<div class="elementClassTitle"> ' + elementType + '</div> '
      // $('.ppInfo').html($html);
      // fRemoveInfoClass();
      // $('.ppInfo').addClass('alkaliearth');
      // fShowInfo();
    });
    $('#alkaliearth').mouseleave(function() {
      $('#periodicTable').find('div.ppInActive').removeClass("ppInActive").addClass("ppActive");
      $('#periodicTable').find('div.ppLaAcCell').removeClass("ppActive");
      // fHideInfo();
    });

    $('#transmetal').mouseenter(function() {
      $('#periodicTable').find('div.ppActive').removeClass("ppActive").addClass("ppInActive");
      $('#periodicTable').find('div.ppCell.transmetal').removeClass("ppInActive").addClass("ppActive");
      $('#periodicTable').find('div.ppLaAcCell').addClass("ppInActive");
      // var elementType = $(this).find('.ppColorCodeName').text();
      // var $html = '<div class="elementClassTitle"> ' + elementType + '</div> '
      // $('.ppInfo').html($html);
      // fRemoveInfoClass();
      // $('.ppInfo').addClass('transmetal');
      // fShowInfo();
    });
    $('#transmetal').mouseleave(function() {
      $('#periodicTable').find('div.ppInActive').removeClass("ppInActive").addClass("ppActive");
      $('#periodicTable').find('div.ppLaAcCell').removeClass("ppActive");
      // fHideInfo();
    });

    $('#postmetal').mouseenter(function() {
      $('#periodicTable').find('div.ppActive').removeClass("ppActive").addClass("ppInActive");
      $('#periodicTable').find('div.ppCell.postmetal').removeClass("ppInActive").addClass("ppActive");
      $('#periodicTable').find('div.ppLaAcCell').addClass("ppInActive");
      // var elementType = $(this).find('.ppColorCodeName').text();
      // var $html = '<div class="elementClassTitle"> ' + elementType + '</div> '
      // $('.ppInfo').html($html);
      // fRemoveInfoClass();
      // $('.ppInfo').addClass('postmetal');
      // fShowInfo();
    });
    $('#postmetal').mouseleave(function() {
      $('#periodicTable').find('div.ppInActive').removeClass("ppInActive").addClass("ppActive");
      $('#periodicTable').find('div.ppLaAcCell').removeClass("ppActive");
      // fHideInfo();
    });

    $('#metalloid').mouseenter(function() {
      $('#periodicTable').find('div.ppActive').removeClass("ppActive").addClass("ppInActive");
      $('#periodicTable').find('div.ppCell.metalloid').removeClass("ppInActive").addClass("ppActive");
      $('#periodicTable').find('div.ppLaAcCell').addClass("ppInActive");
      // var elementType = $(this).find('.ppColorCodeName').text();
      // var $html = '<div class="elementClassTitle"> ' + elementType + '</div> '
      // $('.ppInfo').html($html);
      // fRemoveInfoClass();
      // $('.ppInfo').addClass('metalloid');
      // fShowInfo();
    });
    $('#metalloid').mouseleave(function() {
      $('#periodicTable').find('div.ppInActive').removeClass("ppInActive").addClass("ppActive");
      $('#periodicTable').find('div.ppLaAcCell').removeClass("ppActive");
      // fHideInfo();
    });

    $('#halogen').mouseenter(function() {
      $('#periodicTable').find('div.ppActive').removeClass("ppActive").addClass("ppInActive");
      $('#periodicTable').find('div.ppCell.halogen').removeClass("ppInActive").addClass("ppActive");
      $('#periodicTable').find('div.ppLaAcCell').addClass("ppInActive");
      // var elementType = $(this).find('.ppColorCodeName').text();
      // var $html = '<div class="elementClassTitle"> ' + elementType + '</div> '
      // $('.ppInfo').html($html);
      // fRemoveInfoClass();
      // $('.ppInfo').addClass('halogen');
      // fShowInfo();
    });
    $('#halogen').mouseleave(function() {
      $('#periodicTable').find('div.ppInActive').removeClass("ppInActive").addClass("ppActive");
      $('#periodicTable').find('div.ppLaAcCell').removeClass("ppActive");
      // fHideInfo();
    });

    $('#noblegas').mouseenter(function() {
      $('#periodicTable').find('div.ppActive').removeClass("ppActive").addClass("ppInActive");
      $('#periodicTable').find('div.ppCell.noblegas').removeClass("ppInActive").addClass("ppActive");
      $('#periodicTable').find('div.ppLaAcCell').addClass("ppInActive");
      // var elementType = $(this).find('.ppColorCodeName').text();
      // var $html = '<div class="elementClassTitle"> ' + elementType + '</div> '
      // $('.ppInfo').html($html);
      // fRemoveInfoClass();
      // $('.ppInfo').addClass('noblegas');
      // fShowInfo();
    });
    $('#noblegas').mouseleave(function() {
      $('#periodicTable').find('div.ppInActive').removeClass("ppInActive").addClass("ppActive");
      $('#periodicTable').find('div.ppLaAcCell').removeClass("ppActive");
      // fHideInfo();
    });

    $('#lanthanides').mouseenter(function() {
      $('#periodicTable').find('div.ppActive').removeClass("ppActive").addClass("ppInActive");
      $('#periodicTable').find('div.ppLaAcCell.actinides').addClass("ppInActive");
      $('#periodicTable').find('div.ppCell.lanthanides').removeClass("ppInActive").addClass("ppActive");
      // var elementType = $(this).find('.ppColorCodeName').text();
      // var $html = '<div class="elementClassTitle"> ' + elementType + '</div> '
      // $('.ppInfo').html($html);
      // fRemoveInfoClass();
      // $('.ppInfo').addClass('lanthanides');
      // fShowInfo();
    });
    $('#lanthanides').mouseleave(function() {
      $('#periodicTable').find('div.ppInActive').removeClass("ppInActive").addClass("ppActive");
      $('#periodicTable').find('div.ppLaAcCell').removeClass("ppActive");
      // fHideInfo();
    });

    $('#actinides').mouseenter(function() {
      $('#periodicTable').find('div.ppActive').removeClass("ppActive").addClass("ppInActive");
      $('#periodicTable').find('div.ppLaAcCell.lanthanides').addClass("ppInActive");
      $('#periodicTable').find('div.ppCell.actinides').removeClass("ppInActive").addClass("ppActive");
      // var elementType = $(this).find('.ppColorCodeName').text();
      // var $html = '<div class="elementClassTitle"> ' + elementType + '</div> '
      // $('.ppInfo').html($html);
      // fRemoveInfoClass();
      // $('.ppInfo').addClass('actinides');
      // fShowInfo();
    });
    $('#actinides').mouseleave(function() {
      $('#periodicTable').find('div.ppInActive').removeClass("ppInActive").addClass("ppActive");
      $('#periodicTable').find('div.ppLaAcCell').removeClass("ppActive");
      // fHideInfo();
    });


    ////////////////////////////////////////////
    //// DISPLAY ELEMENT INFO ON MOUSE OVER //// HOME PAGE!!!!!!!!!!!!!!!
    ///////////////////////////////////////////

    // $('.ppActive').mouseenter(function() {
    $('.ppActive').on('click', function() {
      if ($(this).hasClass('ppActive')) {

        $('.ppInfo').css('opacity', '0');


        if ($(this).hasClass('halogen')) {
          var elementType = 'Αλογόνα'
          var elementClass = 'halogen'
        };
        if ($(this).hasClass('nonmetal')) {
          var elementType = 'Αμέταλλα'
          var elementClass = 'nonmetal'
        }
        if ($(this).hasClass('transmetal')) {
          var elementType = 'Στοιχεία Μετάπτωσης'
          var elementClass = 'transmetal'
        };
        if ($(this).hasClass('postmetal')) {
          var elementType = 'Άλλα μέταλλα'
          var elementClass = 'postmetal'
        };
        if ($(this).hasClass('alkali')) {
          var elementType = 'Αλκάλια'
          var elementClass = 'alkali'
        };
        if ($(this).hasClass('alkaliearth')) {
          var elementType = 'Αλκαλικές γαίες'
          var elementClass = 'alkaliearth'
        };
        if ($(this).hasClass('noblegas')) {
          var elementType = 'Ευγενή αέρια'
          var elementClass = 'noblegas'
        };
        if ($(this).hasClass('metalloid')) {
          var elementType = 'Μεταλλοειδή'
          var elementClass = 'metalloid'
        };
        if ($(this).hasClass('lanthanides')) {
          var elementType = 'Λανθανίδες'
          var elementClass = 'lanthanides'
        };
        if ($(this).hasClass('actinides')) {
          var elementType = 'Ακτινίδες'
          var elementClass = 'actinides'
        };


        var $atomicNumber = $(this).find('.ppAtomicNumber').text();
        var $symbol = $(this).find('.ppSymbol').text();
        var $element = $(this).find('.ppName').text();
        var $bohr = $(this).find('.ppBohr').html();

        var $html = '<div class="ppInfoTitle"> ' + elementType + '</div> <div class="ppInfoAtomicNumber"> ' + $atomicNumber + '</div>  <div class="ppInfoSymbol">' + $symbol + '</div><div class="ppInfoName">' + $element + '</div>';
        
        if ($atomicNumber <= 20) {
          $html += '<div class="ppMoreInfo"><a href="#" data-bs-toggle="modal" data-bs-target="#element' + $atomicNumber + '">Μάθετε Περισσότερα</a></div><div class="ppAtom"><img src="images/atom-' + $atomicNumber + '.png" /></div><div class="ppBohr">Ηλεκτρονιακή δομή<br/>' + $bohr + '</div>';
        
        }
        $('.ppInfo').html($html);

        fRemoveInfoClass();
        $('.ppInfo').addClass(elementClass);
        fShowInfo();
      };
    });


    function fRemoveInfoClass() {
      $('.ppInfo').removeClass("halogen nonmetal transmetal postmetal alkali alkaliearth noblegas metalloid lanthanides actinides");
    };

    function fHideInfo() {
      $('.ppInfo').animate({
        opacity: 0
      }, {
        queue: false,
        duration: 200
      })
    }

    function fShowInfo() {
      $('.ppInfo').animate({
        opacity: 1,
      }, {
        queue: false,
        duration: 400
      })
    }

    $('.ppCell').mouseleave(function() {
      // fHideInfo()
    });
  
    $('#periodicTable').mouseleave(function() {
      // fHideInfo()
    });

    $('.ppEmptyCell').mouseover(function() {
      // fHideInfo()
    });

  });

} ( jQuery ) )
/* /////////////////////////////////////////////////
////  END PERIODIC TABLE ///////////////////////////
//////////////////////////////////////////////// */
