var Site = {
 
	start: function(){
		if ($('productnavigation')){
			Site.appearText();
		}
	},
 
	appearText: function(){
		var timer = 0;
		var sideblocks = $$('#productnavigation li');
 
		var slidefxs = [];
		var colorfxs = [];
 
		sideblocks.each(function(el, i){
			timer += 150;
			slidefxs[i] = new Fx.Style(el, 'margin-left', {
				duration: 0,
				transition: Fx.Transitions.backOut,
				wait: false,
				onComplete: Site.createOver.pass([el, i])
			});
			slidefxs[i].start.delay(timer, slidefxs[i], 0);
 
		}, this);
	},
 
	createOver: function(el, i){
		var first = el.getFirst();
		if (!first || first.getTag() != 'a') return;
		var overfxs = new Fx.Styles(first, {'duration': 200, 'wait': false});
		var tocolor, fromcolor;
		if (first.hasClass('big')){
			tocolor = '#299DCA';
			fromcolor = '#666666';
		} else {
			tocolor = '#299DCA';
			fromcolor = '#666666';
		}
		el.mouseouted = true;
		el.addEvent('mouseenter', function(e){
			var margin = el.getStyle('margin-left').toInt(); //Stop a clicked link hovering another 10px out 
			overfxs.start({
				'color': tocolor,
				'margin-left': (margin==10) ? 0 : 10 //second part of additional hover preventing
			});
		});
		el.addEvent('mouseleave', function(e){
			if( el.getProperty('id') != 'active' ) { //test the link, see if we clicked it
				overfxs.start({
					'color': fromcolor,
					'margin-left': 0
				});
			}
		});
		el.addEvent('click', function(e) {
			if( last != undefined ) { 
				last.setStyles({'color': fromcolor, 'margin-left': 0}); //remove styling from a when a new link is clicked
				lastli.removeProperty('id'); //remove the mouseout protection on this li
			}
			first.setStyles({'color': tocolor, 'margin-left': 10}); //set the link styling
			el.setProperty('id','active'); //Using this to stop the mouseout event firing and removing the link colour
			lastli = el; //stores the clicked li info
			last = first; //stored the clicked a info
		});
	}	
};
 
var last, lastli; //Need these variables now
 
window.addEvent('domready', Site.start);