// Функция захвата объекта, используется при инициализации
function getObj(name)
{
	if (document.getElementById) return document.getElementById(name);
	else if (document.all) return document.all[name];
	else if (document.layers) return document.layers[name];
	else return false;
}

// Плавное изменение прозрачности
function fade(obj, from, to) {
	var steps = 20
	var time = 300;
	
	if(from == 0)
	{
		obj.style.opacity = 0;
		obj.style.filter = 'alpha(opacity=0)';
		obj.style.display = "block";
	}
	
	for (var i=0; i <= steps; i++)
	{
		setTimeout(function(step)
		{
			return function()
			{
				obj.style.opacity = String((from + (to - from)*(step/steps))/100);
				obj.style.filter = 'alpha(opacity=' + String(from + (to - from)*(step/steps)) + ')';
			}
		}(i), time*i/steps);
	}
	
	if(to == 0)
	{
		setTimeout(function()
		{
			obj.style.display = "none";
		}, time);
	}
}

function setOpacity(value)
{
	testObj.style.opacity = value/10;
	testObj.style.filter = 'alpha(opacity=' + value*10 + ')';
}

function setHint(hint)
{
	if(!hint) hint = 'Чтобы оставить свою надпись на заборе, кликните по свободному участку забора и в напишите на появившейся картонке текст надписи.';
	document.getElementById('hint').innerHTML = hint;
}
hints = Array();
hints['writer'] = 'Введите текст вашей надписи в поле в верхней части картонки. Вы можете настроить внешний вид своей надписи, пользуясь настройками в нижней части картонки. Чтобы не пожалеть о содеянном, рекомендуется перед сохранением воспользоваться предпросмотром, сохраненную надпись отредактировать уже нельзя. Если вы передумали и хотите поместить надпись в другом месте, кликните на это место и картонка переместится :-)';
hints['preview'] = 'Сейчас вы можете видеть, как будет смотреться ваша надпись после сохранения. Чтобы вернуться к редактированию, кликните по забору.'
function Writer(board)
{
	var wMyself = this;
	this.x = 0;
	this.y = 0;
	this.preview = null;
	this.shown = false;
	
	this.show = function(x, y)
	{
		this.x = x;
		this.y = y;
		
		if(!this.shown)
		{
			this.wForm.reset();
			for(var i = 0; i < this.wForm.elements.length; i++)
			{
				if(this.wForm.elements[i].onchange)
				{
					this.wForm.elements[i].onchange();
				}
			}
		}
		
		this.wDiv.style.top = String(y + this.board.divY + 30)+"px";
		this.wDiv.style.left = String(Math.max(x + this.board.divX - 225, 0))+"px";
		//this.wDiv.style.display = "block";
		fade(wMyself.wDiv, 0, 100);
		
		this.wPoint.style.top = String(y + this.board.divY - 40)+"px";
		this.wPoint.style.left = String(x + this.board.divX + 3)+"px";
		this.wPoint.style.display = "block";
		
		this.wDiv.onclick = function(e){
			if(!e) e = window.event;
			e.cancelBubble = true;
		}
		document.body.onclick = this.hide;
		this.shown = true;
		
		setHint(hints['writer']);
	}
	
	this.hidePoint = function()
	{
		this.wPoint.style.display = "none";
	}
	
	this.hide = function()
	{
		wMyself.shown = false;
		fade(wMyself.wDiv, 100, 0);
		wMyself.x = 0;
		wMyself.y = 0;
		wMyself.hidePoint();
		setHint();
	}
	
	this.hidePreview = function(e)
	{
		document.body.removeChild(wMyself.preview);
		wMyself.preview = null;
		
		wMyself.show(wMyself.x, wMyself.y);
		fade(wMyself.board.div, 70, 100);
		
		wMyself.board.div.onclick = wMyself.board.showWriter;
		
		if(!e) e = window.event;
		e.cancelBubble = true;
		document.body.onclick = wMyself.hide;
		setHint(hints['writer']);
	}
	
	this.showPreview = function()
	{
		// Затеняем доску
		fade(wMyself.board.div, 100, 70);
		// Прячем форму редактирования
		fade(wMyself.wDiv, 100, 0);
		//wMyself.hidePoint();
		
		// Создаем превьюшку
		wMyself.preview = document.createElement('div');
		wMyself.preview.appendChild(document.createTextNode(wMyself.wForm.message.value));
		wMyself.preview.className = 'message preview';
		wMyself.preview.style.top = String(wMyself.y + wMyself.board.divY)+"px";
		wMyself.preview.style.left = String(wMyself.x + wMyself.board.divX)+"px";
		wMyself.preview.style.display = "none";
		
		// Применяем стили
		wMyself.preview.style.fontSize = wMyself.wForm.size.value+'px';
		wMyself.preview.style.color = wMyself.wForm.color.value;
		wMyself.preview.style.fontFamily = wMyself.wForm.font.value;
		wMyself.preview.style.fontWeight = (wMyself.wForm.bold.checked)?"bold":"normal";
		wMyself.preview.style.textDecoration = (wMyself.wForm.underline.checked)?"underline":"none";
		wMyself.preview.style.fontStyle = (wMyself.wForm.italic.checked)?"italic":"normal";
		
		// Показываем
		document.body.appendChild(wMyself.preview);
		fade(wMyself.preview, 0, 100);
		
		// Переопределяем обработчики
		wMyself.board.div.onclick = wMyself.hidePreview;
		document.body.onclick = wMyself.hidePreview;
		setHint(hints['preview']);
	}
	
	this.sendForm = function()
	{
		wMyself.wForm.x.value = wMyself.x;
		wMyself.wForm.y.value = wMyself.y;
		
		var req = new JsHttpRequest();
		req.onreadystatechange = function() {
			if (req.readyState == 4) {
				if(req.responseJS.success)
				{
					// Создаем надпись
					preview = document.createElement('div');
					preview.appendChild(document.createTextNode(wMyself.wForm.message.value));
					preview.className = 'message';
					preview.style.top = String(wMyself.y)+"px";
					preview.style.left = String(wMyself.x)+"px";
					preview.style.display = "none";
					
					// Применяем стили
					preview.style.fontSize = wMyself.wForm.size.value+'px';
					preview.style.color = wMyself.wForm.color.value;
					preview.style.fontFamily = wMyself.wForm.font.value;
					preview.style.fontWeight = (wMyself.wForm.bold.checked)?"bold":"normal";
					preview.style.textDecoration = (wMyself.wForm.underline.checked)?"underline":"none";
					preview.style.fontStyle = (wMyself.wForm.italic.checked)?"italic":"normal";
					
					// Показываем
					wMyself.board.div.appendChild(preview);
					fade(preview, 0, 100);
					wMyself.hide();
				}
				else
				{
					alert("Ошибка:\n"+req.responseJS.error);
				}
			}
		}
		// Prepare request object (automatically choose GET or POST).
		req.open(null, 'post.php', true);
		// Send data to backend.
		req.send( { q: wMyself.wForm } );
	}
	
	this.board = board;
	
	this.wDiv = getObj('writer');
	this.wForm = getObj('writer-form');
	this.wPoint = getObj('writer-point');
	
	this.wForm.size.onchange = function()
	{
		wMyself.wForm.message.style.fontSize = String(this.value)+"px";
	}
	
	this.wForm.color.onchange = function()
	{
		wMyself.wForm.message.style.color = String(this.value);
	}
	
	this.wForm.font.onchange = function()
	{
		wMyself.wForm.message.style.fontFamily = String(this.value);
	}
	
	this.wForm.fontSelect.onchange = function()
	{
		wMyself.wForm.font.value = String(this.value);
		wMyself.wForm.font.onchange();
	}
	
	this.wForm.bold.onchange = function()
	{
		wMyself.wForm.message.style.fontWeight = (this.checked)?"bold":"normal";
	}
	
	this.wForm.italic.onchange = function()
	{
		wMyself.wForm.message.style.fontStyle = (this.checked)?"italic":"normal";
	}
	
	this.wForm.underline.onchange = function()
	{
		wMyself.wForm.message.style.textDecoration = (this.checked)?"underline":"none";
	}
	
	this.wForm.preview.onclick = this.showPreview;
	this.wForm.cancel.onclick = this.hide;
	this.wForm.save.onclick = this.sendForm;
}

