;(function($) {

$('.on-canvas img').removeAttr('title');

$note = $('<div>').css({
    display: 'none',
    position: 'absolute',
    'z-index': 400
});

$noteContent = $('<div>').addClass('on-note').css({
    position: 'absolute'
}).appendTo($note);

$('.on-image-note').mouseenter(function() {
    var $this = $(this);
    
    var id = $this.attr('id');
    var parts = id.split("-");
    var layer = "#layer-"+parts[1];
    var area = "#area-"+parts[1]+'-'+parts[2];
    
    //$(layer).css({opacity: 1}).show();
    $(layer).show();
    $(area).addClass('on-area-selected');

    $(this).mouseleave(function() {        
        $(layer).hide();
        $(area).removeClass('on-area-selected');
    });
});

	$('.on-viewport').mouseenter(function() {
		//console.log('enter');
		//$('.on-layer', this).css({opacity: 0}).show().stop().animate({opacity: 1});
		$('.on-layer', this).show();
		
			$('.on-area-wrapper', this).mouseenter(function(e) {
                            $this = $(this);                            
                            $(this).addClass('on-area-selected');

                            var id = $(this).attr('id');
                            var parts = id.split("-");
                            var span = "#span-"+parts[1]+'-'+parts[2];

                            var content = $(span).html();
                            $noteContent.html(content);

                            $note.css({
                                top: 0,
                                left: 0
                            }).appendTo($this).show();

                            $(span).addClass('span-selected');

                            $(this).mouseleave(function() {
                                //$note.hide();
                                $(this).removeClass('on-area-selected');
                                $(span).removeClass('span-selected');
                            });
			});
		
	}).mouseleave(function() {
                $note.hide();
		//console.log('leave');
		//$('.on-layer', this).stop().animate({opacity: 0});
		$('.on-layer', this).hide();
	});
	
	
	

})(jQuery);