$(document).ready(function() {
	$(".delete").click(deleteHabit);

	$("#create-habit").submit(createHabit);
	
	_.templateSettings = {
	interpolate: /\<\@\=(.+?)\@\>/gim,
	evaluate: /\<\@(.+?)\@\>/gim,
	escape: /\<\@\-(.+?)\@\>/gim
	};
});

var deleteHabit = function(e){
	e.preventDefault();
	url = $(e.target).attr('href');
	$target = $(e.target);

	$.ajax({
		url: url,
		type: 'delete'
	}).done(function(response){
		$target.closest('.habit-each').remove();
	})
}


var createHabit = function(e){
	e.preventDefault();
	$target = $(e.target);

	// 	<h2>Habit Name</h2>
	// 	<ul>
	// 		<li>consecutive counter :</li>
	// 		<li>total counter : </li>
	// 	</ul>
	// <a href="/habits/id/done">done!</a>
	// <a href="/habits/id/edit">edit</a>
	// <a href="/habits/id/delete" class="delete">delete</a>



	$.ajax({
		url: $target.attr('action'),
		type: 'post',
		data: $target.serialize()
	}).done(function(response){
		var habitTemplate = document.getElementById("habit-template");
		var content = habitTemplate.innerHTML;
		var habit = document.createElement('div');
		habit.className = "habit-each"
		habit.id = response.id
		// $('#habit-container').prepend('<h2>' + response.habit_name + '</h2><ul><li>consecutive counter : '+ response.consecutive_counter + '</li><li>total counter : ' + response.total_counter + '</li></ul><a href="/habits/' + response.id + '/done">done!</a> <a href="/habits/' + response.id + '/edit">edit</a> <a href="/habits/' + response.id + '/delete" class="delete">delete</a>');


    var templateFunction = _.template(content);

		$('#habit-container').prepend(templateFunction( {habit_name: response.habit_name,
										  							consecutive_counter: response.consecutive_counter,
									  								total_counter: response.total_counter,
																		id: response.id	
																	} )
		);
		// debugger;
		// console.log(templateFunction( {habit_name: response.habit_name,
		// 								  							consecutive_counter: response.consecutive_counter,
		// 							  								total_counter: response.total_counter,
		// 																id: response.id	
		// 															} ) 
  //   );



    // var orangeTreeTemplate = document.getElementById("orange-tree-template")
    // var content = orangeTreeTemplate.innerHTML
    // var orangeTree = document.createElement('div');
    // orangeTree.className = "tree-container"
    // orangeTree.id = generateTreeId();
    // orangeTree.innerHTML = content;
    // var grove = document.querySelector(".grove");
    // grove.appendChild(orangeTree);
	});
}
@@ -542,263 +542,8 @@
 );%0A%0A
-%09// %09%3Ch2%3EHabit Name%3C/h2%3E%0A%09// %09%3Cul%3E%0A%09// %09%09%3Cli%3Econsecutive counter :%3C/li%3E%0A%09// %09%09%3Cli%3Etotal counter : %3C/li%3E%0A%09// %09%3C/ul%3E%0A%09// %3Ca href=%22/habits/id/done%22%3Edone!%3C/a%3E%0A%09// %3Ca href=%22/habits/id/edit%22%3Eedit%3C/a%3E%0A%09// %3Ca href=%22/habits/id/delete%22 class=%22delete%22%3Edelete%3C/a%3E%0A%0A%0A%0A
 %09$.a
@@ -866,389 +866,8 @@
 id%0A%09
-%09// $('#habit-container').prepend('%3Ch2%3E' + response.habit_name + '%3C/h2%3E%3Cul%3E%3Cli%3Econsecutive counter : '+ response.consecutive_counter + '%3C/li%3E%3Cli%3Etotal counter : ' + response.total_counter + '%3C/li%3E%3C/ul%3E%3Ca href=%22/habits/' + response.id + '/done%22%3Edone!%3C/a%3E %3Ca href=%22/habits/' + response.id + '/edit%22%3Eedit%3C/a%3E %3Ca href=%22/habits/' + response.id + '/delete%22 class=%22delete%22%3Edelete%3C/a%3E');%0A%0A
 %0A   
@@ -955,32 +955,33 @@
 plateFunction( %7B
+ 
 habit_name: resp
@@ -1019,285 +1019,10 @@
 %09%09%09%09
-%09consecutive_counter: response.consecutive_counter,%0A%09%09%09%09%09%09%09%09%09  %09%09%09%09%09%09%09%09total_counter: response.total_counter,%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09id: response.id%09%0A%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%09%7D )%0A%09%09);%0A%09%09// debugger;%0A%09%09// console.log(templateFunction( %7Bhabit_name: response.habit_name,%0A%09%09// %09%09%09%09%09%09%09%09  %09%09%09%09%09%09%09
+  
 cons
@@ -1066,27 +1066,24 @@
 _counter,%0A%09%09
-// 
 %09%09%09%09%09%09%09  %09%09%09
@@ -1086,17 +1086,18 @@
  %09%09%09%09%09%09%09
-%09
+  
 total_co
@@ -1129,19 +1129,16 @@
 nter,%0A%09%09
-// 
 %09%09%09%09%09%09%09%09
@@ -1144,17 +1144,18 @@
 %09%09%09%09%09%09%09%09
-%09
+  
 id: resp
@@ -1165,19 +1165,16 @@
 e.id%09%0A%09%09
-// 
 %09%09%09%09%09%09%09%09
@@ -1187,423 +1187,11 @@
 %09%7D )
- %0A  //   );%0A%0A%0A%0A    // var orangeTreeTemplate = document.getElementById(%22orange-tree-template%22)%0A    // var content = orangeTreeTemplate.innerHTML%0A    // var orangeTree = document.createElement('div');%0A    // orangeTree.className = %22tree-container%22%0A    // orangeTree.id = generateTreeId();%0A    // orangeTree.innerHTML = content;%0A    // var grove = document.querySelector(%22.grove%22);%0A    // grove.appendChild(orangeTree
+%0A%09%09
 );%0A%09

delete comments