// resize zone

var sizes = [1000, 1260, 1340, 1660, 1920],

	h1,
	h1Size = [38, 47, 53, 69],
	h1MarginLeft = [292, 292, 295, 343, 602],

	application,
	applicationLeft,
	applicationLeftPaddingRight = [60, 60, 90],

	advantages,
	advantagesSize = [19, 21],
	advantagesLeft = [550, 630, 665, 835, 1095],
	advantagesTop = [180, 198, 209, 220],

	headerInner,
	headerInnerMarginLeft = [104, 104, 130],

	coord,
	coordLeft = [441, 465, 465],

	details,
	detailsItems,
	detailsMinGap = 40,

	also,
	alsoItems,
	alsoItemsWidth = 0,
	alsoItemsSizes = [245, 320, 360],

	specTh,
	specThWidth = [275, 350, 385],

	mechanics,
	mechanicsWidth = [485, 555],

	basic,
	basicMarginRight = [525, 625, 665],

	mechanicsImg,
	mechanicsImgWidth = [475, 515],

	headerOuter,
	mainInner,
	mainPadding = [30, 60],

	lasers,
	compactSize,

	line2,
	line3,
	lineAlso,

	all,
	bottom,

	gap,
	mainGap;

function init ()
{
	var i;

	h1 = document.getElementsByTagName ('h1') [0];
	advantages = document.getElementById ('advantages');
	headerInner = document.getElementById ('header-inner');
	coord = document.getElementById ('coord');
	application = document.getElementById ('application');
	applicationLeft = application.getElementsByTagName ('div') [0];
	details = document.getElementById ('details');
	detailsItems = details.getElementsByTagName ('div');
	lineAlso = document.getElementById ('we-also-produce');
	also = lineAlso.getElementsByTagName ('div') [0];
	alsoItems = also.getElementsByTagName ('div');
	basic = document.getElementById ('basic-technical-specification');
	specTh = basic.getElementsByTagName ('th') [0];
	mechanics = document.getElementById ('mechanics');
	mechanicsImg = document.getElementById ('mechanics-pic');
	headerOuter = document.getElementById ('header-outer');
	mainInner = document.getElementById ('main-inner');
	compactSize = document.getElementById ('compact');
	lasers = document.getElementById ('lasers');
	line2 = document.getElementById ('line2');
	line3 = document.getElementById ('line3');
	all = document.getElementById ('all');
	bottom = document.getElementById ('bottom');
	for (i = 0; i < alsoItems.length; i++)
		alsoItemsWidth += alsoItems [i].offsetWidth;

	sizeAll ();
}

function solveSizes (positions)
{
	var count = positions.length;

	if (xFull <= sizes [0])
		return positions [0];
	else if (xFull <= sizes [count - 1])
	{
		for (var i = 1; i < count; i++)
			if (xFull <= sizes [i])
				return (xFull - sizes [i - 1]) / (sizes [i] - sizes [i - 1]) * (positions [i] - positions [i - 1]) + positions [i - 1];
	}

	return positions [count - 1];
}

function sizeHeader ()
{
	h1.style.fontSize = solveSizes (h1Size) + 'px';
	h1.style.marginLeft = solveSizes (h1MarginLeft) + 'px';
	advantages.style.fontSize = solveSizes (advantagesSize) + 'px';
	advantages.style.left = solveSizes (advantagesLeft) + 'px';
	advantages.style.top = solveSizes (advantagesTop) + 'px';
	headerInner.style.marginLeft = solveSizes (headerInnerMarginLeft) + 'px';
	coord.style.left = solveSizes (coordLeft) + 'px';
}

