// JavaScript Document
/* 编辑器数组 */
var g_aoEditor = new Array();
/* 当前选中编辑器的编号 */
var g_iIndex = -1;

function _fnEditorsInit(){
	g_iIndex = -1;
	g_aoEditor.splice(0, g_aoEditor.length);
}

if( !!StepControl ){
	StepControl.fnEditorInit = _fnEditorsInit;
}

/* 编辑器全局配置 */
var g_oEditorConfig = new Object();
//编辑器配置信息--字体列表
g_oEditorConfig.FontList = [{"name": "Aardvark Cafe", "value": "Aardvark Cafe"},{"name": "Accidental Presidency", "value": "Accidental Presidency"},{"name": "Airstream", "value": "Airstream"},{"name": "Albertus Medium", "value": "Albertus Medium"},{"name": "Attract more women", "value": "Attract more women"},{"name": "Bittersweet", "value": "Bittersweet"},{"name": "BlackJack", "value": "BlackJack"},{"name": "Blue Melody", "value": "Blue Melody"},{"name": "BoyzRGross", "value": "BoyzRGross"},{"name": "Brady Bunch", "value": "Brady Bunch"},{"name": "Bumble Bee BV", "value": "Bumble Bee BV"},{"name": "Coronet", "value": "Coronet"},{"name": "EPISODE I", "value": "EPISODE I"},{"name": "Kravitz", "value": "Kravitz"},{"name": "Postmaster", "value": "Postmaster"},{"name": "ribbon", "value": "ribbon"},{"name": "SimLLHP", "value": "SimLLHP"},{"name": "Sleepy Hollow 3.0", "value": "Sleepy Hollow 3.0"},{"name": "The ring", "value": "The ring"},{"name": "Witched", "value": "Witched"}];
//编辑器配置信息--字号列表
g_oEditorConfig.FontSizeList = [10, 12, 14, 16, 18, 24];

function CEditor( sDivId/* 元素ID */, oConfig/* 编辑器配置 */ )
{
	//编辑内容格式信息
	this.oFormatInfo = new Object();
	this.oFormatInfo.sTextContent = "";
	this.oFormatInfo.sFont = "arial";
	this.oFormatInfo.sFontSize = 10;
	this.oFormatInfo.sColor = "000000";
	this.oFormatInfo.sAlign = "center";
	
	//编辑器索引
	this.iIndex = g_aoEditor.length;
	//编辑器配置
	this.oConfig = g_oEditorConfig;
	if( oConfig ) {
		this.oConfig = oConfig;
	}
	
	//根结点
	this.oRootNode = null;
	
	g_aoEditor.push(this);
	
	this.fnInit(sDivId);
}

//初始化
CEditor.prototype.fnInit = function (sId/* 元素ID */) {
	var oJQueryEditor = $(this.fnGetEditorHTML());
	this.oRootNode = oJQueryEditor;
	//绑定事件
	oJQueryEditor.find("#FontFamily").bind("change", this, this.fnFontChange);
	oJQueryEditor.find("#FontSize").bind("change", this, this.fnFontSizeChange);
	oJQueryEditor.find("#TextContent").bind("click", this, this.fnOnFocus);
	oJQueryEditor.find("#btnLeftAlign").bind("click", {"editor":this,"align":"left"}, this.fnAlignClick);
	oJQueryEditor.find("#btnCenterAlign").bind("click", {"editor":this,"align":"center"}, this.fnAlignClick);
	oJQueryEditor.find("#btnRightAlign").bind("click", {"editor":this,"align":"right"}, this.fnAlignClick);
	oJQueryEditor.find("#btnApply").bind("click", this, this.fnApplyClick);
	oJQueryEditor.appendTo("div#" + sId);
};

//字号列表HTML
CEditor.prototype.fnGetFontSizeListHTML = function(){
	var arFontSizeList = this.oConfig.FontSizeList;
	var sHtml ='';
	for(var i=0; i<arFontSizeList.length; i++){
		sHtml += '<option value="' + arFontSizeList[i] + '">' + arFontSizeList[i] + '</option>';
	}
	return sHtml;
};

//字体列表HTML
CEditor.prototype.fnGetFontListHTML = function(){
	var arFontList = this.oConfig.FontList;
	var sHtml = '';
	for(var i=0; i<arFontList.length; i++){
		sHtml += '<option value="' + arFontList[i].value + '">' + arFontList[i].name + '</option>';
	}
	return sHtml;
};

