<?php
/**
 * @link http://www.mit.edu/~puzzle/2013/coinheist.com/rubik/a_regular_crossword/index.html
 */

$rules = Array(
            "row" => Array(
                '.*H.*.*',
                '(DI|NS|TH|OM)*',
                'F.*[AO].*[AO].*',
                '(O|RHH|MM)*',
                '.*',
                'C*MC(CCC|MM)*',
                '[^C]*[^R]*III.',
                '(...?)\1*',
                '([^X]|XCC)*',
                '(RR|HHH)*.?',
                'N.*X.X.X.*E',
                'R*D*M*',
                '.(C|HH)*'
            ),
            // dia1 = diagonal, SE - NW line
            "dia1" => Array(
                '.*G.*V.*H.*',
                '[CR]*',
                '.*XEXM*',
                '.*DD.*CCM.*',
                '.*XHCR.*X.*',
                '.*(.)(.)(.)(.)\4\3\2\1.*',
                '.*(IN|SE|HI)',
                '[^C]*MMM[^C]*',
                '.*(.)C\1X\1.*',
                '[CEIMU]*OH[AEMOR]*',
                '(RX|[^R])*',
                '[^M]*M[^M]*',
                '(S|MM|HHH)*'
            ),
            // dia2 = diagonal, NE - SW line
            "dia2" => Array(
                '(ND|ET|IN)[^X]*',
                '[CHMNOR]*I[CHMNOR]*',
                'P+(..)\1.*',
                '(E|CR|MN)*',
                '([^MC]|MM|CC)*',
                '[AM]*CM(RC)*R?',
                '.*',
                '.*PRR.*DDC.*',
                '(HHX|[^HX])*',
                '([^EMC]|EM)*',
                '.*OXR.*',
                '.*LR.*RL.*',
                '.*SE.*UE.*'
            )
        );
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9">
<title>Grid</title>
<style type="text/css">
body {
    margin:     0px;
    padding:    0px;
    text-align: center;
}
#bodytable {
    width:              700px;
    margin:             0px auto;
    text-align:         left;
}
#infotable {
    width:              700px;
    height:             200px;
    margin:             0px auto;
    text-align:         left;
}
#footertable {
    width:              700px;
    height:             200px;
    margin:             200px auto 0px auto;
    text-align:         left;
}
.grid_input, .grid_filler {
    width:              10px;
    text-align:         center;
}
.row_rule {
    text-align:         right;
}
.dia1_rule div {
    text-align:         right;
    transform:          rotate(-130deg);
    transform-origin:   left top;
    -ms-transform:      rotate(-130deg);    /* IE 9 */
    -ms-transform-origin: left top;
    -webkit-transform:  rotate(-130deg);    /* Safari and Chrome */
    -webkit-transform-origin: left top;
    width:              10px;
    overflow:           visible;
    margin-left:        120px;
    margin-top:         190px;
    vertical-align:     top;
    position:           absolute;
    width:              240px;
}
.dia1_rule2 div {
    margin-left:        145px;
    margin-top:         175px;
}
.dia2_rule div {
    text-align:         right;
    transform:          rotate(130deg);
    transform-origin:   right bottom;
    -ms-transform:      rotate(130deg);     /* IE 9 */
    -ms-transform-origin: right bottom;
    -webkit-transform:  rotate(130deg);     /* Safari and Chrome */
    -webkit-transform-origin: right bottom;
    width:              10px;
    overflow:           visible;
    margin-left:        -235px;
    margin-top:         -30px;
    position:           absolute;
    width:              240px;
}
.dia2_rule2 div {
    margin-left:        -250px;
    margin-top:         -20px;
}
.rule_ok {
    color:              black;
}
.rule_fail {
    color:              red;
}
</style>
</head>

<body>
  <div id="infotable">
    <a href="http://www.mit.edu/~puzzle/2013/coinheist.com/rubik/">Rubik Crossword</a>
  </div>
  <div id="bodytable">
  <table>
    <tr>
      <td></td>
      <td></td>
      <td></td><td class="grid_filler"></td>
      <td></td><td class="grid_filler"></td>
      <td></td><td class="grid_filler"></td>