function sizeLines ()
{
	function sizeApplication ()
	{
		var i,
			fullWidth = application.offsetWidth - applicationLeft.offsetWidth - 90,
			itemWidth = 187;

		applicationLeft.style.paddingRight = solveSizes (applicationLeftPaddingRight) + 'px';

		if (fullWidth < 3 * itemWidth + 2 * detailsMinGap)
		{
			gap = fullWidth - 2 * itemWidth + 'px';

			for (i = 0; i < 12; i++)
			{
				detailsItems [i].style.paddingRight = i % 4 ? 0 : gap;
				detailsItems [i].style.display = i % 4 < 2 ? 'block' : 'none';
			}
			detailsItems [2].style.display = 'none';
			detailsItems [3].style.display = 'none';
			detailsItems [6].style.display = 'none';
			detailsItems [7].style.display = 'none';
			detailsItems [10].style.display = 'none';
			detailsItems [11].style.display = 'none';
		}
		else if (fullWidth < 4 * itemWidth + 3 * detailsMinGap)
		{
			gap = (fullWidth - 3 * itemWidth) / 2 + 'px';

			for (i = 0; i < 12; i++)
			{
				detailsItems [i].style.paddingRight = i % 4 < 2 ? gap : 0;
				detailsItems [i].style.display = i % 4 < 3 ? 'block' : 'none';
			}
			detailsItems [3].style.display = 'none';
			detailsItems [7].style.display = 'none';
			detailsItems [11].style.display = 'none';
		}
		else
		{
			gap = (fullWidth - 4 * itemWidth) / 3 + 'px';

			for (i = 0; i < 12; i++)
			{
				detailsItems [i].style.paddingRight = i % 4 < 3 ? gap : 0;
				detailsItems [i].style.display = 'block';
			}
		}
	}
	function sizeAlso ()
	{
		if (xFull < 1640)
		{
			alsoItems [0].style.width = alsoItems [1].style.width = solveSizes (alsoItemsSizes) + 'px';
			gap = (also.offsetWidth - 40 - alsoItems [0].offsetWidth - alsoItems [1].offsetWidth - alsoItems [2].offsetWidth) / 2 + 'px';
			alsoItems [0].style.marginRight = gap;
			alsoItems [1].style.marginRight = gap;
		}
		else
		{
			alsoItems [0].style.marginRight = alsoItems [1].style.marginRight = '60px';
			alsoItems [0].style.width = alsoItems [1].style.width = 95 * (xFull - 1640) / 260 + 260 + 'px';
		}
	}
	function sizeOther ()
	{
		if (xFull <= 1640)
		{
			specTh.style.width = solveSizes (specThWidth) + 'px';
			mechanics.style.width = solveSizes (mechanicsWidth) + 'px';
			mechanics.style.paddingRight = solveSizes (mainPadding) + 'px';
			mechanicsImg.style.width = solveSizes (mechanicsImgWidth) + 'px';

			lasers.className = 'right';
			lasers.style.marginLeft = compactSize.offsetWidth + 'px';
			lasers.style.width = '';
			lasers.style.paddingRight = '';

			basic.style.marginLeft = mechanics.offsetWidth + 'px';
			basic.className = 'right';
			basic.style.width = '';
			also.className = 'left';
			also.style.marginLeft = '';
			also.style.width = '';

			bottom.style.marginTop = '-72px';

			line2.removeChild (mechanics);
			line3.removeChild (basic);
			line3.appendChild (mechanics);
			line3.appendChild (basic);
			line3.removeChild (also);
			lineAlso.appendChild (also);
		}
		else
		{
			lasers.className = 'center';
			lasers.style.width = 90 * (xFull - 1640) / 260 + 380 + 'px';
			lasers.style.marginLeft = '0';
			lasers.style.paddingRight = '61px';
			mechanics.style.width = 90 * (xFull - 1640) / 260 + 430 + 'px';
			mechanics.style.paddingRight = 0;
			mechanicsImg.style.width = '420px';

			compactSize.style.width = 80 * (xFull - 1640) / 260 + 510 + 'px';
			compactSize.style.paddingRight = '61px';

			basic.className = 'left';
			basic.style.marginLeft = '0';
			basic.style.width = 20 * (xFull - 1640) / 260 + 435 + 'px';

			specTh.style.width = 20 * (xFull - 1640) / 260 + 320 + 'px';

			also.className = 'right';
			also.style.marginLeft = basic.offsetWidth + 'px';
			also.style.width = 180 * (xFull - 1640) / 260 + 975 + 'px';

			bottom.style.marginTop = '-132px';

			line3.removeChild (mechanics);
			line2.appendChild (mechanics);
			lineAlso.removeChild (also);
			line3.appendChild (also);
		}
	}

	sizeApplication ();
	sizeAlso ();
	sizeOther ();
}

function sizeAll ()
{
	xFull = (window.innerWidth ? window.innerWidth : (document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.offsetWidth)),
	yFull = (window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight));

	if (xFull > 1920)
		xFull = 1920;

	headerOuter.style.width = mainInner.style.width = '';

	if (xFull > 1320 && xFull < 1640)
	{
		xFull = 1320;
		headerOuter.style.width = mainInner.style.width = xFull - 130 + 'px';
	}
	if (xFull < 1000)
		xFull = 1000;

	headerOuter.style.padding = '0 ' + solveSizes (mainPadding) + 'px';
	mainInner.style.padding = '0 ' + solveSizes (mainPadding) + 'px';

	sizeHeader ();
	sizeLines ();
}

window.onresize = sizeAll;
window.onload = init;

