(I've posted the "Colour Legend" and "The Scoring Notations" legends to the right.)
The menus, titled "First Base", "Second Base", "Third Base" and "Home" have a list of nine options for colouring each side of the diamond - or in other words, marking colour notations that indicate, at a glance, what happened on a play there. The different coloured words in the "Fist Base" menu list explain themselves. "Out", the word coloured red, is a colour notation that you click if the batter is put-out on the play in this at-bat. Clicking on the word "Out" creates a red triangle on the south-east, or First Base side of the diamond shaped infield icon.
Click down the list to see how it works - each colour indicated appears on the diamond as you click. If you make a mistake, the "White" and "00c900" return the particular triangle to it's original default colour. This works for each quadrant of each AB box, and each AB box has these menus. The other sides of the diamond have buttons too, just click on the side of the diamond you want to make a notation on, and a new menu will pop up. After you've made your colour choice, close the menu with the 'X' at the bottom-right.
The four menus in each AB box are have 'priority orders' assigned to them; the First Base Menu gets covered by the Second Base Menu, the Third Base Menu lays over top of the Second Base one, and finally - the Home menu lays over top of all of them. All menus remain open until you close them
There are 36 possible colour actions for each AB box. Each AB box also has 5 text areas, to write scoring notations in. The tall thin box on the left is for noting pitches thrown. Each side of the diamond in the AB box also have a text area. You can write as much as you wish in them - they have room for 5 lines, 12 characters wide before a scroll-bar opens (in Firefox 3 and 4 --- Microsoft IE 7 shows the scroll bar on default, and the buttons don't work and the text areas are dead - in other words, back to the drawing board [will this war never end?] - I will be fix these things soon).
Update - June 18, 2011: Microsoft IE no longer shows scrollbars on default, and the text areas get a blinking cursor with a click (click just above north boxes - yeh, I'm still working on it). Scroll-bars now open after 5 lines are filled.
Coding the ScorecardI'm in the process of building the scorecard that these AB boxes are at the heart of. It's a bit of a time consuming process. In order that the four menus which accompany each AB box open in the correct relative position, and change the style property of the appropriate border element - each one of the 198 AB boxes that make up an 11 Inning scorecard has to have a unique address, or "id". Not only that, but each of the four menus in each AB box has a unique address too --- and, the nine colour choice buttons all have unique addresses! Is there a better way?
The beauty of the scorecard to this point, has been that all the 198 AB boxes were identical - this made it easy to build a scorecard - and with almost all of the style info in CSS - easy to change it. For example, I can 'inflate' the size of the entire scorecard with just a few changes to CSS, in about 5 minutes!