<!-- Embedded Script - do not edit! -->
<script type="text/javascript">

  var amountField = document.getElementById('spektrix-donation-amount');
  var spektrixDonate = document.getElementById( 'spektrix-donate' );
  var loadingIcon = document.getElementById( 'spektrix-loading-icon' );
  var spektrixDonateSubmit = document.getElementById( 'fjs-spektrix-donate-submit' );

  // Tabs navigation
  var tabNavs = document.querySelectorAll( '#fjs-donate-tabs-nav li a' );

  for ( var i = 0; i < tabNavs.length; i++ ) {
    tabNavs[ i ].addEventListener( 'click', function( event ) {
      fjsToggleTab( this.getAttribute( "href" ).replace( '#', '' ) );
      // Update the amount
      var newValue = this.getAttribute( "data-value" );
      amountField.value = newValue;
      if ( spektrixDonate.updateDonationTotal !== undefined ) {
        spektrixDonate.updateDonationTotal( newValue );
      }
    });
  }

  function fjsToggleTab( tabId ) {

    // Nav
    var previousActiveNavTab = document.getElementsByClassName( "fjs-nav-active" );
    previousActiveNavTab[0].className = "";

    var newActiveNavTab = document.querySelectorAll( '#fjs-donate-tabs-nav li a[href="#' + tabId + '"]' );
    newActiveNavTab[0].className = 'fjs-nav-active';

    // Content
    var previousActiveTab = document.getElementsByClassName( "fjs-tab-active" );
    previousActiveTab[0].className = "fjs-donate-content";
    var newActiveTab = document.getElementById( tabId );
    newActiveTab.className = newActiveTab.className + ' fjs-tab-active';
  }

  // Update value
  // var spektrixUpdateValue = function() {
  //     var value = this.getAttribute( "data-value" );
  //     amountField.value = value;
  //     spektrixDonate.updateDonationTotal( value );
  // };

  // Event listeners
  spektrixDonateSubmit.addEventListener( 'click', function (e) {
    fjsToggleLoadingIcon( 'show' );
  });

  // Success event
  spektrixDonate.addEventListener( 'success', function (e) {
    fjsToggleLoadingIcon( 'hide' );
  });

  // Fail event
  spektrixDonate.addEventListener( 'fail', function (e) {
    fjsToggleLoadingIcon( 'hide' );
  });

  var fjsToggleLoadingIcon = function( mode ) {
    if ( mode == 'show' ) {
      loadingIcon.style.cssText = '';
    } else {
      loadingIcon.style.cssText = 'display:none;';
    }
    return;
  };

</script>