var config = {
	xSizeTop:20,				// ширина лопасти сверху
	xSizeBottom:60,				// ширина лопасти снизу
	ySize:200,					// высота лопасти
	xCenter: 130,				// Позиция x верхнего центра
	yCenter: 30,				// Позиция y верхнего центра
	elipsKoefTop:5.5,			// Коэффициент растянутости элипса по оси X сверху
	elipsKoefBottom:1.6,		// Коэффициент растянутости элипса по оси X сниху
	allCountLopast:20,			// Общее количество лопастей
	beginGradis:20,				// Сдвиг по градусу, чтобы лопасти были видны
	speed: 3,					// Скорость кручения
	lopastAlpha: 0.8,			// Прозрачность лопастей
	nizBarabanaKoef:0.9,		// Коеффициент уменьшения лопастей к низу
	moveBegin:20,				// После какого раза начинаем кручение
	razgonKoef:0.05				// Коеффициент разгона барабана
};

var context;
var countDraw = 0;
var currentOffset = 0;
var currentSpeedKoef = 0.1;
var barabanStopped = false;
var oldCoord = {};
var beginStopped = false;
var colorStopped = null;
var beginCountDrawByStopped = null;
var xSizeMiddle = (config.xSizeTop + config.xSizeMiddle ) / 2;
var beginCountDrawByObratno = null;
var obratno = false;


var colors = new Array();

var violet		= "rgba(224, 0, 155, " + config.lopastAlpha + ")";
var red			= "rgba(179, 0, 20, " + config.lopastAlpha + ")";
var darkRed		= "rgba(143, 0, 14, " + config.lopastAlpha + ")";
var green		= "rgba(35, 210, 8, " + config.lopastAlpha + ")";
var darkGreen	= "rgba(80, 134, 17, " + config.lopastAlpha + ")";
var blue		= "rgba(22, 142, 170, " + config.lopastAlpha + ")";
var darkBlue	= "rgba(24, 92, 219, " + config.lopastAlpha + ")";
var yellow		= "rgba(255, 215, 17, " + config.lopastAlpha + ")";
var darkYellow	= "rgba(192, 153, 14, " + config.lopastAlpha + ")";
var pink		= "rgba(255, 92, 64, " + config.lopastAlpha + ")";

colors.push(violet, red, darkRed, green, darkGreen, blue, darkBlue, yellow, darkYellow, pink, violet, red, darkRed, green, darkGreen, blue, darkBlue, yellow, darkYellow, pink);

function initBaraban() {
    var canvas = document.getElementById('canva');
    if (!canvas.getContext)
	{
		return;
	}
   	context = canvas.getContext('2d'); 
	setInterval(draw, 30);
//	draw();
}

function printCoords(x1, y1, x2, y2, x3, y3, x4, y4)
{
//	alert('x1 = ' + x1 + "\ny1 = " + y1 + "\nx2 = " + x2 + "\ny2 = " + y2 + "\nx3 = " + x3 + "\ny3 = " + y3 + "\nx4 = " + x4 + "\ny4 = " + y4);
//	document.getElementById('textarea'). value += 'x1 = ' + x1 + "; y1 = " + y1 + "; x2 = " + x2 + "; y2 = " + y2 + "; x3 = " + x3 + "; y3 = " + y3 + "; x4 = " + x4 + "; y4 = " + y4 + "\n";
}

function sortArrayByField(arr, field)
{
	var sort_arr = [];
	var i, j, obj;
	var out = [];
	for(i = 0; i < arr.length; i++)
	{
		obj = arr[i];
		sort_arr.push(Number(obj[field]));
	}
	sort_arr.sort(function(a, b) {
		if(a < b) return -1;
		if(a > b) return 1;
		return 0;
	});
	var addedIndexes = {};
	for(i = 0; i < sort_arr.length; i++)
	{
		var y = sort_arr[i];
		for(j = 0; j < arr.length; j++)
		{
			obj = arr[j];
			if(obj[field] == y)
			{
				if(!addedIndexes[j]) {
					out.push(obj); 
					addedIndexes[j] = true;
					break;
				}
			}
		}
	}
	return out;
}

function drawFigure(coord)
{
	context.beginPath();
	context.moveTo(coord.x1, coord.y1);
	context.lineTo(coord.x2, coord.y2);
	context.lineTo(coord.x3, coord.y3);
	context.lineTo(coord.x4, coord.y4);
	context.fill();
}

