var MiddlePanel = new Class({
		slider : null,
		bound : {},
		cloner : null,
		initialize : function(name, options) {
			this.name = name;
			this.elem = 'home'+name;
			this.elemOptions = name+'optionsdiv';
			this.img = this.elem+'img';
			this.btn = name+'btn';
			this.link = name+'link';
			this.slides = options;
			this.slider = $( this.elem );
			this.slideOptions = $( this.elemOptions );
			if ( ! this.slider ) {
				return;
			}
			if ( this.slides.length < 2 ) { 
				return;
			}
			this.buildSwitchList();
		},
		buildSwitchList : function() {
			var ul = new Element('ul');
			ul.injectInside(this.slideOptions);			
			ul.setProperty('id', this.name+'_switcher' );

			this.bound.click = this.onclick.bindWithEvent(this);
			var len = this.slides.length;
			
			var i = 1;
			this.slides.each(function(slide) {
				var li = new Element('li');
				var a = new Element('a',{
					'href' : '#'
				});
				if (i === 1) {
					a.addClass('current');
				}
				a.imgSrc = slide.img;
				a.btnSrc = slide.button;
				a.btnLink = slide.link;

				a.setProperty('id', this.name+'_link_'+i );
				a.setText(parseInt(i, 10));
				a.injectInside(li);
				li.injectInside(ul);
				
				a.addEvent('click', this.bound.click);								
				i = i + 1;
			}, this);
		},
		preloadImages : function() {
			this.slides.each( function( option ) {
				var img = new Image();
				var buttonImg = new Image();
				img.src=option.img;
				option.imgSrc = img;
			});
		}, 
		resetCurrentAnchor : function(el) {
			$ES('ul a',this.slideOptions).each(function(item){
				item.removeClass('current');
			});
			$(el).addClass('current');
		},
		onclick : function(event) {
			event = new Event(event).stop();
			if ( middle_timer ) {
				middle_timer=$clear( middle_timer );
				middle_timer=function() {
					rotateMiddle();
					}.periodical( middle_splashtimer*1000 );
			}

			thiscol=event.target.id.substring( 0,4 );
			newindex=event.target.id.substring( event.target.id.length-1  ).toInt();
			newindex--;

			if ( thiscol == 'col1' ) { middle_index_col1 = newindex; }
			if ( thiscol == 'col2' ) { middle_index_col2 = newindex; }
			if ( thiscol == 'col3' ) { middle_index_col3 = newindex; }

			var newSrc = event.target.imgSrc;
			var newBtn = event.target.btnSrc;
			var newBtnLink = event.target.btnLink;
			
			var current = $( this.img );
			if (current.getProperty('src') === newSrc) {
				return;
			}
			
			this.temporary = current.clone().injectBefore( current );
			this.temporary.addClass('temporary');
			current.src = newSrc;
			
			var self = this;
			var mfx = new Fx.Style(this.temporary,'opacity', { 
				duration: 400, 
				onComplete : function(){
					self.temporary.remove();
					$( self.link ).href = newBtnLink;
					$( self.btn ).src = newBtn;
					if ( $(self.btn).href == '' ) {
						$(self.btn).addClass('hidden');
					}
					else {
						$(self.btn).removeClass('hidden');
					}
					self.resetCurrentAnchor(event.target);
				}
			});
			mfx.start(1,0);
		}
	}) // end of class.
// 
// 
var middle_1 = new MiddlePanel( 'col1', col1options );
var middle_2 = new MiddlePanel( 'col2', col2options );
var middle_3 = new MiddlePanel( 'col3', col3options );

var middle_index_col1 =0;
var middle_index_col2 =0;
var middle_index_col3 =0;

var middle_timer=false;
//
if ( middle_splashtimer > 1 ) {

	middle_timer=function() {
		rotateMiddle();
		}.periodical( middle_splashtimer*1000 );
}

function rotateMiddle() {
		middle_index_col1++;
		middle_index_col2++;
		middle_index_col3++;

		if ( middle_index_col1 >= middle_1.slides.length ) { middle_index_col1=0; }
		if ( middle_index_col2 >= middle_2.slides.length ) { middle_index_col2=0; }
		if ( middle_index_col3 >= middle_3.slides.length ) { middle_index_col3=0; }

		if( middle_1.slides.length > 1 ) { swapIn('col1', middle_1, middle_index_col1 ); }
		if( middle_2.slides.length > 1 ) { swapIn( 'col2', middle_2, middle_index_col2  ); }
		if( middle_3.slides.length > 1 ) { swapIn( 'col3', middle_3, middle_index_col3  ); }
}

function swapIn( name, item, index ) {
	// 
		var nextSlide = item.slides[index];
		var newSrc=nextSlide.img;
		var newBtn=nextSlide.button;
		var newLink=nextSlide.link;
		var current = $( item.img );
		// convert from zero based index to 1 based count of the links.
		var onebased = index+1;
		item.anchor = name+'_link_'+onebased;

	if (current.getProperty('src') === newSrc) {
		// if we should be switching to ourself, just skip it, ok?
		return;
	}

// copy the current image and put it above the otherr image.
	item.temporary=current.clone().injectBefore(current);
	item.temporary.addClass('temporary');

// change the current image ( fast change hidden by temporary screen )
	current.setProperty( 'src', newSrc );
// we lose variables n stuff by the time we're done
	var self=item;
// fade it out
	var mfx = new Fx.Style( item.temporary, 'opacity', {
		duration:400,
		onComplete: function() {
			self.temporary.remove();
			$( self.link ).href = newLink;
			$( self.btn ).src = newBtn;
			if ( $(self.btn).href != '' ) $( self.btn ).removeClass('hidden');
			else $( self.btn ).addClass('hidden');
			self.resetCurrentAnchor( $( self.anchor ) );
		}
	});
	mfx.start(1,0);
}//end of function