Untitled

<html>
<head>
<title>A8 Assignment</title>
<script type='text/javascript' src='music.js'></script>
<script type='text/javascript'>
function createAlbumList(){
	var html="";
		html +="<select size='8' onchange='parent.createSongList(this.selectedIndex);'>";


		for(var i=0; i<albums.length; i++){
			html += "<option>";
			html += albums[i].artist+'/'+albums[i].title;
			html += "</option>"
		}

			html +='</select>'

				writeIframe("album_list_frame", html);
}
function createSongList(album_index){
	var html = "";

	html += "<select size='8' onchange='parent.createSongInfo("+album_index+",this.selectedIndex);'>";

	for(var i=0;i<albums[album_index].tracks.length; i++){
		html += "<option>";
		html += albums[album_index].tracks[i].title;
		html += "</option>"
}
		html += "</select>";

		writeIframe("song_list_frame", html);
}
function createSongInfo(album_index,song_length){
	var html = "";
	html =
	html += "You have selected album: "+ albums[album_index].title;
	html += "<br>You have selected song: "+ albums[album_index].tracks[song_length].title;

	writeIframe("all_details_frame", html)
}
function writeIframe(id,html){
	with(document.getElementById(id).contentDocument){
		open()
		write(html)
		close()
	}
}
</script>
<script type='text/javascript'>

function f(i){
		document.getElementById('txt').value
		 +=(document.getElementById(i).firstChild.nodeValue);
	}
function reset(){
	document.getElementById('txt').value

}
</script>

</head>
<body onload='createAlbumList()'>
<h1> <center>MiTunes</h1>
<table border='1' align='center' bgcolor='black' bordercolor='red'>
<tr>
<td><iframe id='album_list_frame'></iframe></td>
<td><iframe id='song_list_frame'></iframe></td>
<td><iframe id='all_details_frame'></iframe></td>
</tr>

<tr>
<td colspan=3 width='900' height='200' overflow-x='scroll'>
<table bordercolor='red' border='1' height='200' width='920'>
<tr>

<td style='color:#FFFFFF' align='center' id='i1' onclick='f("i1");' class='big'>A</td>
<td style='color:#FFFFFF' align='center' id='i2' onclick='f("i2");' class='big' >B</td>
<td style='color:#FFFFFF' align='center' id='i3' onclick='f("i3");' class='big'>C</td>
<td style='color:#FFFFFF' align='center' id='i4' onclick='f("i4");' class='big'>D</td>
<td style='color:#FFFFFF' align='center' id='i5' onclick='f("i5");' class='big'>E</td>
<td style='color:#FFFFFF' align='center' id='i6' onclick='f("i6");' class='big'>F</td>
<td style='color:#FFFFFF' align='center' id='i7' onclick='f("i7");' class='big'>G</td>
<td style='color:#FFFFFF' align='center' id='i8' onclick='f("i8");' class='big'>H</td>
<td style='color:#FFFFFF' align='center' id='i9' onclick='f("i9");' class='big'>I</td>
<td align='center' bgcolor='red' colspan=3> <input type='text' id='txt'></td>
</tr>
<tr>
<td style='color:#FFFFFF' align='center' id='i10' onclick='f("i10");' class='big'>J</td>
<td style='color:#FFFFFF' align='center' id='i11' onclick='f("i11");' class='big'>K</td>
<td style='color:#FFFFFF' align='center' id='i12' onclick='f("i12");' class='big'>L</td>
<td style='color:#FFFFFF' align='center' id='i13' onclick='f("i13");' class='big'>M</td>
<td style='color:#FFFFFF' align='center' id='i14' onclick='f("i14");' class='big'>N</td>
<td style='color:#FFFFFF' align='center' id='i15' onclick='f("i15");' class='big'>O</td>
<td style='color:#FFFFFF' align='center' id='i16' onclick='f("i16");' class='big'>P</td>
<td style='color:#FFFFFF' align='center' id='i17' onclick='f("i17");' class='big'>Q</td>
<td style='color:#FFFFFF' align='center' id='i18' onclick='f("i18");' class='big'>R</td>
<td style='color:#FFFFFF' align='center' bgcolor='red'>Back</td>
<td style='color:#FFFFFF' align='center' bgcolor='red'>Search</td>
<td style='color:#FFFFFF' align='center' bgcolor='red'>Reset</td>
</tr>
<tr>
<td style='color:#FFFFFF' align='center' id='i19' onclick='f("i19");' class='big'>S</td>
<td style='color:#FFFFFF' align='center' id='i20' onclick='f("i20");' class='big'>T</td>
<td style='color:#FFFFFF' align='center' id='i21' onclick='f("i21");' class='big'>U</td>
<td style='color:#FFFFFF' align='center' id='i22' onclick='f("i22");' class='big'>V</td>
<td style='color:#FFFFFF' align='center' id='i23' onclick='f("i23");' class='big'>W</td>
<td style='color:#FFFFFF' align='center' id='i24' onclick='f("i24");' class='big'>X</td>
<td style='color:#FFFFFF' align='center' id='i25' onclick='f("i25");' class='big'>Y</td>
<td style='color:#FFFFFF' align='center' id='i26' onclick='f("i26");' class='big'>Z</td>
<td style='color:#FFFFFF' align='center'></td>
<td></td>
<td style='color:#FFFFFF' align='center' bgcolor='red'>Space</td>
<td></td>
</tr>
</table>


</td>
</tr>

</table>
</body>
</html>