// JavaScript Document
window.addEvent('domready', function(){

var szNormal = 80, szSmall  = 63, szFull   = 219, contfull  = 737, contsm  = 700;
 
var kwicks = $$("#kwicks .kwick");


var fx = new Fx.Elements(kwicks, {wait: false, duration: 300 });



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]};
				kwick.setStyle("overflow","visible");
			}
		});
		fx.start(o);
	});
});
 
$("kwicks").addEvent("mouseleave", function(event) {
	var o = {};
	kwicks.each(function(kwick, i) {
		o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
			kwick.setStyle("overflow","hidden");
	
	});
	fx.start(o);
})
 



//transition the changing content
	//our container
	var conti = $E("div#kwicks_container");
	//our effect
	var myFx = new Fx.Style(conti, 'width', { duration: 300, wait:false});
	//for each a tag with the class industryBtn do the following
	conti.addEvents({
	//fadd a click event
	'mouseenter': function(e){
		myFx.start(737)
	},
	'mouseleave': function(e){
		myFx.start(700)
	}
	
	});



});