Onclick Swap Image Back And Forth

I don't have much experience with JavaScript, but this is so simple I can't understand why it doesn't work. Basically, when the user clicks the image of a gray arrow it switched to a green arrow and vice verca.

<SCRIPT TYPE="text/javascript">

function swaparrows() {
var x=document.images

x[0].src="../images/green-arrow.jpg";
}

</SCRIPT>

<img src="../images/gray-arrow.jpg"

But that only works once of course, I want users to be able to switch back as well, so I changed the function to what I thought would work:

function swaparrows() {
var x=document.images

if (x[0].src=="../images/gray-arrow.jpg") {
x[0].src="../images/green-arrow.jpg";
}

if (x[0].src=="../images/green-arrow.jpg") {
x[0].src="../images/gray-arrow.jpg";
} }

but it doesn't. I am used to PHP, but as far as I know IF statement works the same way.