//showcase controller class
var showcase = new Class({ 
	options: {
		wrapid:			'showcase-wrap',
		imgsrcel: 		'rel',
		slideclass: 		'showcase-item',
		slidedateclass:		'slide-date',
		datediv:		'showcase-date',
		stopdiv:		'showcase-stop',
		startdiv: 		'showcase-start',
		nextdiv: 		'showcase-next',
		prevdiv: 		'showcase-prev',
		jumptoclass:		'jumptoslide',
		timerdiv:		'showcase-timer',
		sanddiv: 		'showcase-sand',
		selectedclass:	'selected',
		loop:			true,
		slideduration:		10000,
		transisitontime: 	500
	},
	initialize: function(options) {
		this.setOptions(options);
		//object to hold the effect objects:
		this.transistions = {};
		this.currentslide = 0;
		this.playing = false;
		this.loading = false;
		this.slides = {};
		
		//load slides and effects:
		this.slidesels = $$('.'+this.options.slideclass);
		this.slidesels.each(function(el, ind) {
			//create new slide object for each slide.
			this.slides[ind] = new slide({element: el, imgsrcel: this.options.imgsrcel, transisitontime: this.options.transisitontime, slidedateclass: this.options.slidedateclass, datediv: this.options.datediv });
			if(ind != 0) {
				this.slides[ind].hidenow();
			}
		}, this);
		
		//register controller:
		if($(this.options.stopdiv)) {
			$(this.options.stopdiv).addEvent('click', function(event) { 
				new Event(event).stop();
				this.stopshow();
			}.bind(this));
		}
		if($(this.options.startdiv)) {
			$(this.options.startdiv).addEvent('click', function(event) { 
				new Event(event).stop();
				this.startshow();
			}.bind(this));
		}
		if($(this.options.nextdiv)) {
			$(this.options.nextdiv).addEvent('click', function(event) {
				new Event(event).stop();
				this.gotonext();
			}.bind(this));
		}
		if($(this.options.prevdiv)) {
			$(this.options.prevdiv).addEvent('click', function(event) {
				new Event(event).stop();
				this.gotoprev();
			}.bind(this));
		}
		
		this.jumptos = $$('#'+this.options.wrapid+' .'+this.options.jumptoclass);
		this.jumptos.each(function(el, ind) {
			//this might need to be reworked to pass the index via the id or some other way...
			el.addEvent('click', function(event) {
				new Event(event).stop();
				this.jumpto(ind);
			}.bind(this));
			
		}, this);
		
		//add hour glass timer:
		this.timer = new hourglass({sanddiv: this.options.sanddiv, timerdiv: this.options.timerdiv, transisitontime: this.options.transisitontime});
		if(this.slidesels.length > 1)
		{
			//only start the animation if there is more than one slide
			//load and show first slide: - first slide is loaded inline.
			//this.slides[0].loadandshow();
			//this is getto:
			//this.slides[0].loaded = true;
			this.initshow();
		} else {
			//if there is one, just load.
			this.slides[0].loadandshow();
			this.playing = false;
		}
	},
	initshow: function() {
		if(this.slides[0].slide.hasClass('loaded')) {
			//first slide is there, so we can begin:
			this.jumptos[0].addClass(this.options.selectedclass);
			this.timer.start();
			//start animation:
			this.player = this.startshow.delay(this.options.slideduration, this);
			//load second slide:
			this.slides[1].loadslide();
		} else {
			//first slide has not yet loaded.
			this.initshow.delay(200, this); //call this function again after .2 seconds.
		}
	},
	stopshow: function() {
		this.cancelplaying();
	},
	startshow: function() {
		if(!this.playing) {
			this.playing = true;
			this.playshow();
		}
	},
	gotonext: function() {
		this.cancelplaying();
		this.changeslides();
	},
	gotoprev: function() {
		this.cancelplaying();
		var prev = this.getprevslide();
		this.changeslides(prev);
	},
	cancelplaying: function() {
		this.playing = false;
		$clear(this.player);
		//clear hour glass:
		this.timer.stop();
	},
	jumpto: function(ind) {
		this.playing = false;
		$clear(this.player);
		this.timer.stop();
		this.changeslides(ind);
	},
	playshow: function() {
		if(this.playing && this.player)
		{
			this.timer.reset();
			if(this.changeslides())
			{
				//call this function again after delay and start the timer.
				this.player = this.playshow.delay(this.options.slideduration, this);
				this.timer.start();
			} else {
				this.player = this.playshow.delay(300, this); //wait .3 seconds and try again to see if this image has loaded.
			}
		}
	},
	changeslides: function(newslide) {
		
		if(!$chk(newslide)) {
			//get new slide:
			var newslide = this.getnextslide();
		}
		if(newslide != this.currentslide)
		{
			//load new slide:
			this.slides[newslide].loadslide();
			//check to see if new one has loaded yet:
			if(this.slides[newslide].hasloaded())
			{
				//hide old one:
				this.slides[this.currentslide].hideslide();
				//show new one:
				this.slides[newslide].showslide();
				//toggle class for selected slide:
				this.jumptos[this.currentslide].removeClass(this.options.selectedclass);
				this.jumptos[newslide].addClass(this.options.selectedclass);
				//update current slide
				this.currentslide = newslide;
				//load next silide:
				this.slides[(this.getnextslide())].loadslide();
				return true;
			} else {
				//not loaded yet, so wait and try in a bit.
				return false;
			}
		} else {
			return true; //slide clicked to is the current slide.
		}
		
	},
	getnextslide: function() {
		var newind = this.currentslide+1;
		if($chk(this.slides[newind])) {
			return newind;
		} else {
			return 0; //reset to beginning.
		}
	},
	getprevslide: function() {
		var newind = this.currentslide-1;
		if(newind < 0) {
			if(this.options.loop) {
				return (this.getLength(this.slides) - 1);
			}
		} else {
			return newind;
		}
	},
	getLength: function(obj) {
		var length = 0;
		var foundit = false;
		while(!foundit) {
			if($chk(obj[length])) {
				length++;
			} else {
				foundit = true;
			}
		}
		return length;
	}
});
//hourglass class:
var hourglass = new Class({
	options: {
		timerdiv:		'showcase-timer',
		sanddiv: 		'showcase-sand',
		slideduration:		10000
	},
	initialize: function(options) {
		this.setOptions(options);
		this.hourglass = $(this.options.timerdiv);
		this.sand = $(this.options.sanddiv);
		this.timer = new Fx.Styles(this.sand, {duration: (this.options.slideduration-50), transition: Fx.Transitions.linear});	
		this.timerheight = this.hourglass.getSize().size.y;
		this.sand.setStyle('height', (this.timerheight+5)+'px');
	},
	start: function() {
		this.reset();
		this.timer.start({top: this.timerheight, backgroundColor: '#a00202'});
	},
	stop: function() {
		this.timer.stop();
		this.clear();
	},
	pause: function() {
		this.timer.stop();
	},
	clear: function() {
		this.sand.setStyle('top', (this.timerheight+5)+'px');
	},
	reset: function() {
		this.timer.stop();
		this.timer.set({top: 0, backgroundColor: '#ddd'});
	}
	
});


