var slidebox = new Class({
	initialize: function(options){
		this.options= $extend(
			{
				fxduration:		100,	// number of milliseconds for transition
				imageHeight:	230,	// 0 for auto, anything else for that height
				imageWidth:		0,		// 0 for auto, anything else for that width
				
				container:	'slides',
				slideClass:	'slide',
				buttonContainer:'buttons',
				showButtons:	true,
				showViewAll:	true,
				linkClass:	'action',
				
				imageBase:		"/cms",
				imageSize:		"med",
				missingImage:	"/siteflow/images/no_feature_image.jpg",
				
				startSlide:	0,	// slide to start with, 0 for a random one
				startNow:	1,	// 0/false = start paused, 1/true = start started
				setHeight: 	0,	// 0/false = no, 1/true = set the height of top div to height of tallest subDiv
				slideshowDelay: 12000,			 // miliseconds before switching to next image (1000 per second)
				
				relBase: 'gallery',
				everyPage:	1,	// 0=show   # / # , 1 = always show a button for each page, greater than one = if <= this number, show a button for each page, else act like 0
				
				previousLabel:	' Previous ',
				nextLabel:	' Next ',
				startLabel:	' Start Slideshow ',
				stopLabel: ' Stop Slideshow ',
				runningClass: false,	// set to the class you wanted added to the start/stop button while running
				activeClass:	'active',	// set to the class you want added to the current button
				
				showPrevious:	false,
				showNext:		false,
				showStartStop:	false,
				showCount:		true
			}, options || {}
		);
		
		this.top = $(this.options.container);
		this.button = $(this.options.buttonContainer);
		this.slides = [];
		this.buttons = [];
		this.slideShowRunning = false;
		this.slideShowOn = false;
		
		x=this.options.startSlide.toInt();
		this.current = (x&&x<=this.options.slideContent.length) ? x-1 : Math.floor(Math.random()*this.options.slideContent.length);
		
		this.options.slideContent.each(function(slide,i){
			this.slides[i] = {};
			this.slides[i].div = new Element('div',{'id':this.options.slideClass+i,'class':this.options.slideClass}).inject(this.button,'before');
			this.slides[i].loaded = (slide.image.length) ? 0 : 1;
			this.slides[i].sized = 0;
			this.slides[i].inner  = new Element('div',{'class':'inner'}).inject(this.slides[i].div);
			this.slides[i].image = new Element('img').inject(this.slides[i].div,'top');
			h3 = new Element('h3',{'html':slide.headline}).inject(this.slides[i].inner);
			//if(slide.subheadline) h4 = new Element('h4',{'html':slide.subheadline}).inject(this.slides[i].inner);
			h4 = new Element('h4',{'html':slide.subheadline}).inject(this.slides[i].inner);
			p1 = new Element('p',{'html':slide.copy}).inject(this.slides[i].inner);
			if(slide.link){
				p2 = new Element('p',{}).inject(this.slides[i].inner);
				lt = (slide.linktext) ? slide.linktext : this.options.missingLinkText;
				a = new Element('a',{'href':slide.link,'class':'action','html':lt}).inject(p2);
			}
			this.buttons[i] = new Element('a',{'html':i+1,'events':{'click':function(){this.clickButton(i);}.bind(this)}}).inject(this.button);
			this.slides[i].effect = new Fx.Morph(this.slides[i].div, {duration: this.options.fxduration, transition: Fx.Transitions.Sine.easeOut, link: 'chain'});
			this.button.effect = new Fx.Morph(this.button, {duration: this.options.fxduration, transition: Fx.Transitions.Sine.easeOut, link: 'chain'});
		},this);
		
		this.loadSlide();
		
		this.button.setStyles({'display':'block','opacity':0});
		this.button.effect.start({'opacity': 1});
		
		//this.slideShow();
		
		this.loadImages();
	},
	
	sizeSlide: function(){
		this.slides[this.current].size = this.slides[this.current].div.getSize();
		//x = this.slides[this.current].size.x - this.slides[this.current].image.getSize().x - 10;
		iix = this.getMarginPaddingWidth(this.slides[this.current].inner);
		x = this.slides[this.current].size.x - this.slides[this.current].image.getSize().x - iix;
		x = (x>680) ? 300 : x ;
		this.slides[this.current].inner.setStyles({'width':x});
		this.slides[this.current].sized = 1;
	},

	getMarginPaddingWidth: function(ele){
		mpw = ele.getStyles('marginLeft','marginRight','paddingLeft','paddingRight');
		x = 0;
		x+= mpw.marginLeft.toInt();
		x+= mpw.marginRight.toInt();
		x+= mpw.paddingLeft.toInt();
		x+= mpw.paddingRight.toInt();
		return x;
	},
	
	loadSlide: function(){
		this.slides[this.current].div.setStyles({'display':'block','opacity':0});
		if(this.slides[this.current].loaded){
		//	if(!this.slides[this.current].sized) this.sizeSlide();
			this.sizeSlide();
			//this.slides[this.current].effect.start({'opacity': .99});
			this.slides[this.current].effect.start({'opacity': 1});
			this.buttons[this.current].addClass(this.options.activeClass);
			if(this.options.startNow && !this.slideShowOn) this.slideShow();
		}else{
			this.loadImage();
		}
	},
	
	loadImage: function(){
		src = this.getImagePath(this.current);
		this.slides[this.current].image.onload = this.loadImagePost.bind(this);
		this.slides[this.current].image.src = src;
	},
	
	loadImages: function(){
		for(i=(this.current+1);i<this.slides.length;i++){
			if(!this.slides[i].loaded){
				src = this.getImagePath(i);
				this.slides[i].image.src = src;
				this.slides[i].loaded = true;
			}
		}
		this.slides.each(function(slide,i){
			if(!slide.loaded){
				src = this.getImagePath(i);
				slide.image.src = src;
				slide.loaded = true;
			}
		},this);
	},
	
	getImagePath: function(i){
		if(this.options.slideContent[i].image[0].path){
			src = this.options.imageBase + '/' + this.options.slideContent[i].image[0].path + '/';
			src+= this.options.imageSize + '/' + this.options.slideContent[i].image[0].name;
		}else{
			src="/siteflow/images/no_feature_image.jpg";
		}
		return src;
	},
	
	loadImagePost: function(){
		this.slides[this.current].loaded = true;
		this.loadSlide();
	},
	
	unloadSlide: function(){
		j = this.current;
		this.slides[j].effect.start({'opacity': 0});
		this.buttons[j].removeClass(this.options.activeClass);
		this.finishUnload.delay(this.options.fxduration,this,j);
	},
	
	finishUnload: function(i){
		this.slides[i].div.setStyles({'display':'none'});
	},
	
	clickButton: function(i){
		$clear(this.slideShowRunning);
		this.unloadSlide();
		this.current=i;
		this.loadSlide.delay(this.options.fxduration,this);
		if(this.slideShowOn) this.slideShowRunning = this.slideNext.periodical(this.options.slideshowDelay, this);
		return false;
	},
	
	slideShow: function(){
		if(this.slideShowOn){
			$clear(this.slideShowRunning)
			this.slideShowOn = false;
		}else{
			//this.slideNext();
			this.slideShowRunning = this.slideNext.periodical(this.options.slideshowDelay, this);
			this.slideShowOn = true;
		}
	},
	
	slideNext: function(){
		this.unloadSlide();
		this.current = (this.current+1>=this.slides.length) ? 0 : this.current+1;
		//this.loadSlide.delay(this.options.fxduration,this);
		this.loadSlide();
		return false;
	}
});

