I have been trying to make this work for days and the deadline is today. If anyone can assist me with this, I would be eternally grateful!

Here is my issue: The image for the video should switch to the another image based on which button is clicked This is not happening. Each image needs to link to a external URL. I need to make this happen like the links on the right side (in a popup window). My problem is that it is in a modal window that I have no control over. I can only place the html that is between the <body></body> tags into the window and I did have it working in a different way, but the JavaScript threw in artifacts in the application window (below the overlay), so I had to restructure the script and now I am afraid I have garbled the whole thing up.

I have posted all the code since some of the images are being called in the css (.video1 & .video2) and I want to ensure you have all the info. Please let me know if I can supply any more info.


Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>

<style>

#content {
	margin: 0 auto;
	width: 800px;
	max-height: 300px;
	background-image:url(images/newspage_bkgrnd2.png);
	background-repeat: no-repeat;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	line-height:1.5em;

}


#buttons {
	width: 160px;
	float: left;
	height: 200px;
	margin: 20px 10px 0 20px;
	border-right: 1px solid #666;
}

.learner a {
 outline: none;
 text-indent: -5000px;
 display:block;
 width:146px;
 height:105px;
 margin-right:10px;
 background:url(images/sprite_v2.png) 0 0 no-repeat;
 float:left;
 }

.learner a:hover {
 background-position: 0 -105px;
 }

.learner a:active {
 background-position: 0 -210px;
 }
 
.mgrsup a {
 outline: none;/
 text-indent: -5000px ;
 display:block;
 width:146px;
 height:105px;
 background:url(images/sprite_v2.png) -146px 0 no-repeat;
 }

.mgrsup a:hover {
 background-position: -146px -105px;
 }

.mgrsup a:active {
 background-position: -146px -210px;
 }
 
#aids {
	font-family: Arial, Helvetica, sans-serif;
	color: #6CF;
	float: left;
	display:block;
 }

#footer {
	clear:both;
}

a {
	text-decoration:none;
	color:inherit;
   
}

ul {
	overflow:hidden;
	margin: 30px 0 0 8px;
	padding:0;
}

li{
  line-height:1.5em;
  display:inline;
  
}

#header {
	width:536px;
	height:37px;	
}

.spacer {
    font-size: 0; 
    height: 10px;
}

#div1 {
	color:#31859c;
}

#div2 {
	color:#77933c;
}

#video {
	float:left;
	width:316px;
	height:180px;
	margin: 30px 20px 0 10px;
	background-image: url(images/video1.png);
	background-repeat: no-repeat;
}

.video1 {
	background-image: url(images/video1.png);
	background-repeat: no-repeat;
  }
  
.video2 {
	background-image: url(images/video2.png);
	background-repeat: no-repeat;
  }

</style>
</head>

<body>

<script type="text/javascript">

$(document).ready(function(){ 
	$('a').click(function () { 
		var divname= this.name; $("#none"+divname).show("fast").siblings().hide("fast"); 
		var n = divname.replace("div",""); 
		$("img").attr("src", "images/video"+n+".png"); 
		$("img").attr("alt", "Video"+n);
	}); 
});


var popupWindow = null;
function centeredPopup(url,winName,w,h,scroll){
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings =
'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
popupWindow = window.open(url,winName,settings)
}
 </script>
 
<div id="content">
	<div class="spacer"></div>
    	<div id="header"></div>
    		<div id="buttons">
    			<div class="learner"><a href="#none" name="div1">Learner</a><br />
        			<div class="mgrsup"><a href="#" name="div2">Manager/Supervisor</a>
            		</div>
        		</div>
    		</div>
    	<div id="video">
			<div class="video1"><a href="#none" onclick="document.getElementById('video1')">&nbsp;</a>Learner</div>
        	<div class="video2" style="display:none"><a href="#none" onclick="document.getElementById('video2')">Manager</a></div>
    	</div>
    <div id="aids">
		<div id="div1">
			<ul>
            	<li><a href="#none" onclick="centeredPopup(this.href,'myWindow','800','600','yes');return false">Navigation</a></li><br />  
                <li><a href="#none" onclick="centeredPopup(this.href,'myWindow','800','600','yes');return false">Learning Plan</a></li><br />
                <li><a href="#none" onclick="centeredPopup(this.href,'myWindow','800','600','yes');return false">Launch Online Learning</a></li><br />
                <li><a href="#none" onclick="centeredPopup(this.href,'myWindow','800','600','yes');return false">Completed Work</a></li><br />
                <li><a href="#none" onclick="centeredPopup(this.href,'myWindow','800','600','yes');return false">Run Reports</a></li><br />
                <li><a href="#none" onclick="centeredPopup(this.href,'myWindow','800','600','yes');return false">Update Personal Information</a></li><br />
            </ul> 
		</div>
		<div id="div2" style="display:none">
			<ul>
				<li><a href="#none" onclick="centeredPopup(this.href,'myWindow','800','600','yes');return false">Job Aid 1</a></li> <br />
                <li><a href="#none" onclick="centeredPopup(this.href,'myWindow','800','600','yes');return false">Job Aid 2</a></li><br />
                <li><a href="#none" onclick="centeredPopup(this.href,'myWindow','800','600','yes');return false">Job Aid 3</a></li><br />
			</ul>
		</div>
	</div>
    <div id="footer"><br class="spacer" style="clear:both" /><br />
	</div>
</div>

</body>

</html>
Thanks in advance,
Tina