var noteCanvas = new Class({
	initialize: function(notecollection, canvas, infobox){

		notecollection.each(function(note, idx){

		var entry = new Element('div');
		entry.addClass('entry');

		entry.setStyles({
			top:		note.tops,
			left:		note.left
		});

		entry.injectInside(canvas);
		
		// note area
		var elm = new Element('div');
		elm.addClass('note');
		elm.setStyles({
			height:		note.height,
			width: 		note.width
		});
	
		elm.injectInside(entry);

		// tooltip area
		var tooltip = new Element('div');
		tooltip.setHTML('<div class="tooltip-content"><h3>' + note.title + '</h3><p>' + note.desc + '</p></div>');

		tooltip.addClass('tooltip');
		tooltip.setStyles({
			display:	'none'
		});

		tooltip.injectInside(infobox);

		// events
		entry.addEvent('mouseenter', function(ne){
			entry.setStyle('z-index', '3000');
			tooltip.setStyle('display', 'block');
			elm.addClass('hi');
		});

		entry.addEvent('mouseleave', function(ne){
			entry.setStyle('z-index', '0');
			tooltip.setStyle('display', 'none');
			elm.removeClass('hi');
		});

		entry.addEvent('click', function(ne){
			$$('div.tooltip').each(function(tool){
				tool.setStyle('display', 'none');
			});

			tooltip.setStyle('display', 'block');
			elm.addClass('hi');			
		});
		
	});

	canvas.addEvent('mouseenter', function(e){
		canvas.addClass('on');
	});

	canvas.addEvent('mouseleave', function(e){
		canvas.removeClass('on');
	});
	
	} // close initialize function
});