var navbarHeight = $('.navbar').height();

$(window).scroll(function() {
    var navbarColor = "255,255,255"//"255,215,0";//color attr for rgba
    var smallLogoHeight = $('.small-logo').height();
    var bigLogoHeight = $('.big-logo').height();


    var smallLogoEndPos = 0;
    var smallSpeed = (smallLogoHeight / bigLogoHeight);

    var ySmall = ($(window).scrollTop() * smallSpeed);

    var smallPadding = navbarHeight - ySmall;
    if (SmallPadding > navbarHeight) { smallPadding = navbarHeight; }
    if (smallPadding < smallLogoEndPos) { smallPadding = smallLogoEndPos; }
    if (smallPadding < 0) { smallPadding = 0; }

    $('.small-logo-container ').css({ "padding-top": smallPadding });

    var navOpacity = ySmall / smallLogoHeight;
    if (navOpacity > 1) { navOpacity = 1; }
    if (navOpacity < 0) { navOpacity = 0; }
    var navBackColor = 'rgba(' + navbarColor + ',' + navOpacity + ')';
    $('.navbar').css({ "background-color": navBackColor });

    var shadowOpacity = navOpacity * 0.4;
    if (ySmall > 1) {
        $('.navbar').css({ "box-shadow": "0 2px 3px rgba(0,0,0," + shadowOpacity + ")" });
    } else {
        $('.navbar').css({ "box-shadow": "none" });
    }
});

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");

//An image to overlay
//$overlay.append($image);

//Add overlay
//$("body").append($overlay);

//click the image and a scaled version of the full size image will appear
$("#photo-gallery a").mouseover(function(event) {
    event.preventDefault();
    var imageLocation = $(this).attr("href");

    //update overlay with the image linked in the link
    $image.attr("src", imageLocation);

    //show the overlay
    $overlay.show();
});

$("#overlay").mouseout(function() {
    $("#overlay").hide();
});