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


	//First Example
	var el = $('myElement'),
		color = el.getStyle('backgroundColor');

	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement').set('opacity', 1).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				'background-color': '#b9cee6'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 1,
				backgroundColor: color
			});
		}
	});

	//-vertical

	var myVerticalSlide2 = new Fx.Slide('vertical_slide2').hide();


	$('v_toggle2').addEvent('click', function(e){
		e.stop();
		myVerticalSlide2.toggle();
	});


	//First Example
	var el = $('myElement2'),
		color = el.getStyle('backgroundColor');

	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement2').set('opacity', 1).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				'background-color': '#b9cee6'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 1,
				backgroundColor: color
			});
		}
	});

	//-vertical

	var myVerticalSlide3 = new Fx.Slide('vertical_slide3').hide();


	$('v_toggle3').addEvent('click', function(e){
		e.stop();
		myVerticalSlide3.toggle();
	});

	//First Example
	var el = $('myElement3'),
		color = el.getStyle('backgroundColor');

	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement3').set('opacity', 1).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				'background-color': '#b9cee6'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 1,
				backgroundColor: color
			});
		}
	});
	
		//-vertical

	var myVerticalSlide4 = new Fx.Slide('vertical_slide4').hide();


	$('v_toggle4').addEvent('click', function(e){
		e.stop();
		myVerticalSlide4.toggle();
	});

	//First Example
	var el = $('myElement4'),
		color = el.getStyle('backgroundColor');

	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement4').set('opacity', 1).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				'background-color': '#b9cee6'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 1,
				backgroundColor: color
			});
		}
	});

	//-vertical

	var myVerticalSlide5 = new Fx.Slide('vertical_slide5').hide();


	$('v_toggle5').addEvent('click', function(e){
		e.stop();
		myVerticalSlide5.toggle();
	});

	//First Example
	var el = $('myElement5'),
		color = el.getStyle('backgroundColor');

	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement5').set('opacity', 1).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				'background-color': '#b9cee6'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 1,
				backgroundColor: color
			});
		}
	});
	
		//-vertical

	var myVerticalSlide6 = new Fx.Slide('vertical_slide6').hide();


	$('v_toggle6').addEvent('click', function(e){
		e.stop();
		myVerticalSlide6.toggle();
	});

	//First Example
	var el = $('myElement6'),
		color = el.getStyle('backgroundColor');

	// We are setting the opacity of the element to 0.5 and adding two events
	$('myElement6').set('opacity', 1).addEvents({
		mouseenter: function(){
			// This morphes the opacity and backgroundColor
			this.morph({
				'opacity': 1,
				'background-color': '#b9cee6'
			});
		},
		mouseleave: function(){
			// Morphes back to the original style
			this.morph({
				opacity: 1,
				backgroundColor: color
			});
		}
	});

		//create our Accordion instance

	var myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', {

		opacity: false,

		onActive: function(toggler, element){

			toggler.setStyle('color', '#ffffff');
			toggler.setStyle('background', '#104d91 url(http://www.altexcoatings.co.nz/images/templates/top_right_white_corner.gif) top right no-repeat');
			toggler.setStyle('padding', '6px');
			toggler.setStyle('margin', '5px 0px 3px 0px');
			toggler.setStyle('border-bottom', '1px solid #FFFFFF');

		},

		onBackground: function(toggler, element){

			toggler.setStyle('color', '#999999');
			toggler.setStyle('background', '#fff');
			toggler.setStyle('padding', '2px 2px 2px 0px');
			toggler.setStyle('margin', '0px 0px 0px 0px');
			toggler.setStyle('border-bottom', '1px solid #999999');

		}

	});


});