$(function() {
    "use strict";

    $.widget('custom.cwTreeView', {
        options: {
            width: '100%',
            height: 'auto',
            maxDepth: 3,

            delegateDataSource: function(data, alterObj) {
                // return promise
            },

            onClickTreeItem: function(element, data) {
            },

        },
        _isLoading: false,
        _init: function() {
            this.selectedItem = null;
        },
        _create: function() {
            this.main = $('<div>', {
                'class': 'cw-widget-content'
            });
            $(this.element).css( {
                width: this.options.width,
                height: this.options.height
            });
            this.main.appendTo(this.element);

            this._loadData({
                depth: 0,
                id: null,
                element: this.main
            });
        },        
        
        reload: function(item) {

            this._reloadData(item);
        },

        reset: function(data) {

            if (data.children != null) {
                data.children.remove();
            }
            
            this._loadData(data);
        },

        _reloadData: function(data) {

            if (data.children != null) {
                data.children.remove();
            }
            
            this._loadData(data);
        },

        _loadData: function(data) {

            var self = this;
            if (self._isLoading) return;

            var alterObj = { 
                Id: 'Id', 
                Name: 'Name', 
                IsFunction: true 
            };

            var promise = this.options.delegateDataSource(data, alterObj);
            if (promise === null) {
                data.span.removeClass('cw-icon-arrow-right cw-icon-arrow-down');
                return;
            }

            self._isLoading = true;
            promise.always(function() {

                self._isLoading = false;
            });

            promise.done(function(array) {

                if (array === null || array.length === 0) {
                    if (data.depth > 0) {
                        data.span.removeClass('cw-icon-arrow-right cw-icon-arrow-down');
                    }
                    return;
                }

                var ul = $('<ul>');
                var li = $('<li>', {
                    'class': 'cw-tree-item-li'
                });
                var span = $('<span>', {
//                    'class': 'cw-tree-item-arrow-expand cw-icon-arrow-right',
                    'class': 'cw-icon-arrow-right',
                    'style': 'width: 17px; height: 16px; float: left; clear: both; margin-top: 3px;'
                });
                var div = $('<div>', {
                    'class': 'cw-rc-all cw-tree-item cw-item',
                    'style': 'display: inline-block'
                });
                var currentDepth = data.depth + 1;

                if (data.depth === 0) {
                    ul.addClass('cw-tree-dropdown-root');
                }
                else {
                    ul.addClass('cw-tree-dropdown');
                }

                $.each(array, function(i, item) {

                    var cli = li.clone();
                    var cdiv = div.clone();
                    var cspan = span.clone();

                    if (currentDepth < self.options.maxDepth) {
                        self._on(cspan, {
                            click: 'onToggleExpand'
                        });
                    }
                    else {
                        cspan.removeClass('cw-icon-arrow-right cw-icon-arrow-down');
                    }

                    cli.data({
                        parentData: data,
                        depth: currentDepth,
                        element: cli,
                        div: cdiv,
                        span: cspan,
                        data: item
                    });
                    cdiv.text(alterObj.IsFunction ? item[alterObj.Name]() : item[alterObj.Name]);

                    self._on(cdiv, {
                        click: 'onItemClick',
                        dblclick: 'onToggleExpand',
                        mouseenter: 'onItemHoverIn',
                        mouseleave: 'onItemHoverOut',

                    });
                    cli.append(cspan);
                    cli.append(cdiv);

                    ul.append(cli);
                });
                data.element.append(ul);
                data.children = ul;
                if (data.depth > 0) {
                    data.span
                        .removeClass('cw-icon-arrow-right')
                        .addClass('cw-tree-item-arrow-expand cw-icon-arrow-down');
                }
                
            });
        },
        onItemHoverIn: function(event) {
            var self = $(event.delegateTarget).parent();
            var data = self.data();

            if (this.selectedItem === data) {
                return;
            }

            var classes = 'cw-tree-item-hover cw-fill-state-hover';

            if (data.div.hasClass(classes) === false) {
                data.div.addClass(classes);
            }
        },

        onItemHoverOut: function(event) {
            var self = $(event.delegateTarget).parent();
            var data = self.data();

            var classes = 'cw-tree-item-hover cw-fill-state-hover';

            if (data.div.hasClass(classes)) {
                data.div.removeClass(classes);
            }
        },

        onToggleExpand: function(event) {

            var self = $(event.delegateTarget).parent();
            var data = self.data();

            if (typeof data.span === 'undefined') return false;

            //if (typeof data.children === 'undefined') {
            //    data.span.removeClass('cw-icon-arrow-down cw-icon-arrow-right')
            //    return;
            //}

            if (data.span.hasClass('cw-icon-arrow-right')) {

                if (data.span.hasClass('cw-tree-item-arrow-expand') === false) {
                    this._loadData(data);
                }
                else {
                    data.span
                        .removeClass('cw-icon-arrow-right')
                        .addClass('cw-icon-arrow-down');
                    data.children.css('display', '');
                }
            }
            else {
                if (typeof data.children !== 'undefined') {
                    data.span
                        .addClass('cw-icon-arrow-right')
                        .removeClass('cw-icon-arrow-down');
                    data.children.css('display', 'none');
                }
            }
            return false;
        },

        onItemClick: function(event) {
            
            if (this._isLoading) return false;
            
            var self = $(event.delegateTarget).parent();
            var data = self.data();

            if (this.selectedItem !== null) {
                this.selectedItem.element.removeAttr('treeitem-selected');
                this.selectedItem.div.removeClass('cw-fill-state-pressed cw-tree-item-selected');
            }
            data.element.attr('treeitem-selected', true);
            data.div.addClass('cw-fill-state-pressed cw-tree-item-selected');

            if (data.span.hasClass('cw-tree-item-arrow-expand') === false) {
                this._loadData(data);
            }
            this.options.onClickTreeItem(self, data);

            this.selectedItem = data;
            //console.log(self.text());
        },

        _refresh: function() {
        },

        _destroy: function() {
        },

        _setOptions: function(key, value) {
            this._super(key, value);
        },
        //_setOptions: function() {
        //    this._superApply(arguments);
        //    this._refresh();
        //},
    });
});