Jquery select that effects the amount of images

http://stackoverflow.com/questions/7528138/jquery-select-that-effects-the-amount-of-images

HTML

<select name="show-images">
    
<option value="0" selected>None</option>
     <option value="1">abu</option>
     <option value="2">Layout 2</option>
     <option value="3">Layout 3</option>
     <option value="4">Layout 4</option>
     <option value="5">Layout 5</option>
 </select> | Layout: <span id="layout-name"></span>
 
 <hr />
 
 <div class="imgs" style="background: yellow;"></div>
 <div class="imgs" style="background: blue;"></div>
 <div class="imgs" style="background: green;"></div>
 <div class="imgs" style="background: brown;"></div>
 <div class="imgs" style="background: pink;"></div>
 <div class="imgs" style="background: black;"></div>
 <div class="imgs" style="background: grey;"></div>
 <div class="imgs" style="background: silver;"></div>
 
 <br style="clear: both;" />

CSS

.imgs {margin: 5px; width: 100px; height: 100px; float: left; display: none;}
#layout-name {font-weight: bold;}

JavaScript

var layouts_data = {
    abu: {
        name: 'None',
        images: 0
    },
    1: {
        name: 'Layout 1',
        images: 3
    },
    2: {
        name: 'Layout 2',
        images: 
    },
    3: {
        name: 'Layout 3',
        images : 10
    },
    4: {
        name: 'Layout 4',
        images: 8
    },
    5: {
        name: 'Layout 5',
        images: 5
    }
};

// This is the magical function, that shows images
 SetLayout = function (layoutid) {
     
     // Set the current layout
     var current_layout = layouts_data[layoutid];
     
     // Lets also set the current layouts name
     $('#layout-name').text(current_layout['name']);
 
     // Lets loop trough all the images
      // Also note, that it will hide() all the imgs as default
      // This way we can use it over and over
     $('.imgs').hide().each(function (i, elm) {
      
          // Lets check the current image count (i) is lower then our limit
          if ((i + 1) <= current_layout['images']) {
              $(elm).show();
          }
 
      });
 };

// First lets set the default
$(document).ready(function () {
    
    // You can change the default layout by setting 'selected' to some option
    SetLayout($('select[name="show-images"] option:selected').val());
    
});

// Lets catch the event
 $('select[name="show-images"]').bind("change keyup", function () {
     
     // Get the selected layout
     SetLayout($('select[name="show-images"] option:selected').val());
 
 });