const TYPE_WRAPPER = 0;
const TYPE_SEPARATOR = 1;
const TYPE_BUILT_IN = 2;

var diBox;
var siBox;

var action_add = new XAction('img/bullet_go.png', ActionItemAdd);
var action_del = new XAction('img/cross.png', ActionItemDelete);
var action_up = new XAction('img/arrow_up.png', ActionMoveUp);
var action_down = new XAction('img/arrow_down.png', ActionMoveDown);

window.addEventListener('load', Init, false);

function handleSubmit() {
	var itemList = new Array();
	for(var i = 0; i < siBox.items.length; i++) {
		var item = siBox.items[i];
		var action = RecreateAction(item);
		itemList.push(action);
	}
	document.getElementById('optItemData').value = JSON.stringify(itemList);
}

function showOptional(target, showOnValue) {
	var tagList = target.parentNode.getElementsByTagName('*');
	var optContainer = false;

	for(var i = 0; i < tagList.length; i++) {
		if(tagList[i].className == 'optional') {
			optContainer = tagList[i];
			break;
		}
	}

	if(optContainer) {
		if(target.value == showOnValue)
			optContainer.style.display = 'block';
		else
			optContainer.style.display = 'none';
	}
}

var defaultActions = [
	{'caption': '[Separator]', 'type': TYPE_SEPARATOR},
	{'caption': '[Custom item]', 'type': TYPE_WRAPPER, 'l': '', 'r': ''},
	{'caption': 'HTML: bold', 'type': TYPE_WRAPPER, 'id': 0, 'l': '<b>', 'r': '</b>'},
	{'caption': 'HTML: italic', 'type': TYPE_WRAPPER, 'id': 1, 'l': '<i>', 'r': '</i>'},
	{'caption': 'HTML: center', 'type': TYPE_WRAPPER, 'id': 2, 'l': '<center>', 'r': '</center>'},
	{'caption': 'HTML: link', 'type': TYPE_WRAPPER, 'id': 3, 'l': '<a href="" target="_blank" title="">', 'r': '</a>'},
	{'caption': 'HTML: image', 'type': TYPE_WRAPPER, 'id': 4, 'l': '<img src="', 'r': '" width="" height="" alt="" border="0" />'},
	{'caption': 'HTML: paragraph', 'type': TYPE_WRAPPER, 'id': 5, 'l': '<p>', 'r': '</p>'},
	{'caption': 'BB: bold', 'type': TYPE_WRAPPER, 'id': 6, 'l': '[b]', 'r': '[/b]'},
	{'caption': 'BB: italic', 'type': TYPE_WRAPPER, 'id': 7, 'l': '[i]', 'r': '[/i]'},
	{'caption': 'BB: link', 'type': TYPE_WRAPPER, 'id': 8, 'l': '[url=]', 'r': '[/url]'},
	{'caption': 'BB: [img=]', 'type': TYPE_WRAPPER, 'id': 9, 'l': '[img=', 'r': ']'},
	{'caption': 'BB: [img][/img]', 'type': TYPE_WRAPPER, 'id': 10, 'l': '[img]', 'r': '[/img]'},
];

function CreateActionHelper(action, item) {
	item.type = action.type;
	switch(action.type) {
		case TYPE_WRAPPER:
			item.textLeft = action.l;
			item.textRight = action.r;
			break;
		case TYPE_BUILT_IN:
			item.func = action.func;
			break;
	}
}

function AddMenuItem(action) {
	var item = new XListItem(action.caption);
	item.AddAction(action_del.Create(item));
	item.AddAction(action_down.Create(item));
	item.AddAction(action_up.Create(item));
	CreateActionHelper(action, item);
	siBox.Add(item);
}

function RecreateAction(item) {
	var action = {'caption': item.caption, 'type': item.type};
	switch(action.type) {
		case TYPE_WRAPPER:
			action.l = item.textLeft;
			action.r = item.textRight;
			break;
		case TYPE_BUILT_IN:
			action.func = item.func;
			break;
	}
	return(action);
}

function ResetMenu() {
	siBox.Clear();
	for(var i = 2; i < 8; i++) {
		AddMenuItem(defaultActions[i]);
	}
	AddMenuItem(defaultActions[0]);
	for(var i = 8; i < defaultActions.length; i++) {
		AddMenuItem(defaultActions[i]);
	}
}

function ClearMenu() {
	siBox.Clear();
}

