Magento 1.8 – How to Structure Ajax Module/Widget

I'm fairly new to Magento and have never attempted anything like this before, I'm still getting used to how Magento does things.

I'm trying to create a widget which will add a 'Spraydeck finder' to any CMS page. For those not sure what I mean, it's exactly the same principal as a car finder – just think of two drop-downs where you first pick a brand of car (or in this case Kayak) – this action populates a second drop-down with available Models from that manufacturer, you select your model and this action displays available products or information about a specific vehicle (or Kayak in my case).

At the moment, the widget is displaying and I have the first dropdown populated with brands of kayak, but as you'll see when you scroll down, the second dropdown is currently dealt with completely in the controller, I'm 99% sure this is not 'the Magento way' to go about this, should I be putting all this into the original block or should I use the controller to load a new block and output that via an Ajax.Updater call? – obviously once the model is selected I need to go through this process again to display the specific information for that Kayak.

Can someone offer some pointers or maybe point me to a tutorial better suited to answer this? i've had a lot of trouble finding good literature on Ajax implementation in Magento.

In my block I have the following:

class Dsingleton_Spraydecks_Block_Finder
    extends Mage_Core_Block_Template
    implements Mage_Widget_Block_Interface {
    /**
     * A model to serialize attributes
     * @var Varien_Object
     */
    protected $_serializer = null;

    /**
     * Initialization
     */
    protected function _construct()
    {
        $this->_serializer = new Varien_Object();
        parent::_construct();
    }

    /**
     * Produce links list rendered as html
     *
     * @return string
     */
    protected function _toHtml()
    {
        $html = '';
        $list = $this->getBrands();
        $this->assign('list', $list);

        return parent::_toHtml();
    }

    private function getBrands()
    {
        $brands_collection = Mage::getModel('dsingleton_spraydecks/finder')
            ->getCollection()
            ->distinct(true)
            ->addFieldToSelect('brand')
            ->load();

        $brand_list = array();
        $brand_list[] = '-- Please Select --';

        foreach ( $brands_collection as $brand )
        {
            $brand_list[] = $brand->brand;
        }

        return $brand_list;

    } }

In my template template file I have the following:

<label for="finder">Brand: </label>
<select name="finder" id="sd-brand-select">
    <?php foreach ($list as $item) : ?>
        <option value="<?php echo $item ?>"><?php echo $item ?></option>
    <?php endforeach; ?>
</select>
<div id="sd-model"></div>
<script type="text/javascript">

    document.observe("dom:loaded", function() { 
        $$('#sd-brand-select').invoke('on', 'change', function(){

            var brand = this.getValue();
            if (brand != '-- Please Select --')
            {
                new Ajax.Updater('sd-model', '<?php echo Mage::getBaseUrl() ?>' + 'spraydecks/ajax/model/brand/' + brand, { method: 'post' });  
            }
        }); 
    });

</script>

And in my Controller I have the following:

class Dsingleton_Spraydecks_AjaxController extends Mage_Core_Controller_Front_Action {

    /**
     * Return the brands for a given manufacturer
     */    
    public function modelAction()
    {
        //check we have an ajax request
        $isAjax = Mage::app()->getRequest()->isAjax();

        if ($isAjax) {

            $this->loadLayout(false);
            $this->renderLayout();

            $brand = $this->getRequest()->getParam('brand');

            if($brand)
            {
                $boat_model_collection = Mage::getModel('dsingleton_spraydecks/finder')
                    ->getCollection()
                    ->addFieldToSelect('model')
                    ->addFieldToFilter('brand', $brand)
                    ->load();

                $model_list = array();
                $model_list[] = '-- Please Select --';

                foreach ( $boat_model_collection as $boat_model )
                {
                    $model_list[] = $boat_model->model;
                }

                $dropdown = '<option value="%s">%s</option>';

                echo '<label for="boat">Model: </label>';
                echo '<select name="finder" id="sd-brand-select">';

                 foreach ($model_list as $item){
                     echo sprintf($dropdown, $item, $item);
                 }

                echo '</select>';

            }
        }
    }
}