(function($){

    $.widget("gcComponent.gcLayerTree", $.ui.gcComponent, {
		
		options: {
			widgetElementPrefix: 'gcLayerTree'
		},
		
		internalVars: {
			themes: {},
			html: ''
		},
		
        _create: function(){
            var self = this;
			
            this.element
            .addClass( "ui-layertree ui-widget ui-widget-content" )
            .attr({
                role: "layertree"
            });
			
            $.ui.gcComponent.prototype._create.apply(self, arguments);
			
        },
		
		addThemeNode: function(id, title, radio) {
			var self = this;
			
			var inputId = self.options.widgetElementPrefix+id;
			var theme = {
				id: id,
				title: title,
				inputId: inputId,
				radio: radio,
				layers: {}
			};
			self.internalVars.themes[id] = theme;

			return inputId;
		},
		
		removeThemeNode: function(id) {
			var self = this;
			
			delete self.internalVars.themes[id];
		},
		
		addLayerNode: function(themeId, layerId, title) {
			var self = this;
			
			var inputId = self._addWidgetElementPrefix(themeId+'_'+layerId);
			
			var layer = {
				id: layerId,
				title: title,
				inputId: inputId
			};
			self.internalVars.themes[themeId].layers[layerId] = layer;
			
			return inputId;
		},
		
		_buildHTML: function() {
			var self = this;
			
			var html = '<ul>';
			$.each(self.internalVars.themes, function(themeId, theme) {
				var inputHTML = '<input type="checkbox" data-role="theme" data-id="'+themeId+'" id="'+theme.inputId+'">'
				if(theme.radio) {
					inputHTML = '<input type="radio" name="'+self._addWidgetElementPrefix('radio')+'" data-role="theme" data-id="'+themeId+'" id="'+theme.inputId+'">';
				}
				
				html += '<li>'+inputHTML+'<label for="'+theme.inputId+'">'+theme.title+'</label><ul>';
				$.each(theme.layers, function(layerId, layer) {
					html += '<li><input type="checkbox" data-role="layer" data-id="'+layerId+'" data-parent="'+themeId+'" id="'+layer.inputId+'">'+
						'<label for="'+layer.inputId+'">'+layer.title+'</label></li>';
				});
				html += '</ul></li>';
			});
			html += '</ul>';
			self.internalVars.html = html;
		},
		
		startJsTree: function() {
			var self = this;
			self._buildHTML();

            var gcTree = $(self.element).jstree({
                "themes" : {
                    "theme" : "default",
                    "dots" : true,
                    "icons" : true
                },
                "ui" : {
                    "select_limit" : 2,
                    "select_multiple_modifier" : "alt",
                    "selected_parent_close" : false
                },
                "core" : {
                    "initially_open" : []
                },
                "html_data" : {
                    "data" : self.internalVars.html
                },
                "plugins" : [ "themes", "html_data", "ui" ]
            });

            //Gestione parentale degli input
            gcTree.delegate('input', 'click', {self: self}, function(event) {
				var item = $(this);
				var uiHash = {
					inputId: item.attr('id'),
					id: item.data('id'),
					role: item.data('role'),
					checked: item.is(':checked')
				};
				if(item.data('role') == 'layer') uiHash.parent = item.data('parent');
				self._trigger("change", event, uiHash);
			});
		}
    });

    $.extend($.gcComponent.gcLayerTree, {
        version: "3.0.0"
    });
})(jQuery);