Duda con setInterval y clearInterval

[gcrlink]

Saludos a todos...

Estoy desarrollando una página que estoy probando en un servidor local.

Utilizando javascript y algunos elementos de jquery estoy trabajando en un banner animado que muestra cada tanto tiempo una imágen.

Tengo dos capas en el documento HTML con evento onClick y con una de éstas pretendo que la hacer click sobre la misma se active una función con un clearInterval para poder detener el setInterval.

La animación me funciona muy bien y responde bien. Pero al hacer click sobre la capa para activar la función del clearInterval no pasa nada. ¿Qué estaré haciendo mal?

Agradezco de ante mano sus respuestas y opiniones

A continuación les dejo los códigos.

Código javascript/jquery:

Código:

var images = new Array();
images[0] = "<img src='img/disenowebprofecional.jpg' width='994' height='455'>";
images[1] = "<img src='img/disenodesarrolloweb.jpg' width='994' height='455'>";
images[2] = "<img src='img/dmbgrande.jpg' width='994' height='455'>";

var menu2h = new Array();
menu2h[0] = "block";
menu2h[1] = "none";
menu2h[2] = "none";

var menu3h = new Array();
menu3h[0] = "none";
menu3h[1] = "block";
menu3h[2] = "none";

var menu4h = new Array();
menu4h[0] = "none";
menu4h[1] = "none";
menu4h[2] = "block";

var inicio = 0;
var mousehoverA = 0;
var mousehoverB = 0;
var mousehoverC = 0;

function gallery(){
	if(inicio < images.length){
		$("#imgs").css("display","none");
		$("#imgs").fadeIn(1000);
		inicio++;
		$("#imgs").html(images[inicio]);
	}
	if(inicio == images.length){
		inicio = 0;
		$("#imgs").html(images[inicio]);
	}
}
var timeGallery = setInterval("gallery()",15000);

function menuHover2(){
	if(mousehoverA < menu2h.length){
		mousehoverA++;
		$("#nav-bar2H").css("display",menu2h[mousehoverA]);
	}
	if(mousehoverA == menu2h.length){
		mousehoverA = 0;
		$("#nav-bar2H").css("display",menu2h[mousehoverA]);
	}
}
var timeMenu2 = setInterval("menuHover2()",15000);

function menuHover3(){
	if(mousehoverB < menu3h.length){
		mousehoverB++;
		$("#nav-bar3H").css("display",menu3h[mousehoverB]);
	}
	if(mousehoverB == menu3h.length){
		mousehoverB = 0;
		$("#nav-bar3H").css("display",menu3h[mousehoverB]);
	}
}
var timeMenu3 = setInterval("menuHover3()",15000);

function menuHover4(){
	if(mousehoverC < menu4h.length){
		mousehoverC++;
		$("#nav-bar4H").css("display",menu4h[mousehoverC]);
	}
	if(mousehoverC == menu4h.length){
		mousehoverC = 0;
		$("#nav-bar4H").css("display",menu4h[mousehoverC]);
	}
}
var timeMenu4 = setInterval("menuHover4()",15000);

function play(){
	setInterval("gallery()",15000);
	setInterval("menuHover2()",15000);
	setInterval("menuHover3()",15000);
	setInterval("menuHover4()",15000);
}
function pause(){
	clearInterval(time);
	clearInterval(timeMenu2);
	clearInterval(timeMenu3);
	clearInterval(timeMenu4);
}

Lenguaje HTML:

Código:

      <div id="mediabtn">
        <div id="play" onClick="javascript: play()">
        </div>
        <div id="pause" onClick="javascript: pause()">
        </div>
      </div>