/*
Javascript is a dynamic language, so, lets keep it that way.
I have only named one thing in this script that needs to be changed accordingly.
I personally like to use the path "../images/popups/" for anything that is an image that is hidden
at one point, and then visable at another.

so, depending on where you place this JS file, you may need to change the path for the image source.

below you will see examples of how to use the different functions created here.

----------------------------------------------

For images that you want to pop up on mouse over, and to disappear on mouse out, you need to use the "movr" and "mout" function.
Here is an example...
<a href="#" onmouseover="movr('blue_flex.jpg','detailboximg','detailbox'); return true;" onmouseout="mout('detailboximg','detailbox'); return true;">Pop Image</a>
<div id="detailbox"><img id="detailboximg" src="" /></div>

For images that you want to swap with an existing image on mouse over, and then back to the original image on mouse out, you need to use the "mswap" and "mrevert" function.
Here is an example...
<a href="#" onmouseover="mswap('blue_flex.jpg','swapboximg'); return true;" onmouseout="mrevert('bot_bigimg.jpg','swapboximg'); return true;">Swap Image</a>
<img id="swapboximg" src="../images/bot_bigimg.jpg" alt="" width="436" height="238" />

The "mswap" function would also be used nicely with a click option.
<a href="#" onclick="mswap('blue_flex.jpg','swapboximg'); return true;">Swap Image</a>
<img id="swapboximg" src="../images/bot_bigimg.jpg" alt="" width="436" height="238" />

The "movr" function can also be utilized with onclick if you do not want to swap a new image in or disappear on mouse out.
<a href="#" onclick="movr('blue_flex.jpg','detailboximg','swapboximg'); return true;">Pop Image</a>
<div id="detailbox"><img id="detailboximg" src="" /></div>

----------------------------------------------

Now, you may be thinking why are we passing along the ID for the image and the div? Well, that's simple.
The reason behind that is so you can name your ID in you css whatever you want, just link the css ID and the
ID for the div or image accordingly.  This also makes it so that you can have more than one instance of somehting
being poped up on a page without having to write a new function in the JS, and more css ID's and so on.

Now our JS file is fully dynamic.  I hope this little help section is useful in the future.
*/


function movr(name,folder,imgID,divID) {
	document.getElementById(imgID).src="../../images/"+folder+"/popups/"+name;
	document.getElementById(divID).style.visibility="visible";
}

function mout(imgID,divID) {
	document.getElementById(imgID).src="../../images/spacer.gif";
	document.getElementById(divID).style.visibility="hidden";
}

function mswap(name,folder,imgID) {
	document.getElementById(imgID).src="../../images/"+folder+"/popups/"+name;
}

function mrevert(name,folder,imgID) {
	document.getElementById(imgID).src="../../images/"+folder+"/popups/"+name;
}