begeeben/jsbin.gogaj.css

## jsbin.gogaj.css
.light {
  display: inline-block;
  border: 2px solid #888;
  border-radius: 50px;
  width: 100px;
  height: 100px;
  margin: 3px;
  opacity: 0.3;
}

.light.red {
  background-color: red;
}

.light.yellow {
  background-color: yellow;
}

.light.blue {
  background-color: blue;
}

.light.green {
  background-color: green;
}

.light.purple {
  background-color: purple;
}

.light.orange {
  background-color: orange;
}

.light.is-active {
  opacity: 1;
}

@-webkit-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@-o-keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.light.is-blinking {
  -webkit-animation: blink .5s infinite alternate;
  -moz-animation: blink .5s infinite alternate;
  -o-animation: blink .5s infinite alternate;
  animation: blink .5s infinite alternate;
}

.control-panel {
  margin: 5px;
}

.scene-switch {
  font-size: 1rem;
  padding: .5rem;
  color: #999;
}

.scene-switch.is-active {
  color: black;
}

## jsbin.gogaj.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="control-panel">
    <button class="scene-switch traffic">traffic</button>
    <button class="scene-switch romantic">romantic</button>
    <button class="scene-switch spanish">Spanish</button>
    <button class="scene-switch greece">Greece</button>
    <button class="scene-switch oneone">oneone</button>
  </div>
  <div class="light red"></div>
  <div class="light yellow"></div>
  <div class="light blue"></div>
  <div class="light green"></div>
  <div class="light purple"></div>
  <div class="light orange"></div>
</body>
</html>

## jsbin.gogaj.js
var timer;

