/**
 * @requires jQuery
 * @requires jCommon
 */

function vectorPuck(fillColor, gradColor1, gradColor2) {

	var id = 'puck_' + Math.random();
	var rootEl;

	document.write('<div id="' + id + '" class="b"></div>');

	setTimeout(init, 1);

	function init() {
		rootEl = $(document.getElementById(id));
		$c.support.svg ? createSvg() : createVml();
	}

	function createSvg() {
		var svgEl = document.createElementNS($c.ns.svg, 'svg');
		svgEl.setAttribute('version', '1.1');
		svgEl.setAttribute('viewBox', '0 0 200 200');
		svgEl.setAttribute('class', 'shape');
		rootEl[0].appendChild(svgEl);

		var gradEl = document.createElementNS($c.ns.svg, 'linearGradient');
		var gradId = 'grad' + Math.random();
		gradEl.setAttribute('id', gradId);
		gradEl.setAttribute('gradientUnits', 'userSpaceOnUse');
		gradEl.setAttribute('x1', '-62.4829');
		gradEl.setAttribute('y1', '-22.7734');
		gradEl.setAttribute('x2', '97.2828');
		gradEl.setAttribute('y2', '-22.7734');
		svgEl.appendChild(gradEl);

		var stop1El = document.createElementNS($c.ns.svg, 'stop');
		stop1El.setAttribute('offset', 0);
		stop1El.setAttribute('stop-color', gradColor1);
		gradEl.appendChild(stop1El);

		var stop2El = document.createElementNS($c.ns.svg, 'stop');
		stop2El.setAttribute('offset', 0);
		stop2El.setAttribute('stop-color', gradColor2);
		gradEl.appendChild(stop2El);

		var pathEl = document.createElementNS($c.ns.svg, 'path');
		pathEl.setAttribute('fill', 'url(#' + gradId + ')');
		pathEl.setAttribute('d', 'M49.445,99.391c0-54.898,8.005-105.592,61.082-96.887c60.111,9.858,95.696,56.183,88.436,117.612 c-4.466,37.785-42.732,97.98-129.424,74.644C17.558,180.767,49.445,154.291,49.445,99.391z');
		svgEl.appendChild(pathEl);

		var ellipseEl = document.createElementNS($c.ns.svg, 'ellipse');
		ellipseEl.setAttribute('fill', fillColor);
		ellipseEl.setAttribute('cx', '93.144');
		ellipseEl.setAttribute('cy', '99.39');
		ellipseEl.setAttribute('rx', '93.246');
		ellipseEl.setAttribute('ry', '99.405');
		svgEl.appendChild(ellipseEl);
	}

	function createVml() {
		var groupEl = $(document.createElement('v:group')).appendTo(rootEl);
		groupEl.addClass('shape').css({
			width: rootEl.outerWidth(),
			height: rootEl.outerHeight()
		}).attr({
			coordsize: '2000 2000',
			stroked: false
		});

		var shadowEl = $(document.createElement('v:shape')).appendTo(groupEl);
		shadowEl.css({
			width: 2000,
			height: 2000
		}).attr({
			path: 'M 494,994 C 498,739 500,470 618,237 C 687,95 842,6 1000,15 C 1350,33 1702,217 1872,531 C 2009,781 2035,1089 1954,1361 C 1858,1663 1601,1914 1286,1977 C 1048,2026 796,1993 570,1905 C 471,1869 388,1776 398,1666 C 410,1476 481,1296 490,1106 C 493,1068 494,1031 494,994',
			stroked: false
		});

		var gradEl = $(document.createElement('v:fill')).appendTo(shadowEl);
		gradEl.attr({
			color: gradColor1,
			color2: gradColor2,
			type: 'gradient',
			angle: '270'
		});

		var fillEl = $(document.createElement('v:shape')).appendTo(groupEl);
		fillEl.css({
			width: 2000,
			height: 2000
		}).attr({
			path: 'M 1864,994 C 1869,1385 1631,1777 1263,1923 C 953,2054 575,1982 330,1753 C 12,1472 -87,985 77,596 C 208,265 534,11 895,1 C 1244,-18 1581,193 1740,499 C 1822,650 1864,822 1864,994',
			fillcolor: fillColor,
			stroked: false
		});

		$c.measurer.bind(function() {
			groupEl.addClass('shape').css({
				width: rootEl.outerWidth(),
				height: rootEl.outerHeight()
			});
		});
	}
}