imagepuzzle ui - change suggestion

by bobbyrne01

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/smoothness/jquery-ui.css">
<form id="pieceSelection">
    Image URL<input type="text" value="http://placehold.it/350x250"/>
    <div id="radio">Grid dimensions
        <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>
    <br/><br/><br/><br/>
    <img id="grid" src="http://placehold.it/350x250"/>
</form>

CSS

#pieceSelection
{ 
    text-align:center;
}

#grid 
{ 
    margin-left:auto;
    margin-right:auto;
    /*border: 1px white solid; */

    border: 1px solid rgba(0,0,0,0.5);
    border-radius: 8px 8px 8px 8px;
     background: rgba(0,0,0,0.25);
    
    box-shadow: 10px 10px 10px rgba(0,0,0,0.5); 
    -o-box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
    -webkit-box-shadow: 10px 10px 10px rgba(0,0,0,0.5); 
    -moz-box-shadow: 10px 10px 10px rgba(0,0,0,0.5); 
}

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");
});