$(document).ready(function() {
// устанавливаем alt и большое изображение для первого элемента 
// с классом material-item при загрузке страницы
	$('.collection-materials-left').each(function() {
		var alt = 	$('.material-item:first img',$(this)).addClass('material-item-select').attr('alt'),
			lnk = 	$('.material-item:first a',$(this)).attr('href'),
			big =   $(this).next().find('img').attr('src',lnk);
			$('em.heading',$(this)).text(alt);
	});
	
// настраиваем изменение поля em class="heading" при событии hover на соответствующие изображения
	$('.material-item img').hover(function() {
		var parent = $(this).parent().parent().parent();
		$('.material-item img',parent).removeClass('material-item-select');
		var alt = $(this).attr('alt');
		$('em.heading',parent).text(alt);
	});
	
// отключаем дефолтное поведение ссылок внутри блоков с классом .material-item
	$('.material-item a').click(function() {
		return false;
	});

// настраиваем загрузку больших изображений при клике по уменьшенным изображениям	
	$('.material-item img').click(function() {
		var parent = $(this).parent().parent().parent();	
		var lnk = $(this).parent().attr('href');
		parent.next().find('img').attr('src',lnk);
	});

});