window.addEvent('domready', function() {

	var imgPath = siteRoot + '/images/ba/';
	
	var bas = $$('.ba');
	
	bas.each( function(ba,index) {

	
			var imgs = new Element('div', { id: 'ba-imgs' } );
			
						var a = new Element('div', { id: 'a' } );
						
			a.setStyle('background-image', 'url(' + imgPath + ba.id + '-a.png' + ')');
			a.inject(imgs);
			
			var b = new Element('div', { id: 'b' } );
			b.setStyle('background-image', 'url(' + imgPath + ba.id + '-b.png' + ')');

			b.inject(imgs);

			
			var slider = new Element('div', { id: 'ba-slider' } );
			var handle = new Element('div', { id: 'ba-handle' } );
			handle.inject(slider);
			
			imgs.inject(ba);
			slider.inject(ba);
			
			var baSlider = new Slider(slider, handle, { steps: 100, 
					onChange: function() {
						var percent = this.step;
						var step = Math.floor(15 + 0.7*percent);
									b.setStyle('width',step+'%');
					}
					
					});
			baSlider.set(50);
			
			imgs.addEvent('click',function(evt) {
				console.log(evt);
			});
	});
	

});