//编辑器HTML
CEditor.prototype.fnGetEditorHTML = function(){
	var sHtml = '<div id="Editor_Index_' + (this.iIndex + 1) + '" style="padding:4px; margin:4px; background-color: #eff9fe"><!-- eff9fe b8b8b8 --><div align="right"><div class="personalizeTextEditorHeader" id="title_Text_Box_2" align="left"><div class="personalizeTextEditorHeaderTitle" id="titleText_Text_Box_2" style="FLOAT: left; WIDTH: 50%; POSITION: relative"> Text Box ' + (this.iIndex + 1) + ' </div><div style="clear: both"> </div></div><div style="clear:  both"> </div><div align="left"><div id="StyleContainer_textbox" style="border: #b8b8b8 1px solid; margin-left:0px; position: static; display: none;"><!-- edit mode flag --><div><div class="styleTitle" style="float:left; width:180px"> Font <A class="clickable previewFontsLink" id="FontLink">&nbsp;(View)</A> </div><div class="styleTitle" style="float:left; width:46px"> Size </div><div class="styleTitle" style="float:left; width:110px"> Color </div></div><div style="width : 180px; float : left;"><SELECT id="FontFamily" style="width : 180px">';
	sHtml += this.fnGetFontListHTML();
	sHtml += '</SELECT></div><div style="width : 46px; float : left;"><SELECT id="FontSize" style="width : 46px">';
	sHtml += this.fnGetFontSizeListHTML();
	sHtml += '</SELECT></div><div style="width : 110px; float : left;"><input type="text" class="color" id="FontColor" name="FontColor" size="12" onclick="openPicker(this)" /></div><div style="clear : both; height:4px;"> </div></div></div></div><TEXTAREA class="textEditorArea" id="TextContent"></TEXTAREA><div style="position:relative"><div id="Text_Align_Control_Box" style="overflow: visible; height: 22px; position: relative; display: none;" align="right"><!-- edit mode flag --><div class="sprite-btn-align-left clickable" id="btnLeftAlign" style="float: left"> </div><div class="sprite-btn-align-center clickable" id="btnCenterAlign" style="float: left"> </div><div class="sprite-btn-align-right clickable" id="btnRightAlign" style="float: left"> </div><div class="sprite-btn-apply clickable" id="btnApply"> </div><div style="clear:both"> </div></div></div></div>';
	//alert(sHtml);
	return sHtml;
};

//加载格式数据
CEditor.prototype.fnLoadFormat = function(oData){
	this.oFormatInfo.sTextContent = oData.sTextContent;
	this.oFormatInfo.sFont = oData.sFont;
	this.oFormatInfo.sFontSize = oData.sFontSize;
	this.oFormatInfo.sColor = oData.sColor;
	this.oFormatInfo.sAlign = oData.sAlign;
	this.oRootNode.find("#TextContent").attr("value", oData.sTextContent);
	//alert(oData.sTextContent.split("\n").length);
	this.oRootNode.find("#TextContent").css("height", 6+16*oData.sTextContent.split("\n").length);
	this.oRootNode.find("select#FontFamily > option").each(function(){
		if(this.value == oData.sFont){
			this.selected = true;
		}
	});
	this.oRootNode.find("select#FontSize > option").each(function(){
		if(this.value == oData.sFontSize){
			this.selected = true;
		}
	});	
	this.oRootNode.find("#FontColor").attr("value", oData.sColor);
};

//更新格式数据
CEditor.prototype.fnUpdateFormat = function(){
	this.oFormatInfo.sFontSize = this.oRootNode.find("select#FontSize > option:selected").attr("value");
	this.oFormatInfo.sFont = this.oRootNode.find("select#FontFamily > option:selected").attr("value");

	this.oFormatInfo.sTextContent = this.oRootNode.find("#TextContent").attr("value");
	this.oFormatInfo.sColor = this.oRootNode.find("#FontColor").attr("value");
};

//格式数据处理函数
CEditor.prototype.fnApply = function(){
	//先更新格式数据
	this.fnUpdateFormat();
	//alert("CEditor.prototype.fnApply:" + JSON.stringify(this.oFormatInfo));
	//调用onApply事件
	if( !!this.onApply ){
		this.onApply(this.oFormatInfo);
	}
};

