$(function() {

	var rootEl = $('.projects_container');

	if ($c.support.svg) {
		disableBack(rootEl);
		drawSvg(rootEl);
	} else if ($c.support.vml) {
		disableBack(rootEl);
		drawVml(rootEl);
	}

	function disableBack(rootEl) {
		rootEl.css('backgroundColor', 'transparent');
	}

	function drawSvg(rootEl) {
		var TEMPLATE =
			'<svg class="shape" viewBox="0 0 {width} {height}">' +
				'<defs>' +
					'<linearGradient id="{gradientId}" x1="0" x2="0" y1="0" y2="100%">' +
						'<stop offset="0" stop-color="#093e8f" />' +
						'<stop offset="100%" stop-color="#03142e" />' +
					'</linearGradient>' +
					'<linearGradient id="{innerGradientId}" x1="0" x2="0" y1="0" y2="100%">' +
						'<stop offset="0" stop-color="#127aff" stop-opacity="1" />' +
						'<stop offset="50%" stop-color="#127aff" stop-opacity="0" />' +
					'</linearGradient>' +
				'</defs>' +
				'<rect x="0" y="0" width="{width}" height="{height}" rx="{radius}" ry="{radius}" fill="url(#{gradientId})" />' +
				'<rect x="0" y="1" width="{innerWidth}" height="{innerHeight}" rx="{innerRadius}" ry="{innerRadius}" stroke="url(#{innerGradientId})" fill="none" />' +
			'</svg>';

		var width  = rootEl.outerWidth();
		var height = rootEl.outerHeight();
		var radius = Math.round((Math.min(width, height)) / 2);

		$c.svg($c.supplant(TEMPLATE, {
			width: width,
			height: height,
			radius: radius,
			gradientId: $c.generateId(),
			innerRadius: radius - 1,
			innerGradientId: $c.generateId(),
			innerWidth: width,
			innerHeight: height - 2
		})).prependTo(rootEl);
	}

	function drawVml(rootEl) {
		var TEMPLATE =
			'<v:roundrect class="shape" stroked="false" arcsize="{radius}" style="width: {width}px; height: {height}px;">' +
				'<v:fill type="gradient" color="#093e8f" color2="#03142e"/>' +
			'</v:roundrect>' +
			'<v:roundrect class="shape" filled="false" arcsize="{innerRadius}" style="width: {innerWidth}px; height: {innerHeight}px; top: 1px;">' +
				'<v:stroke  color="#127aff"/>' +
			'</v:roundrect>';

		var width  = rootEl.outerWidth();
		var height = rootEl.outerHeight();
		var radius = Math.round((Math.min(width, height)) / 2);

		$($c.supplant(TEMPLATE, {
			width: width,
			height: height,
			radius: radius,
			innerRadius: radius - 1,
			innerWidth: width,
			innerHeight: height - 1
		})).prependTo(rootEl);
	}
});