var resizeArea = true;

$(document).ready(function() {
	if ($("#conceptImage").length > 0) {
		enableDragDrop();
	}
	enableConceptRatingForm();
	updateAllPositions();
});

$(window).load(function() {
	loadNotes();
	resizeConceptArea();
	enabledConceptDrag();

	$(window).resize(function() {
		resizeConceptArea();
	});	
});


function enableDragDrop() {
	$("#addNoteAction").draggable({ helper: "clone", appendTo: 'body' });

	$("#conceptImage").droppable({ drop: function(event, ui) {
		var x = ui.position.left; // -this.offsetLeft;
		var y = ui.position.top; // -this.offsetTop;

		if (ui.draggable.attr("id") == "addNoteAction") {
			x -= $("#conceptDrag").offset().left;
			y -= $("#conceptDrag").offset().top;

			createNoteEntry(x, y);
		} else if (ui.draggable.hasClass("notePanel")) {
			updateNoteEntryCoords(ui.draggable.find(".noteFormContainer"), x, y);
		}
	}
	});
}

function enableConceptRatingForm() {
	if ($("#conceptRatingForm").length == 0)
		return;
	$("#conceptRatingForm").gradable(function(value, x) {
		var selectedCheckbox = x.find("input[value=" + value + "]");
		selectedCheckbox.attr("checked", true);
		$("#conceptRatingForm").ajaxSubmit({
			dataType: 'json',
			success: function(data) {
				if (data.Success == true) {
					alert("Rating saved");
				} else {
					alert("failed to save");
				}
			}
		});
	}, { range: 10 });
}

/*
Make concepts draggable
***********************/
function enabledConceptDrag() {
	if ($("#conceptImage").length == 0) {
		return;
	}

	var conceptWidth = parseInt($("#concept").css("width"));
	var conceptHeight = parseInt($("#concept").css("height"));
	var offset = $("#concept").offset();
	var x = (conceptWidth + offset.left) - parseInt($("#conceptImage").width()) - $("#saveNoteForm").width();
	var y = (conceptHeight + offset.top) - $("#conceptImage").height();//  - $("#saveNoteForm").height();
	var width = offset.left + 2
	var height = offset.top + $("#saveNoteForm").height();
	if (resizeArea) {
		$("#conceptDrag").draggable({ handle: $("#conceptImage"), containment: [x, y, width, height] });
	}
}

function resizeConceptArea() {
	if (resizeArea) {
		if ($("#conceptImage").width() < $("#concept").width() && $("#conceptImage").height() < $("#concept").height()) {
			resizeArea = false;
			$("#concept").css({ width: $("#conceptImage").width() + "px", height: $("#conceptImage").height() + "px" });
			return;
		}

		var newWidth = $(window).width() - ($("#concept").offset().left * 2);
		var newHeight = $(window).height() - ($("#concept").offset().top * 2);
		if (newWidth > $("#conceptImage").width() + 200) {
			newWidth = $("#conceptImage").width() + 200;
		}

		if (newHeight > $("#conceptImage").height() + 200) {
			newHeight = $("#conceptImage").height() + 200;
		}
		
		$("#concept").css({ width: newWidth + "px", height: newHeight + "px" });
	}
}

function updateAllPositions() {
	$("#concept .notePanel").each(function() {
		var imageOffset = $("#conceptImage").offset();
		var x = parseInt($(this).find(".noteCoordinateX").val());
		var y = parseInt($(this).find(".noteCoordinateY").val());
		var offsetx = x; // +imageOffset.left;
		var offsety = y;// +imageOffset.top;
		$(this).css({ left: offsetx + "px", top: offsety + "px" });
	});
}

/*
Create note form
****************/
function createNoteEntry(x, y, noteData, noteId, noteView) {
	if (!noteView) {
		
	}
	var noteForm = $("#saveNoteForm").clone().appendTo("#conceptDrag");
	noteForm.attr("action", "/Concept.aspx/SaveNoteJson");
	noteForm.attr("id", "noteform_" + $(".noteForm").length + 1);

	if (noteData) {
		noteForm.find(".noteData").html(noteData);
	}

	if (noteId) {
		noteForm.find(".noteId").val(noteId);
	}

	noteForm.draggable({ handle: ".dragHandle" });

	noteForm.find(".cancelAction").click(function() {
		noteForm.remove();
		if (noteView) {
			noteView.show().find(".closeNoteView").click();
		}
		return false;
	});

	noteForm.show();

	noteForm.find(".noteCoordinateX").val(x);
	noteForm.find(".noteCoordinateY").val(y);

	var imageOffset = $("#conceptImage").offset();

	noteForm.css({ position: "absolute", left: (x /*+ imageOffset.left*/) + "px", top: (y /*+ imageOffset.top*/) + "px" });

	// Submit formdata
	noteForm.find("input:submit").click(function() {
		noteForm.ajaxSubmit({
			dataType: 'json',
			success: function(data) {
				if (data.Success == true) {
					if (noteView) {
						noteView.find(".noteData").html(noteForm.find(".noteData").val());
						noteView.show();
					} else {
						addNoteView(data.NoteId, noteForm.find(".noteData").val(), true, x, y, "");
					}
					noteForm.remove();
				} else {
					// handle errors
				}
			}
		});
		return false;
	});

}

