window.addEvent('domready', function(){
	// First Example
	var el = $('myElement'),
		estimate = $('estimate-price');
		estimateDesc = $('estimate-desc');
		estimatecost = $('estimatecost');
	
	// Create the new slider instance
	new Slider(el, el.getElement('.knob'), {
		steps: 12,	// There are 12 steps
		range: [0],	// Minimum value is 8
		onChange: function(value){
			//Turn step value into cost value depending on step
			switch(value)
			{
			case 0:
			  value=150;
			  desc = '1 page website';
			  break;
			case 1:
			  value=250;
			  desc = '2 page website';
			  break;
			case 2:
			  value=350;
			  desc = '3 page website';
			  break;
			case 3:
			  value=450;
			  desc = '4 page website';
			  break;
			case 4:
			  value=500;
			  desc = '5 page website with <a href="database-functionality.php" target="_blank">database functionality</a> and simple <a href="payment-gateway.php" target="_blank">payment gateway</a>';
			  break;
			case 5:
			  value=600;
			  desc = '6 page website with <a href="database-functionality.php" target="_blank">database functionality</a> and basic E-Commerce';
			  break;
			case 6:
			  value=700;
			  desc = '7 page website with <a href="database-functionality.php" target="_blank">database functionality</a> and basic E-Commerce';
			  break;
			case 7:
			  value=800;
			  desc = '8 page website with <a href="database-functionality.php" target="_blank">database functionality</a> and basic E-Commerce';
			  break;
			case 8:
			  value=900;
			  desc = '9 page website with <a href="database-functionality.php" target="_blank">database functionality</a> and full E-Commerce';
			  break;
			case 9:
			  value=1000;
			  desc = '10 page website with <a href="database-functionality.php" target="_blank">database functionality</a> and full E-Commerce';
			  break;
			case 10:
			  value=1200;
			  desc = '12 page website with <a href="database-functionality.php" target="_blank" >database functionality</a> and E-Commerce payments system';
			  break;
			case 11:
			  value=1400;
			  desc = '14 page <strong>dynamic</strong> website with <a href="database-functionality.php" target="_blank" >database functionality</a> and fully integrated Ecommerce';
			  break;
			  
			case 12:
			  value= 1400;
			  desc = 'Please get in touch for bespoke requirements';
			  break;
			default:
			  value=800;
			  desc = '1 page website with extra page for contact form:';
			}
			// Everytime the value changes, we change the value of elements
			estimateDesc.innerHTML = desc;
			estimate.innerHTML = 'For &pound;' + value + ' you get:';
			estimatecost.set('value', value);
		}
	}).set(estimate.innerHTML = '&pound;' + value);
	

	// Second Example
	var el = $('setColor'), color = [0, 0, 0];
	
	var updateColor = function(){
		// Sets the color of the output text and its text to the current color
		el.setStyle('color', color).set('text', color.rgbToHex());
	};
	
	// We call that function to initially set the color output
	updateColor();
	
	$$('div.slider.advanced').each(function(el, i){
		var slider = new Slider(el, el.getElement('.knob'), {
			steps: 255,  // Steps from 0 to 255
			wheel: true, // Using the mousewheel is possible too
			onChange: function(){
				// Based on the Slider values set an RGB value in the color array
				color[i] = this.step;
				// and update the output to the new value
				updateColor();
			}
		}).set(0);
	});
});