function Board()
{
	var myself = this;
	
	// Объект слоя
	this.div = null;
	
	// Координаты слоя
	this.divX = 0;
	this.divY = 0;
	
	// Толщина рамки слоя
	this.bWidth = 3;
	
	// Редактор
	this.writer = null;
	
	// Находим координату X слоя на странице
	this.findPosX = function (obj)
	{
		var currleft = 0;
		if (obj.offsetParent)
			while (obj.offsetParent) {
				currleft += obj.offsetLeft
				obj = obj.offsetParent;
			}
		else if (obj.x) currleft += obj.x;
		return currleft;
	}
	
	// Находим координату Y слоя на странице
	this.findPosY = function (obj)
	{
		var currtop = 0;
		if (obj.offsetParent)
			while (obj.offsetParent) {
				currtop += obj.offsetTop
				obj = obj.offsetParent;
			}
		else if (obj.y) currtop += obj.y;
		return currtop;
	}
	
	// Получаем координаты курсора относительно слоя
	this.getCursorXY = function(cursor) {
		if(!cursor) var cursor = window.event;
		var x = 0;
		var y = 0;
		if (cursor.pageX || cursor.pageY) {
			x = cursor.pageX;
			y = cursor.pageY;
		}
		else if (cursor.clientX || cursor.clientY) {
			x = cursor.clientX + document.documentElement.scrollLeft;
			y = cursor.clientY + document.documentElement.scrollTop;
		}
		x -= this.divX + this.bWidth;
		y -= this.divY + this.bWidth;;
		
		return {x: x, y:y}
	}
	
	// Показать редактор
	this.showWriter = function(e)
	{
		coord = myself.getCursorXY(e);
		myself.writer.show(coord.x, coord.y);
		if(!e) e = window.event;
		e.cancelBubble = true;
	}
	
	this.div = getObj('board');
	
	this.divX = this.findPosX(this.div);
	this.divY = this.findPosY(this.div);
	
	this.writer = new Writer(this);
	
	this.div.onclick = this.showWriter;
}

// ожидание загрузки страницы
// и вызов функции инициализации
try {
	window.addEventListener('load', function(){ Board = new Board() }, false);
} catch(e) {
	window.onload = function(){ Board = new Board() };
}