/* The padding and border are included in the total width and height of the elements. */
* {box-sizing: border-box;}
/* Mobile first */
/* Define width of col- */
.gr-col-xs-1 {width: 8.33%;}
.gr-col-xs-2 {width: 16.66%;}
.gr-col-xs-3 {width: 25%;}
.gr-col-xs-4 {width: 33.33%;}
.gr-col-xs-5 {width: 41.66%;}
.gr-col-xs-6 {width: 50%;}
.gr-col-xs-7 {width: 58.33%;}
.gr-col-xs-8 {width: 66.66%;}
.gr-col-xs-9 {width: 75%;}
.gr-col-xs-10 {width: 83.33%;}
.gr-col-xs-11 {width: 91.66%;}
.gr-col-xs-12 {width: 100%;}
.gr-container {
  width: 100%;
  margin: 0 auto;
}
.gr-container-full {
  width: 100%;
  margin: 0 auto;
}
.gr-img-responsive{
  width: 100%;
  max-width: 220px;
  height: auto;
}
h1 {font-size: 40px;}
h2 {font-size: 20px;}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 
  .gr-col-sm-1 {width: 8.33%;}
  .gr-col-sm-2 {width: 16.66%;}
  .gr-col-sm-3 {width: 25%;}
  .gr-col-sm-4 {width: 33.33%;}
  .gr-col-sm-5 {width: 41.66%;}
  .gr-col-sm-6 {width: 50%;}
  .gr-col-sm-7 {width: 58.33%;}
  .gr-col-sm-8 {width: 66.66%;}
  .gr-col-sm-9 {width: 75%;}
  .gr-col-sm-10 {width: 83.33%;}
  .gr-col-sm-11 {width: 91.66%;}
  .gr-col-sm-12 {width: 100%;}
  .gr-container {width: 100%;}
  .gr-img-responsive{max-width: 280px;}
  h1 {font-size: 40px;}
  h2 {font-size: 20px;}
}
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
  .gr-col-md-1 {width: 8.33%;}
  .gr-col-md-2 {width: 16.66%;}
  .gr-col-md-3 {width: 25%;}
  .gr-col-md-4 {width: 33.33%;}
  .gr-col-md-5 {width: 41.66%;}
  .gr-col-md-6 {width: 50%;}
  .gr-col-md-7 {width: 58.33%;}
  .gr-col-md-8 {width: 66.66%;}
  .gr-col-md-9 {width: 75%;}
  .gr-col-md-10 {width: 83.33%;}
  .gr-col-md-11 {width: 91.66%;}
  .gr-col-md-12 {width: 100%;}
  .gr-container {width: 750px;}
  .gr-img-responsive{max-width: 330px;}
  h1 {font-size: 60px;}
  h2 {font-size: 30px;}
}
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  .gr-col-lg-1 {width: 8.33%;}
  .gr-col-lg-2 {width: 16.66%;}
  .gr-col-lg-3 {width: 25%;}
  .gr-col-lg-4 {width: 33.33%;}
  .gr-col-lg-5 {width: 41.66%;}
  .gr-col-lg-6 {width: 50%;}
  .gr-col-lg-7 {width: 58.33%;}
  .gr-col-lg-8 {width: 66.66%;}
  .gr-col-lg-9 {width: 75%;}
  .gr-col-lg-10 {width: 83.33%;}
  .gr-col-lg-11 {width: 91.66%;}
  .gr-col-lg-12 {width: 100%;}
  .gr-container {width: 900px;}
  .gr-img-responsive{max-width: 330px;}
  h1 {font-size: 72px;}
  h2 {font-size: 36px;}
}
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
  .gr-col-xl-1 {width: 8.33%;}
  .gr-col-xl-2 {width: 16.66%;}
  .gr-col-xl-3 {width: 25%;}
  .gr-col-xl-4 {width: 33.33%;}
  .gr-col-xl-5 {width: 41.66%;}
  .gr-col-xl-6 {width: 50%;}
  .gr-col-xl-7 {width: 58.33%;}
  .gr-col-xl-8 {width: 66.66%;}
  .gr-col-xl-9 {width: 75%;}
  .gr-col-xl-10 {width: 83.33%;}
  .gr-col-xl-11 {width: 91.66%;}
  .gr-col-xl-12 {width: 100%;}
  .gr-container {width: 1080px;}
  .gr-img-responsive{max-width: 350px;}
  h1 {font-size: 72px;}
  h2 {font-size: 36px;}
}
[class*="gr-col-"] {
  float: left;
  padding: 15px;
}
/* Define row */
.gr-row::after {
  content: "";
  clear: both;
  display: table;
}

