/// <reference path="~/Scripts/jquery-1.4.4-vsdoc.js" />

//$(window).ready(function () { //alternative to $(function () {

// Show the pre-loader gif ASAP.
$("#preloader").show();



$(function () {
    // This will run the moment the DOM is loaded, but before all images loaded.

    //    // Position Folio's under Selected Menu Item. *** Too hard to maintain ****
    //    $("a.selected").each(function () {
    //        var parentdiv = $(this).parent();
    //        var posi = parentdiv.position();
    //        $("#pagingSlider").css("left", posi.left + "px");
    //    });

    //$(window).resize(function () { updateScrollBar(); });

    $(".folioContainer").hide(0, function () {
        $(this).css("visibility", "visible");
    });

    // Show and Hide Folio Items
    $(".menuItems").hover(function () {
        $(".folioContainer", this).stop(true, true).fadeIn(0);
    }
    , function () {
        $(".folioContainer", this).stop(true, true).fadeOut(200);
    });

});


$(window).load(function () {
    // This will run only after all images are loaded.

    $("#preloader").hide();

    $("#logoDropShadow-intro").hide(0, function () {
        $(this).css("visibility", "visible");
    });
    $("#logotext-intro").hide(0, function () {
        $(this).css("visibility", "visible");
    });

    // Animation below is just a hack to delay the fadeout... (opacity is already 1.0)
    $("#picture-intro").animate({ opacity: 1.0 }, 1500, function () {
        $(this).animate({ opacity: 0.0 }, 2000);
        $("#paper-intro").animate({ opacity: .6 }, 2000, function () {
            $("#logotext-intro").fadeIn(2000);
        });
        $("#logoDropShadow-intro").fadeIn(2000, function () {

        });
    });

    // Default fonts are visible while custom fonts are being loaded. This does not look good.
    // All fonts using custom font are initially set to 0% in CSS to hide them.
    // By now the custom font should have loaded so show them.
    $("#menu-gallery").css("visibility", "visible");
    $("#menu-list-info").css("visibility", "visible");
    $("#menu-about-info").css("visibility", "visible");
    $("#menu-contact-info").css("visibility", "visible");

    $("#currentMenuSelection").css("visibility", "visible");

    // 'About' and 'Contact' pages may have custom 'Squirrel' Fonts which take time to load.
    $(".aboutContent").css("visibility", "visible");
    $(".contactContent").css("visibility", "visible");

    updateScrollBar();
    // Enable slider action
    //    $('div.sliderGallery').each(function () {
    //        var ul = $('#imageHolder', this);

    //        var sumImageWidths = 0;

    //        // Sum up the width of all images
    //        $('div.images').each(function () {
    //            sumImageWidths += $(this).outerWidth(true) + 4; // extra couple of pixels or so to make up for the way that divs stacked side by side merge their margins.
    //        });

    //        if (sumImageWidths > $(this).outerWidth(true)) {

    //            // Make sure the slider is visible
    //            $('#slider').css("visibility", "visible");
    //            $('#HandleSleeve').css("visibility", "visible");

    //            // Now subtract the width of the Viewport
    //            sumImageWidths -= $(this).outerWidth(true)

    //            // Add a few pixels for a border
    //            sumImageWidths += 20;

    //            $("#slider").slider({
    //                animate: true,
    //                min: 0,
    //                max: sumImageWidths,
    //                handle: '.handle',
    //                slide: function (ev, ui) {
    //                    ul.css('left', '-' + ui.value + 'px');
    //                }
    //            });
    //        } else {
    //            // Insufficient stuff to show, hide the slider.
    //        }
    //    });


});

function updateScrollBar() {
    $('div.sliderGallery').each(function () {
        var ul = $('#imageHolder', this);
   
        var sumImageWidths = 0;

        // Sum up the width of all images
        $('div.images').each(function () {
            sumImageWidths += $(this).outerWidth(true) + 4; // extra couple of pixels or so to make up for the way that divs stacked side by side merge their margins.
        });

        var windowWidth = $(this).outerWidth(true);
        var totalImageWidth = sumImageWidths;

        if (sumImageWidths > $(this).outerWidth(true)) {

            // Make sure the slider is visible
            $('#slider').css("visibility", "visible");
            $('#HandleSleeve').css("visibility", "visible");

            // Now subtract the width of the Viewport
            sumImageWidths -= $(this).outerWidth(true)

            // Add a few pixels for a border
            sumImageWidths += 20;

            $("#slider").slider({
                animate: true,
                min: 0,
                max: sumImageWidths,
                handle: '.handle',
                slide: function (ev, ui) {
                    ul.css('left', '-' + ui.value + 'px');
                }
            });

            // Adjust the width of the scroll bar.
            var iSliderLength = windowWidth * windowWidth / totalImageWidth
            $(".ui-slider-handle").css("width", iSliderLength.toString() + "px");
            $(".ui-slider-handle").css("margin-left", (-iSliderLength / 2).toString() + "px");
            $("#slider").css("margin-left", (iSliderLength / 2 + 2).toString() + "px");
            $("#slider").css("margin-right", (iSliderLength / 2).toString() + "px");

        } else {
            // Insufficient stuff to show, hide the slider.
            $('#slider').css("visibility", "hidden");
            $('#HandleSleeve').css("visibility", "hidden");
        }
    });
}