var tagMenuWidth = 250;
var requestTag = "requests/fastTag.php";

var rightArrow = document.createElement("img"); 
rightArrow.src = "resources/images/go.png"; 
rightArrow.className = "tagArrow";

function TagSelector(endFunc, admin) {
	this.obj = document.createElement("div");
	this.obj.className = "tagSelector";
	this.endFunc = endFunc;
	this.admin = admin;
}
TagSelector.prototype.getData = function () { return this.window.getData() }
TagSelector.prototype.getObj = function () { return this.obj; }
TagSelector.prototype.start = function () { 
	this.window = new TagWindow(this.obj, this.admin);
	this.window.setEndFunc(this.endFunc);
}

function TagWindow(parent, admin) {
	this.parent = parent;
	this.listCount = 0;
	this.lists = Array();
	this.admin = admin?admin:false;
	
	this.obj = document.createElement("div");
	this.obj.className = "tagWindow";
	
	this.parent.appendChild(this.obj);
	
	this.animator = new Animation(this.obj);
	this.animator.setAttribute("left", "0px");
	
	this.addList(0);
}
TagWindow.prototype.addList = function (id, stack) {
	this.lists[this.listCount] = new TagList(id, stack, this);
	
	if (this.listCount-1 >= 0)
		this.lists[this.listCount-1].obj.style.overflow = "hidden";
	
	this.animator.setAttribute("width", (this.listCount+1) *tagMenuWidth+"px");
	this.animator.setMovement("left", this.listCount*-1*tagMenuWidth + "px", 20);
	this.animator.start(500);
	
	var obj = this.lists[this.listCount].obj;
	this.animator.setEndFunc( function () { obj.style.overflow = "auto"; } )
	
	this.listCount++;
}
TagWindow.prototype.back = function (val) {
	var num = val ? val : 1;
	this.listCount-= num;
	var thisObj = this;
	var thisCount = this.listCount;
	
	for (var i = this.listCount + num-1; i >= this.listCount; i--) {
		this.lists[i].obj.style.overflow="hidden";
	}
	var func = function () {
		for (var i = 0; i < num; i++)
			thisObj.lists.pop().remove();
		thisObj.animator.setAttribute("width", (thisCount*tagMenuWidth)+"px");
		thisObj.lists[thisObj.listCount-1].obj.style.overflow = "auto";
	}
	
	this.animator.setMovement("left", (this.listCount-1) *-1*tagMenuWidth + "px", 20);
	this.animator.setEndFunc(func);
	this.animator.start(500);
}
TagWindow.prototype.setData = function (val, name) {
	this.data = val;
	if (this.endFunc) this.endFunc(val, name);
}
TagWindow.prototype.getData = function () {
	return this.data; 
}
TagWindow.prototype.setEndFunc = function (endFunc) { this.endFunc = endFunc; }
TagWindow.prototype.top = function () {
	return this.lists[this.listCount-1];
}


//This holds the list of options, and slides around
function TagList(id, stack, window) {
	this.id = id;
	this.stack = stack;
	this.window = window;
	this.options = Array();
		
	this.obj = document.createElement("div");
	this.obj.className = "tagList";
	
	this.getOptions();
}
TagList.prototype.getOptions = function () {
	this.clear();
	
	this.msg = document.createElement("div");
	this.msg.innerHTML = "Loading...";
	this.obj.appendChild(this.msg);
	
	this.window.obj.appendChild(this.obj);
	
	var thisObj = this;
	var func = function (response) {
		var entries = response.split('\n');
		var data = [];
		for (var i in entries) {
			if (entries[i].length > 0 && entries[i] != "None") {
				var parts = entries[i].split('\t');
				data[parts[0]] = entries[i].replace(parts[0]+"\t", "");
			}
		}
		
		thisObj.setOptions(data);
	}
	shortRequest(requestTag+"?action=getSub&id="+this.id, func);
}
TagList.prototype.setOptions = function (data) {
	this.obj.removeChild(this.msg);
	
	for (var i in data) {
		this.options[i] = new TagOptSub(i, data[i], this);
	}
	
	//Only if admin
	if (this.window.admin)
		this.options[i++] = new TagOptAdder(this.id, this);
}
TagList.prototype.remove = function () {
	this.window.obj.removeChild(this.obj);
}
TagList.prototype.clear = function () {
	this.obj.innerHTML = "";
	if (this.window.listCount > 0) {
		this.histOpt = new TagOptThread(this.stack, this);
		this.addHere = new TagOptSelect(this);
	} else
		this.stack = [];
}