function Init() {
	diBox = new XListBox(document.getElementById('defaultItems'));
	siBox = new XListBox(document.getElementById('selectedItems'));
	diBox.selectable = false;
	siBox.addEventListener('select', 'FocusEditor(event);');

	var item;
	for(var i = 0; i < defaultActions.length; i++) {
		var action = defaultActions[i];
		item = new XListItem(action.caption);
		item.AddAction(action_add.Create(item));
		CreateActionHelper(action, item);
		diBox.Add(item);
	}

	ResetMenu();
}

function HideEditors() {
	document.getElementById('edit_wrapper').style.display = 'none';
	document.getElementById('edit_builtin').style.display = 'none';
}

function ShowEditor(type) {
	HideEditors();
	switch(type) {
		case TYPE_WRAPPER:
			document.getElementById('edit_wrapper').style.display = 'block';
			break;
		case TYPE_BUILT_IN:
			document.getElementById('edit_builtin').style.display = 'block';
			break;
	}
}

function FocusEditor(event) {
	if(event.selectedIndex >= 0) {
		var item = siBox.items[event.selectedIndex];
		if(item.selected) {
			document.getElementById('optItemType_' + item.type).checked = true;
			switch(item.type) {

				case TYPE_WRAPPER:
					document.getElementById('optItemCaption').value = item.caption;
					document.getElementById('optItemCaptionB').value = item.caption;
					document.getElementById('optItemLeft').value = item.textLeft;
					document.getElementById('optItemRight').value = item.textRight;
					break;

				case TYPE_SEPARATOR:
					document.getElementById('optItemCaption').value = '';
					document.getElementById('optItemCaptionB').value = '';
					break;

				case TYPE_BUILT_IN:
					document.getElementById('optItemCaption').value = item.caption;
					document.getElementById('optItemCaptionB').value = item.caption;
					document.getElementById('optItemFunc').value = item.func;
					break;

			}
			ShowEditor(item.type);
		}
	}
	else
		HideEditors();
}

function ActionItemDelete(event) {
	var e = event ? event : window.event;
	var t = event.target ? event.target : event.srcElement;
	if(confirm('Are you sure you want to remove this item?'))
		siBox.Delete(t.parent.index);
}

function ActionMoveUp(event) {
	var e = event ? event : window.event;
	var t = event.target ? event.target : event.srcElement;
	siBox.MoveUp(t.parent.index);
}

function ActionMoveDown(event) {
	var e = event ? event : window.event;
	var t = event.target ? event.target : event.srcElement;
	siBox.MoveDown(t.parent.index);
}

function ActionItemAdd(event) {
	var e = event ? event : window.event;
	var t = event.target ? event.target : event.srcElement;
	AddMenuItem(RecreateAction(t.parent));

	if(siBox.tag.scrollHeight > siBox.tag.offsetHeight)
		siBox.tag.scrollTop = siBox.tag.scrollHeight - siBox.tag.offsetHeight + 5;
	siBox.Select(siBox.items.length - 1);
}

function ActionItemApply() {
	if(siBox.selectedIndex >= 0) {
		var item = siBox.items[siBox.selectedIndex];
		var typeList = document.getElementById('configurator').optItemType;
		for(var i = 0; i < typeList.length; i++) {
			var t = typeList[i];
			if(t.checked) {
				item.type = parseInt(t.value);
				break;
			}
		}
		switch(item.type) {

			case TYPE_WRAPPER:
				item.textLeft = document.getElementById('optItemLeft').value;
				item.textRight = document.getElementById('optItemRight').value;
				item.caption = document.getElementById('optItemCaption').value;
				break;

			case TYPE_SEPARATOR:
				item.caption = '[Separator]';
				break;

			case TYPE_BUILT_IN:
				item.func = document.getElementById('optItemFunc').value;
				item.caption = document.getElementById('optItemCaptionB').value;
				break;

		}
		item.Refresh();
	}
}

////////////////////////////////////////////////////////////////////////////////

function XAction(url, action) {
	var src = url;
	var action = action;

	this.Create = function(parent) {
		var tag = document.createElement('img');
		tag.src = src;
		tag.align = 'right';
		tag.parent = parent;
		if(action) tag.addEventListener('click', action, false);
		return(tag);
	}
}

////////////////////////////////////////////////////////////////////////////////

function XDummyItem(parent) {
	this.tag = document.createElement('div');
	this.tag.className = 'listbox_dummy';
	this.tag.innerHTML = '&nbsp';
	if(parent) parent.Add(this);
}

