/* jquery.ajaxLoader.js */

/***
@title:
Ajax Loader

@version:
1.0

@author:
Andreas Lagerkvist

@date:
2008-09-25

@url:
http://andreaslagerkvist.com/jquery/ajax-loader/

@license:
http://creativecommons.org/licenses/by/3.0/

@copyright:
2008 Andreas Lagerkvist (andreaslagerkvist.com)

@requires:
jquery, jquery.ajaxLoader.css, jquery.ajaxLoader.gif

@does:
Use this plug-in when you want to inform your visitors that a certain part of your page is currently loading. The plug-in adds a faded 'loading-div' on top of the selected element(s). The div is of course completely stylable.

@howto:
jQuery('#contact').ajaxLoader(); would add the overlay on top of the #contact-element.

When you want to remove the loader simply run jQuery('#contact').ajaxLoaderRemove();

@exampleHTML:
I should start loading after a couple of seconds, then load for a couple more and then stop loading only to start again after a couple of seconds. And so on.

@exampleJS:
setInterval(function () {
jQuery('#jquery-ajax-loader-example').ajaxLoader();
setTimeout(function () {
jQuery('#jquery-ajax-loader-example').ajaxLoaderRemove();
}, 2000);
}, 4000);
***/
jQuery.fn.ajaxLoader = function(conf) {
    var config = jQuery.extend({
        className: 'jquery-ajax-loader'
    }, conf);

    return this.each(function() {
        var t = jQuery(this);

        //if (!this.ajaxLoader) {
            var offset = t.offset();
            var dim = {
                left: offset.left,
                top: offset.top,
                width: t.outerWidth(),
                height: t.outerHeight()
            };

            this.ajaxLoader = jQuery('<div class="' + config.className + '"></div>').css({
                position: 'absolute',
                left: dim.left + 'px',
                top: dim.top + 'px',
                width: dim.width + 'px',
                height: dim.height + 'px'
            }).appendTo(document.body).hide();
        //}
        $('.' + config.className).css('filter', 'alpha(opacity=60)');
        this.ajaxLoader.fadeIn(500);
    });
};

jQuery.fn.ajaxLoaderRemove = function() {
    return this.each(function() {
        if (this.ajaxLoader) {
            this.ajaxLoader.fadeOut(1);
        }
    });
};

jQuery.fn.ajaxLoaderLarge = function(conf) {
    var config = jQuery.extend({
        className: 'jquery-ajax-loader-large'
    }, conf);

    return this.each(function() {
        var t = jQuery(this);

        //if (!this.ajaxLoaderLarge) {
            var offset = t.offset();
            var dim = {
                left: offset.left,
                top: offset.top,
                width: t.outerWidth(),
                height: t.outerHeight()
            };

            this.ajaxLoaderLarge = jQuery('<div class="' + config.className + '"></div>').css({
                position: 'absolute',
                left: dim.left + 'px',
                top: dim.top + 'px',
                width: dim.width + 'px',
                height: dim.height + 'px'
            }).appendTo(document.body).hide();
        //}
        $('.' + config.className).css('filter', 'alpha(opacity=60)');
        this.ajaxLoaderLarge.fadeIn(500);
    });
};

jQuery.fn.ajaxLoaderLargeRemove = function() {
    return this.each(function() {
        if (this.ajaxLoaderLarge) {
            this.ajaxLoaderLarge.fadeOut(400);
        }
    });
};
//Method for displaying the large ajax error overlay
jQuery.fn.ajaxLoaderErrorLarge = function(conf) {
    var config = jQuery.extend({
        className: 'jquery-ajax-loader-large-error'
    }, conf);

    return this.each(function() {
        var t = jQuery(this);
        var offset = t.offset();
        var dim = {
            left: offset.left,
            top: offset.top,
            width: t.outerWidth(),
            height: t.outerHeight()
        };
        var hyperlinkHtml = '<a onclick="' + 'javascript:jQuery(' + "'" + '#' + "'+" + "'" + t.context.id + "'" + ').ajaxLoaderErrorLargeRemove();">' + AjaxErrorOverlayCloseLinkText + '</a>'
        this.ajaxLoaderErrorLarge = jQuery("<div class='" + config.className + "'>" + $get('divAjaxErrorControl').innerHTML + hyperlinkHtml + "</div>").css({
            position: 'absolute',
            left: dim.left + 'px',
            top: dim.top + 'px',
            width: dim.width + 'px',
            height: dim.height + 'px'
        }).appendTo(document.body).hide();

        $('.' + config.className).css('filter', 'alpha(opacity=90)');
        this.ajaxLoaderErrorLarge.fadeIn(500);
    });
};
//Method for removing the large ajax error overlay
jQuery.fn.ajaxLoaderErrorLargeRemove = function() { 
    return this.each(function() {
    if (this.ajaxLoaderLarge) {
        this.ajaxLoaderLarge.fadeOut(400);
    }
    if (this.ajaxLoaderErrorLarge) {
       this.ajaxLoaderErrorLarge.fadeOut(100); 
       } 
   });

};
//Method for displaying the normal ajax error overlay
jQuery.fn.ajaxLoaderError = function(conf) {
var config = jQuery.extend({
        className: 'jquery-ajax-loader-error'
    }, conf);

    return this.each(function() {
    var t = jQuery(this);
    var offset = t.offset();
    var dim = {
        left: offset.left,
        top: offset.top,
        width: t.outerWidth(),
        height: t.outerHeight()
    };
    var hyperlinkHtml = '<a onclick="' + 'javascript:jQuery(' + "'" + '#' + "'+" + "'" + t.context.id + "'" + ').ajaxLoaderErrorRemove();">' + AjaxErrorOverlayCloseLinkText + '</a>'
    this.ajaxLoaderError = jQuery("<div class='" + config.className + "'>" + $get('divAjaxErrorControl').innerHTML + hyperlinkHtml + "</div>").css({
        position: 'absolute',
        left: dim.left + 'px',
        top: dim.top + 'px'
    }).appendTo(document.body).hide();
    $('.' + config.className).css('filter', 'alpha(opacity=90)');
    this.ajaxLoaderError.fadeIn(500);
    });
};
//Method for removing the normal ajax error overlay
jQuery.fn.ajaxLoaderErrorRemove = function() {
    return this.each(function() {
    if (this.ajaxLoaderError) {
        this.ajaxLoaderError.fadeOut(100);
        }
    });
};