var slider = new Class({
	Implements: Options,
	options:	{
		duration: 1000,
		transition: Fx.Transitions.Sine.easeInOut
	},
	initialize: function(elements, options, count)	{
		var $this = this;
		this.setOptions(options);
		var widthFx = new Fx.Elements(elements, {
			link: 'cancel',
			transition: this.options.transition,
			duration: this.options.duration
		});
		elements.getParent('ul').addClass('options'+ count);
		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);
			});
		});
	}
});

function selectHomepageOptions(num) {
	var homepageOptions;
	switch (num) {
		case 3:
			homepageOptions = {
				to:	[{
					'width': 650,
					'padding-right': 0,
					'background-color': '#11B8FE'
				}, {
					'width': 650,
					'background-color': '#11B8FE'
				}, {
					'width': 650,
					'background-color': '#11B8FE'
				}], 
				from:	[{
					'width': 160,
					'padding-right': 0,
					'background-color': '#E5E5E5'
				}, {
					'width': 160,
					'background-color': '#E5E5E5'
				}, {
					'width': 160,
					'background-color': '#E5E5E5'
				}]
			};
		break;
		case 4:
			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'
				}], 
				from:	[{
					'width': 111,
					'padding-right': 0,
					'background-color': '#E5E5E5'
				}, {
					'width': 111,
					'background-color': '#E5E5E5'
				}, {
					'width': 111,
					'background-color': '#E5E5E5'
				}, {
					'width': 112,
					'background-color': '#E5E5E5'
				}]
			};
		break;
		case 5:
			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'
				}]
			};
		break;
		default:
		// ignore, how did we get here?
	}
	return homepageOptions;
}

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

document.addEvent('domready', function()	{

	/* SLIDAGE */
	var count = $$('#casestudies UL LI').length;
	var getSliderOptions = selectHomepageOptions(count);
	new slider($$('#casestudies UL LI'), getSliderOptions, count);	
	
	/* ADD CORNERS */
	switch (count) {
		case 3:
			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');
		break;
		case 4:
			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');
		break;
		case 5:
			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');
		break;
		default:
		// ignore, how did we get here?
	}
	
	/* 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()	{
			//alert('boo')
			$$('.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});		
		}
	});

});