//showcase slide object
var slide = new Class({ 
	options: {
		imgsrcel: 		'rel',
		transisitontime: 	500
	},
	initialize: function(options) {
		this.setOptions(options);
		el = this.options.element;
		this.slide = el;
		this.slideimg = $$('#'+(el.id)+' img')[0];
		this.trans = new Fx.Styles(el.id, {duration: this.options.transisitontime, transition: Fx.Transitions.linear});
		this.loaded = false;
		this.loading = false;
		//this.date = $$('#'+(el.id)+' .'+this.options.slidedateclass)[0].innerHTML;
	},
	hidenow: function() {
		this.trans.set({opacity: 0});
	},
	loadandshow: function() {
		this.loadslide();
		this.showslide();
	},
	showslide: function() {
		this.trans.start({opacity: 1});
		//$(this.options.datediv).innerHTML = this.date;
	},
	hideslide: function() {
		this.trans.start({opacity: 0});
	},
	loadslide: function() {
		var cursrc = this.slideimg.getProperty('src');
		if(!this.loading && !this.loaded) {
			//image isnt loaded yet by this function, but check if the dom did it:
			if(this.slideimg.getProperty(this.options.imgsrcel) == this.slideimg.getProperty('src'))
			{
				if(this.slideimg.complete) {
					this.loaded = true;
				} else {
					this.loading = true;
				}
			} else {
				//load the image:
				this.loading = true;
				var newimg = null;
				var newimg = new Image();
				newimg.src = this.slideimg.getProperty(this.options.imgsrcel);
				if(newimg.complete) {
					//cached.
					this.slideimg.src = newimg.src;
					this.slideimg.loaded	= true;
					this.loaded = true;
				} else {
					//not cached.
					this.slideimg.src = newimg.src;
					this.slideimg.loaded	= true;
					this.slideimg.onload = function() {
						//what to do when finished loading image.
						this.loaded = true;
					}.bind(this);
				}
			}
		} else {
			if(this.slideimg.getProperty(this.options.imgsrcel) == this.slideimg.getProperty('src') && this.slideimg.complete)
			{
				//if this image has already been loaded, most likely in the dom.
				this.loaded = true;
			}
		}
	},
	hasloaded: function() {
		return this.loaded;
		/*
		if(this.loaded)  {
			alert('loaded');
			return true;
		} else {
			alert('notloaded complete:'+this.slideimg.complete);
			return false;
		}
		*/
	}
});
hourglass.implement(new Options, new Events);
slide.implement(new Options, new Events);
showcase.implement(new Options, new Events);