imagepuzzle ui - change suggestion, stock images and stats

by bobbyrne01

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/smoothness/jquery-ui.css">
<div id="container">

    <div id="header" style="text-align:center;">
        Image URL<input type="text" value="http://placehold.it/350x250"/>
        <div id="radio">Grid
            <input type="radio" id="radio1" name="radio" /><label for="radio1">2x2</label>
            <input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">3x3</label>
            <input type="radio" id="radio3" name="radio" /><label for="radio3">4x4</label>
            <input type="radio" id="radio4" name="radio" /><label for="radio4">5x5</label>
            <input type="radio" id="radio5" name="radio" /><label for="radio5">6x6</label>
            <input type="radio" id="radio6" name="radio" /><label for="radio6">7x7</label>
            <input type="radio" id="radio7" name="radio" /><label for="radio7">8x8</label>
            <input type="radio" id="radio8" name="radio" /><label for="radio8">9x9</label>
        </div>
    </div>

    <br><br><br>
    <div id="menu" style="width:150px;float:left;">
        <b>Stock images</b><br>
        <ol id="selectable">
            <li id="house.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li>
            <li id="gherkin.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li>
            <li id="water.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li>
            <li id="tree.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li>
            <li id="me.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li>
            <li id="hey.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li>
            <li id="wutang.jpg" class="ui-state-default"><img src="http://placehold.it/50x40"/></li>
            <li id="test.png" class="ui-state-default"><img src="http://placehold.it/50x40"/></li>
       ...

CSS

html, body, #container { height: 100%; }
body > #container { height: auto; min-height: 100%; }

#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 100; }
#selectable li { margin: 3px; padding: 1px; float: left; width: 50px; height: 40px; font-size: 2em; text-align: center; }

JavaScript

$(function() {
    $("#radio").buttonset();
});

$("#radio :radio").click(function(e) {
    alert("Scrambling image into " + $("#radio :radio:checked + label").text() + " pieces\n" + "this alert will not occur in the actual game, too annoying");
});


$(function() {
    $("#selectable").selectable();
});

$("#selectable" ).selectable({
   selected: function(event, ui) { alert( $(ui.selected).attr('id') ); }
});