How to hide unavailable product variants in Shopify?

Question

I'm trying to make only the available product variants visible in drop downs for products like this one. For example, say you choose 2012 in the first drop down, it would only show the available choices in the second. If you then chose Wed 25th July in the second, it would only show the available variants in the third. At the minute it shows all choices and states 'We don't offer the product in this combination' for an unavailable choice.

So far, my product.liquid page has this code:

<div class="col-7 product-description clearfix">
<h1>{{ product.title }}</h1>

{{ product.description }}
    {% include 'addthis' %}
    <br/><br/>

{% if product.available  %} 
    {% if product.variants.size > 1 %}
    <!-- If the product only has MULTIPLE OPTIONS -->
    <form action="/cart/add" method="post" class="product-variants">     
        <div id="options">
            <select id="product-select" name='id'>
                {% for variant in product.variants %}
                    <option value="{{ variant.id }}">{{ variant.title }}</option>
                {% endfor %}
            </select>
            <div class="select-wrapper">
              <label for="region">DVD Region</label>
              <select id="color" required>
                <option value="NTSC">NTSC</option>
                <option value="PAL/SECAM" selected="selected">PAL/SECAM</option>
              </select>
            </div>
            <p><a href="http://www.videouniversity.com/articles/world-wide-tv-standards/" target="_blank">Click Here</a> find out more about your region.</p>

        </div> <!-- options --> 

        <div class="price-field"></div>
        <input type="submit"  name="add" value="Add to cart" id="purchase" />
    </form>

{% else %}
    <!-- If the product only has ONE variant -->
    <form action="/cart/add" method="post" class="product-variants">     
        <div class="price-field"> {{ product.price | money }}</div>
        <input type="submit"  name="add" value="Add to cart" id="purchase" />
        <input  type="hidden" id="{{ variant.id }}" name="id" value="{{ product.variants[0].id }}" /> <!-- passes variant id -->
    </form>
{% endif %}

{% else %}
    <p>This product is not available</p>
{% endif %}  

</div><!-- .col-7 -->

<div class="col-5 last product-thumbs">
<ul>
{% for image in product.images %}
    {% if forloop.first %}
        <li class="featured-image" >
            <a class="zoom " href="{{ image | product_img_url: 'large' }}" title="{{ product.featured_image.alt | escape }}">
                <img  src="{{ image | product_img_url: 'large' }}" alt="{{ product.featured_image.alt | escape }}" />
            </a>
        </li>
        {% else %}
        <li>
            <a class="zoom" href="{{ image | product_img_url: 'large' }}" title="{{ image.alt | esacpe }}">
                <img class="" src="{{ image | product_img_url: 'small' }}" alt="{{ image.alt | escape }}" />
            </a>
        </li>
    {% endif %}
 {% endfor %}
</ul>
</div><!-- .col-5 -->

<script type="text/javascript">
// <![CDATA[  
var selectCallback = function(variant, selector) {
  if (variant && variant.available == true) {
    // selected a valid variant
    jQuery('#purchase').removeClass('disabled').removeAttr('disabled'); // remove unavailable class from add-to-cart button, and re-enable button
    jQuery('#purchase').fadeIn();
    jQuery('.price-field').html(Shopify.formatMoney(variant.price, "{{shop.money_with_currency_format}}"));  // update price field
  } else {
    // variant doesn't exist
    jQuery('#purchase').addClass('disabled').attr('disabled', 'disabled');      // set add-to-cart button to unavailable class and disable button
    jQuery('#purchase').fadeOut();
    var message = variant ? "Sold Out" : "We don't offer the product in this combination"; 
    jQuery('.price-field').text(message); // update price-field message
  }
};


// initialize multi selector for product      
jQuery(document).ready(function() {
  new Shopify.OptionSelectors("product-select", { product: {{ product | json }}, onVariantSelected: selectCallback });
   {% assign found_one_in_stock = false %}
  {% for variant in product.variants %}
    {% if variant.available and found_one_in_stock == false %}
      {% assign found_one_in_stock = true %}
      {% for option in product.options %}
        jQuery('.single-option-selector:eq(' + {{ forloop.index0 }} + ')').val({{ variant.options[forloop.index0] | json }}).trigger('change');
      {% endfor %}
    {% endif %}
  {% endfor %}
  $('#options div').addClass("selector-wrapper");
  {% if product.options.size == 1 %}
    $(".selector-wrapper").append("<label>{{ product.options.first }}</label>");
  {% endif %}
});   
// ]]>  
</script>

Any help?