function  getPageSize(){
       var xScroll, yScroll;

       if (window.innerHeight && window.scrollMaxY) {
               xScroll = document.body.scrollWidth;
               yScroll = window.innerHeight + window.scrollMaxY;
       } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
               xScroll = document.body.scrollWidth;
               yScroll = document.body.scrollHeight;
       } else if (document.documentElement && document.documentElement.scrollHeight > document.documentElement.offsetHeight){ // Explorer 6 strict mode
               xScroll = document.documentElement.scrollWidth;
               yScroll = document.documentElement.scrollHeight;
       } else { // Explorer Mac...would also work in Mozilla and Safari
               xScroll = document.body.offsetWidth;
               yScroll = document.body.offsetHeight;
       }

       var windowWidth, windowHeight;
       if (self.innerHeight) { // all except Explorer
               windowWidth = self.innerWidth;
               windowHeight = self.innerHeight;
       } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
               windowWidth = document.documentElement.clientWidth;
               windowHeight = document.documentElement.clientHeight;
       } else if (document.body) { // other Explorers
               windowWidth = document.body.clientWidth;
               windowHeight = document.body.clientHeight;
       }

       // for small pages with total height less then height of the viewport
       if(yScroll < windowHeight){
               pageHeight = windowHeight;
       } else {
               pageHeight = yScroll;
       }

       // for small pages with total width less then width of the viewport
       if(xScroll < windowWidth){
               pageWidth = windowWidth;
       } else {
               pageWidth = xScroll;
       }

       return [pageWidth,pageHeight,windowWidth,windowHeight];
}


