var TFontPicker = Class.create();
TFontPicker.prototype = {
	inputName: 'color',
	defaultFont: 'arial',
	defaultColor: '000000',
	defaultSize: 10,
	defaulLineHeight: 11,
	titleText: 'Font Settings',
	initialize: function (container, options) {
		Object.extend (this, TemplatedElement);
		Object.extend (this, options || {});
		this._buildFromTemplate('template_font_picker');
		this.container = $(container);

		this.title.innerHTML = this.titleText;

		this.fontFamilyPicker = $ST(this.fontFamilyPicker);
		this.fontSizePicker = $ST(this.fontSizePicker);
		this.fontStylePicker = $ST(this.fontStylePicker);
		this.lineHeightPicker = $ST(this.lineHeightPicker);

		this.fontColorPicker = new TColorPicker (this.colorPickerContainer, {defaultColor: this.defaultColor});
		this.fontColorPicker.onColorChanged = this.onColorChange.bind(this);
		//this.fontColorPicker.dropdownElement.style.left = '-400px';

		this.fontAllCapsSwitch.onclick = this.onTextTransformChange.bindAsEventListener(this, 'AllCaps');
		this.fontSmallCapsSwitch.onclick = this.onTextTransformChange.bindAsEventListener(this, 'SmallCaps');
		this.fontCapitalizedSwitch.onclick = this.onTextTransformChange.bindAsEventListener(this, 'Capitalized');

		this.fontHiddenInput.name = this.inputName;

		if (this.fixedSize) {
			this.fontSizePicker.disabled = true;
			this.defaultSize = this.fixedSize;
		}
		if (this.fixedLineHeight) {
			this.lineHeightPicker.disabled = true;
			this.defaultLineHeight = this.fixedLineHeight;
		}
		/* setDefaults */
		this.setDefaults();

		this.container.appendChild (this.element);
	},
	showhideBox: function (event) {
		this.visible = !this.visible;
		this.dropdownElement.style.display = (this.visible?'block':'none');
		if (this.visible) this.updatePreview();
	},

	onFontChange: function () { this.updatePreview(); },
	onStyleChange: function () { this.updatePreview(); },
	onSizeChange: function () { this.updatePreview(); },
	onLineHeightChange: function () { this.updatePreview(); },
	onColorChange: function () { this.updatePreview();},

	onTextTransformChange: function (event, sender) {
		if (sender != 'AllCaps') this.fontAllCapsSwitch.checked = false;
		if (sender != 'SmallCaps') this.fontSmallCapsSwitch.checked = false;
		if (sender != 'Capitalized') this.fontCapitalizedSwitch.checked = false;
		this.updatePreview();
	},
	applyStyles: function (element) {
		element.style.fontFamily = this.fontFamilyPicker.getSelected(); //options[this.fontFamilyPicker.selectedIndex].value;
		element.style.fontSize = this.fontSizePicker.getSelected() + "px"; //.options[this.fontSizePicker.selectedIndex].value + "px";
		element.style.lineHeight = this.lineHeightPicker.getSelected() + "px"; //.options[this.fontSizePicker.selectedIndex].value + "px";
		var style = this.fontStylePicker.getSelected();//.options[this.fontStylePicker.selectedIndex].value;
		element.style.fontWeight = (style=='B' || style == 'BI'?'bold':'normal');
		element.style.fontStyle = (style=='I' || style == 'BI'?'italic':'normal');
		element.style.color = '#' + this.fontColorPicker.currentColor;
		element.style.textDecoration = (this.fontUnderlineSwitch.checked?'underline':'none');

		if (this.fontAllCapsSwitch.checked)
			element.style.textTransform = 'uppercase';
		else if (this.fontSmallCapsSwitch.checked)
			element.style.textTransform = 'lowercase';
		else if (this.fontCapitalizedSwitch.checked)
			element.style.textTransform = 'capitalize';
		else
			element.style.textTransform = 'none';
	},
	getCSSText: function (escaped) {
		if (arguments.length == 0) var escaped = true;
		var style = this.fontStylePicker.getSelected();

		var css = 'font-family: "' + this.fontFamilyPicker.getSelected() + '", "sans-serif";' +
			'font-size: ' + this.fontSizePicker.getSelected() + "px" +
			'line-height: ' + this.lineHeightPicker.getSelected() + "px" +
			'font-weight: ' + (style=='B' || style == 'BI'?'bold':'normal') +
			'font-style: ' + (style=='I' || style == 'BI'?'italic':'normal') +
			'color: ' + '#' + this.fontColorPicker.currentColor +
			'text-decoration: ' + (this.fontUnderlineSwitch.checked?'underline':'none') +
			'text-transform: ';
		if (this.fontAllCapsSwitch.checked)
			css += 'uppercase';
		else if (this.fontSmallCapsSwitch.checked)
			css += 'lowercase';
		else if (this.fontCapitalizedSwitch.checked)
			css += 'capitalize';
		else
			css += 'none';

		return (escaped?css.replace (/"/g, '\\"'):css); // character to fix the coloring: '
	},
	updatePreview: function () {
		this.applyStyles (this.previewElement);
		this.writeData();
		this.previewElement.style.backgroundColor = '#' + TColorPicker.Color.gsInvertHEX(this.fontColorPicker.currentColor);
		if (this.onChange) this.onChange();
	},
	/* data is serialized in form of name:value,name:value  */
	writeData: function () {
		var data = 'F:"' + this.fontFamilyPicker.getSelected() + '",' +
			'Z:' + this.fontSizePicker.getSelected() + ',' +
			'C:"' + this.fontColorPicker.currentColor + '",' +
			'S:"' + this.fontStylePicker.getSelected() + '",' +
			'U:' + (this.fontUnderlineSwitch.checked?"1":"0") + "," +
			'T:"' + (this.fontAllCapsSwitch.checked?'U':(this.fontSmallCapsSwitch.checked?'L':(this.fontCapitalizedSwitch.checked?'C':'N'))) + '",' +
			'H:' + this.lineHeightPicker.getSelected() + '';
		this.fontHiddenInput.value = data;
		this.buttonElement.innerHTML = this.fontFamilyPicker.getSelected() + ', ' + this.fontSizePicker.getSelected() + 'px';
	},
	setStyle: function (style) {
		if (arguments.length == 0 || style == '') return; // defaults
		var a = '{' + style + '}', jsonObj = {};
		eval ('jsonObj = ' + a);
		if (jsonObj) {
			this.fontFamilyPicker.setSelected (jsonObj.F);
			this.fontSizePicker.setSelected (this.fixedSize?this.defaultSize:jsonObj.Z);
			this.lineHeightPicker.setSelected (this.fixedLineHeight?this.defaultLineHeight:jsonObj.H);
			this.fontColorPicker.setColor(jsonObj.C);
			this.fontStylePicker.setSelected (jsonObj.S);
			this.fontUnderlineSwitch.checked = (jsonObj.U == 1);
			this.fontAllCapsSwitch.checked = (jsonObj.T == 'U');
			this.fontSmallCapsSwitch.checked = (jsonObj.T == 'L');
			this.fontCapitalizedSwitch.checked = (jsonObj.T == 'C');
		}
	},
	setDefaults: function () {
		this.fontFamilyPicker.setSelected (this.defaultFont);
		this.fontSizePicker.setSelected (this.defaultSize);
		this.lineHeightPicker.setSelected (this.defaulLineHeight);
		this.fontColorPicker.setColor (this.defaultColor);
		this.fontUnderlineSwitch.checked = false;
		this.fontAllCapsSwitch.checked = false;
		this.fontSmallCapsSwitch.checked = false;
		this.fontCapitalizedSwitch.checked = false;
		this.updatePreview();
	},
/* moving */
	onStartMove: function (event) {
		if (this.moving) {this.onEndMove(event); return; }
		this.sx = Event.pointerX(event) - this.dropdownElement.offsetLeft;
		this.sy = Event.pointerY(event) - this.dropdownElement.offsetTop;
		this.onmm = this.onUpdateMove.bindAsEventListener(this);
		this.onmu = this.onEndMove.bindAsEventListener(this);
		Event.observe(document, "mousemove", this.onmm);
		Event.observe(document, "mouseup", this.onmu);
		this.moving = true;
		Event.stop(event);
	},
	onUpdateMove: function (event) {
		if (!this.moving) return;
		var nx = Event.pointerX(event) - this.sx;
		var ny = Event.pointerY(event) - this.sy;
		this.dropdownElement.style.left = nx + "px";
		this.dropdownElement.style.top = ny + "px";
		Event.stop(event);
	},
	onEndMove: function (event) {
		if (!this.moving) return;
		this.moving = false;
		Event.stopObserving(document, "mousemove", this.onmm);
		Event.stopObserving(document, "mouseup", this.onmu);
		Event.stop(event);
	}
}