var goalList = new Array();
var txtWatermark = 'Write your new goal here...';

$(document).ready(function() {
	
	$("#new_goal").Watermark(txtWatermark);

	var strGoals = $('#strGoals').html();
	strGoals = $.base64.decode(strGoals);
	goalListTmp = eval("("+strGoals+")");
	//console.log(goalListTmp);
	//goalListTmp = strGoals.split('|');
	for(var i=0; i<goalListTmp.length; i++){
		if(goalListTmp[i] != '')
			goalList[i] = goalListTmp[i];
	}
	//console.log(goalList);
	drawGoalsList();
});

function fixGrow(){
	var goals = document.getElementById("goals");
	var textareas = goals.getElementsByTagName("textarea");
	for (var i = 0; i < textareas.length; i++) {
		auto_grow(textareas[i], 22);
	}
	var ng = document.getElementById('new_goal');
	auto_grow(ng, 22);	
}

function auto_grow(textarea, init_height) {
	var height = textarea.scrollHeight;
	if (height > init_height) {
		textarea.style.height = height + "px";
	}
}

function addNewGoal(){
	
	if($('#new_goal').val().length && $('#new_goal').val() != txtWatermark){
		goalList[goalList.length] = $('#new_goal').val();
		$('#new_goal').val('');
		$('#new_goal').css('height', '19px');
		ajax_send_goals();
		drawGoalsList();
	}
}

function updateGoal(index){
	if(!$('#goal_'+index).val().length){
		if(!deleteGoal(index, true))
			$('#goal_'+index).val(goalList[index]);	
		return;
	}
	
	goalList[index] = $('#goal_'+index).val();
	ajax_send_goals();
}

function deleteGoal(index, blreturn){
	
	var newGoalList = new Array();
	var newIndex = 0;
	if(confirm('Are you sure want to delete this goal?')){
		for(var i=0; i<goalList.length; i++){
			if(i != index){
				newGoalList[newIndex] = goalList[i];
				newIndex++;
			}
		}
		goalList = newGoalList;
		ajax_send_goals();
		$("#delete_"+index).btOff();
		drawGoalsList();
		if(blreturn)
		return true;
	}else{
		if(blreturn)
		return false;
	}
}

function ajax_send_goals(){
	
	var StrList = '';
	if(goalList.length){
		//Convert on JSON
		StrList =  $.toJSON(goalList);
		//convert to base64
		StrList = $.base64.encode(StrList);
	}
	//Bind
	$.ajax({
		type: 'POST',
		url: 'index.php',
		data: {
				page: 'goals',
				action: 'ajax_goals_save',
				goal: StrList
			},
		success: function(data){
				//console.log(data);
			}
	});
}

function drawGoalsList(){
	
	$("#new_goal").btOff();
	
	var html = '';
	var margin = 0;

	for(var i=0; i<goalList.length; i++){
		margin = ((i+1)<10)?'20':'30';
		html += '<p>';
		html +=		'<b class="handwritten" style="margin-left: -'+margin+'px;">'+ (i+1) +'.</b>';
		html += 	'<textarea id="goal_'+i+'" name="goal[]" onkeyup="auto_grow(this,21);" onblur="updateGoal('+i+')" style="vertical-align:top; overflow:auto; margin-left: 10px;margin-right: 20px;">'+goalList[i]+'</textarea>';
		html +=		'<a id="delete_'+ i +'" style="text-decoration:none" title="Delete" href="javascript:deleteGoal('+i+')">X</a>';
		html += '</p>';
	}
	
	margin = ((i+1)<10)?'20':'30';
	html += '<p>';
	html +=		'<b class="handwritten" style="margin-left: -'+margin+'px;">'+ (i+1) +'.</b>';
	html += 	'<textarea id="new_goal" name="new_goal" onkeyup="auto_grow(this,21);" onblur="addNewGoal()" style="vertical-align:top; overflow:auto; margin-left: 10px; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;">Write your new goal here...</textarea>';
	html += '</p>';
	
	$('#goals').html(html);
	$("#new_goal").Watermark(txtWatermark);
	$("#new_goal").bt('Click outside the edit box to finish editing.', {trigger: ['focus', 'blur keyup'], positions: 'top', fill: 'rgba(255, 255, 255, 1.0)'});	
	$("textarea[id*='goal_']").bt('Click outside the edit box to finish editing.', {trigger: ['focus', 'blur keyup'], positions: 'top', fill: 'rgba(255, 255, 255, 1.0)'});
	$("a[id*='delete']").bt({width: '50px', positions: 'right', fill: 'rgba(255, 255, 255, 1.0)'});
	
	
	fixGrow();
	//console.log(goalList);
}