Collegare fogli di stile differenti a voci del menu differenti

[self]

ciao a tutta la community.

scrivo per chiedere lumi su una modifica che vorrei apportare al template JA Mercury:
questo template e' dotato di default di styleswitcher su 3 temi.

io pero' vorrei invece collegare il cambio di tema a sezioni del sito, e quindi attivare lo switch
sul click nel menu, a seconda della voce.

In pratica vorrei che se clicco, ipotesi, sulle prime tre voci, ad esse sia collegato lo javascript
"onclick="setActiveStyleSheet('nameofthestyle1') ;""

se clicc invece su altre voci avro' collegato "onclick="setActiveStyleSheet('namefthestyle2') ;""

e cosi' via.

Ora, io sono abbastanza ferrato in html e css, meno in javascript ma me la cavo, e sono
pero' un novizio di joomla.
Siccome il menu e' generato dinamicamente, non riesco proprio a capire dove andare a
collegare l'onclick....

sono abbastanza disperato perche' sarebbe una funzione essenziale, finalizzata
a dividere il sito in sezioni diverse, raggiungibili dal mainmenu, e che essendo diverse
dovrebbero anche avere un foglio di stile diverso, solo nell schema colore e non nel layout, ma diverso.

qualche suggerimento? 

[self]

idea:

nel tentativo di cambiare foglio di stile a seconda della voce del menu che si clicca e quindi della sezione, ravanando in joomla ho avuto questa , che FORSE e' un'idea valida, FORSE.

dunque:
il cambio di stile, con il selettore ora presente nel template, e' collegato a uno javascript.

infatti guardando il codice vedo che:

 nell'HEAD del codice c'e' il richiamo a:

Codice: [Seleziona]

<script language="javascript" type="text/javascript" src="http://localhost:8888/Joomla/templates/ja_mercury/scripts/ja_script.js"></script>

ora in questo  ja_script.js , a un certo punto se lo guardo, c'e' la funzione:

Codice: [Seleziona]

function setActiveStyleSheet(title) {

createCookie("ColorCSS", title, 365);
window.location.reload();
return;

  var i, a, main, arr;
  arr = document.getElementsByTagName("link");
  for(i=0; (a = arr[i]); i++) {
  var ltitle = a.getAttribute("title");
    if(a.getAttribute("rel").indexOf("style") != -1 && ltitle) {
      a.disabled = true;
      if(ltitle == title) a.disabled = false;
    }
  }
  createCookie("ColorCSS", title, 365);
}

Siccome le voci del menu, a loro volta hanno un ID

Codice: [Seleziona]

<li>
   <a href="http://localhost:8888/Joomla/index.php?option=com_frontpage&amp;Itemid=1" class = "active" id="menu1"><span>Home</span></a>
</li>
<li>
   <a href="http://localhost:8888/Joomla/index.php?option=com_content&amp;task=view&amp;id=5&amp;Itemid=6"  id="menu6"><span>Joomla! License</span></a>
</li>
<li>
   <a href="http://localhost:8888/Joomla/index.php?option=com_content&amp;task=section&amp;id=1&amp;Itemid=2"  id="menu2"><span>News</span></a>
</li>

ho pensato che modificando la funzione di setActiveStyleSheet, si potrebbe inserire una serie di IF, in modo tale che se l'ID e' 1, associa uno stile, se e' 2 un altro e cosi' via.

non so assolutamente se e' una soluzione valida  fattibile, so solo che io sono troppo ignorante in javascript per tentare la modifica.

che ne pensate??

ps: grazie dell'ascolto