Add toggle for gradient animation

assets/css/main.css

@@ -24,7 +24,6 @@ hr {
 
     background: #ffffff;
     background-size: 600% 600%;
-    animation: Animation 25s ease-in-out infinite;
 
     display: flex;
     text-align: center;

src/main.js

@@ -209,11 +209,15 @@ function pickColors(num)
 
 		// get gradient speed and set the gradient
 		chrome.storage.sync.get({
-			gradientSpeed: 25
+			gradientSpeed: 25,
+			animateGradient: true
 		}, function(items) {
 			container.style.background = "linear-gradient(45deg, " + colorString + ")";
 			container.style.backgroundSize = "200% 200%";
 			container.style.animation = "Animation " + items.gradientSpeed + "s ease-in-out infinite";
+
+			if (!items.animateGradient)
+				container.style.webkitAnimationPlayState = "paused";
 		});
 
 		// set the options menu info

src/options.js

@@ -24,10 +24,16 @@ function updatePrefs(event) {
 	{
 		formatDateString();
 		updateDate();
+	} else if (id == "animateGradient") {
+		if (event.target.checked) {
+			container.style.webkitAnimationPlayState = "running";
+		} else {
+			container.style.webkitAnimationPlayState = "paused";
+		}
 	}
 }
 
-// called when one of the gradien selection radios is pressed
+// called when one of the gradient selection radios is pressed
 function changeSelectionMode(event)
 {
 	// change it to either "random" or "select"
@@ -61,7 +67,8 @@ function restoreOptions()
 		gradientSpeed: 25,
 		showDayOfWeek: true,
 		showDayOfMonth: true,
-		showYear: true
+		showYear: true,
+		animateGradient: true
 	}, function(items) {
 		// set up switches according to stored options
 		document.getElementById('showTime').checked = items.showTime;
@@ -70,6 +77,7 @@ function restoreOptions()
 		document.getElementById("showDayOfWeek").checked = items.showDayOfWeek;
 		document.getElementById("showDayOfMonth").checked = items.showDayOfMonth;
 		document.getElementById("showYear").checked = items.showYear;
+		document.getElementById("animateGradient").checked = items.animateGradient;
 
 		// set the slider position to the current value		
 		document.getElementById("opt-speed").value = items.gradientSpeed;
@@ -115,6 +123,7 @@ function resetOptions()
 		options.showDayOfWeek = true,
 		options.showDayOfMonth = true,
 		options.showYear = true
+		options.animateGradient = true;
 
 		// set the storage
 		chrome.storage.sync.set(options);

wavetab.html

@@ -82,6 +82,11 @@ <h3>Current Gradient Info</h3>
 						<p>Name: <span id="cgName"></span></p>
 						<p>Package: <span id="cgPackage"></span></p>
 						<p>ID: <span id="cgID"></span></p>
+						<br>
+						<li><label class="switch">
+							<input type="checkbox" checked id="animateGradient">
+							<div class="slider"></div>
+						</label>Animate Gradient</li>
 						<h3>Gradient Selection</h3>
 						<div class="radio-container">
 							<input type="radio" name="grad-select" value="random" id="opt-grad-random" class="grad-selection-radio">