$(document).ready(function() {
	
	// Delay Load 1: load images once the page has loaded
    jQuery("img.delayLoad").each(function() {

        // Create a new span element which we will wrap around our image
        // Using a span because if the image was inside an <a> tag then online inline elements should be used
        var delaySpan =  document.createElement("span");

        with (jQuery(this)) {
            // Handle images that are hidden, otherwise display mode for the span should be block (inline doesn't work properly)
            if (css('display') == 'none') {
                var _display = 'none' } else {
                var _display = 'block' }

            // Copy the style from the image into a new object (this means you don't need to worry about styling this span within your CSS)
            var cssObj = {
                'height' : css('height'),
                'width' : css('width'),
                'margin-top' : css('margin-top'),
                'margin-right' : css('margin-right'),
                'margin-bottom' : css('margin-bottom'),
                'margin-left' : css('margin-left'),
                'background-image' : css('background-image'),
                'background-color' : css('background-color'),
                'background-repeat' : css('background-repeat'),
                // Hack for now, becuase IE doesn't seem to read the background-position property correctly
                'background-position' : '50% 50%',
                'display' : _display
            }
        }

        // Apply our style properties to our span    
        jQuery(delaySpan).css(cssObj);

        // Wrap the image in the span
        jQuery(this).wrap(delaySpan)

        // Hide the image (leaving just the span visible
        .hide()

        // Simulate the mouse over the image, which will cause it to switch the img src
        .mouseover()

        // Remove the mouseover attribute (since we don't want to update the img src every time the user does a mouseover
        .removeAttr("onmouseover")

        // Simulate the mouse moving out of the image (To reset the image to its normal state)
        .mouseout()

        // Once the image is loaded, perform a function
        .load(function () {
            // Fade the image in
            // Remove the span by unwrapping the image
            jQuery(this).fadeIn().unwrap();
        });
    });

	// Delay Load 2: load images once the page has loaded
    jQuery("img.delayLoad_2").each(function() {

        // Create a new span element which we will wrap around our image
        // Using a span because if the image was inside an <a> tag then online inline elements should be used
        var delaySpan2 =  document.createElement("span");

        with (jQuery(this)) {
            // Handle images that are hidden, otherwise display mode for the span should be block (inline doesn't work properly)
            if (css('display') == 'none') {
                var _display = 'none' } else {
                var _display = 'block' }

            // Copy the style from the image into a new object (this means you don't need to worry about styling this span within your CSS)
            var cssObj2 = {
                'height' : css('height'),
                'width' : css('width'),
                'margin-top' : css('margin-top'),
                'margin-right' : css('margin-right'),
                'margin-bottom' : css('margin-bottom'),
                'margin-left' : css('margin-left'),
                'background-image' : css('background-image'),
                'background-color' : css('background-color'),
                'background-repeat' : css('background-repeat'),
                // Hack for now, becuase IE doesn't seem to read the background-position property correctly
                'background-position' : '50% 50%',
                'display' : _display
            }
        }

        // Apply our style properties to our span    
        jQuery(delaySpan2).css(cssObj2);

        // Wrap the image in the span
        jQuery(this).wrap(delaySpan2)

        // Hide the image (leaving just the span visible
        .hide()

        // Simulate the mouse over the image, which will cause it to switch the img src
        .mouseover()

        // Remove the mouseover attribute (since we don't want to update the img src every time the user does a mouseover
        .removeAttr("onmouseover")

        // Simulate the mouse moving out of the image (To reset the image to its normal state)
        .mouseout()

        // Once the image is loaded, perform a function
        .load(function () {
            // Fade the image in
            // Remove the span by unwrapping the image
            jQuery(this).fadeIn().unwrap();
        });
    });
	
});