{{
# This is the main sponsorship page. It should be provided with default image data
# (if a default image exists). If default_image.src >= src_flags["onezoom_via_eol"]
# (i.e. this is not a bespoke image, see definitions in _OZglobals.py), then we do not
# necessarily have a really nice image, so as well as the default image, we also 
# present some others for the sponsor to pick, by querying the EoL API. 
# Up to 9 images (including the default) are shown. The image is only added to the database
# on validation of the sponsorship, to avoid bad images.
# 
# We always set "user_preferred_image_src" & "user_preferred_image_src_id" to the image
# selected by the sponsor, so we have a record of what they expected. The 
# "user_nondefault_image" column tells us whether they changed the selection from the
# first image (either the default or the first image from the EoL API) to something else
# from the EoL selection, in which case we specify the image src as 
# `src_flags["onezoom_via_eol"]` instead, and will usually explictly download it during
# validation, unless it is of rubbish quality. If the user chooses the first image,
# the "user_nondefault_image" column should be NULL or 0.
}}
{{
response.title=base_title + ': ' + T('Sponsor a leaf on the tree')
response.files.append(URL('static', 'OZSponsor/sponsor_leaf.css'))
response.files.append(URL('static', 'OZSponsor/EOLqueries.js'))
response.files.append(URL('static','css/content_pages.css'))
}}
{{include 'web2py_ajax.html'  # I'm not actually sure we need ajax on the leaf page: perhaps this could be removed?}}
{{import img}}
{{if is_testing: response.meta.viewfile, response.meta.date_accessed = response.view, request.now}}{{pass}}
{{extend ('popup.html' if 'popup' in request.vars else 'uikit_layout.html')}}
{{block masthead}}
{{if 'popup' not in request.vars:}}
<div class="home-heading uk-text-center uk-padding-small">
  <h1>{{=T('Leaf sponsorship')}}</h1>
</div>
{{pass}}
{{end block}}
<div>
  <h2 id = "sponsor_title">{{=XML(T('Sponsor %s on the OneZoom Tree of Life') % (the_long_name or T("a species"),))}}</h2>
  <p>{{=T('You can sponsor this leaf for yourself or as a unique gift for someone you know.')}}</p>
{{if partner_data:}}
  <p>{{=XML(T('We will acknowledge your donation to the %s and %s by displaying your chosen sponsor’s name on %s') % (A(T('OneZoom charity'),_href='//www.onezoom.org/static/images/RegistrationCertificate.jpg', _target="_blank"), A(T(partner_data.get('name','')), _href=partner_data.get('url',''), _target="_blank"), the_long_name))}}.
     {{=XML(T('%s%% of the donation we receive will help OneZoom to provide easy access to scientific knowledge about biodiversity and evolution, and raise awareness about the variety of life on earth together with the need to conserve it. The remaining %d%% will go to %s. %s.') % (
         int(round(100-partner_data.get('percentage',0))),
         int(round(partner_data.get('percentage',0))),
         T(partner_data.get('name') or ''),
         T(partner_data.get('details') or ''),
           ))  }}</p>

{{else:}}
  <p>{{=XML(T('We will acknowledge your donation to the %s by displaying your chosen sponsor’s name on %s. Your donations will help us in our aim to provide easy access to scientific knowledge about biodiversity and evolution, and raise awareness about the variety of life on earth together with the need to conserve it.') % (A(T('OneZoom charity'),_href='//www.onezoom.org/static/images/RegistrationCertificate.jpg', _target="_blank"), the_long_name))}}</p>

{{pass}}
  <p>{{=T('There can be only one sponsor for each leaf, so get your favourite creature before someone else does!')}} 
     {{=T('Sponsorship is for a fixed period of %s years; after that, if you wish to renew your sponsorship, you will have the first refusal.') % (4,)}}</p>
</div>

{{# Load in the view without AJAX so that it works without javascript
    vars = {'form_reservation_code': form_reservation_code}
    vars.update(request.vars)
    =LOAD('default', 'sponsor_leaf', extension="load", vars=vars, ajax=False, target="sponsor_form_div")}}

<script>

/* define global variables */

var mintextsize = 3; // the smallest size text you want to have displayed
var fonttype = 'Helvetica'; // 'sans-serif' is good too
var green1 = 'rgb(135,215,90)';

var newcanvas;
var leafContext;
var widthRes = 500;
var heightRes = 500;
var node = {"redlist": "{{=iucn_code}}"}

var max_n_thumbnails = 9;

// Treat all srcs and src_ids at strings, for consistency
var EoL_srcs = [{{=XML(",".join(["'{}'".format(src_flags[n]) for n in eol_src_flag_names]))}}];
var image_objects = [];
{{if default_image is None or default_image.src is None or default_image.src_id is None:}}
{{else:}}
// initialise list of images & info with default image
image_objects.push({
    "src":"{{=int(default_image.src)}}",
    "src_id":"{{=int(default_image.src_id)}}",
    "url":"{{=img.thumb_url(default_image.src, default_image.src_id)}}",
    "already_downloaded":1,
    "default":1}); //highest possible data rating, so this gets put first
{{pass}}
var leafImageFile = null; // image file (if null and image_objects exists then image is not loaded yet)
var leafCol = OZui.leaf_draw.natural_theme.leaf;
    // this is a bit of a hack but it no longer works to grab the style from the main natural_theme because some of the colours are functions that need to be run on the midnode object of the tree so I'm overiding it here with fixed colours.
    //can override leafCol after this, e.g.
     leafCol.inside.fill  = 'rgb(135,215,90)'; // or could be a function of a node obj
     leafCol.outline.fill = 'rgb(70,135,30)';
     leafCol.bg.fill      = 'rgba(255,255,255, 0)'; // Don't show the white outline
     // relating to the leaf itself (highlighted)
     leafCol.inside_hover.fill   = 'rgb(135,215,90)';
     leafCol.outline_hover.fill = 'rgb(70,135,30)';
     // relating to the sponsorship text part
     leafCol.sponsor.fill       = 'rgba(255,255,255,0.4)'; // used if not highlighted
     leafCol.sponsor_hover.fill = 'rgb(255,255,255)';
     // relating to main text part
     leafCol.text.fill = 'rgb(0,0,0)';
     leafCol.text_hover.fill ='rgb(0,0,0)';
     // copyright symbol colors
     leafCol.copyright_hover.fill   = 'rgb(0,0,0)';
     leafCol.copyright.text.fill       = 'rgb(135,215,90)'; //copyrightText
     leafCol.copyright.text_hover.fill = 'rgb(255,255,255)'; //copyrightTextHighlight
    
var sponsor_text_colours = {'base':leafCol.sponsor.fill, 'highlight': leafCol.sponsor_hover.fill}

function updateDonorPlaceholder() {
    if ($("#sponsorBy").is(':checked')) {
        $("#user_donor_name_input").attr("placeholder", document.getElementById('user_sponsor_name_input').value)
    } else {
        $("#user_donor_name_input").attr("placeholder", "")
    }
}

// Based on the current form state, find associated image object or null
function getCurrentImageObject() {
    var el_cur_src = document.getElementById('user_preferred_image_src_input'),
        el_cur_src_id = document.getElementById('user_preferred_image_src_id_input'),
        i;

    if (!el_cur_src.value && !el_cur_src_id.value) return null;

    for (i = 0; i < image_objects.length; i++) {
        if (image_objects[i].src === el_cur_src.value && image_objects[i].src_id === el_cur_src_id.value) {
            return image_objects[i];
        }
    }
    return null;
}

// Set form to use current image object
function setCurrentImageObject(image_obj) {
    var el_cur_src = document.getElementById('user_preferred_image_src_input'),
        el_cur_src_id = document.getElementById('user_preferred_image_src_id_input'),
        el_cur_nd_image = document.getElementById('user_nondefault_image_input');

    el_cur_src.value = image_obj.src;
    el_cur_src_id.value = image_obj.src_id;
    el_cur_nd_image.value = !image_obj.default ? "1" : image_obj.already_downloaded ? "" : "0";
}

// this draws a preview of the leaf
// it gathers information from the form for sponsorship information
// it requires the global information on image_objects, leafImageFile to be set.
function drawPreview()
{
    // define sponsorship variables
    var sponsorText = null;
    var extraText = null;
    var hasText = false;
    
    // get sponsor text and extra text
    var sponsorTextInput = document.getElementById('user_sponsor_name_input');
    var extraTextInput = document.getElementById('user_more_info_input');
    if (sponsorTextInput.value)
    {
        sponsorText = sponsorTextInput.value
    }
    else
    {
        sponsorText = "";
    }
    if (extraTextInput.value)
    {
        extraText = extraTextInput.value
    }
    else
    {
        extraText = "";
    }

    // process the text
    if (sponsorText=="")
    {
        // sort out if there is no information there from the form
        if ((document.getElementById('sponsorBy').checked)==true)
        {
            sponsorText = OZstrings['Sponsored by you'].toUpperCase();
            extraText = "";
            hasText = false;
        }
        else
        {
            sponsorText = OZstrings['Sponsored for a person of your choice'].toUpperCase();
            extraText = "";
            hasText = false;
        }
    }
    else
    {
        // sort out if there is information there from the form
        if (extraText && extraText!="")
        {
            extraText = ", "+ extraText.toUpperCase();
        }
        if ((document.getElementById('sponsorBy').checked)==true)
        {
            sponsorText = (OZstrings['Sponsored by'] + " " + sponsorText).toUpperCase();
        }
        else
        {
            sponsorText = (OZstrings['Sponsored for'] + " " + sponsorText).toUpperCase();
        }
        hasText = true;
    }

    // set colours based on whether text has been entered or not
    var sponsorTextCol
    if (hasText == true)
    {
        leafCol.sponsorTextCol = sponsor_text_colours.highlight;
    }
    else
    {
        leafCol.sponsorTextCol = sponsor_text_colours.base;
    }
    
    // draw the leaf base again (to wipe out any previous renderings)
    OZui.leaf_draw.fullLeafBase(
        leafContext, widthRes/2.28, heightRes/2, widthRes/2.3, 5.6, 2, leafCol, node);
    // draw the leaf details
    
    var image_obj = getCurrentImageObject();
    if (image_obj)
    {
        
        var cfout = crop_frac(image_obj, {{=percent_crop_expansion}});
        OZui.leaf_draw.fullLeaf(
            leafContext, widthRes/2.28, heightRes/2, widthRes/2.3, 5.6, 2, hasText, null,
            sponsorText, extraText, {{=XML(js_common_name or '')}}, {{=XML(js_species_name)}},
            null, null, null, fonttype, mintextsize, leafImageFile, null,
            leafCol, node, true, cfout[0], cfout[1], cfout[2])
    }
    else
    {
        OZui.leaf_draw.fullLeaf(
            leafContext, widthRes/2.28, heightRes/2, widthRes/2.3, 5.6, 2, hasText, null,
            sponsorText, extraText, {{=XML(js_common_name or '')}}, {{=XML(js_species_name)}},
            null, null, null, fonttype, mintextsize, leafImageFile, null,
            leafCol, node)
    }
}

function callbackAPIcomplete(data, flagsIn)
{
    /* flagsIn possibilities are:
        0 if OK
        1 if timeout (API down)
        2 bad response
        3 bad data from response
      Even if we get a bad response, we should try to draw a leaf, as image_objects might be filled
      using the data from our own database.
      
      We assume that the order returned by the EoL API is with exemplar first then
      in order of highest rating.
      
    */
    imageInfoReady = true;
    leafImageFile = null;
    /* process data and redraw */
     
    if (data && data.hasOwnProperty("imageObjects")) {
        for (var i = 0; (i<data.imageObjects.length) && image_objects.length < max_n_thumbnails; i++) {
            var APIimg = data.imageObjects[i];
            if (!APIimg.dataObjectVersionID) continue;

            if ((image_objects.length > 0) &&
                (EoL_srcs.indexOf(image_objects[0].src) > -1) &&
                (image_objects[0].src_id == APIimg.dataObjectVersionID.toString())) {
                // This image is duplicate of image_objects[0], ignore
                continue;
            }

            image_objects.push({
               /* If no default set, the default eol image is marked as a "plain" eol
                  image, not via OZ, as this will be the selected image anyway */
                "src": "{{=src_flags['onezoom_via_eol']}}",
                "src_id": APIimg.dataObjectVersionID.toString(),
                "url": APIimg.url, /* this is inserted by setDataFromEoLpageID */
                "default": 0,
                "linkout_url": "//eol.org/media/" + APIimg.dataObjectVersionID.toString()
            });
        }

        if (!getCurrentImageObject() && image_objects.length > 0) {
            // If the image object is still unset by now, choose the first one.
            setCurrentImageObject(image_objects[0])
        }
    }
    initImages();
}

function picInfoURL(image) {
    /* return a url giving info about the image. If linkout_url exists, this
     * has been injected via a call to the EoL API, so link straight out to there instead */
    if (image.linkout_url) {
        return image.linkout_url;
    } else {
        return '{{=URL("tree", "pic_info", args=["...PIC_SRC...","...PIC_SRC_ID..."])}}'
            .replace("...PIC_SRC...", image.src)
            .replace("...PIC_SRC_ID...", image.src_id);
    }
}

function initImages() {
    /* Sets the image file handle, with a listener. Every time leafImageFile.src is
     *  reset, the onload listener should fire */
    var cur_img = getCurrentImageObject();

    if (image_objects.length == 0) {
        //No image selection shown
        drawPreview();

    } else {
        leafImageFile = new Image();
        leafImageFile.onload = function() {
            drawPreview();
            $('#licenceText a').attr('href', picInfoURL(cur_img));
            $('#licenceText').show();
        }
        
        // force load the selected image
        leafImageFile.src = (cur_img.url);

        // Set up an image choice array, if appropriate
        if (image_objects.length == 1) {
            // Only 1 image: can't choose, so store image src_id to pass on in the form
            setCurrentImageObject(image_objects[0]);
        } else {
            //There are at least 2 images, so change the page layout to add image selection
            $('#leaf').after($('<div>', {id:"select_pictures"}).append('<fieldset><legend>{{=T("Choose your preferred picture")}}</legend><ul></ul></fieldset>'));
            for (i=0; i<image_objects.length; i++) {
                //Add a list of potential images to pick
                var img_size_px = 100;
                var bg_css = "background-image: url('"+ image_objects[i].url +"')";
                if (image_objects[i].height && image_objects[i].width && image_objects[i].crop_width) {
                    crop_vals = crop_frac(image_objects[i], {{=percent_crop_expansion}})
                    bg_css = bg_css + ';background-size:' + crop_vals[0]* img_size_px + 'px;'
                    bg_css = bg_css + ';background-position:' + (crop_vals[1]* img_size_px)+'px ' + (crop_vals[2]*img_size_px)+'px'
                } else {
                    bg_css = bg_css + ';background-size: cover'
                    bg_css = bg_css + ';background-position:center'
                }
                var html = $('<li>').append([
                    $('<a/>', {html: "<span class='linkout-button'>⧉</span>",
                               href: picInfoURL(image_objects[i]),
                               target: "_blank"}),
                    $('<input/>', {id: 'r'+i,
                                   name: 'user_image_selection_radio',
                                   type: 'radio',
                                   checked: (cur_img === image_objects[i]?'checked':null),
                                   onclick: "setCurrentImageObject(image_objects["+ i + "]);" +
   "leafImageFile.src = '" + image_objects[i].url + "';" + 
   "drawPreview();"}), 
                    $('<label>', {for: 'r'+i,
                                  class: 'radio',
                                  style: 'width:'+img_size_px+'px;height:'+img_size_px+'px;'+bg_css})
                    ]);
                $('#select_pictures ul').append(html);
            }
        }
    }
}

function initPreview() {
    updateDonorPlaceholder(); //do it now, in case we are refreshing
    newcanvas = document.getElementById("leafCanvas");
    leafContext = newcanvas.getContext('2d');
    newcanvas.width = widthRes;
    newcanvas.height = heightRes;
    leafContext.textBaseline = 'middle';

{{if (EOL_ID) and (default_image is None or (default_image.get('src', src_flags['onezoom_via_eol']) >= src_flags['onezoom_via_eol'])):}}
    /* Query the EoL API for images. We always require n images, even if we have one 
     * already, in case one of the n returned images is identical to the OneZoom default
     */
    setDataFromEoLpageID({{=EOL_ID}}, callbackAPIcomplete, "{{=EoL_API_key}}", max_n_thumbnails, false);
    //initImages() is called from callbackAPIcomplete()
{{else:}}
    initImages();
{{pass}}
};

$(document).ready(initPreview);
</script>