$(document).ready(function(){
	
	// Adding title blocks for icon menu
	$("#iconMenu")
		.append('<div id="iconMenuName"></div>')
		.find('#iconMenuName')
		.css('color', '#fff');
	
	// Adding animation to icon menu
	$("#iconMenu a").hover(
		function(){
			$(this).css('width', '60px');
			$(this).css('height', '60px');
			$(this).find('.blackWhite').css('visibility', 'visible').stop().animate({ 
        opacity: 0
      }, 250 );
			
			$(this).stop().animate({ 
        width: "77px",
        height: "77px"
      }, 250 );
				
			var title = $(this).attr('title');
			$('#iconMenuName')
				.stop()
				.css('color', '#fff')
				.text('— ' + title)
				.animate({ 
	      	color: "#aaa"
	      }, 250 );
		},
		
		function(){
			$(this).find('.blackWhite').stop().animate({ 
        opacity: 1
      }, 300 );

			$(this).stop().animate({ 
        width: "60px",
        height: "60px"
      }, 250 );	
				
			$('#iconMenuName')
				.stop()
				.animate({ 
        	color: "#fff"
      	}, 250);	
		}
	);
	if($('#portfolio').size())
	{
		$('#portfolioItemList a').lightBox({
			txtImage: "",
			txtOf: "из"
		});
		
		$('#portfolioItemList .portfolioText').css('opacity', 0);
						
		$('#portfolioHelp').css('opacity', 0.99);
		
		$('#portfolioItemList a').each(function(){
			
			$(this).find('img')
				.addClass('colorized')
				.css('top', '-107px')
				.clone()
				.addClass('blackWhite')
				.css('top', 0)
				.insertAfter(
					$(this).find('img.colorized')
				);
		});
		
		$('#portfolioItemList li').each(function(){
				
			$(this).hover(
				function()
				{
					$(this).find('img.blackWhite')
						.css('top', 0)
						.stop()
						.animate({
							opacity: 0
						}, 300);
						
					$('#portfolioHelp')
						.stop()
						.animate({
							opacity: 0
						}, 300);
									
					$(this).find('.portfolioText')
						.css('display', 'block')
						.stop()
						.animate({
							opacity: 1
						}, 300);
				},
				function()
				{
					$(this).find('img.blackWhite')
						.css('top', 0)
						.stop()
						.animate({
							opacity: 1
						}, 300);	
						
					$('#portfolioHelp')
						.stop()
						.animate({
							opacity: 1
						}, 300);
			
					$(this).find('.portfolioText')
						.css('display', 'block')
						.stop()
						.animate({
							opacity: 0
						}, 300);				
				}
			);
			
		});
		
	}
	
	
	if($('#topPortfolio').size())
	{
		// Removing css support styles from portfolio section
		$('.topPortfolioItem.selected')
			.removeClass('selected');
		
		// Adjusting sizes of portfolio items
		$('.topPortfolioItem')
			.animate(
				{marginRight: '-144px'}, 200, null,
				function(){
				
					// Transfering from float to absolute coordinates for speed
					left = 0;
					i = 1;
					$('.topPortfolioItem')
						.css('margin', "0 0 0 0")
						.css('float', 'none')
						.css('position', 'absolute')
						.css('top', 0)
						.each(function(){
							text = $(this).find('.topPortfolioText');
							text.clone()
								.attr('id', 'topPortfolioText' + i)
								.insertAfter('#topPortfolioHelp')
								.css('opacity', 0)
								.css("display", "block");
							text.remove();					
							$(this).css('left', left).data('defaultLeft', left).data('index', i++);
							left = left + $(this).width() - 136;
					});
				
					$('.topPortfolioItem').hover(
						function(){
							i = 0;
							$(this).siblings().not($(this).nextAll()).each(function(){
								$(this).stop().animate({
									left: $(this).data('defaultLeft') - 34*i++
								}, 400, null);
							});
							$(this).stop().animate({
								left: $(this).data('defaultLeft') - 34*i
							}, 400);
							$('#topPortfolioText' + $(this).data('index'))
								.css("opacity", 0)
								.css("z-index", 3000)
								.stop()
								.animate({
									opacity: 1
								}, 400);
							$('#topPortfolioHelp')
								.stop()
								.animate({
									color: '#fff'
								}, 400);
							i = 4-i;
							$(this).nextAll().each(function(){
								$(this).stop().animate({
									left: $(this).data('defaultLeft') + 34*i--
								}, 400);
							});
						},
						function(){						
							$('#topPortfolioText' + $(this).data('index'))
							.stop()
							.animate({
								opacity: 0
							});			
							$('#topPortfolioHelp')
								.stop()
								.animate({
									color: '#bbb'
								}, 400);
							$('.topPortfolioItem').each(function(){
								$(this).stop().animate({
									left: $(this).data('defaultLeft')
								}, 400);
							})		
						}
					);		
				
					$('#topPortfolioHelp').bind('mouseover',
						function(){
							$('.topPortfolioItem').each(function(){
								$(this).stop().animate({
									left: $(this).data('defaultLeft')
								}, 500);
							})
						}
					);
				}
			);
		}
});