/* Copyright (C) 2012-2013 Denver Gingerich, 

** Copyright (C) 2013-2014 Bradley M. Kuhn.

** License: GPLv3-or-ater

**  Find a copy of GPL at https://sfconservancy.org/GPLv3

*/

$(document).ready(function() {

    $('.toggle-content').hide();

    $('.toggle-control')

     .addClass('clickable')

     .bind('click', function() {

        var $control = $(this);

        var $parent = $control.parents('.toggle-unit');

        $parent.toggleClass('expanded');

        $parent.find('.toggle-content').slideToggle();

        // if control has HTML5 data attributes, use to update text

        if ($parent.hasClass('expanded')) {

            $control.html($control.attr('data-expanded-text'));

        } else {

            $control.html($control.attr('data-text'));

        }

    });

    $('a.donate-now')

      .addClass('clickable')

      .bind('click', function() {

        var $control = $('#donate-box');

        $control.toggleClass('expanded');

        $control.find('.toggle-content').slideUp("slow");

        $control.find('.toggle-content').slideDown("slow");

    });

    $('#amount').addClass("valid");

    $('#amount').on('input', function() {

        var input=$(this);

        var value = input.val();

        var errorElement=$("span", input.parent());

        var noCommaValue = value;

        noCommaValue = value.replace(/,/g, "");

        var re = /^((\d{1,3}(,?\d{3})*?(\.\d{0,2})?)|\d+(\.\d{0,2})?)$/;

        var isValid = ( re.test(value) && parseInt(noCommaValue) >= 120);

        if (isValid)  {

           input.removeClass("invalid").addClass("valid");

           errorElement.removeClass("form-error-show").addClass("form-error");

           $("#form-correction-needed").removeClass("form-error-show").addClass("form-error");

        }

        else {

            input.removeClass("valid").addClass("invalid");

            errorElement.removeClass("form-error").addClass("form-error-show");

        }

    });

    $("#supporter-form-submit").click(function(event){

	var valid = $('#amount').hasClass("valid");

        if (! valid) {

            $("#form-correction-needed").removeClass("form-error").addClass("form-error-show")

                                        .css("font-weight", "bold").css("font-size", "150%");

	    event.preventDefault();

        } else {

            $("#form-correction-needed").removeClass("form-error-show").addClass("form-error");

        }

    });

    /* Handle toggling of annual/monthly form selections */

    $('.supporter-type-selection#monthly').hide();

    $('#annualSelector').css("font-weight", "bold").css("font-size", "127%");

    $("a[href$='monthly']").bind('click', function() {

        $('.supporter-type-selection#annual').hide();

        $('.supporter-type-selection#monthly').show();

        $('#monthlySelector').css("font-weight", "bold").css("font-size", "127%");

        $('#annualSelector').css("font-weight", "normal").css("font-size", "125%");

        $("#form-correction-needed").removeClass("form-error-show").addClass("form-error");

    });

    $("a[href$='annual']").bind('click', function() {

        $('.supporter-type-selection#annual').show();

        $('.supporter-type-selection#monthly').hide();

        $('#annualSelector').css("font-weight", "bold").css("font-size", "127%");

        $('#monthlySelector').css("font-weight", "normal").css("font-size", "125%");

    });

    $( ".footnote-mark" ).tooltip({

        items: "a",

nonprofits accounting project</a> to help all

nonprofits (in free software and in other fields) avoid paying millions

of dollars in licensing fees for subpar accounting software.</li>

<li>as part of Conservancy's partnership in the program, we support Karen as

  a co-organizer of the Free and Open Source Software Outreach Program.</li>

<li>we encourage and support our employees to do volunteer work in the

    community.  For example, Bradley and Karen together host an oggcast

    called <cite><a href="http://faif.us">Free as in Freedom</a></cite> which

    discusses important legal and policy issues in open source and free

    software.</li></ul>

<img class="appeal-footer" alt="*" src="/img/conservancy-supporter-heart.png"/>

<p>As an organization, we try to do do everything transparently; even 

our

<a 

href="https://gitorious.org/conservancy/policies/source/master:">

internal policies</a> are published and available for scrutiny.</p>

<p>Please <a href="#donate-box" class="donate-now">join our Supporter program</a> and spread software freedom!</p>

<p class="footnote"><sup><a href="#return-footnote-shirts-when">1</sup></a><a id="footnote-shirts-when"></a><span class="footnote-1-text">The

    shirts will ship during Q1 2015.</div></p>

<div class="supporter-type-selector">

<hr/>

  <strong>Become a Supporter Now:</strong>  <a id="annualSelector" href="#annual">Annual</a> | <a id="monthlySelector" href="#monthly">Monthly</a></div>

<div id="annual" class="supporter-type-selection">

<h3>Join as an Annual Supporter</h3>

<a id="annual"></a>

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

<div id="supporter-form-inputs">

            <input type="hidden" name="return" value="https://sfconservancy.org/supporter/thank-you.html" />

            <input type="hidden" name="cmd" value="_xclick" />

            <input type="hidden" name="business" value="supporter@sfconservancy.org" />

            <input type="hidden" name="item_name" value="Conservancy Supporter, Annual" />

  <label for="amount"><strong>Amount:</strong> $</label>

  <input id="amount" type="text" name="amount" size="7" value="120" />

  <span class="form-error"><small>$120 is a minimum for Conservancy

  Supporters.  <a href="/donate">Donate smaller amounts here</a>.</small></span><br/>

                      <label for="wantGift"><strong>Do you want to receive a t-shirt? </strong></label>

                      <input type="hidden" name="on1" value="wantGift" />

                      <input type="radio" checked="checked" name="os1" value="Yes" />Yes

                      <input type="radio" name="os1" value="No" />No

                      <br />

                      <label for="wantGift"><strong>T-shirt size: </strong></label>

                      <input type="hidden" name="on3" value="size"/>

                      <select name="os3" id="os3">

                        <option name="os3" id="os3" value="MenS">Men's S</option>

                        <option name="os3" id="os3" value="MenM">Men's M</option>

                        <option name="os3" id="os3" value="MenL">Men's L</option>

                        <option name="os3" id="os3" value="MenXL">Men's XL</option>

                        <option name="os3" id="os3" value="Men2XL">Men's 2XL</option>

                        <option name="os3" id="os3" value="LadiesS">Ladies' S</option>

                        <option name="os3" id="os3" value="LadiesM">Ladies' M</option>

                        <option name="os3" id="os3" value="LadiesL">Ladies' L</option>

                         <option name="os3" id="os3" value="LadiesXL">Ladies' XL</option>

                      <label for="publicAck"><strong>

                          Should we <a href="/sponsors#supporters">list you publicly</a> as a Conservancy Supporter? </strong></label>

                      <input type="hidden" name="on2" value="publicAck" />

                      <input type="radio" checked="checked" name="os2" value="Yes" />Yes

                      <input type="radio" name="os2" value="No" />No<br/>

                      <label for="joinList"><strong>Join Conservancy's

                      Low-Traffic Announcement Email List? </strong></label>

                      <input type="hidden" name="on4" value="joinList" />

                      <input type="radio" checked="checked" name="os4" value="Yes" />Yes

                      <input type="radio" name="os4" value="No" />No<br>

                      <br /></div>

                      <div id="supporter-form-submit">

                      <input type="image"

                             src="/img/supporter-payment-button-annual.png"

                             height="81" width="188"

                             border="0" name="submit" alt="Become an Annual Supporter Now!">

                      <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">

<br/><br/><small>Button above redirects to PayPal's site for credit

        card, bank account or PayPal balance payment methods.  Select options first.</small>

                      </div>

</form>

</div>

<div id="monthly" class="supporter-type-selection">

<h3>Join as an Monthly Supporter</h3>

<a id="monthly"></a>

<p>Monthly supporters will not receive any supporter benefits (including the t-shirt) until they've been

  monthly supporters for 12 months.</p>

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

<div id="supporter-form-inputs">

            <input type="hidden" name="return" value="https://sfconservancy.org/supporter/thank-you.html" />

            <input type="hidden" name="cmd" value="_s-xclick">

            <input type="hidden" name="item_name" value="Conservancy Supporter, Monthly" />

            <input type="hidden" name="hosted_button_id" value="UU7VBCXYV7UPQ">

                      <label for="wantGift"><strong>Do you want to receive a t-shirt? </strong></label>

                      <input type="hidden" name="on1" value="wantGift" />

                      <input type="radio" checked="checked" name="os1" value="Yes" />Yes

                      <input type="radio" name="os1" value="No" />No

                      <br />

                      <label for="wantGift"><strong>T-shirt size: </strong></label>

                      <input type="hidden" name="on3" value="size"/>

                      <select name="os3" id="os3">

                        <option name="os3" id="os3" value="MenS">Men's S</option>

                        <option name="os3" id="os3" value="MenM">Men's M</option>

                        <option name="os3" id="os3" value="MenL">Men's L</option>

                        <option name="os3" id="os3" value="MenXL">Men's XL</option>

                        <option name="os3" id="os3" value="Men2XL">Men's 2XL</option>

                        <option name="os3" id="os3" value="LadiesS">Ladies' S</option>

                        <option name="os3" id="os3" value="LadiesM">Ladies' M</option>

                        <option name="os3" id="os3" value="LadiesL">Ladies' L</option>

                         <option name="os3" id="os3" value="LadiesXL">Ladies' XL</option>

                      <label for="publicAck"><strong>

                          Should we  <a href="/sponsors#supporters">list you publicly</a> as a Conservancy Supporter? </strong></label>

                      <input type="hidden" name="on2" value="publicAck" />

                      <input type="radio" checked="checked" name="os2" value="Yes" />Yes

                      <input type="radio" name="os2" value="No" />No<br/>

                      <label for="joinList"><strong>Join Conservancy's

                      Low-Traffic Announcement Email List? </strong></label>

                      <input type="hidden" name="on4" value="joinList" />

                      <input type="radio" checked="checked" name="os4" value="Yes" />Yes

                      <input type="radio" name="os4" value="No" />No<br>

                      <br /></div>

                      <div id="supporter-form-submit">

                      <input type="image"

                      src="/img/supporter-payment-button-monthly.png"

                      height="81" width="188"

                      border="0" name="submit" alt="Become a Monthly Supporter Now!">

<br/><br/><small>Button above redirects to PayPal's site for credit

        card, bank account or PayPal balance payment methods.  Select

                      options first.</small>

                      </div>

</form>

</div>

<span id="form-correction-needed" class="form-error">Please ensure all form data above is correct.</span>

</div>

{% endblock %}