var editor;

$(function() {

	var elem;
	
	$(".editable").colorbox({
		width:"80%", 
		height:"80%",
		inline:true, 
		href:"#inline_example1"
	}, function() {
		
		$(".edit-notification").remove();
		elem = $(this);
		
		var html = elem.html();

		if(!editor) {
			editor = CKEDITOR.replace('editor',
					 {
						toolbar : [ [ 'Bold', 'Italic', 'Underline', 'Strike', '-', 'Link' ] ]
					 });
		}
		
		editor.setData(html);
	});
	
	$("#btnSubmit").click(function() {
				
		$.post("eztext/SaveContent.php", { text: editor.getData(), elementID: elem.attr("id") },
		function(data) {
			elem.html(editor.getData());
			alert("Successfully updated content");
		});
	});
	
	$().bind('cbox_cleanup', function(){
		if (!editor)
			return;
			
		$("#contents").css("display", "");

		editor.destroy();
		editor = null;
	});
	
	var editing = false;
	
	$(".editable").hover(
		
		function() {	// Over

			if(!editing) {
				var text = "<span class=\"edit-notification\" style=\"color: #f00;display:block;position:absolute;background:#fff;padding:.3em;font-weight:bold;border:1px solid #bbb;\">Click to Edit</span>";
				$(this).prepend(text);
				$(this).find("span.edit-notification").hide().fadeIn("fast");
				originalColor = $(this).css("background-color");
				$(this).css("background", "#555");
			}
			else {
				originalColor = $(this).css("background-color");
				
			}
		},
		function() {	// Out
			$(this).find("span.edit-notification").fadeOut(300, function() { 
				$(this).remove();
			});
			
			$(this).css("background-color", "transparent");
		}
	);
});