////// Ajustable varibles//////
// szNormal = standard width of standard blocks/list items. Must be same as width in #anim li delaration in styles.css 
// szSmall = minimum with of a block in the animation
// szFull = maximum with of a block in the animation
// You can play around with these values until the resize is correct


////// Transitions /////////
//duration = duration of effect
//transition = Type of transition -  For more on Fx.Transitions in mootools visit: http://demos111.mootools.net/Fx.Transitions

///////////////////////// Row 1 ///////////////////////////////////

window.addEvent('domready', function(){
var szNormal = 226, szSmall  = 109, szFull   = 459; // You can change these values
var kwicks = $$("#kwicks1 li");
			var fx = new Fx.Elements(kwicks, {wait: false, duration: 600, transition: Fx.Transitions.Sine.easeInOut}); // You can change these values
			kwicks.each(function(kwick, i) {
				kwick.addEvent("mouseenter", function(event) {
					var o = {};
					o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
					kwicks.each(function(other, j) {
						if(i != j) {
							var w = other.getStyle("width").toInt();
							if(w != szSmall) o[j] = {width: [w, szSmall]};
						}
					});
					fx.start(o);
				});
			});			
			$("kwicks1").addEvent("mouseleave", function(event) {
				var o = {};
				kwicks.each(function(kwick, i) {
					o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
				});
				fx.start(o);
			})
		}); 

///////////////////////// Row 2 ///////////////////////////////////

window.addEvent('domready', function(){
	var szNormal = 226, szSmall  = 109, szFull   = 459; // You can change these values
			var kwicks = $$("#kwicks2 li");
			var fx = new Fx.Elements(kwicks, {wait: false, duration: 600, transition: Fx.Transitions.Sine.easeInOut}); // You can change these values
			kwicks.each(function(kwick, i) {
				kwick.addEvent("mouseenter", function(event) {
					var o = {};
					o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
					kwicks.each(function(other, j) {
						if(i != j) {
							var w = other.getStyle("width").toInt();
							if(w != szSmall) o[j] = {width: [w, szSmall]};
						}
					});
					fx.start(o);
				});
			});			
			$("kwicks2").addEvent("mouseleave", function(event) {
				var o = {};
				kwicks.each(function(kwick, i) {
					o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
				});
				fx.start(o);
			})
		}); 

///////////////////////// Row 3 ///////////////////////////////////

window.addEvent('domready', function(){
var szNormal = 226, szSmall  = 109, szFull   = 459; // You can change these values
			var kwicks = $$("#kwicks3 li");
			var fx = new Fx.Elements(kwicks, {wait: false, duration: 600, transition:Fx.Transitions.Sine.easeInOut}); // You can change these values
			kwicks.each(function(kwick, i) {
				kwick.addEvent("mouseenter", function(event) {
					var o = {};
					o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
					kwicks.each(function(other, j) {
						if(i != j) {
							var w = other.getStyle("width").toInt();
							if(w != szSmall) o[j] = {width: [w, szSmall]};
						}
					});
					fx.start(o);
				});
			});
			$("kwicks3").addEvent("mouseleave", function(event) {
				var o = {};
				kwicks.each(function(kwick, i) {
					o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
				});
				fx.start(o);
			})
		}); 



///////////////////////// Row 4 ///////////////////////////////////

window.addEvent('domready', function(){
	var szNormal = 226, szSmall  = 109, szFull   = 459; // You can change these values
			var kwicks = $$("#kwicks4 li");
			var fx = new Fx.Elements(kwicks, {wait: false, duration: 600, transition:Fx.Transitions.Sine.easeInOut}); // You can change these values
			kwicks.each(function(kwick, i) {
				kwick.addEvent("mouseenter", function(event) {
					var o = {};
					o[i] = {width: [kwick.getStyle("width").toInt(), szFull]}
					kwicks.each(function(other, j) {
						if(i != j) {
							var w = other.getStyle("width").toInt();
							if(w != szSmall) o[j] = {width: [w, szSmall]};
						}
					});
					fx.start(o);
				});
			});
			$("kwicks4").addEvent("mouseleave", function(event) {
				var o = {};
				kwicks.each(function(kwick, i) {
					o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
				});
				fx.start(o);
			})
});