function showImageAlert(src, cb) {
var top = (document.documentElement.clientHeight - tileWidth * 3) / 2; //using tileWidth because we are scaling the bingo image to the screen width and the image is a square
var alertContainer = d3.select("#alertContainer");
alertContainer.style("display", "block").style("top", "-" + (tileWidth * 3) + "px").on("click", null);
var img = d3.select("#alertContainer img").attr("src", src).style("width", (tileWidth * 3) + "px");
//img.classed("rotate-text", true);
console.log("top is " + top);
//default behaviour is that image is removed when user clicks on it.
alertContainer.on("click", function () {
alertContainer.transition().duration(500).style("top", "-1300px")
.each("end", function () {
alertContainer.style("display", "none");
if (d3.select(".tile").classed("flip")) {
var p = addClassToTiles(".tile", "unflip");
p.then(function () {
d3.selectAll(".tile").classed("flip", false);
});
}
});
});
//show the image and invoke the callback after end of transition
alertContainer.transition().duration(2000).style("top", top + "px").ease("bounce")
.each("end", function () {
if (typeof cb === "function") {
cb();
}
});
}
function highlightColumn(col) {
var x = tileWidth * col,
y = 0,
w = tileWidth,
h = height;
d3.select("#columnHighlighter").style("top", y + "px").style("left", x + "px").style("width", w + "px").style("height", h + "px")
.style("display", "block");
}
function highlightRow(row) {
var y = tileHeight * row,
x = 0,
w = width,
h = tileHeight;
d3.select("#rowHighlighter").style("top", y + "px").style("left", x + "px").style("width", w + "px").style("height", h + "px")
.style("display", "block");
}
.each("end", function () {
alertContainer.style("display", "none");
if (d3.select(".tile").classed("flip")) {
var p = addClassToTiles(".tile", "unflip");
p.then(function () {
d3.selectAll(".tile").classed("flip", false);
});
}
});
img.onload = function () {
// we can reposition the image if needed to properly centralise the captured image
// using background-position-x or -y
var xpos = (tileWidth - img.width) / 2,
ypos = (tileHeight - img.height) / 2;
var h = img.height * (tileWidth / img.width);
d3.select("#" + tileId).style("background-image", "url(" + imageData + ")")
.style("background-size", tileWidth + "px " + h + "px");
};
d3.selectAll(selector).each(function () {
var el = d3.select(this);
if (!p) {
p = add(el);
} else {
p = p.then(function () {
return add(el);
});
}
});
/**
sets the text in the span provided.
@param span a jquery selection object (e.g the result of a $("span.name"))
*/
function setName(id) {
var span = d3.select("#" + id + " .name");
var currentName = span.html();
var msg = "Enter the name of the person you want to meet: ",
title = "Name a face";
_prompt(msg, function (newName) {
if (newName !== null) {
span.style("background", "rgba(0,0,0,0.4)").html(newName);
db.set(id + "name", newName);
}
}, title, currentName);
}
function updateName(tileId, name) {
d3.select("#" + tileId + " .name").html(name).style("background", "rgba(0,0,0,0.4)");
}