window.addEvent
(
 	'domready',
	function()
	{
		var minimum = 192;
		var width = 240;
		var maximum = 336;

		var items1 = $$("div.o1 div.item");

		var fx1 = new Fx.Elements(items1, {duration:300, transition:Fx.Transitions.Back.easeOut, wait:false});

		$$("div.o1").addEvent("mouseenter", function(event) { this.getElements("div.arrow").setStyle("display", "none"); } );

		items1.each
		(
		 	function(item, i)
			{
				item.addEvent
				(
				 	"mouseenter",
					function(event)
					{
						this.getElement("div.about").setStyle("display", "block");
						var o = {};
						o[i] = {width:[item.getStyle("width").toInt(), maximum]}
						items1.each(function(siblings, j) { if (i != j) { var w = siblings.getStyle("width").toInt(); if(w != minimum) o[j] = {width:[w, minimum]}; } });
						fx1.start(o);
					}
				);
			}
		);

		$$("div.o1").addEvent("mouseleave", function(event) { this.getElements("div.arrow").setStyle("display", "block"); } );

		items1.addEvent
		(
			"mouseleave",
			function(event)
			{
				this.getElement("div.about").setStyle("display", "none");
				var o = {};
				items1.each(function(item, i) { o[i] = {width:[item.getStyle("width").toInt(), width]} });
				fx1.start(o);
			}
		);

		var items2 = $$("div.o2 div.item");

		var fx2 = new Fx.Elements(items2, {duration:300, transition:Fx.Transitions.Back.easeOut, wait:false});

		$$("div.o2").addEvent("mouseenter", function(event) { this.getElements("div.arrow").setStyle("display", "none"); } );

		items2.each
		(
		 	function(item, i)
			{
				item.addEvent
				(
				 	"mouseenter",
					function(event)
					{
						this.getElement("div.about").setStyle("display", "block");
						var o = {};
						o[i] = {width:[item.getStyle("width").toInt(), maximum]}
						items2.each(function(siblings, j) { if (i != j) { var w = siblings.getStyle("width").toInt(); if(w != minimum) o[j] = {width:[w, minimum]}; } });
						fx2.start(o);
					}
				);
			}
		);

		$$("div.o2").addEvent("mouseleave", function(event) { this.getElements("div.arrow").setStyle("display", "block"); } );

		items2.addEvent
		(
			"mouseleave",
			function(event)
			{
				this.getElement("div.about").setStyle("display", "none");
				var o = {};
				items2.each(function(item, i) { o[i] = {width:[item.getStyle("width").toInt(), width]} });
				fx2.start(o);
			}
		);
	}
);