/*
Update coordinates for note
***************************/
function updateNoteEntryCoords(noteForm, x, y) {
	noteForm.find(".noteCoordinateX").val(x);
	noteForm.find(".noteCoordinateY").val(y);
	if (noteForm.find(".noteId").val() == "")
		return;

	noteForm.css({ opacity: 0.5 });
	$.getJSON("/Concept.aspx/UpdateCoords", { noteId: noteForm.find(".noteId").val(), x: x, y: y }, function(data) { // Update note coords
	if (data.Success) {
	} else {
			alert("fail");
		}
		noteForm.css({ opacity: 1 });
	});
}

function closeForm(noteForm) {
	noteForm.find(".noteFormContainer").hide();
	noteForm.find(".openNoteView").show();
	noteForm.css("z-index", "1");
}

function openForm(noteForm) {
	noteForm.find(".noteFormContainer").show();
	noteForm.find(".openNoteView").hide();

	var noteContainer = noteForm.find(".noteFormContainer");

	$(".notePanel").css("z-index", "1");
	noteForm.css("z-index", "2");
	/*
	if (cliLeft > 0) {
		//noteForm.find(".noteFormContainer").css("left", "-" + cliLeft + "px");
	}
	*/
}

function deleteNote(note) {
	if (note.find(".noteId").val() == "") {
		note.fadeOut(1000, function() { note.remove(); });
		return;
	}

	$.getJSON("/Concept.aspx/DeleteNote", { noteId: note.find(".noteId").val() }, function(data) { // Delete note
		if (data.Success) {
			note.fadeOut(1000, function() { note.remove(); });
		} else {
			alert("fail");
		}
		note.css({ opacity: 1 });
	});
	updateAllPositions();	
}

/*
Load existing notes
*******************/
function loadNotes() {
	if ($("#conceptImage").length == 0) {
		return;
	}

	var imageOffset = $("#conceptImage").offset();
	$("#concept .viewNotePanel").each(function() {
		var notePanel = $(this);
		var x = parseInt(notePanel.find(".noteCoordinateX").val());
		var y = parseInt(notePanel.find(".noteCoordinateY").val());
		var offsetx = x /*+ imageOffset.left*/;
		var offsety = y /*+ imageOffset.top*/;
		notePanel.css({ position: "absolute", left: (offsetx) + "px", top: offsety + "px" });

		if (notePanel.find(".dragHandle").length > 0) {
			notePanel.draggable({ handle: ".dragHandle", start: function() {
				notePanel.find(".openNoteView").unbind("click");
			}, stop: function(event, ui) {
				notePanel.find(".openNoteView").mousedown(function() {
					$(this).click(function() {
						openForm(notePanel);
						return false;
					});
				});
			}
			});
		}

		$(this).find(".openNoteView").click(function() {
			openForm(notePanel);
		});

		$(this).find(".closeNoteView").click(function() {
			closeForm(notePanel);
			return false;
		});

		$(this).find(".deleteAction").click(function() {
			deleteNote(notePanel);
			return false;
		});

		$(this).find(".editNoteAction").click(function() {
			var noteData = notePanel.find(".noteData").html();
			var noteId = notePanel.find(".noteId").val();
			createNoteEntry(x, y, noteData, noteId, notePanel);
			notePanel.hide();
			return false;
		});
	});
}

function addNoteView(noteId, noteData, canEdit, x, y, displayName) {
	var imageOffset = $("#conceptImage").offset();
	var noteView = $("#noteViewTemplate").clone();
	var offsetx = x + imageOffset.left;
	var offsety = y + imageOffset.top;

	noteView.css({ position: "absolute", left: (offsetx) + "px", top: offsety + "px" });

	noteView.find(".displayName").html(displayName);
	noteView.find(".noteId").val(noteId);
	noteView.find(".noteCoordinateX").val(x);
	noteView.find(".noteCoordinateY").val(y);
	noteView.find(".noteData").html(noteData);

	noteView.draggable({ handle: ".dragHandle", start: function() {
		noteView.find(".openNoteView").unbind("click");
	}, stop: function(event, ui) {
		noteView.find(".openNoteView").mousedown(function() {
			$(this).click(function() {
				openForm(noteView);
				return false;
			});
		});
	}
	});

	noteView.find(".openNoteView").click(function() {
		openForm(noteView);
	});

	noteView.find(".closeNoteView").click(function() {
		closeForm(noteView);
		return false;
	});

	noteView.find(".deleteAction").click(function() {
		deleteNote(noteView);
		return false;
	});

	noteView.find(".editNoteAction").click(function() {
		var noteData = noteView.find(".noteData").html();
		var noteId = noteView.find(".noteId").val();
		createNoteEntry(x, y, noteData, noteId, noteView);
		noteView.hide();
		return false;
	});

	
	noteView.appendTo("#conceptDrag");
	noteView.show();
	updateAllPositions();
}