//when the dom is ready...
$(document).ready(function() {
	//select all the links for the video tutorials
	$('a[rel]').click(function() {
		//creat a link to the flash files based on the clicked link's ID
		var flash_file_location = 'connect/' + $(this).attr('id') + '.swf';
		//empty the container div so we don't get multiple movies playing at once
		$('div#flash_content').html('');
		//place the flash files in #flash_content, not #overlay on the line above
		//wipes out the close button and download links
		$('div#flash_content').flash(
			{
				//the flash file location
				swf: flash_file_location,
				width: 800,
				height: 600,
				params: {
					play: true,
					loop: false,
					wmode: 'transparent',
					flashvars: {
						quality: 'high',
						name: 'AARConnectFlash',
						align: 'middle',
						allowScriptAccess: 'sameDomain',
						type: 'application/x-shockwave-flash',
						pluginspage: 'http://www.macromedia.com/go/getflashplayer'
					}
				}
			}
		);
		//display the download link
		$('<p class="download-link"><a id="download-url" href="connect/' + $(this).attr('id') + '.pdf" target="_blank">Download a printable version</a></p>').appendTo('div#flash_content');
	});
	//open a modal overlay when a user clicks on a video tutorial link
	$('a[rel]').overlay( { expose: { color: '#fff', loadSpeed: 200, opacity: 0.9 }, closeOnClick: true } );
});