codigo javascript boton toggle para abrir y cerrar ventana emergente

[becquerel]

hola amigos que tal un saludo cordial a todos los miembros del foro, mi consulta es la siguiente:

tengo un botón (que es una imagen) que me abre una ventana emergente, hice una clase en css para que al activar dicho botón, este cambie de color y me coloque otra imagen que denota que dicho botón esta activado.

es decir, al pulsar el botón efectivamente me abre la ventana emergente y mi botón cambia de estado, (tiene una imagen inicial que indica que si presionas se abre, luego que ya has presionado y la ventana está abierta, el botón cambia de estado mostrando otra imagen que sugiere que si presionas nuevamente cerrarás la ventana emergente antes abierta, estilo toggle) el problema este en:

*sabiendo que en javascript el código para abrir y cerrar ventanas emergentes viene dado por los métodos open () o close() sobre el objeto window. como hago para incluir el close para cerrar la ventana cuando vuelva a presionar sobre el botón?


el código que me abre la página emergente dentro del body de la pagina web es este:

Código HTML:

<div align="center">
 <a class="botonete"  href="javascript:;" onclick="MM_openBrWindow('./ch1/index1.php','buscador','scrollbars=yes,width=680,height=500')"><img src="imallgen/louusqyeda.png" width="143" height="40" border="0" /></a>   
        
        </div>
 

y el css

Código CSS:

a.botonete{
    position: absolute;
    text-decoration: none;
    top: 240px;
    right: -2px;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: Georgia, "Times New Roman", Times, serif;
    color:#000;
    padding: 25px 0px 15px 0px;
    font-weight: 430;
    background:#F8F8F8 url(../imagen/abrir.png) 5% 5% no-repeat;
    border:1px solid #ccc;
    display: block;
    background-color: #F8F8F8;
    width: 150px;
    height: 31px;
}
a.trigger:hover{
    position: absolute;
    text-decoration: none;
    top: 240px;
    right: -2px;
    font-size: 16px;
    letter-spacing:-1px;
    font-family: Georgia, "Times New Roman", Times, serif;
    color:#000;
    padding: 25px 0px 15px 0px;
    font-weight: 430;
    background:#F8F8F8 url(../imagen/activado.png) 5% 5% no-repeat;
    border:1px solid #000;
    display: block;
    width: 150px;
    height: 31px;
}
a.active.trigger {
background:#fff url(../imagen/cerrar.png) 5% 1% no-repeat;
 
}
 

cualquier ayuda que me puedan dar bienvenida será gracias