$(function(){
	
	$("a[id^='tag-']").unbind(); 
	$("a[id^='tag-']").mouseenter(function(){ 
		offset = $("#main_image").offset(); 
		var pcs = this.id.split('-'); 
		var xpos = parseInt(pcs[1]) + offset.left - 75;
		var ypos = parseInt(pcs[2]) + offset.top - 75;
		xpos = (pcs[1] < 75) ? offset.left : xpos;
		ypos = (pcs[2] < 75) ? offset.top : ypos;
		$('#dialog').dialog('close');
		$('#note_frame').dialog('open');
		$('#note_frame').dialog('option', 'position', [xpos-$(window).scrollLeft(), ypos-$(window).scrollTop()]);
		$('#tag_text').text(this.innerHTML);
		$('#tag_text').show();
	}); 
 
	$("a[id^='tag-']").mouseleave(function(){ 
		$('#note_frame').dialog('close');
	}); 
	
	$('#note_frame').dialog({
		autoOpen: false,
		dialogClass: 'face',
		width: 150
	});
	
	$("a[id^='tag-']").each(function(){
		appendnote(this);
	});
	
	addnoteevents();
	
	$(window).resize(function () {
	
		$('.note').remove();
		$('.notep').remove();

		$("a[id^='tag-']").each(function(){
			appendnote(this);				
		});

		addnoteevents();

	});
		
	function appendnote(note){
		offset = $("#main_image").offset();
		var pcs = note.id.split('-'); //alert("x: "+offset.left+" y: "+offset.top); 
		var xpos = parseInt(pcs[1]) + offset.left - 75;
		var ypos = parseInt(pcs[2]) + offset.top - 75; //alert("x: "+xpos+" y: "+ypos); 
		var ypos_p = ypos + 150;
		note_area_div = $('<div id="note-'+pcs[1]+'-'+pcs[2]+'" class="note"></div>').css({ left: xpos + 'px', top: ypos + 'px', width: 150 + 'px', height: 150 + 'px' });
		note_text_div = $('<div id="notep-'+pcs[1]+'-'+pcs[2]+'" class="notep" >'+note.innerHTML+'</div>').css({ left: xpos + 'px', top: ypos_p + 'px'});
		$('body').append(note_area_div);
		$('body').append(note_text_div);
	}
	
	function addnoteevents(){
		$("div[id^='note-']").hover(
			function(){
				var pcs = this.id.split('-');
				$('#notep-'+pcs[1]+'-'+pcs[2]).show();
			},
			function(){
				var pcs = this.id.split('-'); 
				$('#notep-'+pcs[1]+'-'+pcs[2]).hide();
			}
		);
	}

	/********************************************************
	// Dialog			
	$('#dialog').dialog({
		autoOpen: false,
		width: 500,
		buttons: {
			"Ok": function() { 
				$(this).dialog("close"); 
			}, 
			"Cancel": function() { 
				$(this).dialog("close"); 
			} 
		}
	});
	
	// Dialog Link
	$('#main_image').click(function(event){
		//$('#dialog').dialog('open');
		//$('#dialog').dialog('option', 'position', [event.pageX+50, event.pageY]);
		offset = $("#main_image").offset();
		var xpos = event.pageX - offset.left;
		var ypos = event.pageY - offset.top;
		xpos = (xpos < 0) ? 0 : parseInt(xpos);
		ypos = (ypos < 0) ? 0 : parseInt(ypos);
		$('#note_frame').dialog('open');
		$('#note_frame').dialog('option', 'position', [event.pageX-75-$(window).scrollLeft(), event.pageY-75-$(window).scrollTop()]);
		$('#note_position').val(xpos + ',' + ypos);
		//$('#note_position').val(event.pageX + ',' + event.pageY);
		//alert(event.target.offsetLeft + ',' + event.target.offsetTop);
		return false;
	});*/

});