add random button

index.html

@@ -28,6 +28,7 @@
 				<label class="control-label" for="quality">jpg quality <span class="control-slider-value"></span></label>
 				<input class="control-input" type="range" id="quality" min="1" max="90" value="50" />
 			</div>
+			<button id="random-button" class="button is-hidden">randomize</button>
 		</div>
 		<div class="export-wrapper">
 			<button id="import-button" class="button">import image</button>

scripts/main.js

@@ -21,6 +21,7 @@ require(
 		'src/export-png',
 		'src/save-button',
 		'src/import-button',
+		'src/random-button',
 		'util/feature-test',
 		'lib/signals-1.0.0',
 		'lib/html5slider'
@@ -33,6 +34,7 @@ require(
 		png,
 		save_button,
 		import_button,
+		random_button,
 		testFeatures,
 		Signal
 	)
@@ -46,6 +48,7 @@ require(
 				signals: {
 					'image-loaded'    : new Signal(),
 					'set-new-src'     : new Signal(),
+					'control-set'     : new Signal(),
 					'control-updated' : new Signal(),
 					'export-png'      : new Signal(),
 					'saved'           : new Signal()
@@ -58,6 +61,7 @@ require(
 			png.init( shared );
 			save_button.init( shared );
 			import_button.init( shared );
+			random_button.init( shared );
 			image.init( shared );
 		}
 

scripts/src/controls.js

@@ -28,16 +28,35 @@ define(
 
 				is_initialized = true;
 
+				signals['control-set'].add( setControlValues );
 				signals['control-updated'].dispatch( values );
 			}
 		}
 
-		function controlUpdated( event )
+		function controlUpdated( element )
 		{
-			var target = event.target;
+			if ( element.target )
+			{
+				element = element.target;
+			}
 
-			updateValue( target.id, target.value );
+			updateValue( element.id, element.value );
-			updateValueInUI( target.id, target.value );
+			updateValueInUI( element.id, element.value );
+		}
+
+		function setControlValues( new_values )
+		{
+			var control;
+
+			for ( var id in new_values )
+			{
+				control = document.getElementById( id );
+				control.value = new_values[id];
+				controlUpdated( control );
+			}
+
+			values = new_values;
+			signals['control-updated'].dispatch( values );
 		}
 
 		function updateValue( key, value )

scripts/src/random-button.js

@@ -0,0 +1,67 @@
+/*global define*/
+define(
+	function()
+	{
+		var signals;
+		var controls;
+		var random_button;
+		var constraints = { };
+
+		function init( shared )
+		{
+			signals = shared.signals;
+
+			if ( shared.feature['query-selector-all'] )
+			{
+				controls = document.querySelectorAll( '.control-input' );
+				constraints = getConstraints( controls );
+				random_button = document.getElementById( 'random-button' );
+
+				random_button.addEventListener( 'click', buttonClicked, false );
+				random_button.classList.remove( 'is-hidden' );
+			}
+
+		}
+
+		function buttonClicked( event )
+		{
+			event.preventDefault();
+			randomize();
+		}
+
+		function randomize()
+		{
+			var new_values = { };
+			var constraint;
+
+			for ( var id in constraints )
+			{
+				constraint = constraints[id];
+				new_values[id] = getRandomInt( constraint.min, constraint.max );
+			}
+
+			signals['control-set'].dispatch( new_values );
+		}
+
+		function getConstraints( controls )
+		{
+			var result = { };
+			var control;
+
+			for ( var i = 0, len = controls.length; i < len; i++ )
+			{
+				control = controls[i];
+				result[control.id] = { min: parseInt( control.min, 10 ), max: parseInt( control.max, 10 ) };
+			}
+
+			return result;
+		}
+
+		function getRandomInt( min, max )
+		{
+			return Math.floor( Math.random() * ( max - min + 1 ) ) + min;
+		}
+
+		return { init: init };
+	}
+);

styles/global.css

@@ -24,6 +24,11 @@ a:hover
 	text-decoration: underline;
 }
 
+.is-hidden
+{
+	display: none;
+}
+
 .button
 {
 	background-color: #eaeaea;
@@ -45,6 +50,12 @@ a:hover
 	color: #fff;
 }
 
+#random-button
+{
+	position: relative;
+	top: 3px;
+}
+
 .headline
 {
 	font-size: 12px;