<?php
        for ($column = 1; $column <= 7; ++$column) {
            $rule = htmlentities($rules['dia2'][$column - 1]);
            print <<<END_OF_HTML
      <td></td><td class="dia2_rule"><div id="dia2_rule_{$column}" class="rule_ok">{$rule}</div></td>

END_OF_HTML;
        }
?>
    </tr>
<?php
    $cells_per_row = 7;
    for ($row = 1; $row <= 13; ++$row) {
        $rule = htmlentities($rules['row'][$row - 1]);
        print <<<END_OF_HTML
    <tr id="row_{$row}">
      <td class="row_rule rule_ok" id="row_rule_{$row}">{$rule}</td>

END_OF_HTML;
        if ($row % 2) {
?>
      <td></td>
<?php
        }
        // $dia1 = diagonal, SE - NW line
        // $dia2 = diagonal, NE - SW line
        if ($row >= 7) {
            $dia1 = 1;
            $dia2 = 13 - $cells_per_row + 1;
        } else {
            $dia1 = 13 - $cells_per_row + 1;
            $dia2 = 1;
        }
        $printed_input = false;
        for ($column = 1; $column <= 13; ++$column) {
            if ($column < ceil((13 - $cells_per_row) / 2) + 1 ||
                $column > ceil((13 - $cells_per_row) / 2 + $cells_per_row)) {
                if ($printed_input && $row + 7 < 13) {
                    $rule_nro = $row + 7;
                    $rule = htmlentities($rules['dia2'][$rule_nro - 1]);
                    print <<<END_OF_HTML
      <td></td><td class="dia2_rule dia2_rule2"><div id="dia2_rule_{$rule_nro}" class="rule_ok">{$rule}</div></td>

END_OF_HTML;
                    $printed_input = false;
                } elseif ($printed_input && $row > 8) {
                    $rule_nro = 13 - ($row - 8);
                    $rule = htmlentities($rules['dia1'][$rule_nro - 1]);
                    print <<<END_OF_HTML
      <td></td><td class="dia1_rule dia1_rule2"><div id="dia1_rule_{$rule_nro}" class="rule_ok">{$rule}</div></td>

END_OF_HTML;
                    $printed_input = false;
                } else {
                    print <<<END_OF_HTML
      <td></td><td class="grid_filler"></td>

END_OF_HTML;
                }
            } else {
                print <<<END_OF_HTML
      <td></td><td><input type="text" class="grid_input" id="grid_{$row}_{$dia1}_{$dia2}" maxlength="1" row_id="{$row}" dia1_id="{$dia1}" dia2_id="{$dia2}" onkeyup="return Changed(this);" /></td>

END_OF_HTML;
                if ($row == 8 && $column == 13) {
                    $rule_nro = 13 - ($row - 8);
                    $rule = htmlentities($rules['dia1'][$rule_nro - 1]);
                    print <<<END_OF_HTML
      <td></td><td class="dia1_rule dia1_rule2"><div id="dia1_rule_{$rule_nro}" class="rule_ok">{$rule}</div></td>

END_OF_HTML;
                    $printed_input = false;
                } else {
                    $printed_input = true;
                }
                ++$dia1;
                ++$dia2;
            }
        }
        if ($row >= 7) {
            --$cells_per_row;
        } else {
            ++$cells_per_row;
            if ($row == 6) {
                $rule = htmlentities($rules['dia2'][12]);
                print <<<END_OF_HTML
      <td></td><td class="dia2_rule dia2_rule2"><div id="dia2_rule_13" class="rule_ok">{$rule}</div></td>

END_OF_HTML;
            }
        }
?>
    </tr>
<?php
    }
?>
    <tr>
      <td></td>
      <td></td>
      <td></td><td class="grid_filler"></td>
      <td></td><td class="grid_filler"></td>
      <td></td><td class="grid_filler"></td>
      <td></td><td class="grid_filler"></td>
