var active_count = 3;
var active_height = 3;

function set_sizes()
{
	var site_width=(window.innerWidth)?window.innerWidth:((document.all)?document.body.offsetWidth:null);
	var site_height=(window.innerHeight)?window.innerHeight:((document.all)?document.body.offsetHeight:null);
	
	var bg = document.getElementById("background");
	bg.style.width = site_width + "px";
	bg.style.height = site_height + "px";

	var page = document.getElementById("page");
	page.style.width = site_width + "px";
	page.style.height = site_height + "px";
	
	active_count = Math.floor(site_width/300);
	active_height = Math.floor((site_height-31)/188);

	var d_left = Math.floor((site_width - active_count*300)/2);
	var mozaic_margin = -900 + d_left;
	var page_slider = document.getElementById("page_slider");
	page_slider.style.marginLeft = mozaic_margin + "px";
	
	var contscts_info = document.getElementById("contacts_info");
	contscts_info.style.marginLeft = d_left + "px";

	var ratio = site_width/site_height;
	
	var main_pic = document.getElementById("main_img");
	var pic_w = 1280;
	var pic_h = 917;
	var m_left = 0;
	var pic_top = 0;
	var pic_left = 0;
	var pic_ratio = pic_w/pic_h;
	
	if(ratio>pic_ratio)
	{
		if(site_width>1280)
		{
			pic_w = site_width;
			pic_h = site_width/pic_ratio;
			m_left=0;
		}
		else
		{
			m_left = Math.floor((site_width - pic_w)/2);
		}
	}
	else
	{
		m_left = Math.floor((site_width - pic_w)/2);
		if(site_height>917)
		{
			pic_h = site_height;
			pic_w = site_height*pic_ratio;
			m_left = Math.floor((site_width - pic_w)/2);
		}
	}
	
	main_pic.style.width = pic_w + "px";
	main_pic.style.height = pic_h + "px";
	main_pic.style.marginLeft = m_left + "px";
}

function show_menu()
{
	if(cur_work_show!=0)
	{
		document.getElementById("about_text_"+cur_work_show).style.display = 'none';
		document.getElementById("about_img_"+cur_work_show).style.display = 'none';
	}
	
	document.getElementById("contacts_info").style.display = '';
}

function hide_menu()
{
	document.getElementById("contacts_info").style.display = 'none';
}

function getElementTop(elemID)
{
	var elem = document.getElementById(elemID);
	var top = 0;
			
	while(elem)
	{
		top+=elem.offsetTop;
		elem=elem.offsetParent;
	}
			
	return top;
}

function getElementLeft(elemID)
{
	var elem = document.getElementById(elemID);
	var left = 0;
			
	while(elem)
	{
		left+=elem.offsetLeft;
		elem=elem.offsetParent;
	}
			
	return left;
}

var cur_work_show = 0;
var next_box = 0;

var num_martix = [
  [0, 3, 8, 15, 24, 35, 48],
  [1, 2, 7, 14, 23, 34, 47],
  [4, 5, 6, 13, 22, 33, 46],
  [9, 10, 11, 12, 21, 32, 45],
  [16, 17, 18, 19, 20, 31, 44],
  [25, 26, 27, 28, 29, 30, 43],
  [36, 37, 38, 39, 40, 41, 42]
];


function box_over(num)
{
	hide_menu();
	
	var cur_work = 1;
	var ind = 0;
	var flag = 0;
	
	for(var i=0;i<active_height;i++)
	{
		for(var j=0;j<active_count;j++)
		{
			ind = 34 + 10*i + j;
			if(ind==num)
			{
				if(j<active_count-1) flag = 1;
					else flag = -1;
				cur_work = num_martix[i][j];
				if(cur_work>work_count) flag=0;
			}
		}
	}
	
	if(cur_work_show!=0)
	{
		document.getElementById("about_text_"+cur_work_show).style.display = 'none';
		document.getElementById("about_img_"+cur_work_show).style.display = 'none';
	}
	
	if(flag==0) 
	{
		return false;
	}
	
	var top = getElementTop("box_"+num);
	var left = getElementLeft("box_"+num);
	var left1 = left + flag*300;
	
	document.getElementById("about_img_"+cur_work).style.top = top + "px";
	document.getElementById("about_img_"+cur_work).style.left = left + "px";
	document.getElementById("about_img_"+cur_work).style.display = '';
	
	if(flag==1)
	{
		document.getElementById("about_text_"+cur_work).style.textAlign = 'left';
	}
	else
	{
		document.getElementById("about_text_"+cur_work).style.textAlign = 'right';
	}
	
	document.getElementById("about_text_"+cur_work).style.top = top + "px";
	document.getElementById("about_text_"+cur_work).style.left = left1 + "px";
	document.getElementById("about_text_"+cur_work).style.display = '';
	
	next_box = num+flag;
	cur_work_show = cur_work;
}

function show_next_box()
{
	box_over(next_box);
}
