// Assign onmouseover, onmouseout event handlers to the parent elements of
// images in 'roll' class
function findimg()
{
    var imgs,i;
    
    // Loop through all images
    imgs=document.getElementsByTagName('img');
    for( i=0; i < imgs.length; i++ ){
        //Check if they are in the roll class
        if( /roll/.test(imgs[i].className) ){
            // add the function roll to the parent Element of the image
            imgs[i].parentNode.onmouseover=function(){roll(this);};
            imgs[i].parentNode.onmouseout=function(){roll(this);};
            //preload rollover image
            ftype = imgs[i].src.substring(imgs[i].src.lastIndexOf('.'), imgs[i].src.length);
            (new Image()).src = imgs[i].src.replace(ftype, '_o' + ftype);
        }
    }
}


//use parent element to flip source of child img 
function roll(o)
{
    var i,isnode,src,ftype,newsrc,nownode;
    
    // loop through all childNodes  (this should be a while loop)
    for( i=0; i < o.childNodes.length; i++){
        nownode=o.childNodes[i];
        // if the node is an element and an IMG set the variable and exit the loop
        if( nownode.nodeType==1 && /img/i.test(nownode.nodeName) ){
            isnode=i;
            break;
        }
    }
    
    // get image source name and extension
    src = o.childNodes[isnode].src;
    ftype = src.substring(src.lastIndexOf('.'), src.length);
    
    //if source name is a mouseover image, revert back to normal
    if(/_o/.test(src)){
        newsrc = src.replace('_o','');
    }
    //else source name is a normal image, so replace with mouseover image
    else{
        newsrc = src.replace(ftype, '_o'+ftype);
    }
    
    //apply new source to image element
    o.childNodes[isnode].src=newsrc;
}