document.addEventListener('click', function (e) {
  var $target = $(e.target);

  function switchScene($target) {
    $('.scene-switch, .light').removeClass('is-active');
    $('.light').removeClass('is-blinking');
    $target.toggleClass('is-active');

    if ($target.hasClass('traffic')) {
      $('.light.red, .light.yellow, .light.green').addClass('is-active');
      // when traffic light is on, make yellow light blinking
      $('.light.yellow').removeClass('is-active').addClass('is-blinking');
    } else if ($target.hasClass('romantic')) {
      $('.light.blue, .light.purple').addClass('is-active');
      // switch to oneone after 2s
      timer = setTimeout(function () {
        switchScene($('.scene-switch.oneone'));
      }, 2000);
    } else if ($target.hasClass('spanish')) {
      $('.light.red, .light.orange').addClass('is-active');
    } else if ($target.hasClass('greece')) {
      $('.light.blue').addClass('is-active');
    } else if ($target.hasClass('oneone')) {
      $('.light.green').addClass('is-active');
      // switch to romantic after 2s
      timer = setTimeout(function () {
        switchScene($('.scene-switch.romantic'));
      }, 2000);
    }
  }

  if (timer) {
    clearTimeout(timer);
  }

  // on scene switch click
  if ($target.hasClass('scene-switch')) {
    switchScene($target);
  }

  // on light click
  if ($target.hasClass('light')) {
    $target.toggleClass('is-active');

    // check if a scene is matched
    $('.scene-switch').removeClass('is-active');

    if ($('.light.blue, .light.purple').filter('.is-active').length === 2 &&
        $('.light.is-active').length === 2) {
      $('.scene-switch.romantic').addClass('is-active');
    } else if ($('.light.red, .light.orange').filter('.is-active').length === 2 &&
               $('.light.is-active').length === 2) {
      $('.scene-switch.spanish').addClass('is-active');
    } else if ($('.light.blue').filter('.is-active').length === 1 &&
               $('.light.is-active').length === 1) {
      $('.scene-switch.greece').addClass('is-active');
    } else if ($('.light.green').filter('.is-active').length === 1 &&
               $('.light.is-active').length === 1) {
      $('.scene-switch.oneone').addClass('is-active');
    }

    // check if yellow light is clicked
    if ($target.hasClass('yellow')) {
      $target.removeClass('is-blinking');
    }
  }
});
	.light {
	display: inline-block;
	border: 2px solid #888;
	border-radius: 50px;
	width: 100px;
	height: 100px;
	margin: 3px;
	opacity: 0.3;
	}

	.light.red {
	background-color: red;
	}

	.light.yellow {
	background-color: yellow;
	}

	.light.blue {
	background-color: blue;
	}

	.light.green {
	background-color: green;
	}

	.light.purple {
	background-color: purple;
	}

	.light.orange {
	background-color: orange;
	}

	.light.is-active {
	opacity: 1;
	}

	@-webkit-keyframes blink {
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
	}

	@-moz-keyframes blink {
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
	}

	@-o-keyframes blink {
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
	}

	@keyframes blink {
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
	}
	}

	.light.is-blinking {
	-webkit-animation: blink .5s infinite alternate;
	-moz-animation: blink .5s infinite alternate;
	-o-animation: blink .5s infinite alternate;
	animation: blink .5s infinite alternate;
	}

	.control-panel {
	margin: 5px;
	}

	.scene-switch {
	font-size: 1rem;
	padding: .5rem;
	color: #999;
	}

	.scene-switch.is-active {
	color: black;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<div class="control-panel">
	<button class="scene-switch traffic">traffic</button>
	<button class="scene-switch romantic">romantic</button>
	<button class="scene-switch spanish">Spanish</button>
	<button class="scene-switch greece">Greece</button>
	<button class="scene-switch oneone">oneone</button>
	</div>
	<div class="light red"></div>
	<div class="light yellow"></div>
	<div class="light blue"></div>
	<div class="light green"></div>
	<div class="light purple"></div>
	<div class="light orange"></div>
	</body>
	</html>
	var timer;

	document.addEventListener('click', function (e) {
	var $target = $(e.target);

	function switchScene($target) {
	$('.scene-switch, .light').removeClass('is-active');
	$('.light').removeClass('is-blinking');
	$target.toggleClass('is-active');

	if ($target.hasClass('traffic')) {
	$('.light.red, .light.yellow, .light.green').addClass('is-active');
	// when traffic light is on, make yellow light blinking
	$('.light.yellow').removeClass('is-active').addClass('is-blinking');
	} else if ($target.hasClass('romantic')) {
	$('.light.blue, .light.purple').addClass('is-active');
	// switch to oneone after 2s
	timer = setTimeout(function () {
	switchScene($('.scene-switch.oneone'));
	}, 2000);
	} else if ($target.hasClass('spanish')) {
	$('.light.red, .light.orange').addClass('is-active');
	} else if ($target.hasClass('greece')) {
	$('.light.blue').addClass('is-active');
	} else if ($target.hasClass('oneone')) {
	$('.light.green').addClass('is-active');
	// switch to romantic after 2s
	timer = setTimeout(function () {
	switchScene($('.scene-switch.romantic'));
	}, 2000);
	}
	}

	if (timer) {
	clearTimeout(timer);
	}

	// on scene switch click
	if ($target.hasClass('scene-switch')) {
	switchScene($target);
	}

	// on light click
	if ($target.hasClass('light')) {
	$target.toggleClass('is-active');

	// check if a scene is matched
	$('.scene-switch').removeClass('is-active');

	if ($('.light.blue, .light.purple').filter('.is-active').length === 2 &&
	$('.light.is-active').length === 2) {
	$('.scene-switch.romantic').addClass('is-active');
	} else if ($('.light.red, .light.orange').filter('.is-active').length === 2 &&
	$('.light.is-active').length === 2) {
	$('.scene-switch.spanish').addClass('is-active');
	} else if ($('.light.blue').filter('.is-active').length === 1 &&
	$('.light.is-active').length === 1) {
	$('.scene-switch.greece').addClass('is-active');
	} else if ($('.light.green').filter('.is-active').length === 1 &&
	$('.light.is-active').length === 1) {
	$('.scene-switch.oneone').addClass('is-active');
	}

	// check if yellow light is clicked
	if ($target.hasClass('yellow')) {
	$target.removeClass('is-blinking');
	}
	}
	});