<!DOCTYPE html>
<html ng-app="baconDemo">

  <head>
    <script data-require="angular.js@1.2.16" data-semver="1.2.16" src="https://code.angularjs.org/1.2.16/angular.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bacon.js/0.7.10/bacon.min.js"></script>
    <script type="text/javascript" src="https://rawgit.com/lauripiispanen/angular-bacon/master/dist/angular-bacon.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <p ng-controller="baconCtrl">
      <button ng-click="shouldBlink = !shouldBlink">Blink: {{shouldBlink}}</button>
      <blink>This should blink</blink>
      This shouldn't
      <blink>This should blink, too</blink>
    </p>
  </body>

</html>
angular.module( 'baconDemo', ['angular-bacon'] )

.controller( 'baconCtrl', function($scope) {
  $scope.shouldBlink = true;
  shouldBlinkProp = $scope.$watchAsProperty('shouldBlink');
  var tickStream = Bacon.interval(500, 1)
  .filter(shouldBlinkProp);
  var aggregator = function(aggregate, tick) {
    return aggregate !== tick ? 1 : 0
  }
  var ticktackProp = tickStream.scan(0, aggregator);
  
  var toVisibility = function(ticktackVal) {
    return ticktackVal ? {visibility:'visible'} : {visibility: 'hidden'};
  };
  var blinkProp = ticktackProp
  .map(toVisibility);
  
  ticktackProp.digest($scope, 'ticktack');
  blinkProp.digest($scope, 'blinkCss');
  
})

.directive( 'blink', function() {
  return {
    restrict: 'E',
    transclude: true,
    template: '<div ng-style="blinkCss" ng-transclude></div>', 
  }
})
;
/* Styles go here */