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

	// accordion opacity
	[$('steps'),$('warranty')].each(function(el){
		el.setStyle('opacity', .8);
	});

	// initialize the wrench
	var img = new Asset.image('/assets/sites/john-eagle-collision/images/wrench.gif');
	img.setProperties({'id': 'wrench','alt': ''});
	img.injectInside(document.body);

	// wrench animation
	var wrenchFx = null;
	var moveWrench = function(el){
		var wrench = $('wrench');
		if (wrenchFx) wrenchFx.clearTimer();
		wrenchFx = new Fx.Styles(wrench, {duration: 500, transition: Fx.Transitions.quadOut}
		).custom({
			'top': el.getTop()
			,'left': el.getLeft() - wrench.getSize().size.x - 5
		});
	};

	// step and warranty accordions
	var accordion_init = function(){
		new Accordion($ES('h3', 'steps'), $ES('ul', 'steps'), {
			onActive: function(toggler, element){
				toggler.addClass('selected');
			},
			onBackground: function(toggler, element){
				toggler.removeClass('selected');
			},
			opacity: false
		});
		new Accordion($ES('h3', 'warranty'), $ES('p', 'warranty', {
			onActive: function(toggler, element){
				toggler.addClass('selected');
			},
			onBackground: function(toggler, element){
				toggler.removeClass('selected');
			},
			opacity: false
		}));
		moveWrench($E('.activelink'));
	};

	// initialize active links - the ones with the wrench ;)
	var init_links = function(){
		var links = $ES('.activelink');
		$each(links, function(link){
			link.addEvent('mouseover', function(){
				moveWrench(link);
			});
		});
		moveWrench(links[0]);
	};

	// initialize the page
	accordion_init();
	init_links();
});