Выделить участок изображения
 

Добрый день!
Подскажите, пожалуйста, как можно с помощью jQuery или (и) CSS выделить участок изображения? Т.е. вся картинка затемняется, а нужный участок остается прозрачным. Подобный эффект присутствует на сайте vkontakte и называется "отметить на фото".

На этот плагин я натыкался, вот только предназначен он для редактирования картинок. Хотя эффект выделения то что нужно.
Может кто-нибудь знает как он достигается?

Спасибо! Это то, что нужно.
Вот только никак не пойму каков механизм выделения. Как можно добиться подобного эффекта затемнения изображения вокруг...

Берешь 6 DIV'ов где то к примеру)))
1-й див будет поверх фотки, будет как площадка где будут все остальные дивы.
2-й див будет селектор как бы, то есть то самый квадрат которым ты выделяешь.
Остальные 4 дива будут затемнять остальное пространство фотографии (сверху, слева, снизу, справа)

Наверное как то так.

$(document).ready(function() {
	$('#photo').load(function() {
		var img = $(this).offset(), 
		    imgWidth = $(this).width(), 
		    imgHeight = $(this).height();
		$(document.body).append('<div style="position: absolute;top:'+
			img.top+'px;left: '+img.left+'px;width: '+imgWidth+'px;height: '+imgHeight+'px;" id="area"></div>');
		$('#area').append('<div style="position: relative;z-index: 5;top: 0px;left: 0px;width: '+imgWidth+'px;height: '+imgHeight+'px;border: 2px red dotted;" id="select"></div>');
		$("#select").resizable({
			containment: '#area',
			handles: 'all',
			resize: function(event, ui) {
				$('#top').css('top', '0').css('left', '0').css('height', $("#select").position().top).css('width', imgWidth);
				$('#left').css('top', $("#select").position().top).css('height', $("#select").height()+2).css('width', ui.position.left).css('left', '0');
				$('#bottom').css('top', $("#select").position().top+$("#select").height()+2).css('height', $('#area').height()-($("#select").position().top+$("#select").height())).css('width', imgWidth).css('left', '0');
				$('#right').css('top', $("#select").position().top).css('height', $("#select").height()+2).css('width', $('#area').width()-(ui.position.left+$("#select").width())).css('left', ui.position.left+$("#select").width());
			}
		});
		$('#area').append('<div style="background-color: black;position: absolute;opacity: 0.5;" id="top"></div>');
		$('#area').append('<div style="background-color: black;position: absolute;opacity: 0.5;" id="left"></div>');
		$('#area').append('<div style="background-color: black;position: absolute;opacity: 0.5;" id="bottom"></div>');
		$('#area').append('<div style="background-color: black;position: absolute;opacity: 0.5;" id="right"></div>');
	});
});

Код конечно ооооооочень далеко от идеального, но думаю суть прояснить сможет)) Требуется еще и плагин resizable.

Сложновато... Я надеялся всё делается по-проще.
walik, спасибо за объяснения.