I am looking for a jQuery solution that will enable users at a website to select lottery numbers.
The user is presented with a page that has 5 lottery balls, and 1 mega ball. Upon the initial page load, each ball has a "?" displayed on the ball. When they hover over the ball, a rectangular tooltip appears above the ball with numbers 1 through 56. The user selects the desired number, changing the ball's label from "?" to the number selected. As they hover over the next lottery ball, the numbers already selected should be 'disabled' to prevent the selection of duplicate numbers. In addition, there should be a "Quick Pick" link to generate 5 unique numbers, and one mega number.
Lottery balls 1, 2, 3, 4, and 5 must be unique. Minimum value is 1, maximum value is 56.
Lottery ball 6, or the Mega ball does not need to be unique. It is not constrained by the values of balls 1 through 5. Minimum value is 1, maximum value is 46.
The hover window for each ball must be able to hover over any text on the page above it. The numbers inside the hover are displayed in a grid layout, as the user hovers over a number, the number is highlighted. When the user selects the number, the value is circled, or otherwise marked to signify that it's selected. The number should remain selected if the user hovers over a previously selected lottery ball. When the user mouses off of the hover window or switches to a different lottery ball, the existing window gracefully fades out, and the new lottery ball hover appears.
[url removed, login to view] - jQuery markup.
[url removed, login to view] - Stylesheet for project
[url removed, login to view] - HTML markup for layout of lottery game.