var WeatherData = WeatherData || {};

WeatherData.Drawing = WeatherData.Drawing || {};
WeatherData.Drawing.worker = (function () {

	  var self = this;
	  var spinner = {};
    var tFactor = 2.1;
    var width = 240;
    var height = 240;
    var radius = Math.min(width, height) / 2;
    var color = d3.scaleOrdinal()
        .range(["url(#yellowToLightGreen)", "lightgreen", "url(#lightGreenToGreen)", "green", "url(#greenToLightBlue)", "lightblue",  "url(#lightBlueToBlue)", "blue", "url(#blueToOrange)", "orange", "url(#orangeToRed)", "url(#redToYellow)"]);
	
	  var init = function () {
			TweenMax.set($(".card-config-top-item img:nth-child(n+2)"), {autoAlpha: 0});	
		};

    // A private function which logs any arguments
    var drawWeatherSeverityDonut = function () {
        
			var gradTemplates = d3.select('#severityGradients');
			var arcData = [{slice: 10.1}, {slice: 10.2}, {slice: 10.3}, {slice: 10.4}, {slice: 10.5}, {slice: 10.6}, {slice: 10.7}, {slice: 10.8}, {slice: 10.9}, {slice: 11}, {slice: 11.1}, {slice: 11.2}];
			var arc = d3.arc()
					.outerRadius(radius - 10)
					.innerRadius(radius - 50);

			var pie = d3.pie()
					.sort(null)
					.value(function (d) {
							return d.slice;
					});

			var svg = d3.select(".severity-arc").append("svg");

			svg.html(gradTemplates.html());			

			var outerGroup = svg.attr("width", width)
					.attr("height", height)
					.append("g")
					.attr("transform", "translate(110, 110)");

			var innerGroup = outerGroup.selectAll(".arc")
					.data(pie(arcData))
					.enter().append("g")
					.attr("class", "arc");

			innerGroup.append("path")
					.attr("d", arc)
					.style("fill", function (d) {
							return color(d.data.slice);
					});
    };
	
	  var resolveAngleOfRotation = function() {
			
			var $fadeIn = null;
			var $fadeOut = null;
			var child = ".card-config-top-item img:nth-child({0})";
			var children = ".card-config-top-item img:nth-child({0}), .card-config-top-item img:nth-child({1})"
			var f2 = 2;
			var tl = new TimelineLite();
			var n = ((this.rotation || self.spinner[0].rotation) % 360);	
			
			n = n > 0 ? n :(360 + n);
			tl.add("start", 0);
			
			if (n > 0 && (n <= 30)) {
				
				$fadeOut = $(children.format('2', '12'));
				$fadeIn = $(child.format('1'));
				
			} else if (n > 30 && (n <= 60)) {
				
				$fadeOut = $(children.format('1', '3'));
				$fadeIn = $(child.format('2'));
				
			} else if (n > 60 && (n <= 90)) {
				
				$fadeOut = $(children.format('2', '4'));
				$fadeIn = $(child.format('3'));
				
			} else if (n > 90 && (n <= 120)) {
				
				$fadeOut = $(children.format('3', '5'));
				$fadeIn = $(child.format('4'));
				
			} else if (n > 120 && (n <= 150)) {
				
				$fadeOut = $(children.format('4', '6'));
				$fadeIn = $(child.format('5'));
				
			} else if (n > 150 && (n <= 180)) {
				
				$fadeOut = $(children.format('5', '7'));
				$fadeIn = $(child.format('6'));
				
			} else if (n > 180 && (n <= 210)) {
				
				$fadeOut = $(children.format('6', '8'));
				$fadeIn = $(child.format('7'));
				
			} else if (n > 210 && (n <= 240)) {
				
				$fadeOut = $(children.format('7', '9'));
				$fadeIn = $(child.format('8'));
				
			} else if (n > 240 && (n <= 270)) {
				
				$fadeOut = $(children.format('8', '10'));
				$fadeIn = $(child.format('9'));
				
			} else if (n > 270 && (n <= 300)) {
				
				$fadeOut = $(children.format('9', '11'));
				$fadeIn = $(child.format('10'));
				
			} else if (n > 300 && (n <= 330)) {
				
				$fadeOut = $(children.format('10', '12'));
				$fadeIn = $(child.format('11'));
				
			} else if (n > 330 && (n < 360)) {
				
				$fadeOut = $(children.format('11', '1'));
				$fadeIn = $(child.format('12'));
			}
			
			if ($fadeIn && $fadeOut) {
				tl.to($fadeOut, .50, {autoAlpha: 0}, "start");
				tl.to($fadeIn, .50, {autoAlpha: 1}, "start");
			}

		};
	
	  init();

    return {
        DrawSeverityDonut: drawWeatherSeverityDonut,
				ResolveAngleOfRotation: resolveAngleOfRotation,
			  Spinner: spinner
    };

})();

String.prototype.format = function() {
    var s = this,
        i = arguments.length;

    while (i--) {
        s = s.replace(new RegExp('\\{' + i + '\\}', 'gm'), arguments[i]);
    }
    return s;
};

$(function() {
  
  gsap.registerPlugin(InertiaPlugin);
	var worker = WeatherData.Drawing.worker;

	worker.DrawSeverityDonut();	
	worker.Spinner = Draggable.create($('#weatherType'), {type: "rotation", inertia: false, onDrag: worker.ResolveAngleOfRotation});
	
	$('.svg-container.card-config-top-item > div > div > svg > g > g:nth-child(4) > path').css({"stroke": "green", "stroke-width": 0.5});
})