// setup product nav
var initProductNav = function(){

	// animation steps
	var nextAnim = function(el){

		// switch statement to run the next step of the animation
		switch (el.animStep) {
			case 0:
				if (el.animDir == 1) {
					el.animation.height.start({
						height: 0,
						paddingTop: 0,
						marginTop: 0
					});
				} else {
					el.animation.slide.start({
						left: el.defaults[1]
					});
				}
		}
		
		if (el.animDir == 1) {
			el.animStep--;
		} else {
			el.animStep++;
		}
	}
	
	
	// get the quicknav items
	var prodNavClickers	= $$('.prodNavClicker');
	var prodNavAreas	= $$('.prodRange');

	var initial = -1;

	// setup click events
	prodNavClickers.each(function(el, i){
		el.addEvent('click', function(){
			showProdNavRange(i);
			return false;
		});
	});

	// find initial category
	prodNavAreas.each(function(el, i){
		el.getElements('a').each(function(el){
			if (el.hasClass('over')) initial = i
		});
	});
	
	// setup the animation on the content elements
	prodNavAreas.each(function(el) {
		el.defaults = new Array;
		el.defaults[0] = el.scrollHeight;
		el.defaults[1] = el.getStyle('left').toInt();
		el.defaults[2] = el.getStyle('paddingTop').toInt();
		el.defaults[3] = el.getStyle('marginTop').toInt();
		el.animation = {
			height:	el.effects({
				duration: 200,
				wait: false,
				onComplete: function(el){
					nextAnim(el);
				}
			}),
			slide: el.effects({
				duration: 600,
				wait: false,
				onComplete: function(el){
					nextAnim(el);
				}
			})
		};
	});


	// display the required item
	var showProdNavRange = function(index, initial){
	
		// recurse through the items
		prodNavAreas.each(function(el, i) {
			if (i == index && el.animDir == 1) {
			
				// we need to show the item
				el.animStep = 0;
				el.animDir  = 0;
				el.animation.height.start({
					height: el.defaults[0],
					paddingTop: el.defaults[2],
					marginTop: el.defaults[3]
				});
			} else {
			
				// we need to hide the item
				el.animStep = 0;
				el.animDir = 1;
				
				if (i != initial) {				
					if (index != -1) {
						// animate the item out
						el.animation.slide.start({
							left: -250
						});
					} else {
						// immediately hide the item
						el.setStyles({
							left: -250,
							height: 0,
							paddingTop: 0,
							marginTop: 0
						});
					}
				}
			}
		});

	}

	// hide all the subnavs
	// -1 index immediately hides rather than animating out
	
	showProdNavRange(-1, initial);
}


// and initialise the quick nav on page load

window.addEvent('domready', initProductNav);