// Declaring some globals here so everyone can use them.
var CellDump = '', x = 0, y = 0, z = 0, letter = "x";
function buildGrid(target, rows, cols, textToUse) {
// Empty out the container first
$(target).empty();
// Zero out the counters and holder
z = 0; x = 0; y = 0; CellDump = '';
for ( x = 1; x < cols; x++ ) {
for ( y = 1; y < rows; y++ ) {
// If the provided text isn't long enough, these individual letters
// will return undefined. Use an "x" instead.
if (textToUse[z]) {
letter = textToUse[z];
} else {
letter = 'x';
}
// Each cell has a position-based class name, so clicking in the grid can toggle the example
CellDump = CellDump + "" + letter + "";
z++;
}
// At the end of a row, break the line
CellDump = CellDump + "
";
}
// Drop in all our HTML into the target element
$(target).append(CellDump);
};
$(function() {
var attrText = '', tempHTML = '',
textToUse = "Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus";
// build the grid and the example/demo with default options
buildGrid("#grid", 30, 20, textToUse);
buildGrid("#secret-message", 30, 20, textToUse);
$("#grid")
// clicking on a cell toggles the selected state in the grid and the demo
.delegate("span", "click", function() {
// get the first class only (the position), otherwise would fail when it has that plus "selected"
attrTest = $(this).attr("class").split(" ")[0];
$(this).toggleClass("selected");
$("#secret-message ." + attrTest).toggleClass("selected");
})
// if the mouse is currently pressed, set some data so we can check for that
.bind("mousedown", function() {
$(this).data("mouseIsDown", true)
})
// when the mouse comes back up, change data to say so
.bind("mouseup", function() {
$(this).data("mouseIsDown", false)
})
// allows the "drawing by dragging"...
.delegate("span", "mouseenter", function() {
// which is only allowed while the mouse is pressed down
if ($("#grid").data("mouseIsDown")) {
attrTest = $(this).attr("class");
$(this).addClass("selected");
$("#secret-message ." + attrTest).toggleClass("selected");
}
});
// When the refresh button is clicked, reset the grids with values from the inputs
$("#refresh").click(function() {
buildGrid("#grid", parseInt($("#cols").val()), parseInt($("#rows").val()), $("#textToUse").val());
buildGrid("#secret-message", parseInt($("#cols").val()), parseInt($("#rows").val()), $("#textToUse").val());
});
// I'm not sure why, but this only works in Firefox. Chrome/Safari do nothing, opera puts the raw text.
$("#getHTML").click(function() {
tempHTML = "