/***********************************
* showcase.js
*
*  For putting a ShowCase element on a webpage.
*
*  Options:
*	container (required)-- The id of the element that contains slides.  Each slide should be enclosed in a span inside this container.
*	
*
*	autoDelay -- the amount of time before the showcase auto changes slides.
*		default: 10000 (10 seconds)
*
*	classPrefix: the prefix used for the class of various elements in the showcase. Use this to customize the look of the showcase.
*		default: showcase
*		The container gets [prefix]_container
*		The thumb sub container gets [prefix]_thumbcontainer
*		Each thumbnail gets [prefix]_thumbs
*		Active thumb gets [prefix]_active_thumb
*		Hover thumb gets [prefix]_hover_thumb
*		Each slide gets [prefix]_slides
*
*	autoSwitch: when true will switch between the thumbnails at the specified time intervales
*		default: true 
*
*	fadeThumb: when true will fade the thumbs out with the slides only active thumb is fully visible.
*		default: true
*
*  Example use: (Note: the dom should be ready when this is used)
*	new ShowCase( <OPTIONSARRAY> );
*
*	window.addEvent('domready', function() {
*		var abc=new ShowCase({container:'hello', classPrefix: 'ictest'});
*	});
*
*
***********************************/


var ShowCase = new Class({
	Implements: [Options, Events],
	options:{
		transition: Fx.Transitions.linear,
		duration: 1000,
		autoDelay: 10000,
		classPrefix: 'showcase',
		fadeThumb: 'true',
		autoSwitch: 'true',
		container: false
	},
	initialize: function(options){
		this.setOptions(options);
		this.container=$(this.options.container);
		this.thumbs=[];
		this.slides=[];
		if(!this.container)
		{
			//alert("no container");//maybe make an alert/debug console or something
			return;
		}
		this.container.addClass(this.options.classPrefix + '_container');
		this.thumb_container=new Element('span');
		this.thumb_container.addClass(this.options.classPrefix + '_thumbcontainer');
		this.container.getChildren('span').each(function(el){
		//select all of the spans and assume they are slides except the one that holds the thumbnails
			if(el!=this.thumb_container)
			{
				el.addClass(this.options.classPrefix + '_slides');
				el.eff = new Fx.Morph(el, {link: 'cancel', transition:this.options.transition, duration: this.options.duration});
				el.setStyle('opacity', 0.0);
				el.setStyle('display', 'none');
				var thumbImg = el.getFirst('.thumbnail');
				if(!thumbImg){
				  thumbImg=new Element('img', {'src': 'images/showcase/defaultthumb.png', 'alt': 'default thumb!', 'class': this.options.classPrefix + '_thumbs'});
				}
				thumbImg.addClass(this.options.classPrefix + '_thumbs');
				thumbImg.eff = new Fx.Morph(thumbImg,{link: 'cancel', transition:this.options.transition, duration: this.options.duration});
				thumbImg.injectInside(this.thumb_container);
				if(this.options.fadeThumb){ thumbImg.setStyle('opacity', .45); }
			//add in the click event
				thumbImg.addEvent('click', function(){
					this.fadeInImg(el, thumbImg);
				}.bind(this));
				thumbImg.addEvent('mouseenter', function(){
					if(!thumbImg.hasClass(this.options.classPrefix + '_active_thumb')){
						thumbImg.addClass(this.options.classPrefix + '_hover_thumb');
					}
				}.bind(this));
				thumbImg.addEvent('mouseleave', function(){
					thumbImg.removeClass(this.options.classPrefix + '_hover_thumb');
				}.bind(this));
				this.thumbs.push(thumbImg);
				this.slides.push(el);
			}
		}.bind(this));
		this.thumb_container.injectInside(this.container);
		this.activeSlide="";
		this.autoChange;
	//activate 0 index.
		this.fadeInImg(this.slides[0], this.thumbs[0]);
	},
	fadeInImg: function(showEl, thumbImg)
	{
		var t_op = this.options;
	//fade in ones that are passed in and fade out all others.
		if(this.activeSlide!=showEl)
		{
			if(this.autoChange)
			{
				clearTimeout(this.autoChange);
				this.autoChange=0;
			}
			this.activeSlide=showEl;
			this.thumbs.each(function(el){
				if(el==thumbImg)
				{
					el.addClass(t_op.classPrefix + '_active_thumb');
					el.removeClass(t_op.classPrefix + '_hover_thumb');
					if(t_op.fadeThumb)
					{
						el.eff.start({
							opacity:1.0
						});
					}
				}
				else
				{
					el.removeClass(t_op.classPrefix + '_active_thumb');
					if(t_op.fadeThumb)
					{
						el.eff.start({
							opacity:.45
						});
					}
				}
			});
			this.slides.each(function(el){
				if(el==showEl)
				{
					el.setStyle('display', 'block');
					el.eff.start({
						opacity:1.0
					});
				}
				else
				{
					el.eff.start({
						opacity:0
					}).chain(function(){
						if(el.getStyle('opacity')==0)
						{
							el.setStyle('display', 'none');
						}
					});
				}
			});
			var nextIndex=(this.slides.indexOf(showEl)+1)%this.slides.length;
			if(t_op.autoSwitch){
				this.autoChange=setTimeout(function(){
					this.autoChange=0;
					this.fadeInImg(this.slides[nextIndex], this.thumbs[nextIndex]);	
				}.bind(this), this.options.autoDelay);
			}
		}
	}
	
});