if(medal_lastparent != medalFlex) {

medal_lastparent = medalFlex;

medal_flexes = [];

medal_canvases = [];

medal_canvases2 = [];

medal_cache = [];

medal_side_cache = [];

medalText = new Flex(medalFlex, 0.02, 0.02, 1, 0.05);

medalGrid = new Flex(medalFlex, 0.02, 0.15, 0.9, 2.0);

// TODO: use 'grid' aria role (and also add the correct annotations to the children then), like field already has

//medalFlex.div.style.overflowY = 'scroll';

//medalFlex.div.style.overflowX = 'hidden';

makeScrollable(medalFlex);

var heading = util.makeElement('span', medalGrid.div);

setAriaRole(heading, 'heading');

setAriaLabel(heading, 'achievements list');

}

var infoText = ''

infoText += 'Achievement production bonus: +' + (state.medal_prodmul.subr(1)).toPercentString();

infoText += '<br>';

infoText += 'Achievements earned: ' + state.medals_earned;

medalText.div.innerHTML = infoText;

var unlocked = [];

var locked = [];

var w = 64;

var h = 64;

var num = medals_order.length;

var numx = 10;

//medalFlex.div.removeChild(medalGrid.div);

var changed = false;

var row_has_exclamation_mark = false;

var xpos = -1;

var ypos = -1;

var i = -1;

for(var j = 0; j < num; j++) {

var m = medals[medals_order[j]];

var m2 = state.medals[medals_order[j]];

if((xpos + 1 == numx || j + 1 == num)) {

if(row_has_exclamation_mark && state.medals_earned > 40) {

if(medal_side_cache[ypos]) {

if(!medal_side_cache[ypos].visibility_visible) {

medal_side_cache[ypos].div.style.visibility = ''; // use '' here, not 'visible': if should inherit from parent, otherwise it can pop through to other tabs

medal_side_cache[ypos].visibility_visible = true;

}

} else {

var flex = new Flex(medalGrid, [0, 0, numx / 10], [0, 0, ypos / 10], (numx + 1) / 10 - 0.005, [0, 0, (ypos + 1) / 10 - 0.005]);

var canvas = createCanvas('0%', '20%', '60%', '60%', flex.div);

renderImage(image_exclamation_side_arrow, canvas);

medal_side_cache[ypos] = flex;

medal_side_cache[ypos].visibility_visible = true;

}

} else {

if(medal_side_cache[ypos] && medal_side_cache[ypos].visibility_visible) {

medal_side_cache[ypos].div.style.visibility = 'hidden';

medal_side_cache[ypos].visibility_visible = false;

}

}

}

var show = false;

if(m2.earned) show = true;

if(m.hint != undefined && state.medals[m.hint].earned) show = true;

if(!show) continue;

i++;

var icon = m.icon;

if(!m2.earned) {

icon = medalhidden[m.getTier()];

}

if(medal_cache[i]) {

var o = medal_cache[i];

if(o.icon == icon && o.seen == m2.seen && o.index == j && o.earned == m2.v) continue;

}

medal_cache[i] = {icon:icon, seen:m2.seen, index:j, earned:m2.earned};

changed = true;

xpos = i % numx;

ypos = Math.floor(i / numx);

if(xpos == 0 && row_has_exclamation_mark) {

row_has_exclamation_mark = false;

}

var flex;

var div;

var canvas;

if(!medal_flexes[i]) {

flex = new Flex(medalGrid, [0, 0, xpos / 10], [0, 0, ypos / 10], (xpos + 1) / 10 - 0.005, [0, 0, (ypos + 1) / 10 - 0.005]);

medal_flexes[i] = flex;

div = flex.div;

canvas = createCanvas('0%', '0%', '100%', '100%', div);

medal_canvases[i] = canvas;

} else {

flex = medal_flexes[i];

canvas = medal_canvases[i];

div = flex.div;

util.removeAllEvents(div);

}

renderImage(icon, canvas);

if(m2.earned) {

setAriaLabel(div, 'achievement: ' + m.name);

} else {

setAriaLabel(div, 'not-yet-earned achievement: ' + m.name);

}

div.style.border = m2.earned ? ('3px solid ' + tierColors[m.getTier()]) : '';

div.style.backgroundColor = m2.earned ? tierColors_BG[m.getTier()] : '#8888';

var canvas2 = medal_canvases2[i];

if(m2.earned && !m2.seen) {

if(!medal_canvases2[i]) {

canvas2 = createCanvas('0', '0', '25%', '25%', div);

medal_canvases[i] = canvas;

medal_canvases2[i] = canvas2;

renderImage(image_exclamation, canvas2);

}

row_has_exclamation_mark = true;

}

if((m2.seen || !m2.earned) && medal_canvases2[i]) {

util.removeElement(canvas2);

medal_canvases2[i] = undefined;

}

var seenfun = bind(function(m, m2, div, canvas2, i, ypos) {

if(m2.earned && !m2.seen) {

m2.seen = true;

util.removeElement(canvas2);

medal_canvases2[i] = undefined;

if(medal_side_cache[ypos] && medal_side_cache[ypos].visibility_visible) {

medal_side_cache[ypos].div.style.visibility = 'hidden';

medal_side_cache[ypos].visibility_visible = false;

}

}

}, m, m2, div, canvas2, i, ypos);

var getMedalText = bind(function(m, m2, div, canvas2, i) {

var tier = m.getTier();

if(!m2.earned) {

return upper(m.name) + '<br><br>Not yet earned. Unearned achievements are normally hidden, except hinted ones like this shown as "?"<br><br>' + 'Production bonus: +' + m.prodmul.toPercentString() + '<br>Tier ' + toRomanUpTo(tier) + ': ' + tierNames[tier];

}

return upper(m.name) + ': ' + lower(m.description) + '<br><br>' + 'Production bonus: +' + m.prodmul.toPercentString() + '<br><br>Tier ' + toRomanUpTo(tier) + ': ' + tierNames[tier];

}, m, m2, div, canvas2, i);

registerTooltip(div, getMedalText);

util.setEvent(div, 'mouseover', seenfun, 'medalseen');

styleButton0(div);

addButtonAction(div, bind(function(getMedalText, seenfun, m) {

var dialog = createDialog({

size:DIALOG_SMALL,

title:'Achievement',

icon:m.icon

});

dialog.content.div.innerHTML = getMedalText();

seenfun();

}, getMedalText, seenfun, m));

}

