window.addEvent('domready', function () {
		
	// catch all .pane
	var pane_items = $$('div.pane');
	
	// check if we have found pane items
	if(pane_items.length > 0) {
	
		// wrap all sliders by div and hide it while it is processed
		var sliders		= new Element('ul', {'id': 'slider-wrapper', 'style': 'display:none'}).injectBefore( pane_items[0] );

		// create buttons element 
		var buttons		= new Element('ul', {'id': 'slider-buttons'}).injectInside( sliders );
		
		// create panes div after buttons and hide it
		var panes		= new Element('div', {'id': 'slider-panes'}).injectAfter( buttons );
		
		// create panes inner div
		var panes_inner	= new Element('div', {'id': 'slider-inner'}).injectInside( panes );
		
		// move all panes to the panes div
		panes_inner.adopt( pane_items );
		
		// fine we have built the base structure for sliding tabs
		// now move all pane elements inside the panes inner div
		pane_items.each(function(pane, idx){
		
			// select first element inside - it must be h3
			var pane_first = pane.getFirst();
			
			// set slider button text
			if( pane_first.getTag() == 'h3' ) {
				var button_text = pane_first.getText();
				
				// remove h3 from DOM
				pane_first.remove();
				
			} else {
				var button_text = 'Button '+(idx+1);
			}
			
			// inject button to buttons ul
			new Element('li', {'title': button_text}).setText(button_text).injectInside( buttons );
			
			pane.setStyle('overflow:hidden');
		
		});
		
		// remove the "display: none" style
		sliders.removeProperty('style');
		
		var myTabs = new SlidingTabs('slider-buttons', 'slider-panes');
	
		// this sets up the previous/next buttons, if you want them
		//$('previous').addEvent('click', myTabs.previous.bind(myTabs));
		//$('next').addEvent('click', myTabs.next.bind(myTabs));
		
		// this sets it up to work even if it's width isn't a set amount of pixels
		/*
		window.addEvent('resize', function() {
			myTabs.recalcWidths.bind(myTabs);
		});
		*/
	
	}

});