////////////////////////////////////////////////////////////////////////////////

function XListItem(caption, parent) {
	this.caption = caption;
	this.tag = document.createElement('div');
	this.tag.self = this;
	var self = this;

	this.Init = function(parent) {
		this.tag.className = 'listbox_item';
		this.tag.innerHTML = this.caption;
		this.selected = false;
		this.parent = false;

		this.type = TYPE_WRAPPER;
		this.textLeft = '';
		this.textRight = '';

		this.tag.addEventListener('click', this.mouseClick, false);

		if(parent) parent.Add(this);
	}
	
	this.mouseClick = function(event) {
		var e = event ? event : window.event;
		var t = event.target ? event.target : event.srcElement;
		if(self && self.parent) {
			self.parent.Select(self.index);
		}
/*		t.self.Select(!t.self.selected);
			if(t.self.parent)
				t.self.parent.Select(t.self.index);
		}*/
	}

	this.Init(parent);
}

XListItem.prototype.AddAction = function(action) {
	this.tag.appendChild(action);
}

XListItem.prototype.Refresh = function(event) {
	var x = this.tag.childNodes;
	for(var i = 0; i < x.length; i++) {
		var node = x[i];
		if(node.nodeType == 3) {
			node.nodeValue = this.caption;
			break;
		}
	}
}

XListItem.prototype.Select = function(selected) {
	if(!selected)
		this.tag.className = 'listbox_item';
	else
		this.tag.className = 'listbox_item_active';
	this.selected = selected;
}

////////////////////////////////////////////////////////////////////////////////

function XListBox(destination) {
	this.tag = document.createElement('div');
	this.tag.self = this;
	this.items = new Array();
	this.events = new Object();
	this.selectable = true;

	this.Init(destination);
}

XListBox.prototype.Init = function(destination) {
	this.tag.className = 'listbox';
	this.selectedIndex = -1;
	destination.appendChild(this.tag);
}

XListBox.prototype.Add = function(item) {
	this.items.push(item);
	this.tag.appendChild(item.tag);
	item.index = this.items.length - 1;
	item.parent = this;
}

XListBox.prototype.Delete = function(index) {
	if(this.items[index]) {
		this.tag.removeChild(this.items[index].tag);
		this.items.splice(index, 1);
	}
	for(var i = 0; i < this.items.length; i++)
		this.items[i].index = i;
	this.Select(-1);
}

XListBox.prototype.Clear = function() {
	for(var i = 0; i < this.items.length; i++)
		this.tag.removeChild(this.items[i].tag);
	this.items = new Array();
	this.Select(-1);
}

XListBox.prototype.Select = function(index) {
	if(!this.selectable) return;

	if(this.selectedIndex >= 0 && this.selectedIndex < this.items.length && this.selectedIndex != index) {
		this.items[this.selectedIndex].Select(false);
		this.fireEvent('select', {'selectedIndex': this.selectedIndex});
	}

	if(index >= 0 && index < this.items.length) {
		this.items[index].Select(true);
		this.selectedIndex = index;
	}
	else {
		this.selectedIndex = -1;
	}

	this.fireEvent('select', {'selectedIndex': this.selectedIndex});
}

XListBox.prototype.addEventListener = function(event, eval_value) {
	this.events[event] = eval_value;
}

XListBox.prototype.fireEvent = function(event, data) {
	if(this.events[event]) {
		var src = 'var event = ' + JSON.stringify(data) + ';\n' + this.events[event];
		eval(src);
	}
}

XListBox.prototype.MoveUp = function(index) {
	if(index > 0 && index < this.items.length) {
		var old_item = this.items[index - 1];
		var new_item = this.items[index];
		old_item.index = index;
		new_item.index = index - 1;
		this.items[index - 1] = new_item;
		this.items[index] = old_item;
		this.tag.insertBefore(new_item.tag, old_item.tag);

		new_item.Select(true);
		this.Select(new_item.index);
	}
}

XListBox.prototype.MoveDown = function(index) {
	if(index >= 0 && index < this.items.length - 1) {
		var old_item = this.items[index + 1];
		var new_item = this.items[index];
		old_item.index = index;
		new_item.index = index + 1;
		this.items[index + 1] = new_item;
		this.items[index] = old_item;
		this.tag.insertBefore(old_item.tag, new_item.tag);

		new_item.Select(true);
		this.Select(new_item.index);
	}
}