function switchHeader(event) {
	Event.stop(event);
	var regexTerm = /header_switcher_(\d+)/;
	var regexResult = regexTerm.exec(this.readAttribute('id'));
	if ((regexResult != null) && (regexResult.length > 1)) {
		// switch header icons
		$$('#header_image .header_switcher').each(function (element) {
			if (element.readAttribute('id') == 'header_switcher_'+regexResult[1]) {
				element.addClassName('active');
			} else {
				element.removeClassName('active');
			}
		});
		
		var imgOld = $('header_image').down('img');
		var imgSrc = templatePath+'images/header_image_'+regexResult[1]+'.jpg';
		if (!Prototype.Browser.IE) {
			// replace the image with a blend effect
			var img = new Element("img", {src: imgSrc, width: '880', height: '362', alt: ''});
			img.setOpacity(0);
			img.observe("load", function() {
				imgOld.insert({before: this});
				new Effect.Opacity(imgOld, { duration: 1.5, from: 1.0, to: 0.0, afterFinish: function() {
					imgOld.remove();
				}});
				new Effect.Opacity(this, { duration: 1.5, from: 0.0, to: 1.0});
			});
		} else {
			// just replace the image
			// for some reason IE can't handle more than one or two blend effects
			imgOld.writeAttribute("src", imgSrc);
		}
	}
}

document.observe("dom:loaded", function() {
	$$('#header_image .header_switcher').each(function (element) {
		Event.observe(element, 'click', switchHeader);
	});
});