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

<head>
    <script data-require="angular.js@1.x" data-semver="1.4.2" src="https://code.angularjs.org/1.4.2/angular.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
    <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>

<body dt-konami-debug ng-controller="MainCtrl">
    <h1>Jem's konami debug</h1>
    <p>Hit the following combination: ↑ ↑ ↓ ↓ ← → ← → B A</p>


    <br />
    <div class="container" ng-if="showDebug">
        <div class="panel panel-default">

            <div class="panel-heading">
                <h2 class="panel-title">debug pane</h2>
            </div>

            <div class="panel-body">

                <span>some debug data</span>

            </div>
        </div>
    </div>

</body>

</html>
// Code goes here

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) {

  $scope.weekViewSelected = "production"

});


app.directive('dtKonamiDebug', ['$document', '$rootScope',

  function($document, $rootScope) {

    // Pattern = Konami code (↑ ↑ ↓ ↓ ← → ← → B A)
    var pattern = [38, 38, 40, 40, 37, 39, 37, 39, 66, 65];

    // Pattern = "debug"
    // var pattern = [68, 69, 66, 85, 71];

    var cursor = 0;

    return {

      restrict: 'A',

      link: function(scope, element, attrs) {

        // Enrich parent scope
        scope.showDebug = false;

        // Bind document's keydown event (rem: keypress is trapped by navigation handler, pans the screen and disables propagation)
        $document.bind('keydown', function(event) {

          // Obtain keycode
          var keycode = event.which;

          // Output keycode
          //console.log('keydown: ' + keycode);

          // Compare keycode with expected character
          if (pattern[cursor] == keycode) {

            // End of the pattern?
            if (pattern.length == ++cursor) {

              // console.log('debug mode toggle');
              scope.showDebug = !scope.showDebug;

              scope.$apply();

              cursor = 0;
            }
          } else {

            cursor = 0;
          }
        });

        scope.$watch('showDebug', function(newVal) {


        });
      }
    };
  }
]);
/* Styles go here */