$(document).ready(function(){
	
	//определение ширины блока с работами--------------------------------------------
	//if (!$.browser.msie){
		var thumbnail_width = 236;
		var projects_thumbnails_width = document.body.clientWidth - 54 - 306;
		var thumbnail_number = Math.round(projects_thumbnails_width / thumbnail_width - 0.5);
		var thumbnail_margin = Math.round((projects_thumbnails_width - thumbnail_number * thumbnail_width) /  thumbnail_number - 0.5);
		$(".thumbnail").css("margin-left", thumbnail_margin + "px");

		$(window).resize(function(){
			var thumbnail_width = 236;
			var projects_thumbnails_width = document.body.clientWidth - 54 - 306;
			var thumbnail_number = Math.round(projects_thumbnails_width / thumbnail_width - 0.5);
			var thumbnail_margin = Math.round((projects_thumbnails_width - thumbnail_number * thumbnail_width) /  thumbnail_number - 0.5);
			$(".thumbnail").css("margin-left", thumbnail_margin + "px");
		});
	//------------------------------------------------------------------------
	

	$("#index_photos li").draggable({ stack: { group: '#index_photos li', min: 1 } });
	$("#about_photos li").draggable({ stack: { group: '#about_photos li', min: 1 } });
	$("#quote").draggable({ stack: { group: '#quote', min: 1 } });

	
	var left = Math.round(50 - 15000 / document.documentElement.clientWidth);
	var top = Math.round(50 - 20000 / document.documentElement.clientWidth);
	var angle

	for (var i = 1; i < 17; i++) {
		if (Math.random() * 10 > 4)
			$("#photo_" + i).css("left", left - Math.round(Math.random() * 35) + "%");
		else
			$("#photo_" + i).css("left", left + Math.round(Math.random() * 35) + "%");
		if (Math.random() * 10 > 4)
			$("#photo_" + i).css("top", top - Math.round(Math.random() * 15) + "%");
		else
			$("#photo_" + i).css("top", top + Math.round(Math.random() * 15) + "%");
		
		$("#photo_" + i).css("z-index", Math.round(Math.random() * 100));
		
		angle = Math.round(Math.random() * 20) + 3;
		
		if (Math.random() * 10 > 4) {
			$("#photo_" + i).css("-o-transform", "rotate(" + angle + "deg)");
			$("#photo_" + i).css("-webkit-transform", "rotate(" + angle + "deg)");
			$("#photo_" + i).css("-moz-transform", "rotate(" + angle + "deg)");
			$("#photo_" + i).css("transform", "rotate(" + angle + "deg)");
		}
		else
			{
			$("#photo_" + i).css("-o-transform", "rotate(-" + angle + "deg)");
			$("#photo_" + i).css("-webkit-transform", "rotate(-" + angle + "deg)");
			$("#photo_" + i).css("-moz-transform", "rotate(-" + angle + "deg)");
			$("#photo_" + i).css("transform", "rotate(-" + angle + "deg)");
		}
	}

	
// порядок появления фотографий на главной странице ----------------------------------------------------------------------
	setTimeout(function(){$("#photo_1").fadeIn();}, 200);
	setTimeout(function(){$("#photo_2").fadeIn();}, 400);
	setTimeout(function(){$("#photo_3").fadeIn();}, 600);
	setTimeout(function(){$("#photo_4").fadeIn();}, 800);
	setTimeout(function(){$("#photo_5").fadeIn();}, 1000);
	setTimeout(function(){$("#photo_6").fadeIn();}, 1200);
	setTimeout(function(){$("#photo_7").fadeIn();}, 1400);
	setTimeout(function(){$("#photo_8").fadeIn();}, 1600);
	setTimeout(function(){$("#photo_9").fadeIn();}, 1800);
	setTimeout(function(){$("#photo_10").fadeIn();}, 2000);
	setTimeout(function(){$("#photo_11").fadeIn();}, 2200);
	setTimeout(function(){$("#photo_12").fadeIn();}, 2400);
	setTimeout(function(){$("#photo_13").fadeIn();}, 2600);
	setTimeout(function(){$("#photo_14").fadeIn();}, 2800);
	setTimeout(function(){$("#photo_15").fadeIn();}, 3000);
	setTimeout(function(){$("#photo_16").fadeIn();}, 3000);
	
// порядок появления фотографий на странице о себе ----------------------------------------------------------------------
	setTimeout(function(){$("#portrait_1").fadeIn(400);}, 300);
	setTimeout(function(){$("#portrait_2").fadeIn(800);}, 600);
	setTimeout(function(){$("#quote").fadeIn(1000);}, 800);
	
// порядок появления фотографий на странице с проектами ----------------------------------------------------------------------
	setTimeout(function(){$("#thumbnail_1").fadeIn();}, 200);
	setTimeout(function(){$("#thumbnail_2").fadeIn();}, 400);
	setTimeout(function(){$("#thumbnail_3").fadeIn();}, 600);
	setTimeout(function(){$("#thumbnail_4").fadeIn();}, 800);
	setTimeout(function(){$("#thumbnail_5").fadeIn();}, 1000);
	setTimeout(function(){$("#thumbnail_6").fadeIn();}, 1200);
	setTimeout(function(){$("#thumbnail_7").fadeIn();}, 1400);
	setTimeout(function(){$("#thumbnail_8").fadeIn();}, 1600);
	setTimeout(function(){$("#thumbnail_9").fadeIn();}, 1800);
	setTimeout(function(){$("#thumbnail_10").fadeIn();}, 2000);
	setTimeout(function(){$("#thumbnail_11").fadeIn();}, 2200);
	setTimeout(function(){$("#thumbnail_12").fadeIn();}, 2400);
	setTimeout(function(){$("#thumbnail_13").fadeIn();}, 2600);
	setTimeout(function(){$("#thumbnail_14").fadeIn();}, 2800);
	setTimeout(function(){$("#thumbnail_15").fadeIn();}, 3000);
	setTimeout(function(){$("#thumbnail_16").fadeIn();}, 3000);

// угол поворота фотографий на странице с проектами ----------------------------------------------------------------------
	var projects_angle
	for (var i = 1; i < 17; i++) {
		angle = Math.random() * 7;
		if (Math.random() * 10 > 4) {
			$("#thumbnail_" + i).css("-o-transform", "rotate(" + angle + "deg)");
			$("#thumbnail_" + i).css("-webkit-transform", "rotate(" + angle + "deg)");
			$("#thumbnail_" + i).css("-moz-transform", "rotate(" + angle + "deg)");
			$("#thumbnail_" + i).css("transform", "rotate(" + angle + "deg)");
		}
		else
			{
			$("#thumbnail_" + i).css("-o-transform", "rotate(-" + angle + "deg)");
			$("#thumbnail_" + i).css("-webkit-transform", "rotate(-" + angle + "deg)");
			$("#thumbnail_" + i).css("-moz-transform", "rotate(-" + angle + "deg)");
			$("#thumbnail_" + i).css("transform", "rotate(-" + angle + "deg)");
		}
	}
	
// переключение между фотографиями / визуализацией /эскизами ----------------------------------------------------------------------	
	/*$('.thumbnail').livequery(
		function() { 
			visualisation
			//if($('.photo').css('display') == 'none'){
			//	
			//}
		
		
		}
	
	);*/
		
	/*$('#project_menu_photos').livequery(	
		function() { 
			if(!$(this).hasClass('on')){
				
				$(this).hover(
					function() {$(this).addClass('hover');},
					function() {$(this).removeClass('hover');}
				);
			}
		},
		function() { 
			// unbind the mouseover and mouseout events 
			$(this) 
			.unbind('mouseover') 
			.unbind('mouseout'); 
		}
	)*/
		
	
	/*		
	$('.project_menu').livequery(
		function() { 
			if(!$('#project_menu_photos').hasClass('on')){
				$('#project_menu_photos').hover(
					function() {$(this).addClass('hover');},
					function() {$(this).removeClass('hover');}
				);
			}
			if(!$('#project_menu_visualisation').hasClass('on')){
				$('#project_menu_visualisation').hover(
					function() {$(this).addClass('hover');},
					function() {$(this).removeClass('hover');}
				);
			}
			if(!$('#project_menu_sketches').hasClass('on')){
				$('#project_menu_sketches').hover(
					function() {$(this).addClass('hover');},
					function() {$(this).removeClass('hover');}
				);
			}
		},
		function() { 
			// unbind the mouseover and mouseout events 
			$(this) 
			.unbind('mouseover') 
			.unbind('mouseout'); 
		}
	)
	*/
		
	$('#project_menu_photos').livequery('click', function(event) { 
		$('.visualisation').hide('slow');
		$('#project_menu_visualisation').removeClass('on');
		$('.sketches').hide('slow');
		$('#project_menu_sketches').removeClass('on');
		$('.photos').show('slow');
		$('#project_menu_photos').addClass('on');
    });
	
	$('#project_menu_visualisation').livequery('click', function(event) { 
		$('.photos').hide('slow');
		$('#project_menu_photos').removeClass('on');
		$('.sketches').hide('slow');
		$('#project_menu_sketches').removeClass('on');
		$('.visualisation').show('slow');
		$('#project_menu_visualisation').addClass('on');
    });
	
	$('#project_menu_sketches').livequery('click', function(event) { 
		$('.photos').hide('slow');
		$('#project_menu_photos').removeClass('on');
		$('.visualisation').hide('slow');
		$('#project_menu_visualisation').removeClass('on');
		$('.sketches').show('slow');
		$('#project_menu_sketches').addClass('on');
    });
	
// ховер для превьюшек ----------------------------------------------------------------------
	$('.thumbnail').livequery(
		function() { 
			$('.bolshaya_akademicheskaya_thumbnail').hover(
				function() {$('.bolshaya_akademicheskaya_link').addClass('hover');},
				function() {$('.bolshaya_akademicheskaya_link').removeClass('hover');}
			);
			$('.bolshaya_akademicheskaya_link').hover(
				function() {$('.bolshaya_akademicheskaya_thumbnail').addClass('hover');},
				function() {$('.bolshaya_akademicheskaya_thumbnail').removeClass('hover');}
			);
			
			$('.bolshaya_filyovskaya_thumbnail').hover(
				function() {$('.bolshaya_filyovskaya_link').addClass('hover');},
				function() {$('.bolshaya_filyovskaya_link').removeClass('hover');}
			);
			$('.bolshaya_filyovskaya_link').hover(
				function() {$('.bolshaya_filyovskaya_thumbnail').addClass('hover');},
				function() {$('.bolshaya_filyovskaya_thumbnail').removeClass('hover');}
			);
			
			$('.bolshie_kamenshiki_thumbnail').hover(
				function() {$('.bolshie_kamenshiki_link').addClass('hover');},
				function() {$('.bolshie_kamenshiki_link').removeClass('hover');}
			);
			$('.bolshie_kamenshiki_link').hover(
				function() {$('.bolshie_kamenshiki_thumbnail').addClass('hover');},
				function() {$('.bolshie_kamenshiki_thumbnail').removeClass('hover');}
			);
			
			$('.kurkino_thumbnail').hover(
				function() {$('.kurkino_link').addClass('hover');},
				function() {$('.kurkino_link').removeClass('hover');}
			);
			$('.kurkino_link').hover(
				function() {$('.kurkino_thumbnail').addClass('hover');},
			function() {$('.kurkino_thumbnail').removeClass('hover');}
			);
			
			$('.kutuzovskaya_riviera_thumbnail').hover(
				function() {$('.kutuzovskaya_riviera_link').addClass('hover');},
				function() {$('.kutuzovskaya_riviera_link').removeClass('hover');}
			);
			$('.kutuzovskaya_riviera_link').hover(
				function() {$('.kutuzovskaya_riviera_thumbnail').addClass('hover');},
				function() {$('.kutuzovskaya_riviera_thumbnail').removeClass('hover');}
			);
			
			$('.malahovka_thumbnail').hover(
				function() {$('.malahovka_link').addClass('hover');},
				function() {$('.malahovka_link').removeClass('hover');}
			);
			$('.malahovka_link').hover(
				function() {$('.malahovka_thumbnail').addClass('hover');},
				function() {$('.malahovka_thumbnail').removeClass('hover');}
			);
			
			$('.novoperedelkino_thumbnail').hover(
				function() {$('.novoperedelkino_link').addClass('hover');},
				function() {$('.novoperedelkino_link').removeClass('hover');}
			);
			$('.novoperedelkino_link').hover(
				function() {$('.novoperedelkino_thumbnail').addClass('hover');},
				function() {$('.novoperedelkino_thumbnail').removeClass('hover');}
			);
			
			$('.skaterny_pereulok_thumbnail').hover(
				function() {$('.skaterny_pereulok_link').addClass('hover');},
				function() {$('.skaterny_pereulok_link').removeClass('hover');}
			);
			$('.skaterny_pereulok_link').hover(
				function() {$('.skaterny_pereulok_thumbnail').addClass('hover');},
				function() {$('.skaterny_pereulok_thumbnail').removeClass('hover');}
			);
			
			$('.starokonushenny_pereulok_thumbnail').hover(
				function() {$('.starokonushenny_pereulok_link').addClass('hover');},
				function() {$('.starokonushenny_pereulok_link').removeClass('hover');}
			);
			$('.starokonushenny_pereulok_link').hover(
				function() {$('.starokonushenny_pereulok_thumbnail').addClass('hover');},
				function() {$('.starokonushenny_pereulok_thumbnail').removeClass('hover');}
			);
			
			$('.teremok_thumbnail').hover(
				function() {$('.teremok_link').addClass('hover');},
				function() {$('.teremok_link').removeClass('hover');}
			);
			$('.teremok_link').hover(
				function() {$('.teremok_thumbnail').addClass('hover');},
				function() {$('.teremok_thumbnail').removeClass('hover');}
			);
			
			$('.tupolevskaya_nabereznaya_thumbnail').hover(
				function() {$('.tupolevskaya_nabereznaya_link').addClass('hover');},
				function() {$('.tupolevskaya_nabereznaya_link').removeClass('hover');}
			);
			$('.tupolevskaya_nabereznaya_link').hover(
				function() {$('.tupolevskaya_nabereznaya_thumbnail').addClass('hover');},
				function() {$('.tupolevskaya_nabereznaya_thumbnail').removeClass('hover');}
			);
			
			$('.shishkin_les_thumbnail').hover(
				function() {$('.shishkin_les_link').addClass('hover');},
				function() {$('.shishkin_les_link').removeClass('hover');}
			);
			$('.shishkin_les_link').hover(
				function() {$('.shishkin_les_thumbnail').addClass('hover');},
				function() {$('.shishkin_les_thumbnail').removeClass('hover');}
			);
			
			$('.stroiteley_thumbnail').hover(
				function() {$('.stroiteley_link').addClass('hover');},
				function() {$('.stroiteley_link').removeClass('hover');}
			);
			$('.stroiteley_link').hover(
				function() {$('.stroiteley_thumbnail').addClass('hover');},
				function() {$('.stroiteley_thumbnail').removeClass('hover');}
			);
			
			$('.udaltcova_thumbnail').hover(
				function() {$('.udaltcova_link').addClass('hover');},
				function() {$('.udaltcova_link').removeClass('hover');}
			);
			$('.udaltcova_link').hover(
				function() {$('.udaltcova_thumbnail').addClass('hover');},
				function() {$('.udaltcova_thumbnail').removeClass('hover');}
			);
			
			$('.vasiltcovsky_stun_thumbnail').hover(
				function() {$('.vasiltcovsky_stun_link').addClass('hover');},
				function() {$('.vasiltcovsky_stun_link').removeClass('hover');}
			);
			$('.vasiltcovsky_stun_link').hover(
				function() {$('.vasiltcovsky_stun_thumbnail').addClass('hover');},
				function() {$('.vasiltcovsky_stun_thumbnail').removeClass('hover');}
			);
			
			$('.fadeeva_thumbnail').hover(
				function() {$('.fadeeva_link').addClass('hover');},
				function() {$('.fadeeva_link').removeClass('hover');}
			);
			$('.fadeeva_link').hover(
				function() {$('.fadeeva_thumbnail').addClass('hover');},
				function() {$('.fadeeva_thumbnail').removeClass('hover');}
			);
		},
		function() { 
			// unbind the mouseover and mouseout events 
			$(this) 
			.unbind('mouseover') 
			.unbind('mouseout'); 
		}
	); 
});