$(document).ready(function() {

    //$('.feature').pngFix();
    $('#header').addClass('active');
    $('#feature-images').append('<img src="images/home/hero2.jpg" id="maintenance-img" /><img src="images/home/hero3.jpg" id="shutdown-img" />');

    var navTimer = null;

    $("#feature-one-img").show();
    $(".feature:first").animate({ top: 520 }).animate({ top: 310 }, "slow");

    //find total amount of images
    var layer = $('#feature-images img').length;
    //call function on mouse over	
    $(".feature h2").mouseover(function() {
        //get id of parent of h1
        var feature = $(this).parent().attr('id');
        //target image
        var img = "#" + feature + "-img";
        //find column position
        var button = $(this).parent().css("top");
        //if column is up position do the following
        if (button == '520px') {
            //make target image the top layer
            var zIndexTopPos = layer++;
            //animate all columns into original position
            $('.feature').animate({ top: 520 }, "fast");
            //animate the hovered column into over state
            $(this).parent().animate({ top: 310 }, "slow");
            //hide the top layer image in order to use fadeIn function
            $(img).hide();
            $(img).css('z-index', zIndexTopPos).fadeIn('slow');

        }

        //activate timer on mouse out if column
        if (button == '310px') {
            $(this).parent().mouseout(function() {
                //activateTimer(feature);
            });
        }


    });

    function activateTimer(feature) {
        var featureTimer = "#" + feature
        alert(featureTimer);
        if (navTimer) {
            clearTimeout(navTimer);
            navTimer = null;
        } else {
            alert("timer");
            navTimer = setTimeout(function(featureTimer) { $(featureTimer).animate({ top: 774 }, "fast"); }, 500);
        }
    }

});