// put all code in document ready function
// to prevent it from loading before DOM is loaded
$(document).ready(function(){
    // check if script is linked properly:
    // alert("Document is ready!");

    $("textarea").css("color", "yellow");
    $("textarea").css("background-color", "blue");

    // Tooltips
    $(function () {
        $('#item1').tooltip();
    });

    $(function () {
        $('[data-toggle="tooltip"]').tooltip();
    });

    // Smooth scrolling
    var $root = $('html, body');
    $('#navbar-example a').click(function() {
    var href = $.attr(this, 'href');
    if (href != undefined && href != '#') {
      $root.animate({
        scrollTop: $(href).offset().top
      }, 500, function () {
        window.location.hash = href;
      });
    }
    return false;
    });

    // Event listeners contact submit button

    // Exercise 2.8: Conditional statements
    // Turn message-box red when trying to submit empty string
    $("button").on('click', function() {
        if ($('.message-box').val() === "") {
            $(".message-box").css("border", "2px solid red");
        } else {
            var comment = $('.message-box').val();
            $('#visible-comment').html(comment);
            console.log(comment);
            $('.message-box').hide();
        }
    });

    // Hide name and e-mail form after submission
    // Write user input to DOM
    $('#button').on('click', function() {

        // store user input in variables
        var name = $('#yourName').val();
        var email = $('#yourEmail').val();

        // output user input to console
        console.log(name);
        console.log(email);


        // append user input to DOM
        $('#visible-name').html(name);
        $('#visible-email').html(email);

        // hide contact form
        $('#yourName').hide();
        $('#yourEmail').hide();

        return false;
    });

    // Count message length and write to DOM
    $(".message-box").on("keyup", function() {
        console.log("keyup happened");

        var charCount = $(".message-box").val().length;
        console.log(charCount);
        $("#char-count").html("you typed " + charCount + " chars.");

        if(charCount > 50) {
            $("#char-count").css("color", "red");
        } else {
            $("#char-count").css("color", "black");

        };

        // Experiments: changes BG color to green when start typing,
        // change BG color to yellow when typing 42
        if ($('.message-box').val() == 42) {
            console.log("Input is 42, which turns the background yellow")
            $('body').css("background-color", "yellow");

        } else{
            $('body').css("background-color", "green");

        };
    });

        // Work section

        // Display portfolio items from arrays stored in work.js

        // Test if work.js is properly linked
        console.log(pfPhotos);

        // Generate and append HTML to portfolio section
        //Uses data (headings, photos, descriptions) from work.js
        for (var i = 0; i < pfPhotos.length; i++) {
            console.log(i);
                $("#work").append('\
                    <div class="col-sm-12 col-md-4 col-lg-4">\
                      <div class="col-sm-12 col-md-12 col-lg-12 portfolio-col">\
                        <h4>' + pfHeadings[i] + '</h4>\
                        <img class="img-fluid element-shadow" src="' + pfPhotos[i] + '">\
                      </div>\
                      <div class="col-sm-12 col-md-12 col-lg-12 portfolio-col">\
                        <p>\
                         '+ pfDescriptions[i] +
                        '</p>\
                      </div>\
                    </div>');

            // Add colored border to each images
            var images = $("#work img");
            if(i%2 === 0){
                $(images[i]).css("border", "2px solid DodgerBlue");
            } else {
                $(images[i]).css("border", "2px solid salmon");
            };
        };

    });