* {font-family: Helvetica, Arial, sans-serif;}
body {margin: 0;}
a{
  color: #19232D;
  transition: color .3s ease-in;
  -webkit-transition: color .3s ease-in;
  -moz-transition: color .3s ease-in;
}
a:hover {
  color: #F98639;
  transition: color .3s ease-out;
  -webkit-transition: color .3s ease-out;
  -moz-transition: color .3s ease-out;
}
.my-box-shadow{
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.line-horizontal{
  height: 1px;
  color:#ccc;
  background-color: #ccc;
  border: none;
}
/* Header */
.my-title {
  color: #19232D;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.site-branding {text-align: center;}
.my-description {color: rgb(103, 105, 107);}
.primary-color{color: #19232D;}
.secondary-color{color: #F98639;}
.my-img-profile{
  border-radius: 50%;
  margin: 15px;
}
.my-social{margin: 0;}
.my-social i {
  padding: 0 10px;
  transform: scale(1.25);
  transition: transform .3s ease-in;
  -webkit-transition: transform .3s ease-in;
  -moz-transition: transform .3s ease-in;
}
.my-social i:hover{
  transform: scale(1.75);
  transition: transform .3s ease-out;
  -webkit-transition: transform .3s ease-out;
  -moz-transition: transform .3s ease-out;
}
/* Section */
.my-section {
  color: #19232D;
  text-transform: uppercase;
  text-align: center;
}
.my-section::after {
  content: "";
  display: block;
  border: 3px solid #F98639;
  width: 50px;
  margin: 7px auto;
}
.sub-section {
  text-transform: uppercase;
}
.sub-section:not(:first-child) {padding-top: 12px;}
.sub-section:first-child{margin-top: 0px;}
.sub-section::after{
  content: "";
  display: block;
  border: 2px solid #F98639;
  width: 50px;
  margin: 7px 0;
}
/* About me */
#about-me {
  background-color: #e7e7e7;
  padding: 50px;
}
.to-primary-color {
  background-color: #fafafa !important;
  transition: background-color .4s ease-out;
  -webkit-transition: background-color .4s ease-out;
  -moz-transition: background-color .4s ease-out;
}
#about-me li, p a {
  line-height: 22px;
  font-size: medium;
}
#about-me .p-last{margin-bottom: 0px;}
/* Skills */
.progress-bar{
  height: 14px;
  margin-left: 10px;
  margin-right: 10px;
  display: inline-block;
  background-color: rgba(249, 134, 57, 1);
  transition: background-color .3s ease, width 1.45s ease-in-out;
  -webkit-transition: background-color .3s ease, width 1.45s ease-in-out;
  -moz-transition: background-color .3s ease, width 1.45s ease-in-out;
}
.progress-bar:hover{
  background-color:rgba(249, 134, 57, 0.75);
  transition: background-color .3s ease;
  -webkit-transition: background-color .3s ease;
  -moz-transition: background-color .3s ease;
}
.skill-text-align {text-align: right;}
.progress-bar.html-css{width: 0;}
.progress-bar.javascript{width: 0;}
.progress-bar.bootstrap-jquery{width: 0;}
.progress-bar.angularjs{width: 0;}
.progress-bar.nodejs-expressjs{width: 0;}
.progress-bar.c-cpp{width: 0;}
.progress-bar.java-android{width: 0;}
.progress-bar.algorithm{width: 0;}
.progress-bar.git-github{width: 0;}
.progress-bar.gimp{width: 0;}
/* Portfilio */
.my-img-portfolio{
  max-width: 100% !important;
}
.portfolio-title{color: #19232D;}
.portfolio-title a{text-decoration: none;}
.portfolio-description{
  text-align: justify;
  color: rgb(103, 105, 107);
  font-size: small;
}
.portfolio-row a.img-link:hover{
  background-color: #F98639;
  transition: background-color .3s ease-out;
  -webkit-transition: background-color .3s ease-out;
  -moz-transition: background-color .3s ease-out;
}
.portfolio-tag{
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 2px;
  color: #aaa;
  font-size: 14px;
  float: left;
  margin-right: 5px;
}
.portfolio-row-see-more{text-align: center;}
.portfolio-see-more{
  border: 1px solid #666;
  border-radius: 2px;
  text-transform: uppercase;
  padding: 5px 40px;
  font-size: 14px;
  text-align: center;
  margin: 0px auto;
  color: #666;
  background-color: #ffffff;
  cursor: pointer;
  transition: .4s ease-in;
  -webkit-transition: .4s ease-in;
  -webkit-transition: .4s ease-in;
}
.portfolio-see-more:hover {
  color: #ffffff;
  background-color: #F98639;
  border: 1px solid #F98639;
  transition: .4s ease-out;
  -webkit-transition: .4s ease-out;
  -webkit-transition: .4s ease-out;
}
/* Contact */
#contact-me{
  background-color: #fafafa;
  margin: 30px 100px;
  padding: 15px;
}
form label{color: #19232D;}
form input, textarea{
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
}
form input[type=text], input[type=email], textarea{
  border: 1px solid #ccc;
  border-radius: 2px;
  -webkit-transition: border 0.4s;
  -moz-transition: border 0.4s;
  transition: border 0.4s;
}
form input[type=text]:focus, input[type=email]:focus, textarea:focus { 
  border: 1px solid #F98639;
  outline: none;
}
form textarea {
  resize: vertical;
  -moz-resize: vertical;
  height: 7em;
}
form input[type="submit"] {
  background-color: #F98639;
  border: none;
  border-radius: 2px;
  color: #ffffff;
  font-size: medium;
  text-transform: uppercase;
  cursor: pointer;
}
form input[type="submit"]:hover {background-color: rgb(248, 126, 45);}
.contact-text{text-align: center; color: #19232D;}
/* Footer */
footer {
  background-color: #19232D;
  text-align: center;
  color: #ffffff;
}
footer p {margin: 0px;}
footer a {color: #ffffff;}
/* Navigation Bar */
.first-element {margin-top: 32px;}
.fixed-top {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
}
.navbar {
  background-color: #19232D;
  overflow: hidden;
}
.navbar a {
  float: left;
  display: block;
  color: #ffffff;
  padding: 14px 16px;
  font-size: 17px;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  background-color: #19232D;
  transition: background-color .45s ease-out;
  -webkit-transition: background-color .45s ease-out;
  -moz-transition: background-color .45s ease-out;
}
.navbar a:not(.active):hover {
  background-color: #000000;
  transition: background-color .45s ease-out;
  -webkit-transition: background-color .45s ease-out;
  -moz-transition: background-color .45s ease-out;
}
.navbar .active {background-color: #F98639;}
.navbar .icon {display: none;}
.navbar .menu {float: right;}
.navbar .brand a {
  pointer-events: none; 
  font-weight: bold;
}
/* Mobile */
@media (max-width: 767px) {
  .navbar .menu {float: none;}
  .navbar .menu a {display: none;}
  .navbar a.icon {
    display: block;
    float: right;
    font-size: 15px;
  }
  .navbar.responsive {position: relative;}
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  /* About me */
  #about-me{padding: 20px;}
  #contact-me{margin: 30px 0px;}
  /* Skills */
  .skill-text-align {
    text-align: left;
    margin-left: 10px;
    padding-bottom: 0px;
    padding-top: 0px;
  }
  .progress-bar-wrapper{padding-top: 8px;}
}

/** 
 * Scrolling to top before unloading page
*/
window.onbeforeunload = function () {
  window.scrollTo(0, 0);
}

$(document).ready(function(){
  let initTable = {}, menuClicked = false;
  let targetScroll, timer;
  let menuItems = $(".menu a:not(#navicon)");
  let hashItems = menuItems.map(function(){
    return $(this).attr("href");
  });

  const skillset = {
    "html-css": "70%",
    "javascript": "75%",
    "bootstrap-jquery": "55%",
    "angularjs": "65%",
    "nodejs-expressjs": "60%",
    "c-cpp": "80%",
    "java-android": "75%",
    "algorithm": "80%",
    "git-github": "70%"
  };

  let portfolioTable = {
    curRow : 2,
    curCol : 3
  }
  let portfolioTemplate = $('#portfolio-item-template').html();
  const portfolioItems = [
    {
      "link-view": "javascript:void(0);",
      "alt-image": "portfolio image",
      "path-image": "https://res.cloudinary.com/drcrre4xg/image/upload/v1520604052/comming-soon-completejavascript.com_bqvjt2.png",
      "title": "A JavaScript Calculator",
      "tags" : ["HTML5", "CSS3"]
    },
    {
      "link-view": "javascript:void(0);",
      "alt-image": "portfolio image",
      "path-image": "https://res.cloudinary.com/drcrre4xg/image/upload/v1520604052/comming-soon-completejavascript.com_bqvjt2.png",
      "title": "A Pomodoro Clock",
      "tags" : ["HTML5", "CSS3"]
    },
    {
      "link-view": "javascript:void(0);",
      "alt-image": "portfolio image",
      "path-image": "https://res.cloudinary.com/drcrre4xg/image/upload/v1520604052/comming-soon-completejavascript.com_bqvjt2.png",
      "title": "A Tic Tac Toe Game",
      "tags" : ["HTML5", "CSS3"]
    },
    {
      "link-view": "javascript:void(0);",
      "alt-image": "portfolio image",
      "path-image": "https://res.cloudinary.com/drcrre4xg/image/upload/v1520604052/comming-soon-completejavascript.com_bqvjt2.png",
      "title": "A Simon Game",
      "tags" : ["HTML5", "CSS3"]
    },
    {
      "link-view": "javascript:void(0);",
      "alt-image": "portfolio image",
      "path-image": "https://res.cloudinary.com/drcrre4xg/image/upload/v1520604052/comming-soon-completejavascript.com_bqvjt2.png",
      "title": "A Markdown Previewer",
      "tags" : ["HTML5", "CSS3"]
    },
    {
      "link-view": "javascript:void(0);",
      "alt-image": "portfolio image",
      "path-image": "https://res.cloudinary.com/drcrre4xg/image/upload/v1520604052/comming-soon-completejavascript.com_bqvjt2.png",
      "title": "A Camper Leaderboard",
      "tags" : ["HTML5", "CSS3"]
    },
    {
      "link-view": "javascript:void(0);",
      "alt-image": "portfolio image",
      "path-image": "https://res.cloudinary.com/drcrre4xg/image/upload/v1520604052/comming-soon-completejavascript.com_bqvjt2.png",
      "title": "A Recipe Box",
      "tags" : ["HTML5", "CSS3"]
    },
    {
      "link-view": "javascript:void(0);",
      "alt-image": "portfolio image",
      "path-image": "https://res.cloudinary.com/drcrre4xg/image/upload/v1520604052/comming-soon-completejavascript.com_bqvjt2.png",
      "title": "The Game of Life",
      "tags" : ["HTML5", "CSS3"]
    },
    {
      "link-view": "javascript:void(0);",
      "alt-image": "portfolio image",
      "path-image": "https://res.cloudinary.com/drcrre4xg/image/upload/v1520604052/comming-soon-completejavascript.com_bqvjt2.png",
      "title": "A Roguelike Dungeon Crawler Game",
      "tags" : ["HTML5", "CSS3"]
    }
  ];

  // Handle clicking toggle menu icon
  $("#navicon").click(function(){
    $("#mynav").toggleClass("responsive");
  });

  // Open link all links in a new tab, except links with '#' in the beginning
  $("a:not([href^='#'])").attr("target", "_blank");

  // Handle clicking navigation menu item except toggle menu icon
  $(".menu a:not(#navicon)").click(function(){
    menuClicked = true;
    activateMenu(this);
    $("#mynav").removeClass("responsive");
  });

  // Activate clicked menu item
  function activateMenu(menuItem) {
    $(menuItem).parent().children().removeClass("active");
    $(menuItem).addClass("active");
  }

  // Smooth scrolling
  $("a[href*='#']:not([href='#'])").click(function () {
    targetScroll = $(this).attr("href");
    $('html,body').stop().animate({
      scrollTop: $(targetScroll).offset().top - 32 // First element's marginTop = 32px
    }, 1000);
    event.preventDefault();
  });

  // Handle Scroll Windows
  // Update menu while scrolling
  $(window).scroll(function() {
    if (timer) {
      window.clearTimeout(timer);
    }
    timer = window.setTimeout(handleScrollEvent, 100);
  });

  // Function handles Scrolling Event
  function handleScrollEvent() {
    if (!menuClicked) {
      for(let i = 0; i < hashItems.length; i++) {
        let item = $(hashItems[i]);
        if (isInViewPort(item)) {
          if (!item.hasClass("active")) {
            // Scale at first time
            initSection(hashItems[i], 0);
            activateMenu($('.menu a[href="' + hashItems[i] + '"]'));
          }
          break;
        } 
      }
    } else {
      initSection(targetScroll, 0);
      menuClicked = false;
    }
  }

  // Check whether element is in viewport
  function isInViewPort(element){
    let elementTop = $(element).offset().top;
    let elementBottom = elementTop + $(element).outerHeight();
    let viewPortTop = $(window).scrollTop();
    let viewPortBottom = viewPortTop + $(window).height();
    return elementBottom > viewPortTop + $("#mynav").height() + 10 && elementTop < viewPortBottom;
  }

  // Init section 
  function initSection(section, time) {
    if(initTable[section] == undefined) {
      if(section == '#about') {
        setTimeout(function(){ 
          $("#about-me").addClass("to-primary-color");
        }, time);
      } 
      else if(section == '#skills') {
        let timeout = time;
        for(let key in skillset) {
          setTimeout(function(){
            $(".progress-bar." + key).css("width", skillset[key]);
          }, timeout);
          timeout += 50;  
        }
      } 
      initTable[section] = 1;
    }
  }

  function nextPortfolioItem() {
    if(portfolioTable.curCol == 3) {
      portfolioTable.curCol = 1;
      portfolioTable.curRow++;
    } else {
      portfolioTable.curCol++;
    }
  }

  // Handle "See more" click
  $("#see-more").click(function(){
    if (portfolioItems.length > 0) {
      while(true) {
        nextPortfolioItem();

        // Render item
        let curItemId = "col-" + portfolioTable.curRow + portfolioTable.curCol;
        portfolioItems[0]["col-id"] = curItemId;
        Mustache.parse(portfolioTemplate);
        let rendered = Mustache.render(portfolioTemplate, portfolioItems[0]);

        if(portfolioTable.curCol == 1) {
          $('<div class="gr-row" id="row-' + portfolioTable.curRow +'"></div>').insertAfter('#row-' + (portfolioTable.curRow - 1));
        }
        $('#row-' + portfolioTable.curRow).append(rendered);

        // Render tags
        let tags = portfolioItems[0].tags;
        for(let i = 0; i < tags.length; i++) {
          $('#' + curItemId).append('<span class="portfolio-tag">' + tags[i] + '</span>');
        }

        portfolioItems.shift();
        if(portfolioItems.length == 0) {
          $("#see-more-wrapper").css("display", "none");
          break;
        } 
        else if (portfolioTable.curCol == 3) break;
      }
    }
  });
});