// JavaScript Document
$(function(){
	var barObj = $('#ctrl_bar');
	var coverObj = $('#resume_cover');
	var itemArr = Array();
	var bgListArr = Array();
	var timestamp = 100;
	var newId = timestamp+1;
	var nowCoverTempId = 0;
	var fontFamilyObj = {a:"宋体",b:"黑体",c:"隶书",d:"楷体_GB2312",e:"微软雅黑"};
	initCtrlBar();
	initBgList(0,3);
	//initBgList();
	//coverObj.css('backgroundImage','url(style/common/images/thumb_bg.gif)');
	$('a.saveItem').click(function(){
		$.post(url,$('form.ctrl_bar').serialize(),function(data){
			eval('myjson=' + data + ';');
			alert(myjson.txt);
			location.href = myjson.url;
			//alert('封面设计完成！现在开始设计您的个人简历！');
			//location.href = '?mod=resume&ac=put_out';
		});
	});
	$('a.resetItem').click(function(){
		if(nowCoverTempId)
		{
			$('#mb_'+nowCoverTempId+' a').click();
		}else{
			alert('刷新本页');
		}
	});
	
	function initBgList(startId,perPageNum)
	{
		$.getJSON(url,{'op':'mouldboard','s':startId,'p':perPageNum},function(json){
			bgListJson = json;
			var html = '<li class="last_page"><a href="javascript:void(0);">上一页</a></li>'
			$.each(bgListJson,function(key,value){
				bgListArr[value.mb_id] = value.information;
				html += '<li id="mb_'+value.mb_id+'"><a href="javascript:void(0);"><img src="'+value.background+'" /><em>'+value.mb_name+'</em></a></li>';
			});
			html += '<li class="next_page"><a href="javascript:void(0);">下一页</a></li>';
			$('.btm_area').next('ul').html(html).find('.last_page').click(function(){
				initBgList((startId-perPageNum),perPageNum);
				//alert((startId-perPageNum)+'|'+perPageNum);
			}).end().find('.next_page').click(function(){
				initBgList((startId+perPageNum),perPageNum);
				//alert((startId+perPageNum)+'|'+perPageNum);
			}).end().find('li').not('.last_page,.next_page').find('a').click(function(){
				var id = getItemId($(this).parents('li').attr('id'));
				nowCoverTempId = id;
				$('form.ctrl_bar input.mb_id').val(id);
				coverObj.css('backgroundImage','url('+$(this).find('img').attr('src')+')');
				var itemObj = '';
				$.each(bgListArr[id],function(key,value){
					var addNewCtrlItem = true;
					$.each(itemArr,function(k,v){
						if(v != null && v.item_name == value.item_name)
						{
							addNewCtrlItem = false;
							//if(confirm('新的模板"'+v.item_name+'"将会替换您原先"'+v.item_name+'"显示样式，您确定么？'))
							//{
								value.item_id = v.item_id;
								value.item_value = v.item_value;
								itemArr[k] = clone(value);
								updateItem(value.item_id);
							//}
						}
					});
					if(addNewCtrlItem)
					{
						value.item_id = newId++;
						itemArr[value.item_id] = value;
						var html = item_ctrl_maker(value);
						itemObj = item_element_maker(value);
						barObj.append(html);
						itemObj.appendTo(coverObj);
						item_drag(itemObj);
					}
				});
				return false;
			});
		});
	}

	function initCtrlBar()
	{
		barObj.html('');
		importJsonToCtrlBar(coverJson);
		barObj.find('h2 a').live('click',function(){
			item_ctrl_display($(this).parents('div.item_ctrl').attr('id'));
		}).end()
		.find('a.delete').live('click',function(){
			var id = getItemId($(this).parents('div.item_ctrl').attr('id'));
			$(this).parents('div.item_ctrl').hide('slow',function(){$(this).remove();});
			$('#item_'+id).hide('slow',function(){$(this).remove();});
			if(id > 0){$.get(url,{'op':'del','itemid':id},function(){});}
			itemArr[id] = null;
		}).end()
		.find('a.copy').live('click',function(){
			var id = getItemId($(this).parents('div.item_ctrl').attr('id'));
			itemArr[newId] = clone(itemArr[id]);
			itemArr[newId].item_id = newId;
			itemArr[newId].item_value = '请输入您想显示的内容';
			itemArr[newId].item_name = '我的自定义字段'+(newId-timestamp);
			var ctrlHtml = item_ctrl_maker(itemArr[newId],1);
			$(ctrlHtml).hide().appendTo(barObj).show('slow');
			var itemHtml = item_element_maker(itemArr[newId]);
			itemHtml.appendTo(coverObj).dblclick();
			item_drag(itemHtml);
			updateItem(newId);
			newId++;
		}).end()
		.find('a.reset').live('click',function(){
			var id = getItemId($(this).parents('div.item_ctrl').attr('id'));
			itemArr[id].item_value	= '请输入您想显示的文本。';
			itemArr[id].font_size	= '12';
			itemArr[id].font_color	= '#000';
			itemArr[id].font_family	= 'd';
			itemArr[id].x_point		= '0';
			itemArr[id].u_point		= '0';
			updateItem(id);
		});
		coverObj.find('div').live('dblclick',function(){
			var id = getItemId($(this).attr('id'));
			$('#item_'+id+'_ctrl').find('input.item_value').select();
			barObj.find('div.item_ctrl').each(function(i){
				if($(this).attr('id') == 'item_'+id+'_ctrl')
				{
					item_ctrl_display($(this).attr('id'),'show');
				}else{
					item_ctrl_display($(this).attr('id'),'hide');
				}
			});
		});
		function item_ctrl_display(id,type)
		{
			var jqObj = $('#'+id);
			if(type == 'show' || (type == null && jqObj.find('p').css('display') == 'none'))
			{
				jqObj.find('h2 a').text('[隐藏]');
				jqObj.find('p').slideDown('slow');
			}else{
				jqObj.find('h2 a').text('[展开]');
				jqObj.find('p').slideUp('slow');
			}
		}
		function importJsonToCtrlBar(json)
		{
			barObj.find('input.item_value').live('keyup',function(){
				var id = getItemId($(this).parents('div.item_ctrl').attr('id'));
				itemArr[id].item_value = $(this).val();
				updateItem(id);
			});
			barObj.find('a.font_family').live('click',function(){
				var id = getItemId($(this).parents('div.item_ctrl').attr('id'));
				var html = '<div id="font_family_dialog_'+id+'" class="dialog" title="请选择字体"><ul>';
				$.each(fontFamilyObj,function(key,value){
					html += '<li><a href="javascript:void(0);" id="font_family_'+id+'_'+key+'" class="fonts" title="'+key+'">'+value+'</a></li>';
				});
				html += '</ul></div>';
				$(html).dialog({
					bgiframe: true,
					height: 300,
					modal: true,
					buttons: {
						Ok: function() {
							$(this).dialog('close');
						}
					}
				});
				$('div#font_family_dialog_'+id+' a.fonts').click(function(){
					$(this).css('background','#FF0').parents('#font_family_dialog_'+id).find('a.fonts').not(this).css('background','none');
					itemArr[id].font_family=$(this).attr('title');
					updateItem(id);
				});;
			})
			barObj.find('a.font_color').live('click',function(){
				var id = getItemId($(this).parents('div.item_ctrl').attr('id'));
				$(this).ColorPicker({
										onBeforeShow	: function () {
											$(this).ColorPickerSetColor(itemArr[id].font_color);
											$('#item_'+id+'_ctrl a.font_color').text('请选择颜色');
											return false;
										},
										onChange	: function (hsb, hex, rgb) {
											$('#item_'+id+'_ctrl a.font_color,#item_'+id).css('color', '#'+hex);
											itemArr[id].font_color = '#'+hex;
										},
										onShow		: function (colpkr) {
											$(colpkr).slideDown('slow');
											return false;
										},
										onSubmit	: function(hsb, hex, rgb, el) {
											$(el).ColorPickerHide();
											$('#item_'+id+'_ctrl a.font_color').text(itemArr[id].font_color).css('color', '#000');
											updateItem(id);
											return false;
										},
										onHide		: function (colpkr) {
											$(colpkr).slideUp('slow');
											$('#item_'+id+'_ctrl a.font_color').text(itemArr[id].font_color).css('color', '#000');
											updateItem(id);
											return false;
										}
									}).click();
				updateItem(id);
			});
			barObj.find('.slider').live('click',function(){
				var id = getItemId($(this).parents('div.item_ctrl').attr('id'));
				$(this).html('').unbind('click').slider({
					range	: "min",
					value	: 18,
					min		: 1,
					max		: 99,
					slide	: function(event, ui) {
									itemArr[id].font_size = ui.value;
									$('#item_'+id).css('fontSize',ui.value+'px');
									$(this).find('.ui-slider-handle').text(ui.value+'px');
								},
					stop	: function(event, ui) {
									updateItem(id);
								}
				});
			});
			$.each(json,function(key,value){
				itemArr[value.item_id] = value; //debug 用对象控制双方
				$('form.ctrl_bar input.cover_id').val(value.cover_id);
				$('form.ctrl_bar input.mb_id').val(value.mb_id);
				var html = item_ctrl_maker(value);
				var itemObj = item_element_maker(value);
				itemObj.appendTo(coverObj);
				item_drag(itemObj);
				barObj.append(html);
			});
		}
	}
	
function item_ctrl_maker(json,newItem)
{
	var html = Array();
	var value = jsonToValue(json);
	var n = 0;
	html[n] = '<div class="item_ctrl" id="item_'+value.item_id+'_ctrl">'; n++;
	html[n] = '<h2><a href="javascript:void(0);">[隐藏]</a>'+value.item_name+'</h2>'; n++;
	html[n] = '<p><label>内容</label><input type="text" name="'+value.item_id+'[item_value]" class="btn item_value" value="'+value.item_value+'" /></p>'; n++;
	eval("var font_family = fontFamilyObj."+value.font_family+";");
	html[n] = '<p><label>字体</label><a href="javascript:void(0)" class="btn font_family">'+font_family+'</a></p>'; n++;
	html[n] = '<p><label>大小</label><span class="slider btn"><a href="javascript:void(0)">'+value.font_size+'px</a></span></p>'; n++;
	html[n] = '<p><label>颜色</label><a href="javascript:void(0)" class="btn font_color">'+value.font_color+'</a></p>'; n++;
	html[n] = '<p><label>操作</label>'; n++;
	html[n] = '<span class="btn">'; n++;
	html[n] = '<a href="javascript:void(0)" class="reset">重置</a> '; n++;
	html[n] = '<a href="javascript:void(0)" class="copy">复制</a> '; n++;
	html[n] = '<a href="javascript:void(0)" class="delete">删除</a>'; n++;
	html[n] = '<input type="hidden" class="font_family" name="'+value.item_id+'[font_family]" value="'+value.font_family+'" />'; n++;
	html[n] = '<input type="hidden" class="item_name" name="'+value.item_id+'[item_name]" value="'+value.item_name+'" />'; n++;
	html[n] = '<input type="hidden" class="item_id" name="'+value.item_id+'[item_id]" value="'+value.item_id+'" />'; n++;
	html[n] = '<input type="hidden" class="font_size" name="'+value.item_id+'[font_size]" value="'+value.font_size+'" />'; n++;
	html[n] = '<input type="hidden" class="x_point" name="'+value.item_id+'[x_point]" value="'+value.x_point+'" />'; n++;
	html[n] = '<input type="hidden" class="y_point" name="'+value.item_id+'[y_point]" value="'+value.y_point+'" />'; n++;
	html[n] = '<input type="hidden" class="font_color" name="'+value.item_id+'[font_color]" value="'+value.font_color+'" />'; n++;
	html[n] = '<input type="hidden" class="item_new" name="'+value.item_id+'[item_new]" value="'+(newItem==null?'0':'1')+'" />'; n++;
	html[n] = '</span>'; n++;
	html[n] = '</p>'; n++;
	html[n] = '</div>'; n++;
	html = html.join('');
	return html;
}
function item_element_maker(json)
{
	var value = jsonToValue(json);
	eval("var font_family = fontFamilyObj."+value.font_family+";");
	var returnObj = $('<div id="item_'+value.item_id+'">'+value.item_value+'</div>')
					.css({
						 'color'		: value.font_color,
						 'position'		: 'absolute',
						 'left'			: value.x_point+'px',
						 'top'			: value.y_point+'px',
						 'fontSize'		: value.font_size+'px',
						 'fontFamily'	: font_family
						 });
	return returnObj;
}
function item_drag(obj)
{
	obj.draggable({
		containment	: '#resume_cover',
		zIndex		: 1,
		cursor		: 'move',
		start		: function(){
							$(this).css({'textDecoration':'underline'});
						},
		stop		: function(){
							$(this).css({'textDecoration':'none'});
							var id = getItemId($(this).attr('id'));
							itemArr[id].x_point = parseInt($(this).css('left'));
							itemArr[id].y_point = parseInt($(this).css('top'));
							updateItem(id);
						}
	});
}
function updateItem(item_id)
{
	var id = item_id;
	var itemObj = coverObj.find('#item_'+id);
	var itemCtrlBarObj = barObj.find('#item_'+id+'_ctrl');
	eval("var font_family = fontFamilyObj."+itemArr[id].font_family+";");
	itemObj.text(itemArr[id].item_value)
	.css({
		 'color'		: itemArr[id].font_color,
		 'left'			: itemArr[id].x_point+'px',
		 'top'			: itemArr[id].y_point+'px',
		 'fontSize'		: itemArr[id].font_size+'px',
		 'fontFamily'	: font_family
		 });
	itemCtrlBarObj.find('input.font_color').val(itemArr[id].font_color).end()
	.find('input.x_point').val(itemArr[id].x_point).end()
	.find('input.y_point').val(itemArr[id].y_point).end()
	.find('input.font_size').val(itemArr[id].font_size).end()
	.find('input.item_value').val(itemArr[id].item_value).end()
	.find('input.font_family').val(itemArr[id].font_family).end()
	.find('a.font_family').text(font_family).end();
}
function jsonToValue(json)
{
	var value = Object;
		value.item_id		= (json.item_id)==0?(newId++):json.item_id;
		value.item_name		= (json.item_name)==null?0:json.item_name;
		value.item_value	= (json.item_value)==null?0:json.item_value;
		value.font_family	= (json.font_family)==null?'a':json.font_family;
		value.font_color	= (json.font_color)==null?0:json.font_color;
		value.font_size		= (json.font_size)==null?0:json.font_size;
		value.x_point		= (json.x_point)==null?0:parseInt(json.x_point);
		value.y_point		= (json.y_point)==null?0:parseInt(json.y_point);
	return value;
}
function getItemId(id)
{
	var id = id.split('_');
	return id[1];
}
function debug()
{
	var debugStr = '<debug>\n';
	$.each(itemArr,function(key,value){
		if(value != null)
		{
			debugStr += '\t<item_'+key+'>\n';
			if(value != null)
			{
				$.each(value,function(k,v){
					debugStr += '\t\t<'+k+'>'+v+'</'+k+'>\n';
				});
			}
			debugStr += '\t</item_'+key+'>\n';
		}
	});
	return debugStr+'</debug>';
}
function clone(myObj)
{
	if(typeof(myObj) != 'object') return myObj;
	if(myObj == null) return myObj;
	
	var myNewObj = new Object();
	
	for(var i in myObj)
	{
		myNewObj[i] = clone(myObj[i]);
	}
	
	return myNewObj;
}
});