evoapp.directive('datatable', function($timeout, $filter, $compile) {

    //http://www.ng-newsletter.com/posts/directives.html

    return {

        require: '^ngController',
        restrict: 'A',

        scope: true,//create an isolated scope for this directive

        link : function (scope, element, attrs, controller) {

            scope.rowSelector = attrs.rowSelector || 'tr';

            scope.domEl = $(element);

            scope.firstLoad = true;

            if(scope.firstLoad)
            {
                //scope.domEl.hide();
            }

            scope.rows = [];
            
            scope.store = scope.$parent[attrs.store];

            if(scope.store != undefined)
            {
                scope.$watch('store.items', function(newVal, oldVal){
                    
                    if(newVal != null && newVal != undefined && newVal.length)
                    {  
                        if(scope.firstLoad)
                        {
                            scope.domEl.fadeIn('slow');

                            scope.firstLoad = false;
                        }

                        if(newVal.length > 0)
                        {                            
                            //scope.noRecordsEl.hide();
                            //scope.domEl.show();

                            scope.renderTable();
                        }
                    }
                    else
                    {
                        //scope.noRecordsEl.insertAfter(scope.domEl);

                        //scope.domEl.hide();
                        //scope.noRecordsEl.show();                        
                    }
                });
            }

            //TODO: find row with class datatable-selected-row and remove the class?
            scope.deselectRows = function(){

                angular.forEach(scope.rows, function(row){
                        
                    $(row).removeClass('datatable-selected-row');
                });
            };

            scope.renderTable = function(){            	            	

                scope.rows = scope.domEl.find(scope.rowSelector);

                if(scope.rows.length > 0)
                {
                    angular.forEach(scope.rows, function(row){
                        
                        $(row).click(function() {
                            
                            scope.deselectRows();

                            $(row).addClass('datatable-selected-row');
                        });
                        
                        //Activate tooltips
                        $timeout(function() {
                        	
                        	$(row).find("[data-toggle='tooltip']").tooltip();    
                        });
                    });
                }
            };

            if(attrs.itemId != undefined)
            {
                //add reference to this datatable, in controller
                if(scope.$parent[attrs.itemId] == undefined)
                {
                    scope.$parent[attrs.itemId] = scope;
                }
                else
                {
                    throw Error('datatable ' + attrs.itemId + ' already exists!');
                }
            }

        }
    }
});