jQuery( function ($) {
	var intro = $('#intro'),
		frontpages = $('.frontpages', intro).children(),
		mainBox = $('.main-box', intro),
		frontpageBoxes;
			
	frontpages.each( function () {
		var frontpage = $(this),
			nodeInfo = $('.node-info', this).addClass('body'),
			nodeImg = $('.main-image', this).html(),
			nodeTitle = $('h2', this).clone(),
			
			nodeText = $('<div class="text-area" />').append(nodeTitle).append(nodeInfo);
			
			nodeObj = $('<div class="frontpage-hover-box frontpage-box" />').append(nodeImg).append(nodeText);
						
		nodeObj.appendTo( intro );
		
		frontpage.append('<span class="frontpage-arrow" />');
				
		$.data(this, 'conntectedTo', nodeObj);
	});
	
	frontpageBoxes = intro.children();
	
	intro.delegate('.folder-box', 'mouseover mouseout', function (e) {
		var hoverElem = $(this),
			frontpageBox = $.data(this, 'conntectedTo');
		
		frontpageBoxes.removeClass('active');

		if (e.type === 'mouseover') {
			frontpageBox.addClass('active');
		}
	});
});