var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{
			string: navigator.vendor,
			subString: "Apple",
			identity: "Safari"
		},
		{
			string: navigator.userAgent,
			subString: "MSIE",
			identity: "Explorer",
			versionSearch: "MSIE"
		}
	]			
};

BrowserDetect.init();

window.addEvent('domready', function(){
		
	var containers = $$('span.container');

	//for mootools 1.2
	/*
	if (BrowserDetect.browser != "Explorer" || BrowserDetect.version >= 6)
	{
		containers.each(function(item, i){
			item.addClass("containerJS");
			item.setStyles({'opacity':0.25});

			item.set('morph', {duration: 500, transition: Fx.Transitions.Quad.easeOut});
				
			item.addEvents({
				mouseover: function(event){
					// This morphes the opacity and backgroundColor
					this.morph({'opacity':1});
				},
				
				mouseleave: function(event){
					// Morphes back to the original style
					this.morph({'opacity':0.25});
				}
			});

		});
	}*/

	//for mootools 1.11 & 1.2
	var fx = new Fx.Elements(containers, {wait: false, duration: 500, transition: Fx.Transitions.Quad.easeOut});

	if ((BrowserDetect.browser != "Explorer" || BrowserDetect.version >= 6) &&
   		(BrowserDetect.browser != "Safari" || BrowserDetect.version >= 500))
	{
		containers.each(function(item, i){
			item.addClass("containerJS");
			item.setStyles({'opacity':0.25});

			item.addEvents({
				mouseover: function(){
					fx.stop();
					var obj = {};
					obj[i] = {
						'opacity': [item.getStyle('opacity'), 1]
					};
					containers.each(function(other, j){
						if (other != item){
							var w = other.getStyle('opacity');
							if (w != 0.25) obj[j] = {'opacity': [w, 0.25]};
						}
					});
					fx.start(obj);
				},
				
				mouseleave: function(){
					fx.stop();
					var obj = {};
					containers.each(function(other, j){
							var w = other.getStyle('opacity');
							if (w != 0.25) obj[j] = {'opacity': [w, 0.25]};
					});
					fx.start(obj);
				}
			});
			
		});
	}
});