var lilPx = "120px"; //size of small select box
var bigPx = "200px"; //size of large select box
var prefix = '';   //prefix used on all select box IDs
 
document.onmouseover = shrinkAll; //handles abandoned selections (no change)
 
function resize(id){
    //get the element in question
    var elem = document.getElementById(id);
 
    //dynamically init/assign the holder variable
    var holder = eval("hold"+id);
 
    //if select not being held open
    if (!holder){
        //go big->small or small -> big
        if(elem.style.width == bigPx)
            elem.style.width = lilPx;
        else   
            elem.style.width = bigPx;
    }else{
        elem.style.width = bigPx;
    }
}
 
function hold(id){
    //swap the hold value, dynamic of course
    eval("hold" + id + " = !hold" + id);
 
    //change size if necessary
		if (id)
		{
			resize(id);
		}
    
}
 
function shrink(id){
    //get element to shrink
    var elem = document.getElementById(id);
 
    //set width to small
    elem.style.width = lilPx;
 
    //unhold
    eval("hold" + id + " = false");
}
 
function shrinkAll(e){
    //be sure we have the real src, not a bubble or trickle!
    if (!e) var e = window.event;
    var target = (window.event) ? e.srcElement : e.target;
   
    //shrink em all except that one that was the source (possibly)
    var selects = document.getElementsByTagName('select');
    for(i=0; i<selects.length; i++){
        if(selects[i].id.substring(0,prefix.length) == prefix){
           
            //shrink if it wasn't the source (make sure the src isn't parent for <option> in mozilla)
            if(selects[i].id != target.id && selects[i].id != target.parentNode.id ){
                shrink(selects[i].id);
            }
        }
    }
}