window.addEvent('domready', function() {
	// JS KWICKS
	
	var szNormal = 172, szSmall  = 120, szFull   = 226;
	 
	var kwicks = $$("#kwicks .kwick");
	var fx = new Fx.Elements(kwicks, {wait: false, duration: 500, transition: Fx.Transitions.Bounce.easeOut});
	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);
		});
	});
	 
	$("kwicks").addEvent("mouseleave", function(event) {
		var o = {};
		kwicks.each(function(kwick, i) {
			o[i] = {width: [kwick.getStyle("width").toInt(), szNormal]}
		});
		fx.start(o);
	})
	
	var mySlide1 = new Fx.Slide('online');	 	 
	$('jobs').addEvent('click', function(e){
		e = new Event(e);
		mySlide2.hide();
		mySlide3.hide();
		mySlide4.hide();		
		mySlide1.toggle();
		e.stop();
	});
	 
	var mySlide2 = new Fx.Slide('digital');
	mySlide2.hide();
	$('art').addEvent('click', function(e){
		e = new Event(e);
		mySlide1.hide();
		mySlide3.hide();
		mySlide4.hide();		
		mySlide2.toggle();
		e.stop();
	});
	
		var mySlide3 = new Fx.Slide('about');
	mySlide3.hide();
	$('me').addEvent('click', function(e){
		e = new Event(e);
		mySlide1.hide();		
		mySlide2.hide();
		mySlide4.hide();		
		mySlide3.toggle();
		e.stop();
	});

		var mySlide4 = new Fx.Slide('contact');
	mySlide4.hide();
	$('us').addEvent('click', function(e){
		e = new Event(e);
		mySlide1.hide();		
		mySlide2.hide();
		mySlide3.hide();		
		mySlide4.toggle();
		e.stop();
	});

	
	// 
	var list = $$('#idList li');
	list.each(function(element) {
	 
		var fx = new Fx.Styles(element, {duration:200, wait:false});
	 
		element.addEvent('mouseenter', function(){
			fx.start({
				'margin-left': 5,
				'background-color': '#666'
			});
		});

		element.addEvent('mouseleave', function(){
			fx.start({
				'margin-left': 0,
				'background-color': '#333'
			});
		}); 
		
		
		//element.getChildren().addEvent('mouseenter', function(){
		//	fx.start({
		//		'color': '#b0ceda'
		//	});
		//});

		//element.getChildren().addEvent('mouseleave', function(){
		//	fx.start({
		//		'color': '#888'
		//	});
		//});

});


});