function createNote(imageId, noteData)
{
	for (var i = 0; i < noteData.length; i++)
		addNote(imageId, noteData[i]);
	
	$("#" + imageId).hover(
		function(){
			$('.note').show();
		},
		function(){
			$('.note').hide();
		}
	);
	
	addNoteEvent();
	
	$(window).resize(function () {
		$('.note').remove();
		$('.notep').remove();

		for (var i = 0; i < noteData.length; i++)
			addNote(imageId, noteData[i]);

		addNoteEvent();
	});
}

function addNote(imageId, noteData)
{
	imgOffset = $("#" + imageId).offset();

	if (noteData.isdelete == 1) return false;
	note_left  = parseInt(imgOffset.left) + parseInt(noteData.x1);
	note_top   = parseInt(imgOffset.top) + parseInt(noteData.y1);
	note_p_top = note_top + parseInt(noteData.height) + 5;
	
	note_area = $('<div id="' + noteData.index + '" name="' + noteData.link + '" class="note"></div>').css({
		left: note_left + 'px',
		top: note_top + 'px',
		width: noteData.width + 'px',
		height: noteData.height + 'px'
	});
	
	note_text = $('<div id="p' + noteData.index + '" class="notep">' + noteData.note + '</div>').css({
		left: note_left + 'px',
		top: note_p_top + 'px'
	});

	$('body').append(note_area);
	$('body').append(note_text);
}

function addNoteEvent()
{
	$('.note').hover(
		function(){
			$('.note').show();
			$(this).next('.notep').show();
			$(this).next('.notep').css("z-index", 10000);
		},
		function(){
			$('.note').show();
			$(this).next('.notep').hide();
			$(this).next('.notep').css("z-index", 0);
		}
	);
	
	$('.note').click(function() {
		if (isUrl($(this).attr('name')))
			window.open($(this).attr('name'), '_blank');
	});
}