<?php
    for ($column = 1; $column <= 7; ++$column) {
        $rule = htmlentities($rules['dia1'][$column - 1]);
        print <<<END_OF_HTML
      <td></td><td class="dia1_rule"><div id="dia1_rule_{$column}" class="rule_ok">{$rule}</div></td>

END_OF_HTML;
    }
?>
    </tr>
  </table>
  </div>
  <div id="footertable">
    <p>The license under which this software is released is the GPLv2 (or later) from the <a href="http://www.fsf.org/">Free Software Foundation</a>. You can also read the <a href="http://www.gnu.org/licenses/gpl-2.0.html">text of the license here</a>.</p>
    <p>All trademarks and registered trademarks are the property of their respective owners.</p>
    <address>
    &copy; JaTu 2013
    </address>
  </div>
<script type="text/javascript" src="jquery-1.9.1.min.js">
</script>
<script type="text/javascript">
function Changed(input_obj)
{
    var obj = $(input_obj);
    var row = parseInt(obj.attr('row_id'));
    var dia1 = parseInt(obj.attr('dia1_id'));
    var dia2 = parseInt(obj.attr('dia2_id'));

    // dia1 = diagonal, SE - NW line
    // dia2 = diagonal, NE - SW line
    var row_rule_text = $("#row_rule_" + row);
    var dia1_rule_text = $("#dia1_rule_" + dia1);
    var dia2_rule_text = $("#dia2_rule_" + dia2);
    if (IsValid("row", row)) {
        row_rule_text.removeClass("rule_fail").addClass("rule_ok");
    } else {
        row_rule_text.removeClass("rule_ok").addClass("rule_fail");
    }
    if (IsValid("dia1", dia1)) {
        dia1_rule_text.removeClass("rule_fail").addClass("rule_ok");
    } else {
        dia1_rule_text.removeClass("rule_ok").addClass("rule_fail");
    }
    if (IsValid("dia2", dia2)) {
        dia2_rule_text.removeClass("rule_fail").addClass("rule_ok");
    } else {
        dia2_rule_text.removeClass("rule_ok").addClass("rule_fail");
    }
    return true;
}

function IsValid(item, idx)
{
    if (item != "row" && item != "dia1" && item != "dia2") {
        return false;
    }
    if (idx < 1 && idx > 13) {
        return false;
    }
    var text = "";
    $('input[' + item + '_id="' + idx + '"]').each(function(index) {
        if (item == "dia1") {
            if ($(this).val()) {
                text = $(this).val() + text;
            } else {
                text = " " + text;
            }
        } else {
            if ($(this).val()) {
                text += $(this).val();
            } else {
                text += " ";
            }
        }
    });

    var ruleset = eval(item + '_rules');
    // if (item == "dia1") {
        // alert(text);
        // alert(ruleset[idx - 1]);
    // }
    var re = new RegExp(ruleset[idx - 1], "i");
    return re.test(text);
}

function RecheckAll()
{
    $(".grid_input").each(function(index) {
        Changed($(this));
    });
}

var row_rules = Array(
<?php
    for ($column = 1; $column <= 13; ++$column) {
        if ($column > 1) {
            print ",\n";
        }
        $rule = addslashes($rules['row'][$column - 1]);
        print "  '{$rule}'";
    }
    print "\n";
?>
);
var dia1_rules = Array(
<?php
    for ($column = 1; $column <= 13; ++$column) {
        if ($column > 1) {
            print ",\n";
        }
        $rule = addslashes($rules['dia1'][$column - 1]);
        print "  '{$rule}'";
    }
    print "\n";
?>
);
var dia2_rules = Array(
<?php
    for ($column = 1; $column <= 13; ++$column) {
        if ($column > 1) {
            print ",\n";
        }
        $rule = addslashes($rules['dia2'][$column - 1]);
        print "  '{$rule}'";
    }
    print "\n";
?>
);

// On load do this
$(document).ready(function() {
    RecheckAll();
});
</script>
</body>
</html>