jQuery Hidden/Show Issue
===

I have a issue where I am displaying a car and I want the user to be able to change the color of the car as well as the rims. 

           <script type="text/javascript">
    			function showImage(image){
    			  var mainImage = document.getElementById('mainImage');
    			  mainImage.src = image; 
    			}
    			function toggleThumbnails(){
    			  var thumbnails = document.getElementById('color-options');
    			  if(thumbnails.style.display == 'block'){
    			    thumbnails.style.display = 'none'; 
    			  } else {
    			    thumbnails.style.display = 'block'; 
    			  }
    			}
    
    				function showImage(image){
    			  var mainImage = document.getElementById('mainwheelImage');
    			  mainImage.src = image; 
    			}
    			function toggleThumbnails(){
    			  var thumbnails = document.getElementById('wheel-options');
    			  if(thumbnails.style.display == 'block'){
    			    thumbnails.style.display = 'none'; 
    			  } else {
    			    thumbnails.style.display = 'block'; 
    			  }
    			}
    		</script>

    <section id="footer-wrapper">
    				<!-- Color Selector -->
    				<div id="color-options">
    					<h1>Colors</h1>
    					<div class="color-container">
    						<div class="color-center">
    							<span><img src="img/colors/black.png" onclick="showImage('img/colors/cars/black.png')" /></span>
    							<span><img src="img/colors/white.png" onclick="showImage('img/colors/cars/white.png')" /></span>
    							<span><img src="img/colors/red.png" onclick="showImage('img/colors/cars/red.png')" /></span>
    							<span><img src="img/colors/silver.png" onclick="showImage('img/colors/cars/silver.png')" /></span>
    							<span><img src="img/colors/metalic_black.png" onclick="showImage('img/colors/cars/metalic_black.png')" /></span>
    							<span><img src="img/colors/metalic_grey.png" onclick="showImage('img/colors/cars/metalic_grey.png')" /></span>
    						</div>
    					</div>
    				</div>
    				<!-- /Color Selector -->
    				<div class="divider"></div>
    				<!-- Wheels Selector -->
    				<div id="wheel-options">
    					<h1>Wheels</h1>
    					<div class="wheel-container">
    						<div class="wheel-center">
    							<span><img src="img/wheels/17.jpg" onclick="showImage('img/wheels/cars_overlay/17.png')" /></span>
    							<span><img src="img/wheels/18.jpg" onclick="showImage('img/wheels/cars_overlay/18_regular.png')"  /></span>
    							<span><img src="img/wheels/18_twin.jpg" onclick="showImage('img/wheels/cars_overlay/18_twin.png')" /></span>
    							<span><img src="img/wheels/18_twin_7spoke.jpg" /></span>
    						</div>
    					</div>
    				</div>
    				<!-- /Wheels Selector -->
				

So that toggles the colors of the car as well as the rims. But if I choose a color then when i go to select a rim. The color defaults back to the original image. Anyway to keep the color selected while selecting the rims?