/* ©2011 Didier Berck */

var SiteNav = Class.create({
						  
	initialize: function() {
		
		var isIE7 = false;
		var isIE = navigator.userAgent.match(/MSIE\s(\d)+/);
		if(isIE) {
			var version = parseFloat(navigator.appVersion.split('MSIE')[1]);
			if(7 >= version) {
				isIE7 = true;
			}
		}
	
		var c = 0;
		$$('#nav li').each(function(elt) {
			var img = elt.down('img');
			if(img) {
				if(!img.src.include('-over')) {
					elt.setStyle({
						backgroundImage: 'url(' + img.src.sub(/-over/, '') + ')',
						backgroundRepeat: 'no-repeat',
						width: img.width + 'px',
						overflow: 'hidden',
						position: 'relative'
					});
					if(isIE) {
						elt.down('a').setStyle({
							width: img.width + 'px',
							height: img.height + 'px',
							display: 'block',
							marginBottom: '2px'
						});
					}
					img.setStyle({
						position: 'relative',
						left: '-' + img.width + 'px'
					});
					img.src = img.src.sub(/\.png/, '-over.png');
					img.writeAttribute('id', 'img' + c);
					Event.observe(elt.down('a'), 'mouseover', this.onRollOver.bindAsMouseEnter(this));
					Event.observe(elt.down('a'), 'mouseout', this.onRollOut.bindAsMouseLeave(this));
				}
				c++;
				if(isIE7) {
					if(elt.previous() && !elt.previous().down('a').hasClassName('active')) {
						elt.setStyle({
							marginTop: '-7px'
						});
					}
				}
			}
		}, this);
		if(isIE7) {
			var elt = $('nav').down('a.active').up('li');
			if(elt.previous()) {
				elt.setStyle({
					marginTop: '-9px'
				});
			}
		}
	},
	
	onRollOver: function(evt) {
		var img = Event.findElement(evt, 'a').down('img');
		this.clearQueue('qN' + img.readAttribute('id'));
		new Effect.Move(img, {
			duration: 0.2,
			x: 0, 
			mode: 'absolute',
			queue: {
				position: 'end',
				scope: 'qN' + img.readAttribute('id')
			}
		});
	},
	
	onRollOut: function(evt) {
		var img = Event.findElement(evt, 'a').down('img');
		this.clearQueue('qN' + img.readAttribute('id'));
		new Effect.Move(img, {
			duration: 0.2,
			x: '-' + img.width, 
			mode: 'absolute',
			queue: {
				position: 'end',
				scope: 'qN' + img.readAttribute('id')
			}
		});
	},
	
	clearQueue: function(queueName) {
		var queue = Effect.Queues.get(queueName);
		queue.each(function(effect) {
			effect.cancel();
		});
	}
});

var SimpleRolls = Class.create({
						  
	initialize: function() {
		$$('#nav li').each(function(elt) {
			var img = elt.down('img');
			if(img) {
				if(!img.src.include('-over')) {
					Event.observe(elt.down('a'), 'mouseover', this.onRollOver.bindAsMouseEnter(this));
					Event.observe(elt.down('a'), 'mouseout', this.onRollOut.bindAsMouseLeave(this));
				}
			}
		}, this);
	},
	
	onRollOver: function(evt) {
		var img = Event.findElement(evt, 'a').down('img');
		img.src = img.src.sub(/\.png/, '-over.png');
	},
	
	onRollOut: function(evt) {
		var img = Event.findElement(evt, 'a').down('img');
		img.src = img.src.sub(/-over/, '');
	}
});

Event.observe(document, 'dom:loaded', function(evt) {
	var sr = new SimpleRolls();
});