function drawLopast(color, coord)
{
//	printCoords(coord.x1, coord.y1, coord.x2, coord.y2, coord.x3, coord.y3, coord.x4, coord.y4);
    context.fillStyle = color;

	context.shadowOffsetX = coord.x2 > coord.x1 ? 8 : -8;
	context.shadowOffsetY = 10;
	context.shadowBlur = 20;
	context.shadowColor = "rgba(0,0,0,0.2)";

	var is_lt = coord.x1 >= coord.x2 && coord.y1 >= coord.y2;
	var is_lb = coord.x1 >= coord.x2 && coord.y1 <= coord.y2;
	var is_rt = coord.x1 <= coord.x2 && coord.y1 >= coord.y2;
	var is_rb = coord.x1 <= coord.x2 && coord.y1 <= coord.y2;

	var lopastWidthX2 = (config.xSizeTop * config.elipsKoefTop - Math.abs(coord.x2 - coord.x1)) / 30;
	var lopastWidthX3 = (config.xSizeBottom * config.elipsKoefBottom - Math.abs(coord.x4 - coord.x3)) / 30;
	var lopastWidthY2 = (config.xSizeTop - Math.abs(coord.y2 - coord.y1)) / 5;
	var lopastWidthY3 = (config.xSizeBottom - Math.abs(coord.y3 - coord.y4)) / 5;

	var coord_figure1 = coord;
	var coord_figure2 = {
		x1:coord_figure1.x1, 
		y1:coord_figure1.y1, 
		x2: is_lt || is_rt ? coord_figure1.x2 - lopastWidthX2 : coord_figure1.x2 + lopastWidthX2,
		y2: is_rt || is_rb ? coord_figure1.y2 - lopastWidthY2 : coord_figure1.y2 + lopastWidthY2,
		x3: is_lt || is_rt ? coord_figure1.x3 - lopastWidthX3 : coord_figure1.x3 + lopastWidthX3,
		y3: is_rt || is_rb ? coord_figure1.y3 - lopastWidthY3 : coord_figure1.y3 + lopastWidthY3,
		x4:coord_figure1.x4, 
		y4:coord_figure1.y4 
	};

	var coord_figure3 = {
		x1: coord_figure1.x2, 
		y1: coord_figure1.y2, 
		x2: coord_figure2.x2,
		y2: coord_figure2.y2,
		x3: coord_figure2.x3,
		y3: coord_figure2.y3,
		x4: coord_figure1.x3, 
		y4: coord_figure1.y3 
	};

	drawFigure(coord_figure1);
	drawFigure(coord_figure2);
	drawFigure(coord_figure3);
}

function getCoords(offset)
{
	var gradus = offset * (Math.PI / 180) + config.beginGradis;
	var x1 = config.xCenter;
	var y1 = config.yCenter;
	var x2 = Math.round((Math.round(Math.cos(gradus) * 100) / 100) * config.xSizeTop * config.elipsKoefTop) + x1;
	var y2 = Math.round((Math.round(Math.sin(gradus) * 100) / 100) * config.xSizeTop) + y1;
	var niz = (x2 - x1) * (1 - config.nizBarabanaKoef);
	var x3 = Math.round((Math.round(Math.cos(gradus) * 100) / 100) * config.xSizeBottom * config.elipsKoefBottom) + x1;
	var y3 = Math.round((Math.round(Math.sin(gradus) * 100) / 100) * config.xSizeBottom) + y1 + config.ySize;
	var x4 = x1;
	var y4 = y1 + config.ySize;
	return {x1: x1, y1:y1, x2:x2, y2:y2, x3:x3, y3:y3, x4:x4, y4:y4};
}

function drawBaraban(){
	context.clearRect(0, 0, 600, 600);
		context.save();

		var coords = [];
		var color;

		for (var lopastNum = 0; lopastNum < config.allCountLopast; lopastNum++ )
		{
			var offsetLopast = (360 / config.allCountLopast) * lopastNum + currentOffset;
			var coord = getCoords(offsetLopast);
			if(oldCoord[lopastNum])
			{
				var changeVerticalLine = (oldCoord[lopastNum].x2 > config.xCenter && coord.x2 <= config.xCenter)  ||  (oldCoord[lopastNum].x2 < config.xCenter && coord.x2 >= config.xCenter);
				if(barabanStopped)
				{
					color = oldCoord[lopastNum].color;
				}
				else
				{
					if(beginStopped)
					{
						if(changeVerticalLine)
						{
							color = colorStopped;
						}
						else
						{
							color = oldCoord[lopastNum].color;
						}
					}
					else
					{
						if(changeVerticalLine)
						{
							color = colors[lopastNum];
						}
						else
						{
							color = oldCoord[lopastNum].color;
						}
					}
				}
			}
			else
			{
				color = colors[lopastNum];
			}
			coord.color = color;
			oldCoord[lopastNum] = coord;
			coords.push(coord);
		}
		var lopasti = sortArrayByField(coords, 'y2');
		for (var i = 0; i < lopasti.length; i++ )
		{
			var l = lopasti[i];
			drawLopast(l.color, l);

		}
		context.restore();
}

function draw()
{
	if(barabanStopped)
	{
		if(currentSpeedKoef > 0)
		{
			currentOffset -= config.speed * currentSpeedKoef;
			currentSpeedKoef -= config.razgonKoef;
			drawBaraban();
		}
		return;
	}
	if(beginStopped && beginCountDrawByStopped + 75 < countDraw)
	{
		stop();
		return;
	}
	countDraw++;
	if(countDraw == 1 || countDraw > config.moveBegin)
	{
		currentOffset += config.speed * currentSpeedKoef;
		if(currentSpeedKoef < 1)
		{
			currentSpeedKoef += config.razgonKoef;
		}
		drawBaraban();
	}
}

function stopBaraban(color)
{
	document.getElementById('main_links').style.display = 'none';
	beginStopped = true;
	colorStopped = color;
	beginCountDrawByStopped = countDraw;
	if(barabanStopped)
	{
		startBaraban();
	}
}

function stop()
{
	barabanStopped = true;
	beginStopped = false;
	colorStopped = null;
	beginCountDrawByStopped = null;
	obratno = true;
	beginCountDrawByObratno = countDraw;
}

function startBaraban()
{
	barabanStopped = false;
	if(startBaraban.arguments.length == 0)
	{
		currentSpeedKoef = 0
	}
	obratno = false;
}

function showMain()
{
	stop();
	startBaraban(true);
	document.getElementById('main_links').style.display = '';
}

var showedImages = null;

function showPhotos()
{
	if(showedImages)
	{
		for(var i = 0; i < showedImages.length; i++)
		{
			document.getElementById('img_people_' + showedImages[i]).style.display = "none";
		}
	}
	var ids = showPhotos.arguments;
	for(var i = 0; i < ids.length; i++)
	{
		document.getElementById('img_people_' + ids[i]).style.display = "block";
	}
	showedImages = ids;
}