// class to create a slideshow. structure must exist within container el

function Slideshow(container, options) {
	
	this.container = null;
	this.imageCount = 0;
	this.rowLength = 6;
	this.scrollControls = null;
	this.thumbWidth = 80;
	this.scrollAmount = 480;
	this.scrolling = false;
	this.captionOpacity = 0.6;
	this.playing = false;
	this.playExecuter = null;
	this.interval = 3;
	this.loop = false;
	this.autoPlay = false;
	this.debug = false;
	
	this.init = function(container, options) {
		if(options != null) this.loadOptions(options);
		this.container = container;
		this.thumbs = container.select('div.thumb');
		this.images = container.select('div.images div.image');
		this.controls = container.select('div.control');
		this.imageCount = this.images.length;
		this.scrollControls = this.container.select('div.previous', 'div.next');
		this.playControl = this.container.down('a.playControl');
		this.scroller = this.container.down('div.scroller');
		this.scroller.setStyle({
			width: 80 * this.imageCount + 'px'
		});
		
		this.images.each(this.setCaptionOpacity.bind(this));
		
		this.updateControls();

		this.thumbs.each(function(thumb){
			thumb.observe('click', this.select.bind(this));
		}.bind(this));
		
		this.controls.each(function(el){
			el.observe('mouseover', this.controlMouseOver.bind(this));
			el.observe('mouseout', this.controlMouseOut.bind(this));
			el.observe('click', this.actionScroll.bind(this));
		}.bind(this));

		this.playControl.observe('click', this.togglePlay.bind(this));

		if(this.autoPlay) this.play();

	};
	
	this.loadOptions = function(options) {
		if(options.captionOpacity) this.captionOpacity = options.captionOpacity;
		if(options.autoPlay) this.autoPlay = options.autoPlay;
		if(options.loop) this.loop = options.loop;
		if(options.interval) this.interval = options.interval;
	}

	// mark all the images and thumbs as not active
	this.deselect = function(index) {
		if(index != null && typeof index == 'number') {
			// if index is specified and is a number, deselect that index
			this.thumbs[index].removeClassName('active');
			this.images[index].removeClassName('active');
		} else {
			// if index is not specified, deselect all
			this.thumbs.each(function(el){
				el.removeClassName('active');
			}.bind(this));
			this.images.each(function(el){
				el.removeClassName('active');
			}.bind(this));
		}
	};
	
	// take a thumbnail event and pass the thumb index to this.jump
	this.select = function(ev) {
		if(this.playing) this.pause();
		thumb = ev.element();
		thumb = (thumb.tagName == 'DIV') ? thumb : thumb.up('div.thumb');
		index = thumb.previousSiblings().length;
		this.jump(index);
	};
	
	this.togglePlay = function(ev) {
		
		if(ev != null) ev.stop();

		if(this.playing) {
			this.pause();
		} else {
			this.play();
		}
	};
	
	this.pause = function() {
		this.playControl.update('Play');
		this.playControl.addClassName('play');
		this.playControl.removeClassName('pause');
		this.playExecuter.stop();
		this.playExecuter = null;
		this.playing = false;	
	};

	this.play = function() {
		this.playControl.update('Pause');
		this.playControl.addClassName('pause');
		this.playControl.removeClassName('play');
		this.playExecuter = new PeriodicalExecuter(this.next.bind(this), this.interval);
		this.playing = true;
	};

	this.next = function() {
		activeThumb = this.container.down('div.thumb.active');
		index = activeThumb.previousSiblings().length;
		if(activeThumb.nextSiblings().length != 0) {
			this.jump(index + 1);
		} else {
			if(this.loop) {
				this.jump(0);
			} else {
				this.pause();
			}
		}
	}
	
	this.jump = function(index) {
		previousIndex = this.container.down('.thumb.active').previousSiblings().length;
		this.deselect(previousIndex);
		this.images[index].addClassName('active');
		this.thumbs[index].addClassName('active');
		this.updateCounter(index);
		if(this.debug) console.log('Selected thumbnail is at ', index * this.thumbWidth, 'px');
		this.updateScroll(index);
	};

	this.updateCounter = function(index) {
		position = index + 1;
		this.container.down('.counter').update('Image ' + position + ' of ' + this.images.length);
	}

	this.setCaptionOpacity = function(image) {
		captionBackground = image.down('.captionBackground');
		captionBackground.setOpacity(this.captionOpacity);
	};
	
	this.controlMouseOver = function(ev){
		if(!this.controlIsEnabled(ev.element())) return false;
		control = (ev.element().hasClassName('control')) ? ev.element() : ev.element().up('.control');
		control.addClassName('hover');
		control.down('div').addClassName('hover');		
	};
	
	this.controlMouseOut = function(ev){
		control = (ev.element().hasClassName('control')) ? ev.element() : ev.element().up('.control');
		control.removeClassName('hover');
		control.down('div').removeClassName('hover');
	};
	
	this.updateControls = function(){
		var pages = Math.ceil((this.imageCount * this.thumbWidth) / this.scrollAmount);
		if(this.debug) console.log('Pages: ' + pages);
		if(this.debug) console.log('Left position: ' + this.container.down('div.scroller').getStyle('left'));
		var left = parseInt(this.container.down('div.scroller').getStyle('left'));
		if(left >= 0) {
			if(this.debug) console.log('Disabling previous control');
			this.disableControl(this.container.down('div.previous'));
		} else {
			this.enableControl(this.container.down('div.previous'));
		}
		if(left <= 0 - (this.scrollAmount * (pages - 1))) {
			this.disableControl(this.container.down('div.next'));
		} else {
			this.enableControl(this.container.down('div.next'));
		}
	}

	this.disableControl = function(control){
		control = control.down('div');
		control.addClassName('disabled');
		if(control.hasClassName('hover')) control.removeClassName('hover');
	};
	
	this.enableControl = function(control){
		control = control.down('div');
		if(control.hasClassName('disabled')) control.removeClassName('disabled');		
	};
	
	this.controlIsEnabled = function(control){
		control = (control.hasClassName('control')) ? control : control.up('div.control');
		return !control.down('div').hasClassName('disabled');
	};

	this.updateScroll = function(index){
		if(this.debug) console.log('Updating scroll position...');
		thumbLeft = index * this.thumbWidth;
		scrollLeft = parseInt(this.scroller.getStyle('left'));
		scrollWidth = this.scrollAmount;
		offset = thumbLeft + scrollLeft;
		if(this.debug) console.log('Offset is ', offset);
		amount = Math.floor(offset / this.scrollAmount) * this.scrollAmount;
		if(this.debug) console.log('Scroll amount is ', amount);
		if(offset < 0) {
			if(this.debug) console.log('Scroller needs to move left');
			this.scroll(Math.abs(amount));
		}
		if(thumbLeft + scrollLeft >= scrollWidth) {
			if(this.debug) console.log('Scroller needs to move right');
			this.scroll(-amount);
		}
/*
		activeThumb = this.container.down('div.thumb.active');
		index = activeThumb.previousSiblings().length;
		if(index * this.thumbWidth > parseInt(this.scroller.getStyle('left')) + this.scrollAmount) {
			// element is off to the right
		}
*/
	};

	this.actionScroll = function(ev) {
		if(this.scrolling) return false;
		if(!this.controlIsEnabled(ev.element())) return false;
		control = ev.element();
		control = (control.hasClassName('control')) ? control : control.up('div.control');
		if(control.hasClassName('next')) {
			this.scroll(-this.scrollAmount);
		} else {
			this.scroll(this.scrollAmount);
		}
	};

	this.scroll = function(amount){
		position = parseInt(this.scroller.getStyle('left'));
		this.scrolling = true;
		position = position + amount + 'px';
		new Effect.Morph(this.scroller, {
			style: 'left: ' + position,
			afterFinish: function(){
				this.scrolling = false;
				this.updateControls();
				if(this.debug) console.log('Scroller left position is ', this.scroller.getStyle('left'));
			}.bind(this)
		});
	};
	
	this.init(container, options);
}

document.observe('dom:loaded', function(ev){
	slideshows = new Array();
	$$('div.slideshow').each(function(slideshow){
		slideshows.push(new Slideshow(slideshow));
	});
	
	$$('div.video a').each(function(el){
		flowplayer(el.identify(), '/resources/components/flowplayer/flowplayer-3.1.3.swf');
	});
	
});