/**
 * @class Ext.ContentLoader
 * @extends Ext.util.Observable
 * A class used to load remote content to a component. Sample usage:
 * <pre><code>
new Ext.Component({
    tpl: '{firstName} - {lastName}',
    loader: {
        url: 'myPage.php',
        contentType: 'data',
        params: {
            userId: 1
        }
    }
});
 * </code></pre>
 */
Ext.ContentLoader = Ext.extend(Ext.util.Observable, {

    /**
     * @cfg {String} url The url to retrieve the content from. Defaults to <tt>null</tt>.
     */
    url: null,

    /**
     * @cfg {Object} params Any params to be attached to the Ajax request. Defaults to <tt>null</tt>.
     */
    params: null,

    /**
     * @cfg {Ext.Component} target The target {@link Ext.Component} for the loader. Defaults to <tt>null</tt>.
     */
    target: null,

    /**
     * @cfg {Mixed} loadMask True or a {@link Ext.LoadMask} configuration to enable masking during loading. Defaults to <tt>false</tt>.
     */
    loadMask: false,

    /**
     * @cfg {Object} ajaxOptions Any additional options to be passed to the request, for example timeout or headers. Defaults to <tt>null</tt>.
     */
    ajaxOptions: null,

    /**
     * @cfg {Function} success A function to be called when a load request is successful.
     */

    /**
     * @cfg {Function} failure A function to be called when a load request fails.
     */

    /**
     * @cfg {Object} scope The scope to execute the {@link #success} and {@link #failure} functions in.
     */

    /**
     * @cfg {String} renderer The type of content that is to be loaded into, which can be one of 3 types:
     * <div class="mdetail-params"><ul>
     * <li><b>html</b> : Loads raw html content, see {@link Ext.Component.html}</li>
     * <li><b>data</b> : Loads raw html content, see {@link Ext.Component.data}</li>
     * <li><b>component</b> : Loads child {Ext.Component} instances. This option is only valid when used with a Container.</li>
     * </ul>
     * Defaults to <tt>'html'</tt>
     */
    renderer: 'html',

    isLoader: true,

    constructor: function(config) {
        config = config || {};
        Ext.apply(this, config);
        this.addEvents('');
        Ext.ContentLoader.superclass.constructor.call(this, config);
    },

    /**
     * Set a {Ext.Component} as the target of this loader.
     * @param {Ext.Component} target The component to be the target of this loader.
     */
    setTarget: function(target){
        this.target = target;
    },

    /**
     * Aborts the active load request
     */
    abort: function(){
        var active = this.active;
        if (active !== undefined) {
            Ext.Ajax.abort(active.request);
            if (active.mask) {
                this.target.setLoading(false);
            }
            delete this.active;
        }
    },

    /**
     * Load new data from the server.
     * @param {Object} options
     */
    load: function(options) {
        var me = this,
            target = me.target,
            mask = Ext.isDefined(options.loadMask) ? options.loadMask : me.loadMask,
            ajaxOptions = Ext.apply({}, options.ajaxOptions),
            request;

        options = Ext.apply({}, options);

        Ext.applyIf(ajaxOptions, me.ajaxOptions);

        Ext.applyIf(options, ajaxOptions);
        Ext.applyIf(options, {
            url: me.url,
            params: me.params
        });

        Ext.apply(options, {
            scope: me,
            callback: me.onComplete
        });

        if (mask) {
            me.target.setLoading(mask);
        }

        request = Ext.Ajax.request(options);
        this.active = {
            request: request,
            options: options,
            mask: mask,
            success: options.success || me.success,
            failure: options.failure || me.failure,
            callback: options.callback || me.callback,
            scope: options.scope || me.scope,
            renderer: options.renderer || me.renderer
        };
    },

    /**
     * Parse the response after the request completes
     * @private
     * @param {Object} options Ajax options
     * @param {Boolean} success Success status of the request
     * @param {Object} response The response object
     */
    onComplete: function(options, success, response) {
        var me = this,
            active = me.active,
            scope = active.scope,
            renderer = this.getRenderer(active.renderer),
            renderOptions = Ext.isObject(active.renderer) ? active.renderer : {};


        if (success) {
            success = renderer.render(this, response, renderOptions);
        }

        if (success) {
            Ext.callback(active.success, scope, [me, response, options]);
        } else {
            Ext.callback(active.failure, scope, [me, response, options]);
        }
        Ext.callback(active.callback, scope, [me, options, success, response]);

        if (active.mask) {
            this.target.setLoading(false);
        }

        delete me.active;
    },

    getRenderer: function(renderer){
        var renderers = Ext.ContentLoader.Renderer;

        if (Ext.isObject(renderer)) {
            renderer = renderer.type;
        }

        switch (renderer) {
            case 'component':
                return renderers.Component;
            case 'data':
                return renderers.Data;
            default:
                return renderers.HTML;
        }
    },

    /**
     * Destroys the loader
     */
    destroy: function(){
        this.abort();
        this.purgeListeners();
    }
});

Ext.ContentLoader.Renderer = {
    HTML: {
        render: function(loader, response, options) {
            loader.target.update(response.responseText);
            return true;
        }
    },

    Data: {
        render: function(loader, response, options) {
            var success = true;
            try {
                loader.update(Ext.decode(response.responseText));
            } catch (e) {
                success = false;
            }
            return success;
        }
    },

    Component: {
        render: function(loader, response, options) {
            var success = true,
                target = loader.target,
                items = [];

            try {
                items = Ext.decode(response.responseText);
            } catch (e) {
                success = false;
            }

            if (success) {
                if (options.removeAll) {
                    target.removeAll();
                }
                target.add(items);
                if (options.autoLayout) {
                    target.doLayout();
                }
            }

            return success;
        }
    }
};