/**
 * Widgets
 * 
 * UI components for various areas of the site
 */

var Widget = new Class({
 	
	Implements: Options
	
});

var Slideshow = new Class({
	
	Implements: Options,
	
	options: {
		headingTag	: 'h3',
		delay		: 5000,
		duration	: 1000,
		width		: 500
	},
	
	current: 0,
	contents: [],
	
	initialize: function(el, options) {
	
		this.container = $(el);
		this.setOptions(options);
		
		if (!this.container) return;
		if (!this.container.get('tag').match(/[uo]l/)) return; //must be a list
		
		this.container.addClass('active');
		
		this.container.getElements('li').each(function (item, i) {
			var tab = item.getElement(this.options.headingTag);
			tab.addEvent('click', this.onTabClick.bind(this, i));
			tab.addClass('item' + (i + 1));
			this.contents[this.contents.length] = item.getElement('div').set('tween', {duration : this.options.duration});
		}, this);
		
		this.timer = this.next.periodical(this.options.delay, this);
	},
	
	onTabClick: function(i) {
		$clear(this.timer);
		this.show(i);
	},
	
	next: function() {
		var i = (this.current < 3) ? this.current + 1 : 0;
		this.show(i);
	},
	
	show: function(i) {
		if (i != this.current) {
			this.contents[this.current].tween('left', this.options.width);
			this.contents[i].tween('left', -(this.options.width), 0);
			var items = this.container.getElements('li');
			items[this.current].removeClass('current');
			items[i].addClass('current');
			this.current = i;
		}
	}
	
});

/**
 * Ticker
 * 
 * vidiprinter style news ticker
 */
var Ticker = new Class({
	
	Extends: Widget,
	
	options: {
		pxPerSecond : 75
	},
	
	initialize: function(el, options) {
		
		this.container = $(el);
		this.setOptions(options);
		
		this.list = this.container.getElement('ul');
		if (!this.list) return;
		
		this.items = this.list.getElements('li');
		var width = 0;
		var height = 0;
		this.items.each(function (item) {
			width += item.getSize().x;
			height = Math.max(item.getSize().y, height);
		});
		
		this.container.setStyle('height', height);
		this.list.setStyles({'width' : width, 'height' : height});
		
		this.list.set('tween', {transition : 'linear', onComplete : this.onFxComplete.bind(this)});
		
		this.list.addEvent('mouseenter', this.pause.bind(this));
		this.list.addEvent('mouseleave', this.resume.bind(this));
		
		this.current = 0;
		this.next();
	},
	
	onFxComplete: function() {
		//move current to end of list, reset position and repeat
		this.items[this.current].injectBottom(this.list);
		this.list.setStyle('left', 0);
		this.current = (this.items.length > this.current + 1) ? this.current + 1 : 0;
		this.next();
	},
	
	next: function() {
		var size = this.items[this.current].getSize();
		//duration is determined by the size
		this.list.get('tween').setOptions({duration : 1000 * (size.x / this.options.pxPerSecond)});
		this.list.tween('left', -size.x);
	},
	
	pause: function(){
		this.list.get('tween').pause();
	},
	
	resume: function() {
		this.list.get('tween').resume();
	}
	
});

var Dialog = new Class({
	
	Extends: Widget,
	
	options: {
		className	: 'dialog',
		closeable	: true,
		closeImage	: null,
		draggable	: true,
		title		: null,
		titleClass	: 'title',
		titleElement: 'h1'
	},
	
	initialize: function(el, options) {
		
		this.setOptions(options);
		
		//create extra markup and container div
		this.container = new Element('div', {'class' : this.options.className}).inject(document.body);
		
		var title = new Element(this.options.titleElement, {'class' : this.options.titleClass, text : this.options.title});
		this.container.adopt(title);
		
		//close
		if (this.options.closeable && this.options.closeImage) {
			this.container.addClass('closeable');
			var close = new Element('img', {src : this.options.closeImage, alt : 'Close'});
			close.addEvent('click', this.close.bind(this));
			title.adopt(close);
		}
		
		//drag
		if (this.options.draggable) {
			this.container.addClass('draggable');
			this.container.makeDraggable({handle : title});
		}
		
		//wrap the original content
		this.container.adopt($(el));

		
	},
	
	center: function() {
		if (!this.container.hasClass('hidden')) {
			var dialogSize = this.container.getSize();
			var bodySize = document.body.getSize();
			
			this.container.setStyle('left', (bodySize.x / 2) - (dialogSize.x / 2));
			this.container.setStyle('top', (bodySize.y / 2) - (dialogSize.y / 2) + window.getScroll().y);
		}
	},
	
	close: function() {
		this.container.addClass('hidden');
	},
	
	open: function() {
		this.container.removeClass('hidden');
	}
	
});