function Friend(userid, nick, image)
{
	this.UserID = userid;
	this.Nick = nick;
	this.Image = image;
}

function FriendList(level)
{
	var list = new Array();
	
	var displayitems = 3;
	var offset = 0;
	var selectedfriend = -1;
	
	this.Level = level;
	
	this.List = list;
	
	this.Add = function(friend)
	{
		list.push(friend);
	}
	
	this.Render = function(target)
	{
		RenderToTarget(target, this.Level);
	}
	
	this.MoveForward = function(target)
	{
		if(offset < list.length - displayitems)
		{
			offset++;
			this.SelectFriend(-1);
			this.Render(target);
		}
	}
	
	this.MoveBackward = function(target)
	{
		if(offset > 0)
		{
			offset--;
			this.SelectFriend(-1);
			this.Render(target);
		}
	}
	
	this.SelectFriend = function(userid)
	{	
		selectedfriend = userid;
	}
	
	function RenderToTarget(target, level)
	{
		var content = GetStartMark(level) + RenderStartElement();
		
		if(offset > 0)
		{
			content += RenderScrollBackward(level, true);
		}
		else
		{
			content += RenderScrollBackward(level, false);
		}
		
		items = 0;
		
		for (var i = offset; i < list.length; i++)
		{
			items++;
				
			if(items > 1)
				content += RenderJunction();
				
			currentfriend = list[i];
			content += RenderFriend(currentfriend, level+1);
			
			if(items == displayitems)
				break;
		}
			
		if(offset < list.length - displayitems)
		{
			content += RenderScrollForward(level, true);
		}
		else
		{
			content += RenderScrollForward(level, false);
		}
		
		content += RenderEndElement() + GetEndMark(level);
		
		if(LevelExists(target, level))
		{
			target.innerHTML = target.innerHTML.substring(0,target.innerHTML.indexOf(GetStartMark(level))) + content;
		}
		else
		{
			target.innerHTML += content;
		}
	}
	
	function LevelExists(target, level)
	{
		if(target.innerHTML.indexOf(GetStartMark(level)) > -1)
			return true;
		else
			return false;
	}
	
	function RenderFriend(friend, level)
	{
		if(friend.UserID == selectedfriend)
		{
			return "<td align='center' width='33%'><div><a href=\"javascript:CreateFriendList(" + friend.UserID + "," + level + ");\" onmousemove=\"ShowDescription('Freunde von " + friend.Nick + " anzeigen');\" onmouseout=\"HideDescription();\"><img src='" + friend.Image + "' width='50' style='border: solid 1px; border-color: #000000;'></a></div><div>" + RenderNick(friend) + "</div><div style='margin-top:15px;margin-bottom:5px;'><img src='/community/friendstree/images/junction_vertical.gif' border='0'></div></td>";
		}
		else
		{
			//return "<td align='center' width='33%'><div><a href='javascript:CreateFriendList(" + friend.UserID + "," + level + ");'><img src='" + friend.Image + "' width='50' border='0' style='Filter: Gray; border: solid 1px; border-color: #777777'></a></div><div>" + RenderNick(friend) + "</div><div><img src='/1x1.gif' border='0' width='1' height='55'></div></td>";
			return "<td align='center' width='33%'><div><a href=\"javascript:CreateFriendList(" + friend.UserID + "," + level + ");\" onmousemove=\"ShowDescription('Freunde von " + friend.Nick + " anzeigen');\" onmouseout=\"HideDescription();\"><img src='" + friend.Image + "' width='50' border='0' style='Filter: Gray; border: solid 1px; border-color: #777777'></a></div><div>" + RenderNick(friend) + "</div><div><img src='/1x1.gif' border='0' width='1' height='55'></div></td>";
		}
	}
	
	function RenderNick(friend)
	{
		var actionlistid = 'UserActionList_' + friend.UserID + "_" + Math.floor(Math.random()*(9999-1))+1;
	    
		return "<span style='background-color:red;position:relative;'><div id='" + actionlistid + "' style='position:absolute;visibility:hidden;'></div></span><a href=\"javascript:CreateUserActionList('" + actionlistid + "'," + friend.UserID + ",'"+ escape(friend.Nick) + "');\" onmousemove=\"ShowDescription('Aktionen');\" onmouseout=\"HideDescription();\">" + friend.Nick + "</a>"
	}
	
	function RenderJunction()
	{
		return "<td align='center'><div><img src='/community/friendstree/images/junction_horizontal.gif' border='0'></div><div><img src='/1x1.gif' border='0' width='1' height='55'></div></td> "
	}
	
	function RenderScrollForward(level, active)
	{
		if(active)
			return "<td align='right'><div><a href='javascript:ScrollForward(" + level + ");'><img src='/community/mediaalbum/images/pfeil_rechts.gif' border='0'></a></div><div><img src='/1x1.gif' border='0' width='1' height='55'></div></td>";
		else
			return "<td align='right'><img src='/1x1.gif' border='0' width='20' height='66'></td>";
	}
	
	function RenderScrollBackward(level, active)
	{
		if(active)
			return "<td><div><a href='javascript:ScrollBackward(" + level + ");'><img src='/community/mediaalbum/images/pfeil_links.gif' border='0'></a></div><div><img src='/1x1.gif' border='0' width='1' height='55'></div></td>";
		else
			return "<td align='right'><img src='/1x1.gif' border='0' width='20' height='66'></td>";
	}
	
	function RenderStartElement()
	{
		return "<table cellpadding='5' cellspacing='0' width='100%' border='0'><tr>";
	}
		
	function RenderEndElement()
	{
		return "</tr><table>";
	}
	
	function GetStartMark(level)
	{
		return "<!--"+level+"-->"
	}
    
	function GetEndMark(level)
	{
		return "<!--/"+level+"-->"
	}
}