//Generic TagOption class, each option should be one of these to make life simple
function TagOption(id, name, parent) {
	this.id = id;
	this.name = name;
	this.parent = parent;
	
	if (this.parent) {
		this.tagHTML = this.tagHTML ? this.tagHTML : document.createTextNode(this.name);
		this.style = this.style?this.style:"";
		
		var clear = document.createElement("div");
			clear.className = "clear";
		
		this.obj = document.createElement("div");
		this.obj.className = "tagOption" + this.style;
		this.obj.appendChild(this.tagHTML);
		this.obj.appendChild(clear);
		
		this.parent.obj.appendChild(this.obj);
		
		var thisObj = this;
		this.obj.onclick = function () { thisObj.click() };
		this.obj.onmouseover = function () { thisObj.obj.className = "tagOption" + thisObj.style + " tagHighlight"; };
		this.obj.onmouseout = function () { thisObj.obj.className = "tagOption" + thisObj.style; };
	}
}
TagOption.prototype.remove = function () {
	this.obj.parentNode.removeChild(this.obj);
}

function TagOptBack(parent) {
	this.inherits = TagOption;
	this.inherits(0, "? Back", parent);
}
TagOptBack.prototype.click = function () {
	this.parent.window.back();
}

function TagOptThread(stack, parent) {
	this.parent = parent;
	this.backs = [];
	var len = stack.length;
	
	this.obj = document.createElement("div");
	this.obj.className = "tagOption tagThread";
	
	var clear = document.createElement("div");
	clear.className = "clear";
	
	for (var i in stack)
		this.backs[i] = new TagThreadEl(stack[i], len - i, this);
	
	this.obj.appendChild(clear);
	this.parent.obj.appendChild(this.obj);
}
function TagThreadEl(name, back, parent) {
	this.back = back; this.parent = parent;
	
	this.obj = document.createElement("div");
	this.obj.className = "tagThreadEl";
	this.obj.innerHTML = name;
	
	var separator = document.createElement("div");
	separator.innerHTML = "&gt;";
	separator.className = "tagSep";
	
	this.parent.obj.appendChild(this.obj);
	this.parent.obj.appendChild(separator);
	
	var thisObj = this;
	this.obj.onclick = function () { thisObj.parent.parent.window.back(thisObj.back); }
	this.obj.onmouseover = function () { thisObj.obj.className = "tagThreadEl tagHighlight"; }
	this.obj.onmouseout = function () { thisObj.obj.className = "tagThreadEl"; }
}

function TagOptSub(id, name, parent) {
	this.inherits = TagOption;
	this.tagHTML = document.createElement("div");
	this.tagHTML.innerHTML = "<div class='tagName'>"+name+"</div>";
	this.tagHTML.appendChild(rightArrow.cloneNode(false));
	
	this.inherits(id, name, parent);
	if (this.parent.window.admin) {
		var edit = tagEdit.cloneNode(false);
		this.tagHTML.appendChild(edit);
		var thisObj = this;
		edit.onclick = function (e) { new TagEditor(thisObj, e); };
		
		var del = tagDel.cloneNode(false);
		this.tagHTML.appendChild(del);
		var thisObj = this;
		del.onclick = function (e) { new TagDelete(thisObj, e); };
	}
	
	//Duplicate the array
	this.stack = this.parent.stack.concat();
	this.stack.push(this.name);
}
TagOptSub.prototype = new TagOption;
TagOptSub.prototype.click = function () {
	this.parent.window.addList(this.id, this.stack);
}

//Tag Option that selects current tag
function TagOptSelect(parent) {
	this.inherits = TagOption;
	this.tagHTML = document.createElement("i");
	this.tagHTML.innerHTML = "Select Tag";
	this.style = " tagSelect";
	this.inherits( parent.id, "", parent);
}
TagOptSelect.prototype = new TagOption;
TagOptSelect.prototype.click = function () {
	this.parent.window.setData(this.id, this.parent.stack);
}




function TagOptSearch(id, parent) {
	
}