var numshown = i;

if(changed) {

// repeat the infoText below the medals once more as well, so you can conveniently see it when scrolled to the bottom too

var repeatInfoText = state.medals_earned > 100;

if(medalTierKeys) {

for(var i = 0; i < medalTierKeys.length; i++) medalTierKeys[i].removeSelf(medalGrid);

}

medalTierKeys = [];

var xpos = 0;

var ypos = Math.floor(numshown / numx) + (repeatInfoText ? 1.5 : 2);

var flex = new Flex(medalGrid, [0, 0, xpos / 10], [0, 0, ypos / 10], (xpos + numx - 1) / 10 - 0.005, [0, 0, (ypos + 1) / 10 - 0.005]);

medalTierKeys.push(flex);

if(repeatInfoText) {

flex.div.innerHTML = infoText + '<br><br>Key: tiers from lowest to highest:';

} else {

flex.div.innerText = 'Key: tiers from lowest to highest:';

}

var numx2 = numx; // 6

for(var j = 0; j < tierColors.length; j++) {

var xpos = j % numx2;

var ypos = Math.floor(numshown / numx) + Math.floor(j / numx2) + 3;

var flex = new Flex(medalGrid, [0, 0, xpos / 10], [0, 0, ypos / 10], (xpos + 1) / 10 - 0.005, [0, 0, (ypos + 1) / 10 - 0.005]);

medalTierKeys.push(flex);

flex.div.style.backgroundColor = tierColors_BG[j];

flex.div.style.color = util.farthestColorHue(tierColors_BG[j]);

flex.div.style.border = '4px solid ' + tierColors[j];

centerText2(flex.div);

flex.div.textEl.innerText = tierNames[j];

}

}

if(!medalChipFlex) return;

medalChipFlex.removeSelf(gameFlex);

medalChipFlex = undefined;

removeMedalChip();

var m = medals[medal_id];

medalChipFlex = new Flex(gameFlex, 0.2, 0.85, 0.8, 0.95);

medalChipFlex.div.style.backgroundColor = '#ddde';

var canvasFlex = new Flex(medalChipFlex, 0.01, [0.5, 0, -0.35], [0, 0, 0.7], [0.5, 0, 0.35]);

var canvas = createCanvas('0%', '0%', '100%', '100%', canvasFlex.div);

renderImage(m.icon, canvas);

var textFlex = new Flex(medalChipFlex, [0, 0, 0.7], [0.5, 0, -0.35], 0.99, [0.5, 0, 0.35]);

//textFlex.div.style.color = '#fff';

textFlex.div.style.color = '#000';

textFlex.div.innerHTML = 'Achievement Unlocked' + '<br><br>' + upper(m.name) + ' (+' + m.prodmul.toPercentString() + ')';

addButtonAction(medalChipFlex.div, removeMedalChip);