magento - multilingual site + Add store codes to url - want to show flag icons

I want to have a multi-language magento site use a flag image instead of a language selector box for user to select language of page. There is a nice article on this at http://www.atwix.com/magento/replace-language-selector-flag-icons/ Only issue is that we use "Add store codes to url" option. I hacked this code, but it can use some refinement and make it more Magento looking.

    <?php if(count($this->getStores())>1): ?>
    <div class="form-language">
        <div class="langs-wrapper">
        <?php foreach ($this->getStores() as $_lang): ?>
            <?php if ($_lang->getCode() != 'default'): ?>   
            <?  
                $base_url = Mage::getBaseUrl();
                // remove language in base url
                $base_url = str_replace('/en/' , "" , $base_url);       
                $base_url = str_replace('/fr/' , "" , $base_url);                   
                $current_url = $this->helper('core/url')->getCurrentUrl();
                // take out base url and language code
                $rest_of_url = str_replace($base_url , "" , $current_url);                  
                $rest_of_url = str_replace('/en/' , "" , $rest_of_url);     
                $rest_of_url = str_replace('/fr/' , "" , $rest_of_url);      
                // assmble new url
                $new_url = $base_url . '/' . $_lang->getCode()  . '/' . $rest_of_url;                       
            ?>      
            <a class="lang-flag" href="<?php echo $new_url ;?>"><img src="<?php echo $this->getSkinUrl('images/flags/' . $_lang->getCode() . '.png');?>" alt=""></a>
            <?php endif;?>
        <?php endforeach;?>
        </div>
    </div>
    <?php endif;?>

Solution

Template file (path/to/template/file.phtml):

<?php if(count($this->getStores()) > 1): ?>
<div class="form-language">
    <?php foreach ($this->getStores() as $_lang): ?>
        <?php $selected = $_lang->getId() == $this->getCurrentStoreId() ?>
        <a class="lang-flag<?php $selected && print ' selected' ?>" href="<?php echo $_lang->getCurrentUrl() ?>">
            <img src="<?php echo $this->getSkinUrl('images/flags/' . $_lang->getCode() . '.png');?>" alt="<?php echo $this->htmlEscape($_lang->getName()) ?>">
        </a>
    <?php endforeach ?>
</div>
<?php endif ?>

Add this lines to your layout-update xml file (if you haven't defined switch block):

<block type="page/switch" name="lang.switcher" template="path/to/template/file.phtml" />

If you have already one:

<reference name="store_language">
    <action method="setTemplate"><tmpl>path/to/template/file.phtml</tmpl></action>
</reference>