/**
 * @requires jQuery
 * @requires jCommon
 * @requires jTweener
 * @date 2009-11-18
 */

var cartCircles;

$(function() {

	$('.circles').each(function() {
		cartCircles = vectorCircles(this);
	});

	function vectorCircles(rootEl) {
		rootEl = $(rootEl);

		var elCount = 7;
		var count = parseInt($c.getSuffixClass(rootEl, 'circles_'), 10);

		var colors = [
			['#0293AC', '#06697B'],
			['#BC392D', '#862920'],
			['#13AC4B', '#107B3E'],
			['#783E98', '#5D2A7F'],
			['#16B89D', '#038672'],
			['#AFBC37', '#7C8636'],
			['#BC2D89', '#852061']
		];
		var shapes = [];

		for (var i = 0; i < colors.length; i++) {
			shapes.push(vectorCircle(rootEl.find('.item' + (i + 1)), colors[i][0], colors[i][1]));
		}

		function add(newCount) {
			if (!rootEl) return;

			rootEl.removeClass('circles_' + count);
			count = newCount;
			rootEl.addClass('circles_' + count);

			shapes[count - 1] && shapes[count - 1].animate();
		}

		return { add: add };
	}

	function vectorCircle(rootEl, fillColor, shadowColor) {
		rootEl = $(rootEl);

		var
			fillEl,
			shadowEl,
			createVector,
			updateVector;

		if ($c.support.svg) {
			createVector = function(width, height) {
				var svgEl = document.createElementNS($c.ns.svg, 'svg');
				svgEl.setAttribute('version', '1.1');
				svgEl.setAttribute('class', 'shape');
				svgEl.setAttribute('viewBox', '0 0 200 200');
				svgEl.setAttribute('width', width);
				svgEl.setAttribute('height', height);
				rootEl.append(svgEl);

				shadowEl = document.createElementNS($c.ns.svg, 'path');
				shadowEl.setAttribute('fill', shadowColor);
				shadowEl.setAttribute('d', 'M70.689,10.299c0,0-23.941,12.294-34.294,17.471c-7.765,5.176-54.354,44-28.471,113.883 c18.118,51.766,72.471,59.53,88.001,56.942c7.765,0,46.589-10.354,46.589-10.354L70.689,10.299z')
				svgEl.appendChild(shadowEl);

				fillEl = document.createElementNS($c.ns.svg, 'path');
				fillEl.setAttribute('fill', fillColor);
				fillEl.setAttribute('d', 'M33.301,116.057C20.359,64.291,46.242,12.526,90.243,2.173s93.177,23.294,106.119,75.06 c12.941,51.766-10.353,100.942-54.354,111.296C95.419,198.881,46.242,167.822,33.301,116.057z')
				svgEl.appendChild(fillEl);
			};

			updateVector = function(fillColor, shadowColor) {
				fillEl.setAttribute('fill', fillColor);
				shadowEl.setAttribute('fill', shadowColor);
			};
		} else {
			createVector = function(width, height) {
				shadowEl = $(document.createElement('v:shape'));
				shadowEl.addClass('shape').css({
					width: width,
					height: height
				}).attr({
					coordsize: '200 200',
					path: 'M 71,10 C 58,17 44,23 32,31 C 5,53 -6,92 3,125 C 8,150 22,173 44,186 C 65,198 91,203 114,195 C 124,193 133,191 142,188 C 118,129 95,69 71,10',
					fillcolor: shadowColor,
					stroked: false
				}).appendTo(rootEl);

				fillEl = $(document.createElement('v:shape'));
				fillEl.addClass('shape').css({
					width: width,
					height: height
				}).attr({
					coordsize: '200 200',
					path: 'M 33,116 C 24,80 34,37 65,14 C 90,-5 127,-3 152,15 C 196,43 213,106 189,152 C 177,173 155,189 131,190 C 94,194 57,170 41,137 C 38,130 35,123 33,116',
					fillcolor: fillColor,
					stroked: false
				}).appendTo(rootEl);
			};

			updateVector = function(fillColor, shadowColor) {
				fillEl.attr('fillcolor', fillColor);
				shadowEl.attr('fillcolor', shadowColor);
			};
		}

		createVector(rootEl.width(), rootEl.height());

		function animate() {
			step('#ffffff', '#444444', '#bbbbbb', '#000000', 0.4, function() {
				step('#444444', fillColor, '#000000', shadowColor, 0.4);
			});
		}

		function step(fillStartColor, fillEndColor, shadowStartColor, shadowEndColor, time, onComplete) {

			fillStartColor = hexToRgb(fillStartColor);
			fillEndColor = hexToRgb(fillEndColor);
			shadowStartColor = hexToRgb(shadowStartColor);
			shadowEndColor = hexToRgb(shadowEndColor);

			$t(rootEl, {
				time: time,
				transition: 'easeNone',
				moveX: function(value) {
					var curFillColor = [
						fillStartColor[0] + Math.round((fillEndColor[0] - fillStartColor[0]) * value),
						fillStartColor[1] + Math.round((fillEndColor[1] - fillStartColor[1]) * value),
						fillStartColor[2] + Math.round((fillEndColor[2] - fillStartColor[2]) * value)
					];
					var curShadowColor = [
						shadowStartColor[0] + Math.round((shadowEndColor[0] - shadowStartColor[0]) * value),
						shadowStartColor[1] + Math.round((shadowEndColor[1] - shadowStartColor[1]) * value),
						shadowStartColor[2] + Math.round((shadowEndColor[2] - shadowStartColor[2]) * value)
					];

					updateVector(rgbToHex(curFillColor), rgbToHex(curShadowColor));
				},
				onComplete: onComplete
			}).tween();
		}

		function hexToRgb(hex) {
			return [parseInt(hex.substr(1, 2), 16), parseInt(hex.substr(3, 2), 16), parseInt(hex.substr(5, 2), 16)];
		}

		function rgbToHex(rgb) {
			var s = '0123456789ABCDEF';

			return '#' + s.charAt(parseInt(rgb[0] / 16)) + s.charAt(rgb[0] % 16) + s.charAt(parseInt(rgb[1] / 16)) +
				s.charAt(rgb[1] % 16) + s.charAt(parseInt(rgb[2] / 16)) + s.charAt(rgb[2] % 16);
		}

		return { animate: animate };
	}
});