var slider = new Class({
	Implements: Options,
	options:	{
		duration: 1000,
		transition: Fx.Transitions.Sine.easeInOut
	},
	initialize: function(elements, options)	{
		var $this = this;
		this.setOptions(options);
		var widthFx = new Fx.Elements(elements, {
			link: 'cancel',
			transition: this.options.transition,
			duration: this.options.duration
		});
		elements.each(function(el, i){
			if(i != 0)
				el.getElements('.col').set('opacity', 0);
			el.addEvent('mouseenter', function(){
				var $el = this;
				var obj = {};
				obj[i] = $this.options.to[i];
				elements.each(function(other, j){
					if (other != $el)	{
						obj[j] = $this.options.from[j];
						other.getElement('.col').fade(0);
					}
				});
				el.getElement('.col').fade(1);
				widthFx.start(obj);
			});
		});
	}
});

var homepageOptions = {
	to:	[{
		'width': 650,
		'padding-right': 0,
		'background-color': '#11B8FE'
	}, {
		'width': 650,
		'background-color': '#11B8FE'
	}, {
		'width': 650,
		'background-color': '#11B8FE'
	}, {
		'width': 650,
		'background-color': '#11B8FE'
	}, {
		'width': 650,
		'background-color': '#11B8FE'
	}], 
	from:	[{
		'width': 87,
		'padding-right': 0,
		'background-color': '#E5E5E5'
	}, {
		'width': 87,
		'background-color': '#E5E5E5'
	}, {
		'width': 87,
		'background-color': '#E5E5E5'
	}, {
		'width': 87,
		'background-color': '#E5E5E5'
	}, {
		'width': 88,
		'background-color': '#E5E5E5'
	}]
};

var pathToImages = '/css/graphics/slider/';

document.addEvent('domready', function()	{
	
	/* SLIDAGE */
	new slider($$('#casestudies UL LI'), homepageOptions);	
	
	/* CORNER INSERTAGE */
	new Element('IMG', {
		'src': pathToImages + 'corner_E5E5E5.png',
		'class': 'corner'
	}).inject($$('.two')[0], 'top');
	new Element('IMG', {
		'src': pathToImages + 'corner_blue.png',
		'class': 'corner'
	}).inject($$('.three')[0], 'top');
	new Element('IMG', {
		'src': pathToImages + 'corner_blue.png',
		'class': 'corner'
	}).inject($$('.four')[0], 'top');
	new Element('IMG', {
		'src': pathToImages + 'corner_blue.png',
		'class': 'corner'
	}).inject($$('.five')[0], 'top');
	
	/* CORNER MORPHAGE */
	$$('.corner').set('morph', {
		link: 'cancel',
		transition: Fx.Transitions.Sine.easeInOut,
		duration: 1000
	}).setStyles({
		'opacity': 0,
		'visibility': 'visible'
	});

	$$('#casestudies .one').addEvent('mouseenter', function()	{
		$$('.corner').each(function(el)	{
			el.morph({'opacity': 0});		
		});
	});
	
	$$('#casestudies .two').addEvents({
		'mouseenter': function()	{
			$$('.two .corner').morph({'opacity': 1});		
			$$('.three .corner').morph({'opacity': 1});		
			$$('.four .corner').morph({'opacity': 0});		
			$$('.five .corner').morph({'opacity': 0});		
		}
	});
	
	$$('#casestudies .three').addEvents({
		'mouseenter': function()	{
			$$('.two .corner').morph({'opacity': 1});		
			$$('.three .corner').morph({'opacity': 0});		
			$$('.four .corner').morph({'opacity': 1});		
			$$('.five .corner').morph({'opacity': 0});		
		}
	});
	
	$$('#casestudies .four').addEvents({
		'mouseenter': function()	{
			$$('.two .corner').morph({'opacity': 1});		
			$$('.three .corner').morph({'opacity': 0});		
			$$('.four .corner').morph({'opacity': 0});		
			$$('.five .corner').morph({'opacity': 1});		
		}
	});
	
	$$('#casestudies .five').addEvents({
		'mouseenter': function()	{
			$$('.two .corner').morph({'opacity': 1});		
			$$('.three .corner').morph({'opacity': 0});		
			$$('.four .corner').morph({'opacity': 0});		
			$$('.five .corner').morph({'opacity': 0});		
		}
	});
	
});