var ProjectsView = CollectionViewWithInlineEditor.extend({
    initialize: function(options) {
        this.tasks = options.tasks;
        this.rawTemplates = options.templates;
        
        this.compileTemplates(options.templates);
        this.bindCollection();
        
        options.controls.create.click(function() {
            options.collection.create({
                name: 'new project'
            }, {wait: true});
        });
    },
    
    clear: function() {
        this.$el.empty();
    },
    
    renderItem: function(project) {
        var $item = $(this.templates.project(project.toJSON()));
        
        $item.tasksView = new TasksView({
            el: $item.find('.tasks'),
            collection: project.tasks,
            templates: this.rawTemplates,
            controls: {
                create: $item.find('.btn-new-task')
            }
        });
        
        $item
            .find('.progress')
            .click(function() {
                var $progress = $(this);
                $progress.addClass('active');
                project.switchColor().then(function() {
                    $progress.removeClass('active');
                });
            });
        
        $item
            .find('.btn-delete-project')
            .click(function() {
                project.destroy({wait: true});
            });
        
        return $item;
    },
    
    updateProgress: function(project) {
        project.$item
            .find('.progress-bar')
            .removeClass('progress-bar-info progress-bar-success progress-bar-warning progress-bar-danger')
            .addClass(project.get('color') ? 'progress-bar-' + project.get('color') : '')
            .attr('aria-valuenow', (100 * project.tasks.progress()))
            .css('width', (100 * project.tasks.progress()) + '%');
    },
    
    appendItem: function(project) {
        var tasks = this.tasks;
        
        project.tasks = new Backbone.Shard({
            collection: this.tasks,
            filter: function(task) { return task.get('project_id') === project.id; }
        });
        
        project.tasks.progress = function() {
            return this.filter(function(task) { return task.get('done') === true; }).length / this.size();
        };
        
        project.tasks.create = function(attributes, options) {
            attributes = attributes || {};
            attributes.project_id = project.id;
            return tasks.create(attributes, options);
        };
        
        project.$item = this.renderItem(project);
        
        this.bindInlineEditable(project, '.inline-editable[data-model="project"]');
        this.updateProgress(project);
        
        project.on('change:name', function() {
            project.$item.find('[data-model="project"][data-model-attribute="name"]').text(project.get('name'));
        });
        
        project.on('change:color', function() {
            this.updateProgress(project);
        }, this);
        
        project.tasks.on('add remove change:done reset', function() {
            this.updateProgress(project);
        }, this);
        
        this.$el.append(project.$item);
    },
    
    removeItem: function(project) {
        project.$item.remove();
    }
});