//进入编辑模式
CEditor.prototype.fnEnterEditMode = function(){
	this.oRootNode.css("background-color","#b8b8b8");
	this.oRootNode.find("#StyleContainer_textbox").show();
	this.oRootNode.find("#Text_Align_Control_Box").show();
	//取消文本框单击事件
	this.oRootNode.find("#TextContent").unbind("click", this.fnOnFocus);
};

//退出编辑模式
CEditor.prototype.fnExitEditMode = function(){
	this.oRootNode.css("background-color","#eff9fe");
	this.oRootNode.find("#StyleContainer_textbox").hide();
	this.oRootNode.find("#Text_Align_Control_Box").hide();
	//绑定文本框单击事件
	this.oRootNode.find("#TextContent").bind("click", this, this.fnOnFocus);
	/* 保存数据 */
	this.fnApply();
};

//获得焦点
CEditor.prototype.fnFocus = function(){
	if( g_iIndex >=0 ){
		g_aoEditor[g_iIndex].fnExitEditMode();
		/* 前一焦点文字块 */
		if( !!this.onBeforeClick ){
			this.onBeforeClick(g_iIndex);		/* */
		}
	}
	g_iIndex = this.iIndex;
	this.fnEnterEditMode();
	if( !!this.onAfterClick ) {
		this.onAfterClick(g_iIndex);
	}
};
//格式数据处理回调函数
//CEditor.prototype.onApply = function(oData){return true;};

//事件处理函数
CEditor.prototype.fnApplyClick = function(e){
	//alert('fnApplyClick');
	var oEditor = e.data;
	oEditor.fnApply();
};

CEditor.prototype.fnAlignClick = function(e){
	//alert('fnAlignClick');
	var sAlign = e.data.align;
	var oEditor = e.data.editor;
	if( e.data === null ){
		sAlign = "center";
	}
	oEditor.oFormatInfo.sAlign = sAlign;
	oEditor.fnApply();
};

CEditor.prototype.fnFontSizeChange = function(e){
	//alert('fnFontSizeChange');
	var oEditor = e.data;
	oEditor.fnApply();
};

CEditor.prototype.fnFontChange = function(e){
	//alert('fnFontChange');
	var oEditor = e.data;
	oEditor.fnApply();
};

CEditor.prototype.fnOnFocus = function(e){
	var oEditor = e.data;
	oEditor.fnFocus();
};


/**
 * 外部处理函数
**/
CEditor.prototype.onBeforeClick = function( iIndex ) {
	var oEditor = g_aoEditor[iIndex];
	//更新坐标数据
	var oVerseInfo = StepControl.oUserConfig.oVerseDetail[iIndex];
	oVerseInfo.x0 = /\d{1,}/.exec( $("#text_block_" + iIndex + "_image").css('left') )[0];
	oVerseInfo.y0 = /\d{1,}/.exec( $("#text_block_" + iIndex + "_image").css('top') )[0];
	//文字块不能移动
	$("#text_block_" + iIndex + "_image").draggable('disable');
	$("#text_block_" + iIndex + "_image").bind('click', oEditor, oEditor.fnOnFocus);
}
CEditor.prototype.onAfterClick = function( iIndex ) {
	var oEditor = g_aoEditor[iIndex];
	//取消本事件
	$("#text_block_" + iIndex + "_image").unbind('click', oEditor.fnOnFocus);
	//加载文字块数据
	oEditor.fnLoadFormat(StepControl.oUserConfig.oVerseDetail[iIndex]);
	//文字块图片可移动
	$("#text_block_" + iIndex + "_image").draggable('enable');
}
CEditor.prototype.onApply = function( oFormatInfo ) {
	var iIndex = g_iIndex;
	var oVerseInfo = StepControl.oUserConfig.oVerseDetail[iIndex];
	oVerseInfo.sTextContent = oFormatInfo.sTextContent;
	oVerseInfo.sFont = oFormatInfo.sFont;
	oVerseInfo.sFontSize = oFormatInfo.sFontSize;
	oVerseInfo.sColor = oFormatInfo.sColor;
	oVerseInfo.sAlign = oFormatInfo.sAlign;
	oVerseInfo.x0 = /\d{1,}/.exec( $("#text_block_" + iIndex + "_image").css('left') )[0];
	oVerseInfo.y0 = /\d{1,}/.exec( $("#text_block_" + iIndex + "_image").css('top') )[0];
	$("#text_block_" + iIndex + "_image > img").attr("src",'getImage.php?op=text&json=' + encodeURIComponent(JSON.stringify(oVerseInfo)));
}