window.addEvent('domready', function() {
	
	//create our Accordion instance
	var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', {
		opacity: false,
		onActive: function(toggler, element){
			toggler.setStyle('color', '#BF0B3B');
		},
		onBackground: function(toggler, element){
			toggler.setStyle('color', '#840729');
		}
	});

});

window.addEvent('domready',function() {
	new SmoothScroll({duration:900});
	/* go to top */
	var go = $('gototop');
	go.set('opacity','0').setStyle('display','block');
	window.addEvent('scroll',function(e) {
		if(Browser.Engine.trident4) {
			go.setStyles({
				'position': 'absolute',
				'bottom': window.getPosition().y + 10,
				'width': 100
			});
		}
		go.fade((window.getScroll().y > 300) ? 'in' : 'out')
	});
});


window.addEvent('domready', function() {
	var status = {
		'true': 'open',
		'false': 'close'
	};
	
	//-vertical

	var myVerticalSlide = new Fx.Slide('vertical_slide').hide();

	$('v_toggle').addEvent('click', function(e){
		e.stop();
		myVerticalSlide.toggle();
	});

	// When Vertical Slide ends its transition, we check for its status
	// note that complete will not affect 'hide' and 'show' methods
	myVerticalSlide.addEvent('complete', function() {
		$('vertical_status').set('html', status[myVerticalSlide.open]);
	});
});


window.addEvent('domready', function(){
	// First Example
	var el = $('myElement'),
		font = $('fontSize');
	
	// Create the new slider instance
	new Slider(el, el.getElement('.knob'), {
		steps: 80,	// There are 80 steps
		range: [8],	// Minimum value is 8
		onChange: function(value){
			// Everytime the value changes, we change the font of an element
			font.setStyle('font-size', value);
		}
	}).set(font.getStyle('font-size').toInt());
	

	// 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);
	});
});