jQuery for ASP.NET Developers

JavaScript Source

jQuery(function() {

    /****************************************************
    *              Initialization Section               *                
    ****************************************************/
    var animInfo = {
        'images': undefined,
        'transition': undefined,
        'frame': undefined,
        'loading': undefined,
        'leftX': 0,
        'centerX': 0,
        'topY': 0, 
        'idx': 0 };

    // setting this up so it can be served by AJAX later
    animInfo.images = $("EmptyDataSet");
    animInfo.transition = $('<img src="/images/FadeEffect.png" />');
    animInfo.frame = $("#frame");
    animInfo.loading = 
        $('<img src="/images/ajax-loader.gif" style="display:none" />');

    animInfo.frame
    .css({ position: 'relative', overflow: 'hidden' })
    .append(animInfo.transition)
    .append(animInfo.loading);

    animInfo.leftX = (0 - animInfo.transition.width()) + "px",
    animInfo.centerX = ((animInfo.frame.width() / 2) - 
                        (animInfo.transition.width() / 2)) + "px",
    animInfo.topY = ((animInfo.frame.height() / 2) - 
                        (animInfo.transition.height() / 2)) + "px",
    animInfo.idx = 0;

    animInfo.transition.css({ position: 'absolute',
                              top: animInfo.topY, 
                              left: animInfo.leftX });


    /****************************************************
    *              AJAX loading icon                    *                
    ****************************************************/
    animInfo.loading
        .ajaxStart(function() {
        $(this).show();
    })
    .ajaxComplete(function(event, request, settings) {
        $(this).hide();
    });

    LoadData(animInfo);

});

function LoadData(animInfo) {

    $.getJSON('/Books/GetImages', function(json) {
        animInfo.images = $convertImages(json);
        animate(animInfo);
    });

}

function $convertImages(images) {
    var container = '<div id="imageContainer" style="display:none" >';
    for (var i = 0; i < images.length; i++) {
        var img = images[i];
        var attribs = '';

        jQuery.each(img, function(i, n) {
            attribs += i + '="' + n + '" ';
        });

        container += '<img ' + attribs + '/>';

    }
    container += '</div>';
    $('body').append(container)
    return $('#imageContainer>*')
}

function animate(animInfo) {

    // Make sure we start the page with an image
    animInfo.frame.prepend(animInfo.images.eq(animInfo.idx++));

    /****************************************************
    *                 Animation Section                 *                
    ****************************************************/
    $("#start").click(function() {
        animInfo.transition
        .animate(
            { 'left': animInfo.centerX },
            750,
            'swing',
             function() {
                 animInfo.frame.prepend(
                    animInfo.images.eq(animInfo.idx++)
                 );
                 if (animInfo.idx == animInfo.images.length) {
                     animInfo.idx = 0;
                 }
             })
        .animate({ 'left': animInfo.frame.width() + "px" },
                250, 
                function() {
                animInfo.transition.css(
                    { "top": animInfo.topY, 
                    "left": animInfo.leftX });
        });
    });
}