Slider = Class.create({

	speed: 0.1,

	initialize:function(element, options)
	{
		this.element      = $(element);
		this.wraps 		  = this.element.select('.introBoxPicWrap');
		this.morphElement = this.element.down('.introBoxPicsHold');
		this.picsWrap	  = this.element.down('.introBoxPicsWrap');
		this.position	  = 0;
		
		options = options || {};
		
		this.slicePattern = options.slicePattern || [3,3,3];
		
		var start = options.start || 0;
		
		this.setup();
		
		this.sections = this.element.select('.introBoxPicSectionWrap');
		
		this.observe();
	},
	
	setup:function()
	{
		this.wraps.invoke('insert', ' ');
		
		var sliceCount;
		this.slicePattern.each(function(number, index)
		{
			number = parseInt(number);
			
			if(number == NaN) this.slicePattern[index] = 3;
			sliceCount = sliceCount + number;
		});
		
		//if(sliceCount < this.wraps.length)
		
		this.slice();
		
	},
	
	slice:function()
	{
		this.sliced = [];
		if(this.slicePattern)
		{
			var truePosition = 0;
			this.slicePattern.each((function(position, index)
			{
				var wrap = [];
				
				for(var i = 0;i < position; i++)
				{
					wrap.push(this.wraps[truePosition++])
				}
				this.sliced.push( wrap );
			}).bind(this));
			this.sliced.each((function(array, index)
			{
				this.sectionWrapCurrent = this.morphElement.insert('<div class="introBoxPicSectionWrap"></div>').down('.introBoxPicSectionWrap', index);
				this.sectionWrapCurrent.addClassName('introBoxSection' + array.length);
				array.each((function(picWrap){this.sectionWrapCurrent.insert(picWrap);}).bind(this));
			}).bind(this))
		}
	},
	
	observe:function()
	{
		this.element.observe('click',(function(event)
		{
			this.clickedElement = Event.findElement(event, '.arrow');
			
			if(!this.clickedElement) return false;
			
			if(this.clickedElement.hasClassName('arrowLeft')) this.moveLeft(); else this.moveRight();
			
		}).bind(this))

	},
	
	moveRight:function()
	{
		if(!this.sections[this.position + 1]) {this.position = 1;this.moveLeft();return false;}
		if(this.morphElement.effect) this.morphElement.effect.cancel();
		this.position++;
		this.marginLeft = -this.position * this.picsWrap.getWidth();
		
		this.morphElement.effect = new Effect.Morph(this.morphElement, 
		{
			style:
			{
				marginLeft: this.marginLeft + 'px'
			},
			queue: { position: 'end', scope: 'introBox', limit:1}
		});
	},
	
	moveLeft:function(el, animation)
	{
		if(this.position - 1 < 0) {this.position = this.sections.length - 2;this.moveRight();return false;}
		if(this.morphElement.effect) this.morphElement.effect.cancel();
		this.position--;
		this.marginLeft = -this.position * this.picsWrap.getWidth();
		
		this.morphElement.effect = new Effect.Morph(this.morphElement, 
		{
			style:
			{
				marginLeft: this.marginLeft + 'px'
			},
			queue: { position: 'end', scope: 'introBox', limit:1}
		});
	}

});
/* wraps = $$('.introBox')[0].select('.introBoxPicWrap').each(function(wrap, index){wrap.addClassName('wrap' + index)});
						wraps[6].addClassName('twoWide firstTwoWide');
						wraps[7].addClassName('twoWide');
						
						$$('.introBox')[0].select('.arrowRight').each(function(arrow)
						{
							arrow.up().select('.introBoxPicWrap').invoke('insert', '&nbsp;');
							arrow.observe('click', function(event)
								{
									
								})
						})
					$$('.introBox')[0].select('.arrowLeft').each(function(arrow)
						{
							arrow.observe('click', function(event)
								{
									
								})
						}) */