window.addEvent("domready", function(){
$$('ul.slideshow').each(function(el) {
		new Blackbox(el, { bgcolor: 'white', height: 375 });
	});
$$('ul.slideshow.controls').each(function(el) {
		var control = new Element('div', {
			'class': 'stop',
			styles: {
				background: 'url(/common/images/slideshowcontrols.png) bottom',
				cursor: 'pointer',
				opacity: 0,
				position: 'absolute',
				margin: '-16px 0 0 -16px',
				top: '50%',
				left: '50%',
				width: 33,
				height: 33,
				zIndex: 3
			},
			events: {
				click: function() {
					if (control.hasClass('stop')) {
						control
							.setStyle('background-position', 'top')
							.removeClass('stop')
							.retrieve('slideshow')
								.get('blackbox').stop()
						;
					} else {
						control
							.setStyle('background-position', 'bottom')
							.addClass('stop')
							.retrieve('slideshow')
								.get('blackbox').start()
						;
					}
				}
			}
		}).store('slideshow', el).injectInside(el);
		
		el.addEvents({
			mouseover: function() {
				control.fade(.6);
			},
			mouseout: function() {
				control.fade('out');
			}
		});
	});

});