// Load jQuery
google.load("jquery", "1.3.2");

// Run jQuery through Google code //
google.setOnLoadCallback(function() {
    
    $(document).ready(function() {

    // Hide the assistance text if a user clicks on one of the input fields //
    // Also remove the assistance class //
    // Restore everything for this field if the user does not input text //
    $(".assistance").focus(function () {
    var text = $(this).val();
            $(this).val("").removeClass("assistance").blur(function () {
                    if ($(this).val()=="") $(this).val(text).addClass("assistance");
            });
    });
    
    // Remove float if the input field is adjacent to a .options class //
    $(".options + input").attr("style","float: none; position: relative; top: -4px; left: 0;");

    // Update the price when a user changes their donation amount //
    //$("#donations-form input[name='do']").click(function() {
    //    if ($(".donation-amount").text()=="") $(".donation-amount").html("Donation of <strong>$<span class=\"total-price\">0</span>.00</strong> CAD");
    //}).change(function () {
    //    var donation = parseInt($(this).val());
    //    if (donation.nan || !donation>0) donation = 0;
    //    $(this).val(donation);
    //    $(".total-price").text(donation);
    //});
    
    // Add a new memorial name //
    $('.add-name').click(function() {
        
        // Add an additional field for the memorial names //
        var id = parseInt($("input[name='num-memorial-names']").val());
        id++;
        var html = "<div id=\"name_"+id+"\" class=\"row\" style=\"display:none;\"><label for=\"name\">Memorial Name</label><input type=\"text\" name=\"mf"+id+"\" value=\"First Name\" class=\"name assistance\"><input type=\"text\" name=\"ml"+id+"\" value=\"Last Name\" class=\"name assistance\"><select name=\"ms"+id+"\" class=\"suffix\"><option value=\"\">Suffix</option><option value=\"Jr.\">Jr.</option><option value=\"Sr.\">Sr.</option></select> <a class=\"options remove-name\">Remove</a>";
        $("#memorial-names").append(html);
        $("#name_"+id).show(250);
        
        // Update the value of num-memorial-names to reflect the number of memorial names added //
        $("input[name='num-memorial-names']").val(id);
    
        // Bind the click function for removing memorial names //
        $(".remove-name").bind("click",function(){
            $(this).parent("#memorial-names .row").hide(5000);
            $(this).parent("#memorial-names .row").remove();
        });
        
        // Bind the focus event for toggling assistance text //
        $(".assistance").bind("focus",function(){
            var text = $(this).val();
            $(this).val("").removeClass("assistance").blur(function () {
                    if ($(this).val()=="") $(this).val(text).addClass("assistance");
            });
        });
        
    });
    
    // Swap the province field based on the selected Country //
    toggle_province_field();
    //$("select[name='pr']").hide().parent("div.row").append("<input type=\"text\" name=\"po\">");
    $("select[name='co']").change(function() {
        toggle_province_field();
    });
    
    $('a:contains("Font Size")').click(function(){
        var maintext = $('div.main');
        var currentsize = maintext.css('font-size');
        var num = parseFloat(currentsize, 10);
        var unit = currentsize.slice(-2);
        num = num * 1.1;
        maintext.css('font-size', num + unit);
    });

    $('#id_0-amount').css({color:'#777'}).val('Amount only. Exclude dollar sign.');
    $('#id_0-amount').focus(function(){
        $(this).css({color:'#000'}).val('');
    });

    // Google API Key // ABQIAAAAPTq-_cKEW5HNxxTjd3I4-RT1sWilw4H9yCwbOssHZFnaevOaZhQNNvhLVs0MP3U_AzJF-Bxl3pdbAQ

    function toggle_province_field()
    {
        // 2 & 3 are Canada and US - A drop down box is swapped in for these countries //
        if ($("select[name='co']").val()!=2 && $("select[name='co']").val()!=3) {
            $("input[name='po']").remove();
            $("select[name='pr']").hide().parent("div.row").append("<input type=\"text\" name=\"po\">");
        }
        else {
            populate_province();
            $("input[name='po']").remove();
            $("select[name='pr']").show();
        }   
    }

   });
    
});