var editor={
	lastBlock: 1,
	link: '',
	name: '',
	
	start: function(){
		if( this.link=='' || this.name=='' ){
			alert('Сначала введите короткую ссылку и название');
			return false;
		}
		$.getJSON(
			'start_edit.php',
			{link: this.link, name: this.name},
			editor.afterStart
		);
	},
	
	afterStart: function(data){
		if( data.status=='error' ) alert(data.msg);
		else{
			$("input[name='link']").attr('readonly', 'readonly');
			$("#start").remove();
			var text='<hr />Дополнительные комментарии (контактные данные, примечания)' +
				'<textarea name="comments" style="height: 150px;"></textarea>';
			$("#link_name").append(text);
			$("#link_name").after('<h2>Инструкция и скриншоты</h2><div class="rules">Каждому блоку описания соответствует одна картинка. Загрузите скриншот и в текстовом поле описывайте, что на нем происходит.</div>');
			var buttons='<div class="bigbutton" id="addblock" onclick="editor.addBlock();">+ Добавить блок описания</div>' +
					'<input class="bigbutton" type="submit" value="&gt;&gt; Отправить!" />';
			$("#editor").append(buttons);
			editor.addBlock();
		///////////////////////	
		$('#mainform').ajaxForm({
			success: editor.sended,
			dataType:  'json'
		});
		//////////////////////
		}
	},
	
	addBlock: function(){
		if( this.link=='' || this.name=='' ){
			alert('Сначала введите короткую ссылку и название');
			return false;
		}
		var text='<div class="block" id="block_'+this.lastBlock+'">Текст блока инструкции<br/>' +
				'<div class="text" id="txt_'+this.lastBlock+'">' +
				'<textarea name="text_'+this.lastBlock+'"></textarea>' +
				'<input type="hidden" name="areas_count' +this.lastBlock+'" value="0">' +
				'<div id="forareas'+this.lastBlock+'"></div>' +
				'<div class="addarea" onclick="area.addArea('+this.lastBlock+')">Добавить поле для размещения JID на скриншоте</div>' +
				'</div><div class="image" id="pic_'+this.lastBlock+'">' +
				'Скриншот в PNG (желательно не больше 500px шириной)<br /><input id="'+this.lastBlock+'_'+this.link+'" name="'+this.lastBlock+'_'+this.link+'" type="file" onchange="editor.ajaxFileUpload('+this.lastBlock+');" />' +
			'</div></div>';
		$('#addblock').before(text);
		$('input[name="blocks_count"]').val(this.lastBlock);
		this.lastBlock=this.lastBlock+1;
	},
	
	ajaxFileUpload: function(id){
		var elName=id+'_'+editor.link;
		$.ajaxFileUpload({
			url:'uploadpic.php', 
			secureuri:false,
			fileElementId: elName,
			dataType: 'json',
			success: editor.onUploadPic,
			error: function (data, status, e){
				alert(e);
			}
		})
		return false;
	},
	
	onUploadPic: function(data, status){
		if( data.status=='error' ) alert(data.msg);
		else{
			var el=$('#pic_'+data.number);
			var completeHtml='<img id="img_'+data.number+'" src="../cache/editor/'+data.link+'/img/'+data.number+'img.png?rand='+Math.round(100*Math.random())+'" /><br />' +
					'<span class="delimg" onclick="editor.delImg('+data.number+');">Удалить/заменить картинку</span>';
			el.html(completeHtml);//загружаем картинку в DIV
			var img=$('#img_'+data.number);
			//el.height( img.height() );//изменяем размер DIV-а до размеров картинки
			el.width( img.width() );//т.к. в него будем подгружать рамки
		}
	},
	
	delImg: function(id){
		var el=$('#pic_'+id);
		el.html('<input id="'+id+'_'+editor.link+'" name="'+id+'_'+editor.link+'" type="file" onchange="editor.ajaxFileUpload('+id+');" />');
		$('#forareas'+id).empty();
	},
	
	sended: function(data){
		if( data.status=='error' ) alert(data.msg);
		else{
			alert('Спасибо! Инструкция сохранена.\n Можно закрыть окно или обновить страничку\n Кстати, все еще можно вносить и сохранять изменения!');
		}
		
	}
}


var area = {
	
	addArea: function(id){
		if( !document.getElementById('img_'+id) ){
			alert('Нет картинки');
			return false;
		}
		var curNumForm=$('input[name="areas_count'+id+'"]');
		var curNum=curNumForm.val();
		var html='';
		if(curNum<1){
			html=html+'лево:верх(X:Y) || ширина : шрифт(px) || что писать<br />';
		}
		html=html+'(<input class="coord" type="text" name="tlx'+id+'_'+curNum+'" onkeyup="area.updateTLX('+id+', '+curNum+', this.value);" />:' +
			'<input class="coord" type="text" name="tly'+id+'_'+curNum+'" onkeyup="area.updateTLY('+id+', '+curNum+', this.value);" />) || (' +
			'<input class="coord" type="text" name="w'+id+'_'+curNum+'" onkeyup="area.updateW('+id+', '+curNum+', this.value);" />:' +
			'<input class="coord" type="text" name="h'+id+'_'+curNum+'" onkeyup="area.updateH('+id+', '+curNum+', this.value);" />) || ' +
			'<select name="wtw'+id+'_'+curNum+'" onchange="area.updateText('+id+', '+curNum+', this.value);">' +
			'<option value="full">JID целиком</option>' +
			'<option value="user">Только логин</option>' +
			'<option value="server">Только сервер</option>' +
			'</select><br />';
		$('#forareas'+id).append(html);
		$('#pic_'+id).prepend('<div class="frame" id="'+id+'frame'+curNum+'">tst</div>');
		area.updateText(id, curNum, 'full');
		curNumForm.val(curNum*1+1);
	},
	
	updateTLX: function(id, num, val){
		$("#"+id+'frame'+num).css("left", val+'px');
	},
	updateTLY: function(id, num, val){
		$("#"+id+'frame'+num).css("top", val+'px');
	},
	
	updateW: function(id, num, val){
		$("#"+id+'frame'+num).css("width", val+'px');
	},
	
	updateH: function(id, num, val){
		frame=$("#"+id+'frame'+num);
		frame.css("height", (val*1+2)+'px');
		frame.css("font-size", val+'px');
	},
	
	updateText: function(id, num, val){
		if(val=='full') txt='yyyyyy@server.name';
		if(val=='user') txt='yyyyyy';
		if(val=='server') txt='server.name';
		$("#"+id+'frame'+num).text(txt);
	}
}


$("input[name='link']").change( function(form){
		editor.link=$(this).val();
	}
);

$("input[name='name']").change( function(form){
		editor.name=$(this).val();
	}
);