$(document).ready(function() {

    var timer = null;

    $("#TextHolder").hover(function() {

        $("#TextHolder .white").stop(true, true).animate({
            opacity: 1
        }, 200, function() {
            $("#TextHolder .white").animate({
                opacity: 0.8
            }, 1000);
        });

        $("#Fader").stop(true, true).fadeIn(200, function() {
            $("#Fader").animate({
                opacity: 0.8
            }, 1000);
        });

        clearTimeout(timer);

    }, function() {
        $("#TextHolder .white").stop(true, true).animate({
            opacity: 0.8
        }, 1000);

        timer = setTimeout(function() {
            $("#Fader").fadeOut(1000, function() { $("#Fader").css("opacity", "0"); });
        }, 4000);

    });

    $("#Fader").hover(function() {
        clearTimeout(timer);
    }, function() {
        timer = setTimeout(function() {
            $("#Fader").stop(true, true).fadeOut(1000, function() { $("#Fader").css("opacity", "0"); });
        }, 4000);
    });


    var img = new Image();

    // wrap our new image in jQuery, then:  
    $(img)    // once the image has loaded, execute this code
        .load(function() {
            // set the image hidden by default          
            $(this).hide();          
            $('#myImageHolder').append(this);            

            $(this).attr("id", "myImage");


            $("#backg").backgroundScale({
                imageSelector: "#myImage",
                centerAlign: true,
                containerPadding: 100
            });



            $('#myImage').fadeIn(200, function() {



                $("#TextHolder").fadeIn(1000, function() {
                    $("#TextHolder .white").animate({
                        opacity: 0.8
                    }, 1000);
                });
            });


        })        // if there was an error loading the image, react accordingly
        .error(function() {
            alert("huh?");
            // notify the user that the image could not be loaded
        })        // *finally*, set the src attribute of the new image to our image
        .attr('src', "img/" + imgName);



    //    $("#myImage").load("img/" + imgName, function(response, status, xhr) {

    //    alert(response);

    //        $("#backg").backgroundScale({
    //            imageSelector: "#myImage",
    //            centerAlign: true,
    //            containerPadding: 100
    //        });

    //        $("#myImage").fadeIn(200, function() {
    //            $("#TextHolder").fadeIn(1000, function() {
    //                $("#TextHolder .white").animate({
    //                    opacity: 0.8
    //                }, 1000);
    //            });
    //        });

    //    });

});



Cufon.replace('h1');
Cufon.replace('li');
Cufon.replace('h3');
Cufon.replace('h5');