var Showcase = new Class({

	//implements
	Implements: [Options],
	
	inFx: new Array(),
	outFx: new Array(),
	timer: null,
	isSliding: 0,
	origColor: null,
	direction: 0,
	thePics: new Array(),
	prevLeft: null, 
	prevRight: null,
	

	//options
	options: {
	slideTimer: 8000,  		//time between slides (1 second = 1000), a.k.a. the interval duration
	transitionTime: 2000, 	//transition time (1 second = 1000)
	items:  null, 				//Get array of image (links)
	itemNum: 0,
	theBox: null,
	initBox: null
	},

	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
		
		var boxW = this.options.theBox.getSize().x;
		var boxH = this.options.theBox.getSize().y;
	
		this.options.items.each(function(v, k){
			//v = the element
			//k = the index
			
			//get image
			var tempEl = v.getElement('a');
			var theHref = tempEl.getProperty('href')
			var tempImg = new Asset.image(theHref);
			
			v.empty();
			
			this.options.theBox.grab(tempImg);
			
			var imgSize = tempImg.getSize();
			var imgW = imgSize.x;
			var imgH = imgSize.y;
			
			//positioning/opacity setup
			var hDiff = (520 - imgH)/2;
			var wDiff = (750 - imgW)/2;
			
			this.thePics.push(tempImg);
			tempImg.setStyle('position', 'absolute');
			tempImg.setStyle('top', hDiff);
			tempImg.setStyle('opacity', 0);
			tempImg.setStyle('left', wDiff);
		
		 }, this);
	
	},

	//a method that does whatever you want
	start: function() {
		this.options.initBox.destroy();
		
		this.changeIt();
		
		this.theTimer = this.changeIt.periodical(this.options.slideTimer, this, null);
		
	},


	changeIt: function(passedID) {

		var numItems = this.options.items.length;  //get number of slider items
		var curItem = this.prevRight;
		
		this.upIndex();
		
		//now get pic to fade in, checking curSide to see which side
		var newItem = this.thePics[this.options.itemNum];
		this.prevRight = newItem;		
		
		//set up our animation stylings for out and in motions (note:  Fx.Styles does NOT exist in moo 1.2, so we must use Fx.Morph or Fx.Tween)
		var item_in = new Fx.Morph(newItem, {
			     duration: this.options.transitionTime, 
			     transition: Fx.Transitions.Cubic.easeOut, 
			     link: 'ignore',
			     
			     onStart: this.toggleSlidingOn.create({
					bind: this
				}),
			     
			     onComplete: this.toggleSlidingOff.create({
					bind: this
				})
			     
		});
		
		item_in.start({
			'opacity':[0,1]
		});
		
		if(curItem != null){
			var item_out = new Fx.Morph(curItem, {
				     duration: this.options.transitionTime, 
				     transition: Fx.Transitions.Cubic.easeOut, 
				     link: 'ignore'
			});
			
			item_out.start({
				'opacity':[0]
			});
		}
		
		
	},
	
	//--------------------------------------------------------------------------------------------------------
	//supplementary functions  (mini-functions)
	//--------------------------------------------------------------------------------------------------------	
	toggleSlidingOn: function () {
		this.isSliding = 1;  //prevents extra clicks
	},
	
	toggleSlidingOff: function () {
		this.isSliding = 0;  //prevents extra clicks
	},
	
	upIndex: function () {
		this.options.itemNum++;
		if (this.options.itemNum >= this.options.items.length) {
			this.options.itemNum = 0;
		}
	},
	
	//fade in
	showIt: function(el){ 
		
		//get item to slide out
		var curItem = el;	
		
		//set up our animation
		var fade_in = new Fx.Morph(el, {
			     duration: transitionTime, 
			     transition: Fx.Transitions.Cubic.easeOut, 
			     link: 'ignore'
		});
		
		fade_in.start({
		'opacity': 1
		});
		
	}	
	//------------------------  end supp. functions -----------------------------------------//
});