Eu não consigo separar o jQuery do Prototype com o meu site do Magento.

Eu tenho que trabalhar no JsFiddle usando tags alteradas etc, mas quando eu adicioná-lo ao meu site magento, eu continuo recebendo erros de sintaxe não capturados.

Página está emhttp://www.asg.co.uk/gadgetclinic/how-it-works

O código com o qual estou trabalhando é:

<script type="text/javascript">
// First hide them all

$j("#how-it-works .step").hide();

function fades($j.step) {    
    $j div.fadeIn(300, function () {
            if (!$j div.is('last-child')) {
                fades($div.next());
            }
            else{
                fades($j("#how-it-works .step:first-child"));
            }
    });
}

fades($("#how-it-works .step:first-child"));
</script>

Código HTML é:

<div id="how-it-works">
<img src="{{skin url="images/how-it-works.png"}}" alt="How It Works" />
<div class="step"><h3>Get your box</h3><p>We'll send a suitably sized, pre-paid postage box for your device.</p></div>
<div class="step"><h3>Post your device</h3><p>Safely pack your device in your postage box and return it to us.</p></div>
<div class="step"><h3>Repair in process</h3><p>We will update you if need be whilst your device is repaired.</p></div>
<div class="step"><h3>Get your device</h3><p>Your device will be returned using the service you selected.</p></div>
</div>

Alguém pode me ajudar sistematicamente a colocar todas as $ tags necessárias em $ j ou o que for necessário para separar jQuery de Prototype?