//View for @girl, EDIT action
GirlEditView = Backbone.View.extend({
	initialize: function(el, attr) {
		this.variables = attr;
		console.log(attr);
		this.render();
	},
	render: function() {
		var template = _.template( $("#girl_edit").html(), this.variables );
		$(this.el).html( template );
		$("#edit_girl").modal('show');
	}
});

//View for @girl
GirlView = Backbone.View.extend({
	initialize: function() {
	},
	template: _.template($('#girl_template').html()),
	render: function() {
		this.$el.html(this.template(this.model.toJSON()));
		return this;
	},
	events: {
		"click p.modify": "modify"
	},
	modify: function() {
		//calls to modify view
		new GirlEditView({el : $("#edit_girl")}, this.variables);
	}
});

GirlsView = Backbone.View.extend({
	initialize: function() {
		var _this = this;
		this.collection.each(function(girl) {
			var v = new GirlView({model: girl});
			_this.$el.append(v.render().el);
		})
	}
})


//One girl from the list
Girl = Backbone.Model.extend({
	initialize: function() {
		//this.view = new GirlView({el : $("#content")}, this.attributes );
	}
});

//all the girls
Girls = Backbone.Collection.extend({
	model: Girl,
});


//do magic!
$(document).ready(function() {

	//Underscore template modification
	_.templateSettings = {
		escape : /\{\[([\s\S]+?)\]\}/g,
		evaluate : /\{\[([\s\S]+?)\]\}/g,
    	interpolate : /\{\{([\s\S]+?)\}\}/g
	}

	//get initial data and fill the index
	var list = [];
	$.getJSON('girls.json', function(data) {
		$.each(data, function(key, val) {
			list.push( new Girl(val) );
		});
		var myGirls = new Girls(list);
		var v = new GirlsView({ collection: myGirls });
	});
});