function skillsCloud(element, entries)
{
	const settings =
	{
		entries:         entries,
		width:           '100%',
		height:          '100%',
		radius:          '75%',
		radiusMin:       75,
		bgDraw:          false,
		bgColor:         'transparent',
		opacityOver:     1.00,
		opacityOut:      0.4,
		opacitySpeed:    10,
		fov:             800,
		speed:           0.5,
		fontFamily:      'latoReg, Arial, sans-serif',
		fontSize:        '15px',
		fontColor:       '#fff',
		fontWeight:      'normal',
		fontStyle:       'normal',
		fontStretch:     'normal',
		fontToUpperCase: false
	};

	let entryHolder = [];

	let radius;
	let diameter;

	let mouseReact = true;
	let mousePos = {x: 0, y: 0};

	let center2D;
	let center3D = {x: 0, y: 0, z: 0};

	let speed = {x: 0, y: 0};

	let position = {sx: 0, cx: 0, sy: 0, cy: 0};

	let MATHPI180 = Math.PI / 180;

	let svg;
	let svgNS = 'http://www.w3.org/2000/svg';

	let bg;

	function init()
	{

		svg = document.createElementNS(svgNS, 'svg');
		svg.addEventListener('mousemove', mouseMoveHandler);

		element.appendChild(svg);

		if (settings.bgDraw)
		{

			bg = document.createElementNS(svgNS, 'rect');
			bg.setAttribute('x', 0);
			bg.setAttribute('y', 0);
			bg.setAttribute('fill', settings.bgColor);

			svg.appendChild(bg);

		}

		addEntries();
		reInit();
		animloop();

		window.addEventListener('resize', resizeHandler);

	};

	function reInit()
	{

		const windowWidth  = window.innerWidth  || document.documentElement.clientWidth  || document.body.clientWidth;
		const windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

		let svgWidth  = windowWidth;
		let svgHeight = windowHeight;

		if (settings.width.toString().indexOf('%') > 0 || settings.height.toString().indexOf('%') > 0 )
		{
			svgWidth  = Math.round(element.offsetWidth / 100 * parseInt(settings.width));
			svgHeight = Math.round(svgWidth / 100 * parseInt(settings.height));

		}
		else
		{
			svgWidth  = parseInt(settings.width);
			svgHeight = parseInt(settings.height);

		}

		if (windowWidth <= svgWidth)
		{
			svgWidth = windowWidth;
		}

		if (windowHeight <= svgHeight)
		{
			svgHeight = windowHeight;
		}

		center2D = {x: svgWidth / 2, y: svgHeight / 2};

		speed.x = settings.speed / center2D.x;
		speed.y = settings.speed / center2D.y;

		if (svgWidth >= svgHeight)
		{
			diameter = svgHeight / 100 * parseInt(settings.radius);
		}
		else
		{
			diameter = svgWidth / 100 * parseInt(settings.radius);
		}

		if (diameter < 1)
		{
			diameter = 1;
		}

		radius = diameter / 2;

		if (radius < settings.radiusMin)
		{
			radius   = settings.radiusMin;
			diameter = radius * 2;

		}

		svg.setAttribute('width',  svgWidth);
		svg.setAttribute('height', svgHeight);

		if (settings.bgDraw)
		{
			bg.setAttribute('width',  svgWidth);
			bg.setAttribute('height', svgHeight);

		}

		setEntryPositions(radius);
	};

	function setEntryPositions(radius)
	{
		for (let i = 0, l = entryHolder.length; i < l; i++)
		{
			setEntryPosition(entryHolder[i], radius);
		}

	};

	function setEntryPosition(entry, radius)
	{
		const dx = entry.vectorPosition.x - center3D.x;
		const dy = entry.vectorPosition.y - center3D.y;
		const dz = entry.vectorPosition.z - center3D.z;

		const length = Math.sqrt( dx * dx + dy * dy + dz * dz );

		entry.vectorPosition.x /= length;
		entry.vectorPosition.y /= length;
		entry.vectorPosition.z /= length;

		entry.vectorPosition.x *= radius;
		entry.vectorPosition.y *= radius;
		entry.vectorPosition.z *= radius;

	};

	function addEntry(index, entryObj, x, y, z)
	{
		let entry = {};

		entry.element = document.createElementNS(svgNS, 'text');
		entry.element.setAttribute('x', 0);
		entry.element.setAttribute('y', 0);

		entry.element.setAttribute('fill',         settings.fontColor);
		entry.element.setAttribute('font-family',  settings.fontFamily);
		entry.element.setAttribute('font-size',    settings.fontSize);
		entry.element.setAttribute('font-weight',  settings.fontWeight);
		entry.element.setAttribute('font-style',   settings.fontStyle);
		entry.element.setAttribute('font-stretch', settings.fontStretch);

		entry.element.setAttribute('text-anchor', 'middle' );
		entry.element.textContent = settings.fontToUpperCase ? entryObj.label.toUpperCase() : entryObj.label;

		entry.link = document.createElementNS(svgNS, 'a');

		entry.link.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', entryObj.url);
		entry.link.setAttribute('target', entryObj.target);

		entry.link.addEventListener('mouseover', mouseOverHandler, true );
		entry.link.addEventListener('mouseout',  mouseOutHandler,  true );

		entry.link.appendChild(entry.element);

		entry.index     = index;
		entry.mouseOver = false;

		entry.vectorPosition = {x:x, y:y, z:z};
		entry.vector2D       = {x:0, y:0};

		svg.appendChild(entry.link);

		return entry;
	};

	function addEntries()
	{
		for (let i = 1, l = settings.entries.length + 1; i < l; i++)
		{
			const phi   = Math.acos(-1 + ( 2 * i - 1 ) / l);
			const theta = Math.sqrt(l * Math.PI ) * phi;

			const x = Math.cos(theta) * Math.sin(phi);
			const y = Math.sin(theta) * Math.sin(phi);
			const z = Math.cos(phi);

			const entry = addEntry(i - 1, settings.entries[i - 1], x, y, z);

			entryHolder.push( entry );
		}
	};

	function getEntryByElement(element)
	{
		for (let i = 0, l = entryHolder.length; i < l; i++)
		{
			const entry = entryHolder[i];

			if (entry.element.getAttribute('x') === element.getAttribute('x') && entry.element.getAttribute('y') === element.getAttribute('y'))
			{
				return entry;
			}
		}

		return;
	};

	function highlightEntry(element)
	{
		const entry = getEntryByElement(element);

		for (let i = 0, l = entryHolder.length; i < l; i++)
		{
			let e = entryHolder[ i ];
			e.mouseOver = (e.index === entry.index);
		}
	};

	function render()
	{
		const fx = speed.x * mousePos.x - settings.speed;
		const fy = settings.speed - speed.y * mousePos.y;

		const angleX = fx * MATHPI180;
		const angleY = fy * MATHPI180;

		position.sx = Math.sin(angleX);
		position.cx = Math.cos(angleX);
		position.sy = Math.sin(angleY);
		position.cy = Math.cos(angleY);

		for (let i = 0, l = entryHolder.length; i < l; i++)
		{
			let entry = entryHolder[i];

			if (mouseReact)
			{
				const rx = entry.vectorPosition.x;
				const rz = entry.vectorPosition.y * position.sy + entry.vectorPosition.z * position.cy;

				entry.vectorPosition.x = rx * position.cx + rz * position.sx;
				entry.vectorPosition.y = entry.vectorPosition.y * position.cy + entry.vectorPosition.z * -position.sy;
				entry.vectorPosition.z = rx * -position.sx + rz * position.cx;

			}

			const scale = settings.fov / (settings.fov + entry.vectorPosition.z);

			entry.vector2D.x = entry.vectorPosition.x * scale + center2D.x;
			entry.vector2D.y = entry.vectorPosition.y * scale + center2D.y;

			entry.element.setAttribute('x', entry.vector2D.x);
			entry.element.setAttribute('y', entry.vector2D.y);

			let opacity;

			if (mouseReact)
			{
				opacity = (radius - entry.vectorPosition.z) / diameter;

				if (opacity < settings.opacityOut)
				{
					opacity = settings.opacityOut;
				}

			}
			else
			{
				opacity = parseFloat(entry.element.getAttribute('opacity'));

				const opacityValue = (entry.mouseOver) ? settings.opacityOver : settings.opacityOut;
				opacity += (opacityValue - opacity) / settings.opacitySpeed;
			}

			entry.element.setAttribute('opacity', opacity);
		}

		entryHolder = entryHolder.sort(function(a, b)
		{
			return (b.vectorPosition.z - a.vectorPosition.z);
		});
	};

	window.requestAnimFrame = (function()
	{
		return  window.requestAnimationFrame       ||
				window.webkitRequestAnimationFrame ||
				window.mozRequestAnimationFrame    ||
				function(callback)
				{
					window.setTimeout(callback, 1000 / 60);
				};
	})();

	function animloop()
	{
		requestAnimFrame(animloop);
		render();
	};

	function mouseOverHandler(event)
	{
		mouseReact = false;
		highlightEntry(event.target);
	};

	function mouseOutHandler(event)
	{
		mouseReact = true;
	};

	function mouseMoveHandler(event)
	{
		mousePos = getMousePos(svg, event);
	};

	function getMousePos(svg, event)
	{
		const rect = svg.getBoundingClientRect();

		const pos =
		{
			x: event.clientX - rect.left,
			y: event.clientY - rect.top
		};

		return pos;
	};

	function resizeHandler(event)
	{
		reInit();
	};

	init();
};

window.skillsCloud = skillsCloud