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

License:
	MIT-style license.
*/
var fontEditor = new Class({
	getOptions: function(){
		return {
			onComplete: function(el){
				//function to occur once a font has been selected. el is the element that has been editted.
			},
			onChange: function(el){
				//function to occur once a font has been selected. el is the element that has been editted.
			},
			className: 'fontEditor',
			fontList: ['Arial','Times new roman','Century Gothic'],
			units: 'px'
		};
	},
	initialize: function(element, options){
		this.setOptions(this.getOptions(), options);
		this.coords = element.getCoordinates();
		this.container = new Element('div').addClass(this.options.className).setStyles('width:290px;height:60px;position:absolute;background:#fff;z-index:1000;border:1px solid #999;').setOpacity(0).injectInside(document.body);
		this.slideBox = new Element('div').setStyles('width:230px;margin:5px 0 0 5px;height:20px;border:1px solid #999;z-index:1002;').addClass(this.options.className+'-sBox').injectInside(this.container);
		this.knob = new Element('div').setStyles('cursor:pointer;width:3px;height:20px;background:#0099ff;z-index:1003;').addClass(this.options.className+'-sKnob').injectInside(this.slideBox);
		this.curVal = new Element('input').setStyles('display:block;position:absolute;left:235px;top:5px;height:20px;width:26px;border:1px solid #999;color:#666;font-size:16px;padding:0 3px 0 2px;z-index:1001;').addClass(this.options.className+'-curVal').injectInside(this.container);
		
		this.selectionBox = new Element('div').setStyles('width:240px;height:20px;overflow:hidden;position:absolute;z-index:1005;top:35px;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:1006;top:34px;left:245px;').addClass(this.options.className+'-sBoxExpander').injectInside(this.container);
		this.colorSelector = new Element('div').setStyles('cursor:pointer;width:16px;height:16px;position:absolute;z-index:1007;top:36px;left:270px;background:url(js/color_wheel.png) top right no-repeat;').addClass(this.options.className+'-sColorStart').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:273px;font-size:20px;').appendText('X').injectInside(this.container);
		this.slider = new Slider(this.slideBox,this.knob,{steps:300,wheel:true,onComplete:function(pos){this.changeSize(pos)}.bind(this)});
		if (this.options.initialize) this.options.initialize.call(this);
		this.show(element);
	},
	show: function(el){
		//Font Size
		this.target = el;
		this.slider.set(this.target.getStyle('font-size').toInt());
		this.curVal.addEvent('change', function(){
			this.slider.set(this.curVal.value);
		}.bindWithEvent(this));
		
		//Color Select
		this.rainbow = new MooRainbow(this.colorSelector, {startColor: [0, 0, 0],
			onChange: function(color) {
				this.target.setStyle('color',color.hex);
			}.bind(this)
		});
		
		//Font Select
		this.buildFontSelection(el);
		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.selectionBox.setStyles({left: this.coords.left+5+'px', top: this.coords.top+35+'px'});
		this.closeSelector.addEvent('click',this.hide.bind(this));
		this.container.setStyles({left: this.coords.left+'px', top: this.coords.top+'px'});
		this.container.effect('opacity').start(0.8);this.selectionBox.effect('opacity').start(0.8);
	},
	buildFontSelection: function(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));
	},
	changeSize: function(pos){
		this.curVal.value = pos;
		this.target.setStyle('font-size',pos+this.options.units);
		this.fireEvent('onChange', [this.target]);
	},
	changeFont: function(el,type){
		this.target.setStyle('font-family',el.innerHTML);
		if(type == 'click'){
			this.expandSelector.removeClass('active');
			this.buildFontSelection(this.target);
			this.selectionBox.effect('height').start('20px')
			this.fireEvent('onChange', [this.target]);
		}
	},
	hide: function(){
		this.curVal.removeEvents('change');
		this.closeSelector.removeEvents('click');
		this.container.effect('opacity').start(0).chain(function(){this.container.remove();}.bind(this));
		this.selectionBox.effect('opacity').start(0).chain(function(){this.selectionBox.remove();}.bind(this));
		this.fireEvent('onComplete', [this.target]);
		if($('mooRainbow'))$('mooRainbow').remove();
		this.target = null;
	}
});

Element.extend({
	editFont: function(options) {
		return new fontEditor(this, options);
	}
});

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