(function() {

  var _SELECTOR_COUNTER = "div#counter";
  var _SELECTOR_NUMBERS = "div.counter-number";
  var _SELECTOR_NUMBER = "span.counter-number";
  var _SELECTOR_CAPTION = "p.counter-caption";
  var _SELECTOR_CONTROLS = "div#counter div.counter-controls";

  var _CLASS_CONTROL = "counter-control";
  var _CLASS_ACTIVE = "active";

  var _MAX_CONTROLS = 6;
  var _MAX_CHARACTERS = 9;

  var _ANIMATION_DURATION = 1000;

  var _NUMBER = [
    467400000,
     83600000,
     22100000,
    310600000,
     41300000,
      9800000
  ];

  var _CAPTION = [
    "Wasser, Wind, Sonne und Biogas: Im Harz wird der ideale Mix für eine Stromversorgung aus erneuerbaren Energien erprobt.",
    "KWK: Bei der Kraft-Wärme-Kopplung wird die bei der Strom- erzeugung anfallende Wärme z.B. zu Heizzwecken genutzt",
    "Wasserkraft: Im Pumpspeicherwerk wird Wasser über ein Ober- und Unterbecken gepumpt und so Energie umgesetzt.",
    "Windenergie: Insgesamt drehen sich in der Modellregion 40 Wind- räder auf dem Druiberg vor den Toren der Stadt Dardesheim.",
    "Biogasanlage: Die Biomasse, die zur Gaserzeugung verwendet wird, steht für Zeiten mit wenig Wind- und Sonnenstrom bereit.",
    "Solarenergie: Solaranlagen auf den Dächern im Landkreis Harz sorgen für die Stromerzeugung aus erneuerbaren Energien."
  ];



  var _$counter = null;

  var _$counterNumbers = null;
  var _$counterNumber = null;
  var _$counterCaption = null;
  var _$counterControls = null;
  var _$counterControl = null;

  var _locked = false;

  var _numberBase = 0.0;
  var _numberTarget = 0.0;

  var _captionBase = "";
  var _captionTarget = "";



  function _onClick(e) {
    if (_locked || e.target.className.search(_CLASS_ACTIVE) != -1) return;

    var index = -1;

    for (var i = 0, len = _$counterControl.length; i < len; i++) {
      if (e.target != _$counterControl[i]) {
        _$counterControl.slice(i, i + 1).removeClass(_CLASS_CONTROL + "-" + i + "-" + _CLASS_ACTIVE);
        continue;
      }

      _$counterControl.slice(i, i + 1).addClass(_CLASS_CONTROL + "-" + i + "-" + _CLASS_ACTIVE);
      index = i;
    }

    if (index == -1) return;

    _locked = true;
    _numberBase = _numberTarget;
    _numberTarget = _NUMBER[index];
    _captionBase = _captionTarget;
    _captionTarget = _CAPTION[index];

    _$counterCaption.animate(
      {opacity : 0.0},
      {
        duration : _ANIMATION_DURATION,
        easing : 'swing',
        complete : _onFade,
        step : _tick
      }
    );
  }

  function _onFade(e) {
    _locked = false;
    _numberBase = _numberTarget;

    _$counterCaption.text(_captionTarget);

    _$counterCaption.animate(
      {opacity : 1.0},
      {
        duration : _ANIMATION_DURATION,
        easing : 'swing',
        complete : _onComplete
      }
    );

    _tick(0.0, 0.0);
  }

  function _onComplete(e) {
    //_locked = false;
    //_numberBase = _numberTarget;
    _captionBase = _captionTarget;
  }



  function _tick(current, target) {
    var num = _numberBase + (_numberTarget - _numberBase) * (1.0 - current);
    var chars = Math.round(num).toString();

    if (chars.length > _MAX_CHARACTERS) chars = chars.slice(chars.length - _MAX_CHARACTERS);
    while (chars.length < _MAX_CHARACTERS) chars = " " + chars;

    for (var i = 0; i < _MAX_CHARACTERS; i++)  {
      _$counterNumber.slice(i, i + 1).text(chars.substr(i, 1));
    }
  }



  $(document).ready(function() {
    _$counter = $(_SELECTOR_COUNTER);

    _$counterNumbers = $(_SELECTOR_NUMBERS);
    _$counterNumber = _$counterNumbers.children(_SELECTOR_NUMBER);
    _$counterCaption = $(_SELECTOR_CAPTION);
    _$counterControls = $(_SELECTOR_CONTROLS);
    for (var i = 0; i < _MAX_CONTROLS; i++) _$counterControls.append($(document.createElement('div')).addClass(_CLASS_CONTROL + " " + _CLASS_CONTROL + "-" + i));
    _$counterControls.click(_onClick);
    _$counterControl = _$counterControls.children();
    _$counterControl.slice(0, 1).addClass(_CLASS_CONTROL + "-0-" + _CLASS_ACTIVE);

    _locked = false;
    _numberBase = _numberTarget = _NUMBER[0];
    _captionBase = _captionTarget = _CAPTION[0];
    _$counterCaption.text(_CAPTION[0]);
    _tick(0.0, 0.0);
  });
})();