/// <reference name="MicrosoftAjax.js"/>
/// <reference name="Telerik.Web.UI.Common.Core.js" assembly="Telerik.Web.UI"/>

(function () {
    Type.registerNamespace("Telerik.Web.UI");
    var $T = Telerik.Web.UI;

    $T.RadListViewClientBindingExtender = function (element) {
        $T.RadListViewClientBindingExtender.initializeBase(this, [element]);

        this._clientItemTemplate = "";
        this._itemContainerId = "";
        this._locationUrl = "";
        this._methodName = "";
        this._itemContainer = null;
        this._currentPageIndex = 0;
        this._noMoreData = false;
        this._enableAutoLoad = false;
    }

    $T.RadListViewClientBindingExtender.prototype = {
        initialize: function () {
            $T.RadListViewClientBindingExtender.callBaseMethod(this, 'initialize');

            //get the itemContainer and hook to scroll event
            this.get_itemContainer().scroll(Function.createDelegate(this, this._handleScroll));

            // you may call loadData in case you want to populate the listView purly client-side 
            // Note: in such case make sure ListView is bound to at least one dummy item on the server
            if (this._enableAutoLoad)
                this._loadData();
        },

        dispose: function () {
            $T.RadListViewClientBindingExtender.callBaseMethod(this, 'dispose');
        },

        _handleScroll: function () {
            // if scroller is dragged to the bottom we request for more data
            var container = this.get_itemContainer()[0];
            var visibleHeight = (container.scrollHeight - container.offsetHeight);
            if (this.get_itemContainer().scrollTop() >= (container.scrollHeight - container.offsetHeight)) {
                this._loadData();
            }
        },

        get_itemContainer: function () {
            if (this._itemContainer)
                return this._itemContainer;

            if (!this._itemContainerId || this._itemContainerId == "")
                throw new Error("There is no itemContainerId specified");

            return this._itemContainer = $telerik.$(this.get_element()).parent().first().find("#" + this._itemContainerId);
        },

        _loadData: function () {
            if (this._isNullOrEmpty(this._locationUrl) || this._isNullOrEmpty(this._methodName) || this._noMoreData)
                return;

            var url = String.format("{0}/{1}", this._locationUrl, this._methodName);
            var argumentsObject = { startIndex: this._currentPageIndex++ };
            try {
                $telerik.$.ajax({
                    type: "POST",
                    url: url,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    data: Sys.Serialization.JavaScriptSerializer.serialize(argumentsObject),
                    success: Function.createDelegate(this, this._bindContainer),
                    error: function (error) { alert(error); }
                });
            }
            catch (e) {
                throw new Error(e);
            }
        },

        _bindContainer: function (result) {
            var data = result.d ? result.d : result;
            if (data && data.length > 0) {
                var container = this.get_itemContainer();
                // container.html("");                    
                for (var i = 0, len = data.length; i < len; i++) {
                    var dataItem = data[i];
                    var itemHtml = this._constructTemplate(dataItem);
                    jQuery(container).append("clientItemTemplate", dataItem);

                }
            } else {
                this._noMoreData = true;
            }

        },

        _constructTemplate: function (dataItem) {
            if (this._isNullOrEmpty(this._clientItemTemplate))
                return "";

            if (!jQuery.templates.clientItemTemplate) {
                jQuery.templates.clientItemTemplate = jQuery.tmpl($telerik.$("<div>").html(this._clientItemTemplate).text());
            }
        },

        _isNullOrEmpty: function (value) {
            return !value || value === "";
        }
    }

    $T.RadListViewClientBindingExtender.registerClass('Telerik.Web.UI.RadListViewClientBindingExtender', Sys.UI.Behavior);
})();
