$(function(){

	//Model:表示一個學生
	var Student=Backbone.Model.extend({
	//默認值
	defaults:function(){
	return{
	name:"XXX",
	age:"0",
	selected:false,
	id:Students.nextId(),
	};
	},
	
	//初始化的時候判斷，如果設置的屬性值非法就設為默認值
	initialize:function(){
	if(!this.get("name")){
	this.set({"name":this.defaults().name});
	}
	if(!this.get("age")||!(/(^[1-9]\d*$)/.test(this.get("age")))){
	this.set({"age":this.defaults().age});
	}
	},

	//標記該學生是否被選中
	toggle:function(){
	this.save({selected:!this.get("selected")});
	}
	});

	//Collection:Model的集合，即所有學生的集合
	var Students=Backbone.Collection.extend({
	
	model:Student,
	
	//本地數據庫，用到backbone-localstorage.js
	localStorage:new Backbone.LocalStorage("Students-Table"),

	//返回被選中的學生的集合
	selected:function(){
	return this.filter(function(student){return student.get('selected');});
	},

	//給每個學生一個編號
	nextId:function(){
	if(!this.length)
	return 1;
	return this.last().get('id')+1;
	}
	});

	//定義一個學生集合對象
	var Students=new Students;


	//View:這個視圖表示table中的一列，即一個學生，對應一個Model
	var StudentView=Backbone.View.extend({
	//表示<tr></tr>元素
	tagName:"tr",
	
	//將相應模板寫入template屬性中，_.template()為underscore.js中的方法
	template:_.template($('#item-template').html()),

	//綁定該tr下的事件
	events:{
	"click .toggle":"toggleSelect",
	"dblclick td":"edit",
	"click a.destroy":"clear",
	"blur .edit":"close"
	},

	//初始化該View，listenTo監聽model的事件
	initialize:function(){
	//model發生變化就重新渲染視圖
	this.listenTo(this.model,'change',this.render);
	//銷毀model
	this.listenTo(this.model,'destroy',this.remove);
	},

	//this.$el為該tr節點元素，將template渲染進該節點，并把model的值寫入
	render:function(){
	this.$el.html(this.template(this.model.toJSON()));
	//如果該行被選中，則切換樣式
	this.$el.toggleClass('selected',this.model.get('selected'));
	return this;
	},

	//判斷該行是否被選中，對應model中的selected屬性
	toggleSelect:function(){
	this.model.toggle();
	},

	//雙擊td將樣式變為可編輯
	edit:function(e){
	$(e.currentTarget).addClass("editing").find("input,select").focus();
	},

	//編輯狀態下失去焦點，則修改完成
	close:function(e){
	var input=$(e.currentTarget);

	if(input.attr('name')=="name"){
	if(!input.val()){
	input.val(this.model.defaults().name);
	}
	this.model.save({"name":input.val()});
	}else if(input.attr('name')=="gender"){
	this.model.save({"gender":input.val()});
	}else{
	if(!input.val()||!(/(^[1-9]\d*$)/.test(input.val()))){
	input.val(this.model.defaults().age);
	}
	this.model.save({"age":input.val()});
	}
	input.parent().removeClass("editing");
	},

	//刪除該行的時候刪除相應model
	clear:function(){
	this.model.destroy();
	}
	});


	//View:這個視圖表示$("#content")，用來表現整個學生表格
	var AppView=Backbone.View.extend({
	el:$("#content"),

	//右下角刪除學生數目的模板
	statsTemplate:_.template($('#stats-template').html()),

	events:{
	"click #add-student":"addNewStudent",
	"click #clear-selected":"clearSelected",
	"click #select-all":"selectAll"
	},

	initialize:function(){
	this.allCheckbox=$("#select-all");
	this.main=$("#main");
	this.footer=$('footer');
	this.name=$("#new-name");
	this.age=$("#new-age");
	this.gender=$("#new-gender");

	//Collection中增加一個Model就觸發add事件
	this.listenTo(Students,'add',this.addOne);
	//一旦調用fetch方法就觸法reset事件
	this.listenTo(Students,'reset',this.addAll);
	//all事件表示該View下的所有事件，即觸法任意事件就觸法all事件
	this.listenTo(Students,'all',this.render);

	//從本地數據庫中獲取所有學生
	Students.fetch();
	},

	//渲染視圖
	render:function(){
	var selected=Students.selected().length;
	
	if(Students.length){
	this.main.show();
	this.footer.show();
	this.footer.html(this.statsTemplate({selected:selected}));
	}else{
	this.main.hide();
	this.footer.hide();
	}
	//判斷所有學生是否被選中
	this.allCheckbox.attr("checked",selected==Students.length?true:false);
	},

	//增加一個學生，同時將model傳入StudentView中
	addOne:function(student){
	var view=new StudentView({model:student});
	//將渲染后的每一列添加到表格中
	this.$("#student-list").append(view.render().el);
	},

	//增加所有學生，通過Collection.each依次調用addOne方法
	addAll:function(){
	Students.each(this.addOne,this);
	},

	//增加一個新學生
	addNewStudent:function(){
	Students.create({name:this.name.val(),gender:this.gender.val(),age:this.age.val()});
	this.name.val('');
	this.age.val('');
	this.gender.val(1);
	},

	//刪除選中列，_.invoke(集合,方法)
	clearSelected:function(){
	_.invoke(Students.selected(),'destroy');
	},

	//選中所有
	selectAll:function(){
	var selected=this.allCheckbox.attr('checked')=="checked";
	Students.each(function(student){
	student.save({'selected':selected});
	});
	}
	});

	//創建View
	var App=new AppView;
});