function InitSlideShowViewer(id, width, height, url){
	// Embeded HTML For slideshow - escaped - see comment at bottom of file
	var html = unescape('%3Ctable%20class%3D%22slide_show_viewer%22%20cellspacing%3D%220%22%20cellpadding%3D%220%22%20border%3D%220%22%3E%0A%09%09%09%3Ctr%3E%0A%09%09%09%09%3Ctd%3E%0A%09%09%09%09%09%3Cdiv%20class%3D%22slideshowobject%22%3E%3C/div%3E%0A%09%09%09%09%09%3Ctable%20class%3D%22controlbar%22%20cellspacing%3D%220%22%20cellpadding%3D%220%22%20border%3D%220%22%3E%0A%09%09%09%09%09%09%3Ctr%3E%0A%09%09%09%09%09%09%09%3Ctd%20class%3D%22left_side%22%3E%3C/td%3E%0A%09%09%09%09%09%09%09%3Ctd%20class%3D%22bar_content%22%3E%0A%09%09%09%09%09%09%09%09%3Cdiv%20class%3D%22button_area%22%3E%0A%09%09%09%09%09%09%09%0A%09%09%09%09%09%09%09%09%3C/div%3E%0A%09%09%09%09%09%09%09%09%3Cdiv%20class%3D%22slide_show_viewer_buttonTemplate%22%20style%3D%22display%3Anone%22%3E%0A%09%09%09%09%09%09%09%09%09%3Ca%20class%3D%22button_style%22%20href%3D%22javascript%3Avoid%280%29%3B%22%3E1%3C/a%3E%0A%09%09%09%09%09%09%09%09%3C/div%3E%0A%09%09%09%09%09%09%09%09%3Cdiv%20class%3D%22slide_show_viewer_spacerTemplate%22%20style%3D%22display%3Anone%22%3E%0A%09%09%09%09%09%09%09%09%09%3Cdiv%20class%3D%22first_spacer%22%3E%3C/div%3E%0A%09%09%09%09%09%09%09%09%3C/div%3E%0A%09%09%09%09%09%09%09%3C/td%3E%0A%09%09%09%09%09%09%09%3Ctd%20class%3D%22right_side%22%3E%3Ca%20class%3D%22play_pause%22%20href%3D%22javascript%3Avoid%280%29%3B%22%3E%26nbsp%3B%3C/a%3E%3C/td%3E%0A%09%09%09%09%09%09%3C/tr%3E%0A%09%09%09%09%09%3C/table%3E%0A%09%09%09%09%3C/td%3E%0A%09%09%09%3C/tr%3E%0A%09%09%3C/table%3E');

	// listen for dom loaded event
	Event.observe(document, 'dom:loaded', function(event){
		
		// replace element of id with embeded html
		var ssmain = $(id);
		var e = new Element('div');
		var t = e.insert(html).firstChild;
		t.id = id;
		ssmain.replace(t);
		ssmain = $(id);
		
		// identify flash object 
		var flashobj = ssmain.down('.slideshowobject');
		var flashobjId = flashobj.identify();
		
		// detect and replace flash obj with object
		swfobject.embedSWF(
			"slideshowviewer/FlashSlideShow.swf",
			flashobjId,
			width,
			height,
			"9.0.0",
			"slideshowviewer/expressInstall.swf",
			{
				dataurl: url
			},
			{
				wmode: 'transparent',
				allowScriptAccess: 'sameDomain'
			},
			{
				'type': 'application/x-shockwave-flash',
				'name': flashobjId,
				'class': 'slideshowobject'
			}
		);
		
		// listen for flash  xml loaded event
		Event.observe(document, 'SlideShowViewer:onXMLLoaded', function(event){
			var ssmain = $(id);
			var ssv = ssmain.down('.slideshowobject');
			var ssvId = ssv.identify();
			
			// init play pause button 
			var playBtn = ssmain.down('.play_pause');
			playBtn.observe('click', function(event){
				if(playBtn.hasClassName('stopped')){
					ssv.playme();
				}else{
					ssv.stopme();
				}
			});
			
			Event.observe(document, 'SlideShowViewer:play', function(event){
				playBtn.removeClassName('stopped');
			});
			Event.observe(document, 'SlideShowViewer:stop', function(event){
				playBtn.addClassName('stopped');
			});
			
			
			// set up buttons based on number of images
			var btnContainer = ssmain.down('.controlbar .bar_content .button_area');
			var btnTpl =  ssmain.down('.controlbar .bar_content .slide_show_viewer_buttonTemplate').innerHTML;
			var spTpl =  ssmain.down('.controlbar .bar_content .slide_show_viewer_spacerTemplate').innerHTML;
			
			btnContainer.style.width = btnContainer.parentNode.getWidth() + 'px';
			btnContainer.insert(spTpl);
			
			var numImages = ssv.getNumberOfImages();
			for(var i = 0; i < numImages; i++){
				var btn = btnContainer.insert(btnTpl).down('a', i);
				btn.innerHTML = i+1;
				var link = "javascript:$('" + ssvId + "').setSlide(" + i + ");";
		
				btn.href= link;
				btn.observe('mouseover', function(event){
					event.findElement('.button_style').addClassName('over');
				});
				btn.observe('mouseout', function(event){
					event.findElement('.button_style').removeClassName('over');
				});
			}

		});
		// listen for image change and update states
		Event.observe(document, 'SlideShowViewer:change', function(event){
			var ssmain = $(id);
			var ssv = ssmain.down('.slideshowobject');
			var btnContainer = ssmain.down('.controlbar .bar_content .button_area');
			
			var i = 0;
			var b;
			while(b = btnContainer.down('.button_style', i++))
				b.removeClassName('selected');
				
			var currentId = ssv.getCurrentImageIndex();
			var btn = btnContainer.down('.button_style', currentId);
			btn.addClassName('selected');
		});
		
		
		
		
	});

}


/*
<table class="slide_show_viewer" cellspacing="0" cellpadding="0" border="0">
			<tr>
				<td>
					<div class="slideshowobject"></div>
					<table class="controlbar" cellspacing="0" cellpadding="0" border="0">
						<tr>
							<td class="left_side"></td>
							<td class="bar_content">
								<div class="button_area">
							
								</div>
								<div class="slide_show_viewer_buttonTemplate" style="display:none">
									<a class="button_style" href="javascript:void(0);">1</a>
								</div>
								<div class="slide_show_viewer_spacerTemplate" style="display:none">
									<div class="first_spacer"></div>
								</div>
							</td>
							<td class="right_side"><a class="play_pause" href="javascript:void(0);">&nbsp;</a></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
*/