/*
Script:
	fontSelector.js, <http://files.justinmaier.com/
Author:
	Justin Maier, <http://justinmaier.com>

License:
	MIT-style license.
*/
var fontSelector = new Class({
	getOptions: function(){
		return {
			onSelect: function(el){
				//function to occur once a font has been selected. el is the element that has been editted.
			},
			className: 'fontSelection',
			fade: true,
			fontList: ['Arial','Times new roman','Century Gothic']
		};
	},
	
	initialize: function(elements, options){
		this.elements = elements;
		this.setOptions(this.getOptions(), options);
		this.container = new Element('div').addClass(this.options.className).setStyles('width:290px;height:30px;position:absolute;background:#fff;z-index:1000;border:1px solid #999;').setOpacity(0).injectInside(document.body);
		this.selectionBox = new Element('div').setStyles('width:240px;height:20px;overflow:hidden;position:absolute;z-index:1001;top:5px;left:5px;border:1px solid #999;').addClass(this.options.className+'-sBox').setOpacity(0).injectInside(document.body);
		this.selectionOptions = new Element('ul').setStyles('list-style:none;margin:0;padding:0;background:#fff;').injectInside(this.selectionBox);
		this.expandSelector = new Element('div').setStyles('cursor:pointer;width:20px;height:22px;position:absolute;z-index:1001;top:4px;left:245px;').addClass(this.options.className+'-sBoxExpander').injectInside(this.container);
		this.closeSelector = new Element('div').setStyles('padding:0;margin:0;color:#999;cursor:pointer;width:20px;height:22px;position:absolute;z-index:1001;top:2px;left:275px;font-size:20px;').appendText('X').injectInside(this.container);
		$each(elements, function(el){
			el.addEvent('click', function(event){
				this.show(el,event);
			}.bindWithEvent(this));
		}, this);
		if (this.options.initialize) this.options.initialize.call(this);
	},
	
	show: function(el,event){
		this.target = el;
		this.selectionOptions.setHTML('');
		var currentFont = new Element('li').appendText(el.getStyle('font-family')).injectInside(this.selectionOptions);
		this.options.fontList.each(function(font){
			new Element('li').appendText(font).injectAfter(currentFont);
		});
		this.expandedHeight= 0;
		$each(this.selectionOptions.getChildren(), function(el2){
			el2.setStyles({'cursor':'pointer','color':'#666','display':'block','background':'#fff','padding':'0 0 0 5px','height':'20px','border-bottom':'1px solid #999','font-family':el2.innerHTML});
			el2.addEvent('click',function(){
				this.changeFont(el2,'click');
			}.bindWithEvent(this));
			el2.addEvent('mouseover',function(){
				this.changeFont(el2,'hover');
			}.bindWithEvent(this));
			el2.addEvent('mouseout',function(){
				this.changeFont(currentFont,'hover');
			}.bindWithEvent(this));
			this.expandedHeight = this.expandedHeight+el2.offsetHeight;
		}, this);
		currentFont.removeEvents();
		currentFont.addEvent('click',function(){
			if(this.selectionBox.style.height == '20px'){this.expandSelector.addClass('active');this.sizeList.start(this.expandedHeight+'px');}
			else{this.expandSelector.removeClass('active');this.sizeList.start('20px');}
		}.bindWithEvent(this));
		this.sizeList = this.selectionBox.effect('height');
		this.expandSelector.addEvent('click',function(){
			if(this.selectionBox.style.height == '20px'){this.expandSelector.addClass('active');this.sizeList.start(this.expandedHeight+'px');}
			else{this.expandSelector.removeClass('active');this.sizeList.start('20px');}
		}.bindWithEvent(this));
		this.container.setStyles({left: event.page.x+'px', top: event.page.y+'px'});
		this.selectionBox.setStyles({left: event.page.x+5+'px', top: event.page.y+5+'px'});
		this.closeSelector.addEvent('click',this.hide.bind(this));
		if(this.options.fade == true){this.container.effect('opacity').start(1);this.selectionBox.effect('opacity').start(1);}else{this.container.setOpacity(1);this.selectionBox.setOpacity(1);}
	},
	hide: function(){
		this.target = null;
		this.selectionOptions.setHTML('');
		this.closeSelector.removeEvents('click');
		if(this.options.fade == true){this.container.effect('opacity').start(0);this.selectionBox.effect('opacity').start(0);}else{this.container.setOpacity(0);this.selectionBox.setOpacity(0);}
	},
	
	changeFont: function(el,type){
		this.target.setStyle('font-family',el.innerHTML);
		if(type == 'click'){
			this.expandSelector.removeClass('active');
			$each(this.selectionOptions.getChildren(), function(el2){
				el2.removeEvents();
			}, this);
			this.selectionBox.effect('height').start('20px').chain(this.hide.bind(this));
			this.fireEvent('onSelect', [this.target]);
		}
	},
	
	remove: function(){
		this.elements.each(function(el){
			el.removeEvents('click');
		});
		this.container.remove();
		this.selectionBox.remove();
	}
});

fontSelector.implement(new Events);
fontSelector.implement(new Options);