## translation metadata
# Revision: $Revision$
# Translation-Priority: 3-low

#include "donatehead.wmi" TITLE="Donate to keep Tor alive!" CHARSET="UTF-8"

<div class="donation">
    <div class="container"> 
        <div class="row">
            <div class="col-md-6">
              
              <h2 style="padding:2px; margin-bottom:10px;" class="text-justify">This is what a Tor supporter looks like:</h2>
              <div class="row col-md-offset-0">
        <div class="col-md-4" style="padding:10px;">
           <img src="$(IMGROOT)/laura_poitras.jpg" class="class=img-rounded img-responsive" alt="Laura Poitras">
        </div>
                <div class="col-md-8 col-md-offset-0">
                    <h1><small>Laura Poitras</small></h1>
                    <blockquote style="padding:5px;">"Edward Snowden would not have been able to contact me without Tor and other free software encryption projects. Journalists need Tor to protect their sources and to research freely. It is an essential tool, and it needs our support."</blockquote>
                </div>
                </div>
            </div>
            <div class="col-md-6">
        <div style="margin-left:20px;">
          <h2 class="text-justify">Donate!</h2>
        </div>

       <form id="donate" action="https://www.paypal.com/cgi-bin/webscr" method="post">

                <div style="margin-top:20px;" class="btn-group btn-group-lg" role="group">
                    <div style="padding-bottom:5px;" class="col-md-4"><button id="amount1" name="amnt" type="button" class="btn btn-default btn-lg btn-block">10</button></div>
                    <div style="padding-bottom:5px;" class="col-md-4"><button id="amount2" name="amnt" type="button" class="btn btn-default btn-lg btn-block active" data-toggle="tooltip" data-placement="bottom" title="For this amount you get a tshirt!">100</button></div>
                    <div style="padding-bottom:5px;" class="col-md-4" ><button id="amount3" name="amnt" type="button" class="btn btn-default btn-lg btn-block" data-toggle="tooltip" data-placement="bottom" title="For this amount you get a tshirt!">256</button></div>
          <div style="padding-bottom:5px;" class="col-md-4"><button id="amount4" name="amnt" type="button" class="btn btn-default btn-lg btn-block">50</button></div>
          <div style="padding-bottom:5px;" class="col-md-4"><button id="amount5" name="amnt" type="button" class="btn btn-default btn-lg btn-block" data-toggle="tooltip" data-placement="bottom" title="For this amount you get a tshirt!">500</button></div>
                    <div class="row form-group-lg">
                        <label class="sr-only" for="exampleInputAmount">1</label>
                            <div class="input-group">
                                <div class="input-group-addon">$</div>
                                    <input type="text" name="custom_amnt" class="form-control" id="exampleInputAmount">
                            </div>
                    </div>
        </div>
                  <div style="padding:10px;" class="row col-md-offset-0">
                      <label>
                         <input type="radio" name="cmd" id="blankRadio1" value="_donations" aria-label="one_time"> One-time Donation
                      </label>

                      <label>
                         <input type="radio" name="cmd" id="blankRadio2" value="_xclick-subscriptions" aria-label="monthly"  checked> Monthly Donation
                      </label>
                 </div>
        <div class="row col-md-offset-0">
                    <button class="btn btn-primary btn-lg btn-block" style="padding:10px; margin:5px;">Donate</button>
          <h4><a href="<page donate/donate-options>">other ways to donate</a></h4>
        </div>
          <!-- Add the extra clearfix for only the required viewport -->
          <div class="clearfix visible-xs-block"></div>
      </div>
        <input type="hidden" id="amount" name="amount" value="100">
        <input type="hidden" id="a3" name="a3" value="0">
        <input type="hidden" id="p3" name="p3" value="1">
        <input type="hidden" id="t3" name="t3" value="M">
        <input type="hidden" name="sra" value="1">
        <input type="hidden" name="src" value="1">
        <input type="hidden" name="no_shipping" value="1">
        <input type="hidden" name="no_note" value="1">
        <input type="hidden" name="business" value="donations@torproject.org">
        <input type="hidden" id="item_name" name="item_name" value="Donation to the Tor Project">
        <input type="hidden" name="return" value="https://www.torproject.org/donate/thankyou">
        <input type="hidden" name="cancel_return" value="https://www.torproject.org/getinvolved/volunteer">
      </form>
    </div>
</div>

<!-- BEGIN PAYPAL -->
<script type="text/javascript" src="$(DOCROOT)/js/jquery.min.js"></script>
<script type="text/javascript">
function displayVals() {
    var amount = $( this ).filter(":button").html();
    if (amount == null) {
        amount = $( this ).filter("input").val();
        if (amount == null) {
            amount = 100;
        } else if (this.id == "exampleInputAmount") {
            $( "button" ).removeClass('active');
            $( this ).addClass('active');
        }
    } else {
        $( "button" ).removeClass('active');
        $( this ).addClass('active');
        jQuery('#amount').val(amount);
    }
    jQuery('#amount').val(amount);
    jQuery('#a3').val(amount);
}

jQuery(function(){
 	jQuery("button[name='amnt']").click(displayVals);
 	jQuery("input[name='cmd']").click(displayVals);
 	jQuery("#exampleInputAmount").click(displayVals);
 	jQuery("#exampleInputAmount").change(displayVals);
 	displayVals();
});
</script>
#include <donatefoot.wmi>