$(document).ready(function(){
	
	var loading_mess = "<br /><br /><center>Загрузка<br /><img src='/images/loading.gif' align='absmiddle' /></center>";
	var close_mess = "Закрыть";
	var a = getPageSize();
	var _width = a[0];
	var _height = a[1];
	var isAbsolute = false;
	var isBind = false;
	var lastContentLink = '';
	var lang = 'ru';
	
	var questions = {
		ru: {
			what: 'Что?',
			how: 'Как?',
			why: 'Зачем?',
			who: 'Кто?'
		},
		en: {
			what: 'What?',
			how: 'How?',
			why: 'Why?',
			who: 'Who?'
		}		
	}
	
	function showContent() {
		$("#content").fadeIn("slow");	
	}
	
	function setContent() {
		var left = (_width/2-_width*0.16);
		var top = (_width/2-_height*0.16);
		//alert(top+" "+left);
		$("#content").css("left", "33%");
		$("#content").css("top", "35%");	    	
	}

	function hideContent() {
		$("#content").hide();	
		$(".s").hide();	
	}	
	
	function more_click() {
		$("#content").hide();	
		
		lastContentLink = "/portfolio_"+lang+".html";
		$.post("/portfolio_"+lang+".html", {  },
			function(data){
				$("#content").html(data);
				showContent();
				$(".more2").bind("click", function() {
					$("#content").hide();	
					
					$.post("/what_"+lang+".html", {  },
						function(data){
							$("#content").html(data);
							showContent();
							$(".more").bind("click", more_click);
						}, "html"
					);			
				});
				
				$(".text_link").bind("click", function() {
				    var content = "<img src='images/p/"+$(this).attr("id")+"' />";
				    $.nyroModalManual({
				      bgColor: 'gray',
				      content: content,
				      minWidth: 720,
				      minHeight: 450,
				      closeButton: '<center><a href="#" class="nyroModalClose" id="closeBut" title="close">'+close_mess+'</a></center><br />'
				    });
				    return false;
				});
				
			}, "html"
		);			
	}
	
	function makeItAbsolute() {
		if(!isAbsolute) {
			$("#what").css("top", "33%");
			$("#what").css("left", "47%");
				
			$("#how").css("top", "42%");
			$("#how").css("left", "47%");
					
			$("#why").css("top", "50%");
			$("#why").css("left", "46%");
					
			$("#who").css("top", "59%");
			$("#who").css("left", "47%");

			$(".h").css("position", "absolute");
			$(".h").clone().appendTo("body");
			$("#parent").remove();	
			
			isAbsolute = true;	
		} 
	}
	
	function setBind() {
		if(!isBind) {
			$("#what").bind("click", function() {
				what_click();
			});
			$("#how").bind("click", function() {
				how_click();
			});	
			$("#why").bind("click", function() {
				why_click();
			});	
			$("#who").bind("click", function() {
				who_click();
			});	
			
			isBind = true;	
		}
	}

	$("#what").click(function() {
		what_click();
	});
	$("#how").click(function() {
		how_click();
	});	
	$("#why").click(function() {
		why_click();
	});	
	$("#who").click(function() {
		who_click();
	});		
	
	function what_click() {
		makeItAbsolute();
		hideContent();
		var isload = false;
		
		$("#what").animate({ 
			opacity: 1,
	        left: "20%",
	        top: "45%",
	        fontSize: "3em"
	      }, 1500, 
	      function() { 
	    	  $("#what .s").fadeIn("slow"); 
	    	  setContent();
			  if(!isload)
				  $("#content").html(loading_mess);
	    	  showContent(); 
	    	  setBind();
	    });
		
		$("#how").animate({ 
	        opacity: 0.4,
	        left: "22%",
	        top: "75%",
	        fontSize: "2em"
	      }, 1500 );
		
		$("#why").animate({ 
	        opacity: 0.4,
	        left: "47%",
	        top: "75%",
	        fontSize: "2em"
	      }, 1500 );
		
		$("#who").animate({ 
	        opacity: 0.4,
	        left: "72%",
	        top: "75%",
	        fontSize: "2em"
	      }, 1500 );	
		
	    lastContentLink = "/what_"+lang+".html";
		$.post("/what_"+lang+".html", {  },
			function(data){		
				isload = true;
				$("#content").html(data);
				$(".more").bind("click", more_click);
			}, "html"
		);		
	}
	
	function how_click() {
		makeItAbsolute();
		hideContent();
		var isload = false;
		
		$("#how").animate({ 
			opacity: 1,
	        left: "47%",
	        top: "20%",
	        fontSize: "3em"
	      }, 1500, 
	      function() { 
	    	  $("#how .s").fadeIn("slow"); 
	    	  setContent();
			  if(!isload)
				  $("#content").html(loading_mess);
	    	  showContent(); 
	    	  setBind();
	    });
		
		$("#what").animate({ 
	        opacity: 0.4,
	        left: "22%",
	        top: "75%",
	        fontSize: "2em"
	      }, 1500 );
		
		$("#why").animate({ 
	        opacity: 0.4,
	        left: "47%",
	        top: "75%",
	        fontSize: "2em"
	      }, 1500 );
		
		$("#who").animate({ 
	        opacity: 0.4,
	        left: "72%",
	        top: "75%",
	        fontSize: "2em"
	      }, 1500 );	
		
	    lastContentLink = "/how_"+lang+".html";
		$.post("/how_"+lang+".html", {  },
			function(data){
				isload = true;
				$("#content").html(data);
			}, "html"
		);		
	}
	
	function why_click() {
		makeItAbsolute();
		hideContent();
		var isload = false;
		
		$("#why").animate({ 
			opacity: 1,
	        left: "80%",
	        top: "45%",
	        fontSize: "3em"
	      }, 1500, 
	      function() { 
	    	  $("#why .s").fadeIn("slow");  
	    	  setContent();
			  if(!isload)
				  $("#content").html(loading_mess);
	    	  showContent(); 
	    	  setBind();
	    });
		
		$("#what").animate({ 
	        opacity: 0.4,
	        left: "22%",
	        top: "75%",
	        fontSize: "2em"
	      }, 1500 );
		
		$("#how").animate({ 
	        opacity: 0.4,
	        left: "47%",
	        top: "75%",
	        fontSize: "2em"
	      }, 1500 );
		
		$("#who").animate({ 
	        opacity: 0.4,
	        left: "72%",
	        top: "75%",
	        fontSize: "2em"
	      }, 1500 );	
	      
		lastContentLink = "/why_"+lang+".html";
		$.post("/why_"+lang+".html", {  },
			function(data){
				isload = true;
				$("#content").html(data);
			}, "html"
		);		
	}
	
	function who_click() {
		makeItAbsolute();
		hideContent();
		var isload = false;
		
		$("#who").animate({ 
			opacity: 1,
	        left: "47%",
	        top: "75%",
	        fontSize: "3em"
	      }, 1500, 
	      function() { 
	    	  $("#who .s").fadeIn("slow"); 
	    	  setContent();
	    	  if(!isload)
	    		 $("#content").html(loading_mess);				
			  showContent();
			  setBind();
	    });
		
		$("#what").animate({ 
	        opacity: 0.4,
	        left: "22%",
	        top: "20%",
	        fontSize: "2em"
	      }, 1500 );
		
		$("#why").animate({ 
	        opacity: 0.4,
	        left: "47%",
	        top: "20%",
	        fontSize: "2em"
	      }, 1500 );
		
		$("#how").animate({ 
	        opacity: 0.4,
	        left: "72%",
	        top: "20%",
	        fontSize: "2em"
	      }, 1500 );	
		
	    lastContentLink = "/who_"+lang+".html";  
		$.post("/who_"+lang+".html", {  },
			function(data){
				isload = true;
				$("#content").html(data);
				$(".what_link").bind("click", what_click);
			}, "html"
		);		
	}

	// languages
	
	function setLang(from, to) {
		$("#what").hide('slow', function() {
			$("#how").hide('slow', function() {
				$("#why").hide('slow', function() {
					$("#who").hide('slow', function() {
						
						lang = to;
						
						if($("#content").css('display') != 'none') {
							var flink = lastContentLink.replace(from, to);
							$("#content").html(loading_mess);		
							$.post(flink, {  },
								function(data){
									isload = true;
									$("#content").html(data);
									$(".what_link").bind("click", what_click);
									$(".more").bind("click", more_click);
									$(".more2").bind("click", function() {
										$("#content").hide();	
										
										lastContentLink = "/what_"+lang+".html";
										$.post("/what_"+lang+".html", {  },
											function(data){
												$("#content").html(data);
												showContent();
												$(".more").bind("click", more_click);
											}, "html"
										);			
									});
									
									$(".text_link").bind("click", function() {
									    var content = "<img src='images/p/"+$(this).attr("id")+"' />";
									    $.nyroModalManual({
									      bgColor: 'gray',
									      content: content,
									      minWidth: 720,
									      minHeight: 450,
									      closeButton: '<center><a href="#" class="nyroModalClose" id="closeBut" title="close">'+close_mess+'</a></center><br />'
									    });
									    return false;
									});										
								}, "html"
							);	
						}
						
						$("#what").children('.dashed').html(questions[lang].what);
						$("#how").children('.dashed').html(questions[lang].how);
						$("#why").children('.dashed').html(questions[lang].why);
						$("#who").children('.dashed').html(questions[lang].who);
						
						$("#who").show('slow', function() {
							$("#why").show('slow', function() {
								$("#how").show('slow', function() {
									$("#what").show('slow');								
								});								
							});
						});
					});
				});
			});
		});	
	}
	
	$('#en_lang').click(function() {
		if(lang == 'en') return;		
		
		loading_mess = "<br /><br /><center>Loading<br /><img src='/images/loading.gif' align='absmiddle' /></center>";
		close_mess = "Close";
		document.title = 'sap1ens.ru - web applications development';
		setLang('ru', 'en');
	});
	
	$('#ru_lang').click(function() {
		if(lang == 'ru') return;		
		
		loading_mess = "<br /><br /><center>Загрузка<br /><img src='/images/loading.gif' align='absmiddle' /></center>";
		close_mess = "Закрыть";
		document.title = 'sap1ens.ru - проектирование и разработка веб-приложений, создание сайтов';
		setLang('en', 'ru');
	});	
	
});