var userid = null;
var overlay = new Class({
	'initialize': function(width) {
		this.element = new Element("div").addClass("overlay");
		this.title = new Element("div").addClass("title").inject(this.element);
		this.titleText = new Element("span").inject(this.title);
		this.closeIcon = new Element("div").addClass("icon stop").inject(this.title);
		this.content = new Element("div").addClass("content").inject(this.element);
		this.element.setStyle("display","none");
		this.element["window"] = this;
		this.shadow = new Element("div").addClass("shadow");
		var self = this;
		this.closeIcon.addEvent("click", function(e) {
			self.close();
			return false;
		});
		this.setParent(new Element($(document.body)));
		this.setWidth(width);
	},
	'setWidth': function(width) {
		this.width = width;
		if (this.width!=null) {
			this.title.setStyle("width",width+"px");
			this.content.setStyle("width",width+"px");
		}
	},
	'setParent': function(parent) {
		this.parent = parent;
		this.shadow.inject(parent);
		this.element.inject(parent);
		//console.log(this.parent.getSize());
		this.shadow.setStyle("width",this.parent.getScrollSize().x);
		this.shadow.setStyle("height",this.parent.getScrollSize().y);
		this.shadow.setStyle("left",this.parent.getPosition().x);
		this.shadow.setStyle("top",this.parent.getPosition().y);

		this.element.setStyle("left",this.parent.getPosition().x+this.parent.getScroll().x+this.parent.getSize().x/2);
		this.element.setStyle("top",this.parent.getPosition().y+this.parent.getScroll().y+this.parent.getSize().y/2);
		this.element["fx"] = new Fx.Morph(this.element, {duration: 600, transition: Fx.Transitions.Sine.easeOut});
		this.shadow["fx"] = new Fx.Morph(this.shadow, {duration: 600, transition: Fx.Transitions.Sine.easeOut});
		this.shadow.setOpacity(0.01);
		return this;
	},
	'loadContent': function(content) {
		var self = this;
		var request = new Request({
			'url': '/ajax/'+content+'.html',
			'evalScripts': true,
			'onSuccess': function(response) {
				self.setContent(response.text);
			}
		}).send();
		return this;
	},
	'setTitle': function(title) {
		this.titleText.set("html",title);
	},
	'setContent': function(html) {
		this.content.set('html',html);
		this.show();
	},
	'addElement': function(el) {
		el.inject(this.content);
		this.show();
	},
	'close': function() {
		this.element.setStyle("display","none");
		this.element.dispose();
		var self = this;
		var func = function() {
			self.shadow.setStyle("display","none");
			self.shadow["fx"].removeEvent('onComplete', func);

		};
		this.shadow["fx"].addEvent('onComplete', func);
		this.shadow["fx"].start({'opacity':0.01});
		this.triggerEvent('close');
		return this;
	},
	'addEvent': function(type, func) {
		if (this.events==null) this.events = [];
		if (this.events[type]==null) this.events[type] = [];
		this.events[type].push(func);
	},
	'triggerEvent': function(type) {
		if (this.events[type]!=null) {
			for (var i=0;i<this.events[type].length;i++) {
				this.events[type][i]();
			}
		}
		return this;
	},
	'show': function() {
		this.element["fx"].cancel();
		this.element.setStyle("margin-top", this.parent.getSize().y*-1-this.element.getSize().y/2);
		this.element.setStyle("margin-left",this.content.getSize().x/2*-1);
		this.shadow.setStyle("display","block");
		this.element.setStyle("display","block");
		this.shadow["fx"].start({
			'opacity':0.5
		});
		this.element["fx"].start({
			'margin-top': this.element.getSize().y/-2
		});
		return this;
	}
});

var tooltip = new Element("div");
tooltip["fx"] = new Fx.Morph(tooltip, {duration: 600, transition: Fx.Transitions.Sine.easeOut});
tooltip.addClass("tooltip");
var Tooltip = new Class({
	'initialize': function(element, text) {
		this.element = element;
		this.element.addEvent("mouseover", function(e) {
			tooltip["fx"].cancel();
			tooltip.setStyle("left",e.page.x+10);
			tooltip.setStyle("top",e.page.y+10);
			tooltip["fx"].start({'opacity':1});
			tooltip.set("html",text);
		});
		this.element.addEvent("mouseout", function(e) {
			tooltip["fx"].cancel();
			tooltip.setStyle("left",e.page.x+10);
			tooltip.setStyle("top",e.page.y+10);
			tooltip["fx"].start({'opacity':0.01});
		});
		this.element.addEvent("mousemove", function(e) {
			tooltip.setStyle("left",e.page.x+10);
			tooltip.setStyle("top",e.page.y+10);
		});

	}

});
var UserList = new Class({
	'initialize': function(element, users, type) {
		new AutoCompletion(element, type);
		this.users = [];
		this.element = element;
		var self = this;
		this.element.addEvent("keyup", function(e) {
			if (e.code==13) {
				self.addEl();
			}
		});
		element.getParent().getParent().getChildren()[2].dispose();
		this.container = new Element("div");
		this.container.addClass("userlist");
		this.container.setStyles({
			'width': this.element.getSize().x+25,
			'border-bottom': '1px solid #B5B595',
			'display':'none'
		});
		var button = getButton('add', '', function(e) {
			if (self.element.value!='') {
				self.addUser(self.element.value);
				self.element.value = '';
			}
		}).setStyles({'border-left':'1px solid #B5B595','position':'absolute'});
		button.getChildren()[1].getChildren()[0].setStyle('margin-right','0px');
		button.getChildren()[0].dispose();
		this.add = button;

		this.hidden = new Element("input");
		this.hidden.setProperty("type","hidden");
		this.hidden.setProperty("name",this.element.getProperty("id"));
		this.hidden.inject(this.element.getParent().getParent().getParent());
		this.add.inject(this.element.getParent().getParent().getParent());
		this.container.setStyles({'margin-top':'-3px','padding-left':'5px','padding-top':'5px','padding-right':'5px','padding-bottom':'1px'});
		this.container.inject(this.element.getParent().getParent().getParent());

		if (users!=null) {
			for (var i=0;i<users.length;i++) {
				this.addUser(users[i]);
			}
		}
	},
	'addEl': function() {
		if (this.element.value!='') {
			this.addUser(this.element.value);
			this.element.value = '';
		}
	},
	'addUser': function(username) {
		this.users.push(username);
		var item = new Element("div");
		item.addClass("item");
		item.inject(this.container);
		item.setStyles({'padding':'2px', 'padding-left':'5px', 'border':'1px solid #B5B595', 'background':'#fff', 'float':'left', 'clear':'none', 'margin-right':'4px','margin-bottom':'4px'});
		var name = new Element("div");
		name.addClass("name");
		name.inject(item);
		name.set("html", username);
		var del = new Element("div");
		del.addClass("icon trash").setStyles({'margin-top':'2px'});
		del.inject(item);
		var self = this;
		del.addEvent("click", function(e) {
			self.removeUser(username);
		});
		this.container.setStyle('display','block');
		this.hidden.value = this.users.join(',');
	},
	'removeUser': function(username) {
		var children = this.container.getChildren();
		for (var i=0;i<children.length;i++) {
			var us = children[i].getChildren()[0].get("html");
			if (us == username) {
				children[i].dispose();
				break;
			}
		}
		for (var i=0;i<this.users.length;i++) {
			if (this.users[i] == username) {
				this.users.splice(i,1);
			}
		}
		if (this.users.length==0) {
			this.container.setStyle('display','none');
		}
		this.hidden.value = this.users.join(',');
	}
});
var AutoCompletion = new Class({
	'initialize': function(element, type) {
		if (type==null) type='user';
		this.type = type;
		this.element = element;
		this.cache = {};
		this.container = new Element("div");
		this.container.setStyles({
			'position':'absolute',
			'left':this.element.getPosition().x,
			'top':this.element.getPosition().y+this.element.getSize().y,
			'width':this.element.getSize().x
		});
		this.container.addClass("autoCompletion");
		this.container.inject($(document.body));
		var timeout = 0;
		var self = this;
		this.hide();
		element.addEvent("keyup", function(e) {
			clearTimeout(timeout);
			var name = self.element.value;
			if (name=='') {
				self.hide();
			}
			else {
				self.show();
				self.load();
				if (self.cache[name]!=null) {
					self.fill(self.cache[name]);
				} else {
					timeout = setTimeout(function(){
						self.search();
					}, 600);
				}
			}
		});
		element.addEvent("blur", function(e) {
			self.hide();
		});
		element.addEvent("focus", function(e) {
			if (self.element.value!='') {
				self.show();
				if (self.lastSearch!=self.element.value) {
					self.load();
					self.search();
				}
			}
		});
	},
	'hide': function() {
		this.container.setStyle("display","none");
	},
	'show': function() {
		this.container.setStyle("display","block");
	},
	'load': function() {
		this.container.set("html","");
		this.container.setStyle("width",this.element.getSize().x);
		this.container.setStyle("background","#fff url(/img/ajax.gif) center center no-repeat");
	},
	'fill': function(els) {
		this.container.set("html","");
		this.container.setStyle("background","#fff");
		var self = this;
		for (var i=0;i<els.length;i++) {
			this.createElement(els[i]);
		}
	},
	'createElement': function(el) {
		if (this.type=='user' || this.type=='message') {
			var self = this;
			var li = new Element("div");
			li.addClass("item");
			li.addEvent("mousedown", function(e) {
				self.element.value = el.username;
			});
			var pic = new Element("div");
			pic.addClass("noPicture");
			pic.inject(li);
			if (el.img != 0) {
				var img = new Element("img");
				img.setProperty("src", el.img);
				img.inject(pic);
			}
			var name = new Element("div");
			name.addClass("name");
			name.inject(li);
			name.set("html",el.username);
			li.inject(this.container);
		} else if (this.type=='city') {
			var self = this;
			var li = new Element("div");
			li.addClass("item");
			li.addEvent("mousedown", function(e) {
				self.element.value = el.postal+' '+el.city;
			});
			li.setStyle('height','20px');

			var name = new Element("div");
			name.addClass("name");
			name.inject(li);
			name.setStyle('line-height','16px');
			name.set("html",'<img src="/img/flags/'+el.country.toLowerCase()+'.gif" style="float:left;margin-top:3px;margin-right:10px;"/>'+el.postal+' '+el.city);
			li.inject(this.container);
		}
		var osize = this.container.getSize().x;
		li.setStyle("float","left");
		this.container.setStyle("width","auto");
		var sx = li.getSize().x;
		if (sx > osize)
			this.container.setStyle("width",(sx+25)+"px");
		else this.container.setStyle("width",osize+"px");
		li.setStyle("float","none");
	},
	'search': function() {
		var name = this.element.value;
		if (this.lastSearch!=name) {
			this.lastSearch = name;
			if (this.cache[name]!=null) {
				this.fill(this.cache[name]);
			} else {
				var self = this;
				var request = new Request({
					'url': '/ajax/AutoCompletion.html?type='+this.type+'&name='+name,
					'evalScripts': true,
					'onSuccess': function(response) {
						self.cache[name] = eval(response);
						self.fill(eval(response));
					}
				}).send();
			}
		}
	}
});

var Inviter = new Class({
	'initialize': function(element,objectid) {
		var self = this;
		this.objectid = objectid;
		element.addEvent("click", function(e) {
			var o = new overlay(300);
			o.setTitle("Freunde einladen");

			self.top = new Element("div");
			self.top.set("html",'<div style="float:left;margin-bottom:5px;clear:both;">Wähle hier die Freunde an die du eine Anfrage senden möchtest.</div>'+
					'<div style="float:left;clear:both;font-weight:bold;margin-top:5px;margin-right:5px;width:40px;">Filter:</div>');

			self.search = new Element("input");
			self.search.setStyles({
				'width'         : '243px',
				'padding'       : '5px',
				'margin-bottom' : '5px'
			});
			self.search.addEvent("keyup", function(e) {
				self.filter();
			});

			self.friends = new Element("div");
			self.friends.setStyles({
				'width'    : '300px',
				'height'   : '100px',
				'border'   : '1px solid #ccc',
				'overflow' : 'auto'
			});

			var request = new Request({
				'url': "/Ajax/Freunde.html",
				'data': {
					'objectid': objectid
				},
				'evalScripts': true,
				'onSuccess': function(response) {
					var obj = eval('('+response+')');
					if (obj.length!=0) {
						for (var id in obj) {
							self.addFriend(id,obj[id]);
						}
					}
				}
			}).send();

			self.header = new Element("div");
			self.header.set("html",'<div style="font-weight:bold;float:left;margin-bottom:5px;margin-top:5px;clear:both;">Ausgewählte Freunde:</div>');

			self.receiver = new Element("div");
			self.receiver.setStyles({
				'width'    : '300px',
				'height'   : '100px',
				'border'   : '1px solid #ccc',
				'overflow' : 'auto'
			});

			self.buttons = new Element("div");
			self.buttons.setStyle("margin-top","10px");
			self.buttons.set("html",
			'<a style="clear:both;float:left;" class="input" href="#" onClick="this.parentNode.parentNode.parentNode[\'window\'].triggerEvent(\'send\');return false;">'+
			'	<span class="left"></span>'+
			'	<span class="label">'+
			'		<div style="float:left;" class="icon messageGo"></div>'+
			'		Absenden'+
			'	</span>'+
			'	<span class="right"></span>'+
			'</a>'+
			'<a style="float:right;" class="input" href="#" onClick="this.parentNode.parentNode.parentNode[\'window\'].triggerEvent(\'cancel\');return false;">'+
			'	<span class="left"></span>'+
			'	<span class="label">'+
			'		<div style="float:left;" class="icon stop"></div>'+
			'		Abbrechen'+
			'	</span>'+
			'	<span class="right"></span>'+
			'</a>');

			o.addElement(self.top);
			o.addElement(self.search);
			o.addElement(self.friends);
			o.addElement(self.header);
			o.addElement(self.receiver);
			o.addElement(self.buttons);


			o.addEvent("cancel", function() {
				o.close();
			});
			o.addEvent("send", function() {
				self.send();
				o.close();
			});
			o.show();

			return false;
		});
	},
	'addFriend': function(id, name) {
		var self = this;

		var element = new Element("div");
		element.setStyles({
			'width'       : '270px',
			'padding'     : '5px',
			'clear'       : 'both'
		});
		element.setProperty("userid",id);

		var nameEl = new Element("div");
		nameEl.set("html",name);
		nameEl.setStyles({
			'float'       : 'left',
			'margin-top'  : '2px',
			'margin-left' : '5px'
		});

		var remove = new Element("div");
		remove.addClass("icon stop");
		remove.setStyles({
			'float'   : 'left',
			'display' : 'none'
		});
		remove.addEvent("click", function(e) {
			element.inject(self.friends);
			remove.setStyle("display","none");
			self.filter();
			return false;
		});
		remove.inject(element);

		nameEl.inject(element);

		element.addEvent("click", function(e) {
			if (element.parentNode==self.friends) {
				element.inject(self.receiver);
				remove.setStyle("display","block");
				return false;
			}
		});
		element.inject(this.friends);
	},
	'send': function() {
		var self = this;
		var els = self.receiver.getChildren();
		var users = [];
		for (var i in els) {
			var el = els[i];
			if (el!=null && el.getProperty != null) {
				var userid = el.getProperty("userid");
				users[users.length] = userid;
			}
		}
		if (users.length>0) {
			var request = new Request({
				'url'   : "/Ajax/Einladen.html",
				'method': 'POST',
				'data'  : {
					'objectid': self.objectid,
					'users'   : users.join(";")
				}
			}).send();
		}
	},
	'filter': function() {
		var self = this;
		var els = self.friends.getChildren();
		for (var i in els) {
			var el = els[i];
			if (el!=null && el.getChildren != null) {
				if (self.search.value=="" || el.getChildren()[1].innerHTML.indexOf(self.search.value) > -1) {
					el.setStyle("display","block");
				} else {
					el.setStyle("display","none");
				}
			}
		}
	}
});

var oldOptions = null;
function addOptionsEvents(el,num) {
	el.addEvent("click", function(e) {
		if (oldOptions!=null)
			oldOptions.setStyle("display","none");
		var elx = $('options_'+num);
		elx.setStyle("display","block");
		elx.setStyle("left",el.getPosition().x);
		elx.setStyle("top",el.getPosition().y+20);
		oldOptions = elx;
		return false;
	});
}
/**
 *
 * @access public
 * @return void
 **/
function updateAds(){
	for (var j = 1; j <6; j++) {
		var els = $(document.body).getElements('.zone'+j);
		for (var k = 0; k < els.length; k++) {
			els[k].setProperty("src",'http://ads.benim.de/www/delivery/afr.php?zoneid='+j+'&cb='+(Math.random()*1000));
		}
	}
}

window.addEvent("load", function(e) {
	$(document.body).addEvent("click", function(e) {
		if (oldOptions!=null)
			oldOptions.setStyle("display","none");
	});
	tooltip.inject(new Element(document.body));
	tooltip.setStyle("opacity",0.01);

	var elements = $$('.autocompletion');
	for (var i=0;i<elements.length;i++) {
		new AutoCompletion(elements[i]);
	}

	var els = $$('.options');
	for (var i=0;i<els.length;i++) {
		var el = $('icon_'+els[i].getProperty("optionsid"));
		addOptionsEvents(el,els[i].getProperty("optionsid"));
	}
	if (userid!=null) {
		var func = function() {
			var request = new Request({
				'url': "/Ajax/Update.html",
				'evalScripts': true,
				'onSuccess': function(response) {
					//console.log(response);
					var obj = eval('('+response+')');
					if (obj["requests"]!=null) {
						if (obj["requests"]>0) {
							$('requests').setStyle("display","block");
							$($('requests').children[0]).set("html",obj["requests"]);
						} else {
							$('requests').setStyle("display","none");
						}
					}
					if (obj.friends!=null) {
						$('friendsOnline').set("html","");
						for (var i=0;i<obj.friends.length;i++) {
							var el = new Element("div").setStyles({
								'width':'260px',
								'clear':'both',
								'float':'left',
								'line-height':'30px',
								'margin-bottom':'5px'
							}).inject($('friendsOnline'));
							if (obj.friends[i].picture==0)
								var pic = new Element("div").setStyle("float","left").addClass("noPicture").setStyle("width","28px").setStyle("height","28px").inject(el);
							else var pic = new Element("img").setStyle("float","left").setProperty("src",obj.friends[i].picture).setStyle("border","none").inject(el);
							var icon = new Element("div").setStyle("margin-left","5px").setStyle("margin-top","7px").setStyle("float","left").addClass("icon statusOnline").inject(el);
							var strong = new Element("strong").setStyle("margin-left","5px").setStyle("float","left").setStyle("color","#000").set("html",obj.friends[i].name).inject(el);
							if (obj.friends[i].messages>0) {
								var _newel = new Element("strong").setStyles({
									'float':'right',
									'margin-right':'5px',
									'background':'#ff0000',
									'margin-top':'5px',
									'padding':'3px',
									'line-height':'12px',
									'height':'12px',
									'font-weight':'bold',
									'display':'block',
									'color':'#ffffff'
								}).set("html",obj.friends[i].messages).inject(el);
							}
						}
					} else {
						$('friendsOnline').set("html","Keine Freunde online");
					}
				}
			}).send();
			setTimeout(func,10000);
		};
		func();
	}
});
/**
 *
 * @access public
 * @return void
 **/
function showDialog(title,text,func1,func2){
	var o = new overlay(300);
	o.setContent('			<div style="float:left;margin-bottom:5px;clear:both;">'+text+'</div>'+
'			<a style="clear:both;float:left;" class="input" href="#" onClick="this.parentNode.parentNode[\'window\'].triggerEvent(\'yes\');return false;">'+
'				<span class="left"></span>'+
'				<span class="label">'+
'					<div style="float:left;" class="icon accept"></div>'+
'					Ja'+
'				</span>'+
'				<span class="right"></span>'+
'			</a>'+
'			<a style="float:right;" class="input" href="#" onClick="this.parentNode.parentNode[\'window\'].triggerEvent(\'no\');return false;">'+
'				<span class="left"></span>'+
'				<span class="label">'+
'					<div style="float:left;" class="icon stop"></div>'+
'					Nein'+
'				</span>'+
'				<span class="right"></span>'+
'			</a>');
	o.setTitle(title);
	o.addEvent("no", function() {
		o.close();
		if (func1!=null) {
			func1();
		}
		return false;
	});
	o.addEvent("yes", function() {
		func2();
		o.close();
		return false;
	});
	o.show();
}

function dialog(el,title,text) {
	var func = function(){
		window.location.href = new Element(el).getProperty("href");
	};
	showDialog(
		title,
		text,
		null,
		func
	);
}

function openChat(userid) {
	window.open ("http://www.benim.de/Chat/Index.html",
			"chatWindow"+userid,"status=1,toolbar=1,location=1,resizeable=true,menubar=1,scrollbars=false,height=600,width=800");
}

function moveCursor(el,len) {
	if (el.setSelectionRange) {
		el.focus();
		el.setSelectionRange(len,len);
	} else if (el.createTextRange) {
		var range = el.createTextRange();
		range.collapse(true);
		range.moveEnd('character', len);
		range.moveStart('character', len);
		range.select();
	}
}


function insert(input, aTag, eTag) {
	input.focus();
	/* für Internet Explorer */
	if (typeof document.selection != 'undefined') {
		/* Einfügen des Formatierungscodes */
		var range = document.selection.createRange();
		var insText = range.text;
		range.text = aTag + insText + eTag;

		/* Anpassen der Cursorposition */
		range = document.selection.createRange();
		if (insText.length == 0) {
			range.move('character', -eTag.length);
		} else {
			range.moveStart('character', aTag.length + insText.length + eTag.length);
		}
		range.select();
	}
	/* für neuere auf Gecko basierende Browser */
	else if(typeof input.selectionStart != 'undefined')
	{
		/* Einfügen des Formatierungscodes */
		var start = input.selectionStart;
		var end = input.selectionEnd;
		var insText = input.value.substring(start, end);
		input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
		/* Anpassen der Cursorposition */
		var pos;
		if (insText.length == 0) {
			pos = start + aTag.length;
		} else {
			pos = start + aTag.length + insText.length + eTag.length;
		}
		input.selectionStart = pos;
		input.selectionEnd = pos;
	}
	/* für die übrigen Browser */
	else
	{
		/* Abfrage der Einfügeposition */
		var pos;
		var re = new RegExp('^[0-9]{0,3}$');
		while(!re.test(pos)) {
			pos = prompt("Einfügen an Position (0.." + input.value.length + "):", "0");
		}
		if (pos > input.value.length) {
			pos = input.value.length;
		}
		/* Einfügen des Formatierungscodes */
		var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");
		input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);
	}
}

function sendAlert() {
	var func = function(){
		var self = this;
		var request = new Request({
			'url': '/ajax/Melden.html',
			'method':'POST',
			'data': {
				'link':window.location.href,
				'text':$('reportText').value
			},
			'onSuccess': function(response) {

			}
		}).send();
	};
	showDialog(
		"Wirklich diese Seite melden?",
		"Grund für die Meldung:" +
		'<textarea id="reportText" style="width:300px;height:60px;"></textarea>',
		null,
		func
	);
}

var LayeredContainer = new Class({
	'initialize': function(container, options) {
		this.element = container;
		this.options = {
			'layers': 0
		};
		for (var i in options)
			this.options[i] = options[i];
		this.layers = [];
		this.update();
	},
	'setCount': function(count) {
		this.options.layers = count;
		this.update();
	},
	'update': function() {
		for (var i=0; i<this.options.layers; i++) {
			if (this.layers[i]==null) {
				this.layers[i] = new Element("div");
				this.layers[i].inject(this.element);
				this.layers[i].setStyles({
					'position':'absolute'
				});
			}
		}
	},
	'getLayer': function(i) {
		return this.layers[i];
	}
});

function fx(el,end,start, _dur) {
	if (el!=null) {
		var dur = 1000;
		if (_dur!=null) dur = _dur;
		if (start!=null) {
			el.setStyles(start);
		}
		if (el["fx"]==null)
			el["fx"] = new Fx.Morph(el, {duration: dur, transition: Fx.Transitions.Sine.easeOut});

		el["fx"].options.duration = dur;
		el["fx"].cancel();
		el["fx"].start(end);
	}
}

function facebook(el) {
	var href = $(el).getProperty("href");
	var o = new overlay(500);
	o.setContent('<iframe style="width:500px;height:400px;border:none;" frameborder="0" src="'+href+'"></iframe>');
	o.setTitle("Auf Facebook teilen");
	o.show();
}
var PhotoEditor = new Class({
	'initialize': function(el, img) {
		this.img = new Element("img").setProperty("src",img).inject(el);
		this.element = el;
		var self = this;
		this.dragging = false;
		this.moving = false;
		this.shadow = new Element("div");
		this.shadow.addClass("photoShadow").inject(el).setStyles({
			'width':this.img.getSize().x,
			'height':this.img.getSize().y,
			'left':this.img.getPosition().x,
			'top':this.img.getPosition().y,
			'opacity':0.5
		});
		this.dragRect = new Element("div");
		this.dragRect.addClass("drag").inject(el).setStyle("background-image","url("+img+")");
		this.element.addEvent("mousedown", function(e) {
			self.dragging = true;
			self.startX = e.page.x-self.img.getPosition().x;
			self.startY = e.page.y-self.img.getPosition().y;
			return false;
		});
		this.element.addEvent("mouseup", function(e) {
			if (self.dragging) {
				self.dragging = false;
			}
			if (self.moving) {
				self.x = self.mX;
				self.y = self.mY;
				self.moving = false;
			}
			return false;
		});

		this.dragRect.addEvent("mousedown", function(e) {
			self.moveX = e.page.x;
			self.moveY = e.page.y;
			self.moving = true;
			return false;
		});
		this.element.addEvent("mousemove", function(e) {self.drag(e);});
	},
	'drag': function(e) {
		if (this.dragging) {
			this.shadow.setStyles({
				'display':'block',
				'width':this.img.getSize().x,
				'height':this.img.getSize().y,
				'left':this.img.getPosition().x,
				'top':this.img.getPosition().y}
			);
			this.dragRect.setStyle("display","block");

			var curX = e.page.x-this.img.getPosition().x;
			var curY = e.page.y-this.img.getPosition().y;
			var startX = this.startX;
			var startY = this.startY;

			/*if (curX>this.img.getSize().x) curX = this.img.getSize().x;
			if (curY>this.img.getSize().y) curY = this.img.getSize().y;
			if (curX<0) curX = 0;
			if (curY<0) curY = 0;
			if (startX>this.img.getSize().x) startX = this.img.getSize().x;
			if (startY>this.img.getSize().y) startY = this.img.getSize().y;
			if (startX<0) startX = 0;
			if (startY<0) startY = 0;*/

			var d = [curX-startX,curY-startY];
			var dx = [];
			dx[0] = Math.sqrt(d[0]*d[0]);
			dx[1] = Math.sqrt(d[1]*d[1]);

			var s = 0;
			if (dx[0]>dx[1]) s = dx[0];
			else s = dx[1];

			var left = 0;
			var top = 0;
			var width = 0;
			var height = 0;

			if (d[0]>0 && startX+s>this.img.getSize().x-4) s = this.img.getSize().x-4-startX;
			if (d[1]>0 && startY+s>this.img.getSize().y-4) s = this.img.getSize().y-4-startY;
			if (d[0]<0 && startX-s<0) s = startX;
			if (d[1]<0 && startY-s<0) s = startY;

			if (d[0]>0) {
				left = startX;
				width = s;
			} else {
				left = startX-s;
				width = s;
			}

			if (d[1]>0) {
				top = startY;
				height = s;
			} else {
				top = startY-s;
				height = s;
			}

			this.x = [left,left+width];
			this.y = [top,top+height];

			this.dragRect.setStyles({
				'left':left+this.img.getPosition().x,
				'top':top+this.img.getPosition().y,
				'width':width,
				'height':height,
				'background-position':((left+2)*-1)+"px "+((top+2)*-1)+"px"
			});
		}
		if (this.moving) {
			var offsetX = e.page.x-this.moveX;
			var offsetY = e.page.y-this.moveY;

			if (offsetX+this.x[1]>this.img.getSize().x-4) offsetX = this.img.getSize().x-4-this.x[1];
			if (offsetY+this.y[1]>this.img.getSize().y-4) offsetY = this.img.getSize().y-4-this.y[1];
			if (offsetX+this.x[0]<0) offsetX = 0-this.x[0];
			if (offsetY+this.y[0]<0) offsetY = 0-this.y[0];

			this.mX = [this.x[0]+offsetX,this.x[1]+offsetX];
			this.mY = [this.y[0]+offsetY,this.y[1]+offsetY];


			this.dragRect.setStyles({
				'left':this.mX[0]+this.img.getPosition().x,
				'top':this.mY[0]+this.img.getPosition().y,
				'width':this.mX[1]-this.mX[0],
				'height':this.mY[1]-this.mY[0],
				'background-position':((this.mX[0]+2)*-1)+"px "+((this.mY[0]+2)*-1)+"px"
			});
		}
	},
	'getCoords': function() {
		return {'x':this.x,'y':this.y};
	}
});

var UserInfos = new Class({
	'initialize': function() {
		this.complete = {};
		this.users = {};
	},
	'getUserInformation': function(id, complete) {
		if (isArray(id)) {
			var load = [];
			for (var i=0;i<id.length;i++) {
				if (this.complete[id[i]]==null)
					this.complete[id[i]] = [];

				this.complete[id[i]].push(complete);

				if (this.users[id[i]]==null) {
					load.push(id[i]);
				} else {
					this.completex(id[i]);
				}
			}
			var self = this;
			if (load.length>0) {
				var request = new Request({
					'url': "/Ajax/UserInformation.html",
					'evalScripts': true,
					'data': {'userid':load},
					'onSuccess': function(response) {
						var obj = eval('('+response+')');
						for (var i=0;i<obj.length;i++) {
							self.users[obj[i]["id"]] = obj[i];
							self.completex(obj[i]["id"]);
						}
					}
				}).send();
			}
		} else {
			if (this.complete[id]==null)
				this.complete[id] = [];

			this.complete[id].push(complete);
			var self = this;

			if (this.users[id]==null) {
				var request = new Request({
					'url': "/Ajax/UserInformation.html",
					'evalScripts': true,
					'data': {'userid':id},
					'onSuccess': function(response) {
						//console.log(response);
						var obj = eval('('+response+')');
						self.users[id] = obj;
						self.completex(id);
					}
				}).send();
			} else {
				this.completex(id);
			}
		}
	},
	'completex': function(id) {
		for(var i=0;i<this.complete[id].length;i++) {
			if (this.complete[id][i]!=null) {
				this.complete[id][i](this.users[id]);
				this.complete[id][i] = null;
			}
		}
	}
});

var users = new UserInfos();


function isArray(obj) {
   if (obj.constructor.toString().indexOf("Array") == -1)
      return false;
   else
      return true;
}

var URLHandler = new Class({
	'initialize': function() {
		this.events = {};
		var self = this;
		this.params = {};
		var func = function() {
			self.check();
			setTimeout(func,1000);
		}
		func();
	},
	'addEvent': function(param, func) {
		if (this.events[param]==null)
			this.events[param] = [];
		this.events[param].push(func);
	},
	'triggerEvent': function(param) {
		if (this.events[param]==null)
			this.events[param] = [];
		for (var i=0;i<this.events[param].length;i++) {
			this.events[param][i]();
		}
	},
	'setParameter': function(name, value) {
		if (this.params[name] != value) {
			this.params[name] = value;
			this.triggerEvent(name);
			this.update();
		}
	},
	'removeParameter': function(name, value) {
		delete this.params[name];
		this.update();
	},
	'getParameter': function(name) {
		return this.params[name];
	},
	'update': function() {
		var url    = window.location.href;
		var parts  = url.split("#");

		var params = "";
		var j = 0;
		for (var i in this.params) {
			if (j==1) params += ';';
			params += i+':'+this.params[i];
			j=1;
		}
		window.location.href = parts[0]+"#"+params;
	},
	'check': function() {
		var url    = window.location.href;
		var parts  = url.split("#");
		if (parts[1]!=null) {
			var params = parts[1].split(";");
			for (var i=0; i<params.length; i++) {
				var param = params[i];
				var p = param.split(":");
				if (this.params[p[0]]!=p[1]) {
					this.params[p[0]] = p[1];
					this.triggerEvent(p[0]);
				}
			}
		}
	}
});

var url = new URLHandler();

var Gallery = new Class({
	'initialize': function(options) {
		this.elements  = [];
		this.pages     = [];
		this.current   = {};

		this.element   = options.element;
		this.friends   = options.friends;
		this.options   = options;
		this.create();

		var self = this;
		url.addEvent('mediaid', function() {
			if (url.getParameter('mediaid')>0) {
				url.removeParameter('page');
				self.setView('detail');
				self.changePicture(url.getParameter('mediaid'));
				//console.log(document.pageTracker);
				//_gaq.push(['_setAccount', 'UA-1098982-3']);
				updateAds();
				_gaq.push(['_trackPageview', window.location.pathname + "/" + window.location.hash.substring(1)]);
			}
		});
		url.addEvent('page', function() {
			if (url.getParameter('page')!='null') {
				self.setView('overview');
				self.changePage(url.getParameter('page'));
				//_gaq.push(['_setAccount', 'UA-1098982-3']);
				updateAds();
				_gaq.push(['_trackPageview', window.location.pathname + "/" + window.location.hash.substring(1)]);
			}
		});

		var complete = false;
		users.getUserInformation(this.friends, function(user) {
			if (complete==false) {
				if (url.getParameter('mediaid')>0) {
					self.setView('detail');
					self.changePicture(url.getParameter('mediaid'));
				}
				else if (url.getParameter('page')!=null) {
					self.setView('overview');
					self.changePage(url.getParameter('page'));
				} else {
					self.setView('overview');
					self.changePage(0);
				}
				complete = true;
			}
		});

		for (var i=0; i<options.elements.length; i++) {
			this.addElement(options.elements[i]);
		}
		this.update();
	},
	'create': function() {
		var self        = this;
		this.container  = new LayeredContainer(this.element,{'layers':3});
		this.overview   = this.container.getLayer(0).addClass('overview').setStyle('opacity',0);
		this.detail     = this.container.getLayer(1).addClass('detail').setStyle('opacity',0);
		this.overlay    = this.container.getLayer(2).setStyle('width','650px');
		this.overlay.setStyle('display','none');

		this.overview['menu']       = new Element('div').addClass('menu').inject(this.overview);
		this.overview['arrowLeft']  = new Element('div').addClass('arrowLeft').setStyle('opacity',0.5).inject(this.overview);
		this.overview['container']  = new Element('div').addClass('container').inject(this.overview);
		this.overview['arrowRight'] = new Element('div').addClass('arrowRight').setStyle('opacity',0.5).inject(this.overview);

		this.detail['arrowLeft']    = new Element('div').addClass('arrowLeft').setStyle('opacity',0.5).inject(this.detail);
		this.detail['slide']        = new Element('div').addClass('slider').inject(this.detail);
		this.detail['slider']       = new Element('div').inject(this.detail['slide']);
		this.detail['arrowRight']   = new Element('div').addClass('arrowRight').setStyle('opacity',0.5).inject(this.detail);
		this.detail['menu']         = new Element('div').addClass('menu').inject(this.detail);
		this.detail['container']    = new Element('div').setStyles({'clear':'both','float':'left'}).addClass('container').inject(this.detail);

		this.detail['arrowLeft']	.addEvent('mouseover',  function(e) {if (self.current.image != 0) fx(self.arrowLeft,{'opacity':1});})
									.addEvent('mouseout',   function(e) {if (self.current.image != 0) fx(self.arrowLeft,{'opacity':0.5});})
									.addEvent('click',      function(e) {self.previousPage();})
									.addEvent('mousedown',  function(e) {return false;});

		this.detail['arrowRight']	.addEvent('mouseover',  function(e) {if (self.current.image != self.elements.length) fx(self.arrowRight,{'opacity':1});})
									.addEvent('mouseout',   function(e) {if (self.current.image != self.elements.length) fx(self.arrowRight,{'opacity':0.5});})
									.addEvent('click',      function(e) {self.nextPage();})
									.addEvent('mousedown',  function(e) {return false;});

		this.overview['arrowLeft']	.addEvent('mouseover',  function(e) {if (self.current.page != 0) fx(self.overview['arrowLeft'],{'opacity':1});})
									.addEvent('mouseout',   function(e) {if (self.current.page != 0) fx(self.overview['arrowLeft'],{'opacity':0.5});})
									.addEvent('click',      function(e) {self.previousPage();})
									.addEvent('mousedown',  function(e) {return false;});

		this.overview['arrowRight']	.addEvent('mouseover',  function(e) {if (self.current.page != Math.floor(self.elements.length/self.options.perpage)) fx(self.overview['arrowRight'],{'opacity':1});})
									.addEvent('mouseout',   function(e) {if (self.current.page != Math.floor(self.elements.length/self.options.perpage)) fx(self.overview['arrowRight'],{'opacity':0.5});})
									.addEvent('click',      function(e) {self.nextPage();})
									.addEvent('mousedown',  function(e) {return false;});

		this.addButton('previous','Zur Übersicht',function(){
			self.setView('overview');
			url.setParameter('page', Math.floor(self.current.image/self.options.perpage));
		}).inject(this.detail['menu']);
		this.addButton('link','Freund verlinken',function(){
			self.linkFriend();
		}).inject(this.detail['menu']);
		this.addButton('photo','Downloaden',function(){
			window.location.href='Download.html?mediaid='+self.elements[self.current.image].getId();
		}).inject(this.detail['menu']);

		this.detail['menu']['owner'] = new Element('div').setStyle('float','left').inject(this.detail['menu']);
		this.addButton('frame','Als Profilbild',function(){
			window.location.href='http://www.benim.de/Profil/'+loggedin+'/Bearbeiten/Profilfoto.html?mediaid='+self.elements[self.current.image].getId();
		}).inject(this.detail['menu']['owner']);
		this.addButton('trash','Löschen',function(){
			self.removeElement(self.current.image, true);
		}).inject(this.detail['menu']['owner']);

		this.addButton('flag','Melden',function(){
			sendAlert();
		}).setStyle('float','right').inject(this.detail['menu']);

		this.overview['pages'] = new Element('div').setStyle('float','right').setStyle('margin-right','70px').setStyle('margin-top','10px').inject(this.overview['menu']);

		if (this.options.owner == loggedin) {
			var butt = this.addButton('photo','Fotos hochladen', function() {
			}).setStyle('margin-left','50px').inject(this.overview['menu']);

			var uploadButton = new Element('div').setStyles({
				'position':'absolute'
			}).inject(butt);
			var uploadButton2 = new Element('div').inject(uploadButton);

			var self = this;
			var settings = {
				flash_url : '/uploader/swfupload.swf',
				upload_url: this.options.urls.upload,
				post_params: {'PHPSESSID' : ''},
				file_size_limit : '2 MB',
				file_types : '*.jpeg;*.jpg;*.gif;*.png',
				file_types_description : 'Bilddateien',
				file_upload_limit : 0,
				file_queue_limit : 0,
				debug: false,
				button_placeholder : uploadButton2,
				button_width: butt.getSize().x,
				button_height: butt.getSize().y,
				button_window_mode: SWFUpload.WINDOW_MODE.TRANSPARENT,
				button_cursor: SWFUpload.CURSOR.HAND,

				file_queued_handler : function(file) {
					self.addElement({'file':file.id, 'size':file.size});
					url.setParameter('page', '');
					url.setParameter('page', Math.floor(self.elements.length/self.options.perpage));
				},
				file_queue_error_handler : function(file, errorCode, message) {
				},
				file_dialog_complete_handler : function(numFilesSelected, numFilesQueued) {
					if (numFilesQueued > 0) {
						this.startUpload();
					}
				},
				upload_start_handler : function(file) {
				},
				upload_progress_handler : function(file, bytesLoaded) {
					for (var i=0;i<self.elements.length;i++) {
						if (self.elements[i]!=null && self.elements[i].getData('file')==file.id) {
							self.elements[i].setData('progress', bytesLoaded);
						}
					}
				},
				upload_error_handler : function(file, errorCode, message) {
				},
				upload_success_handler : function(file, serverData) {
					for (var i=0;i<self.elements.length;i++) {
						if (self.elements[i]!=null && self.elements[i].getData('file')==file.id) {
							self.elements[i].uploaded(serverData);
						}
					}
					self.update();
				},
				upload_complete_handler : function(file) {
					if (this.getStats().files_queued > 0)
						this.startUpload();
				},
				queue_complete_handler : function(numFilesUploaded) {
				}
			};

			this.swfu = new SWFUpload(settings);
		}
	},
	'setView': function(view) {
		if (view=='detail' && this.view!='detail') {
			for (var i=0;i<this.pages.length;i++) {
				this.pages[i].setStyle('opacity',0);
			}
			this.overview.setStyle('opacity',0);
		    fx(this.detail,{'opacity':1},{'visibility':'visible','display':'block','opacity':0});
		}
		if (view=='overview' && this.view!='overview') {
		   fx(this.overview,{'opacity':1},{'display':'block','opacity':0,'visibility':'visible'});
		   url.setParameter('mediaid','');
		   this.detail.setStyle('display','none');
		   this.element.setStyles({'height':this.overview.getSize().y+50});;
		}
		this.view = view;
	},
	'removeElement': function(num, real) {
		var self = this;
		if (real==null) real = false;
		var complete = function() {
			if (self.elements.length==1) {
				self.elements[num].remove();
				self.elements = [];
				self.update();
				url.setParameter('page','0');
			} else {
				self.current.image = 0;
				var s = num+1;
				if (s==self.elements.length) s = self.elements.length-2;
				var newid = self.elements[s].getId();

				self.elements[num].remove();
				self.elements.splice(num,1);
				self.update();
				if (self.view=='detail') url.setParameter('mediaid', newid);
			}
		};
		if (real) {
			var request = new Request({
				'url': this.options.urls.remove,
				'evalScripts': true,
				'data': {'userid':self.options.owner,'mediaid':this.elements[num].getId()},
				'onSuccess': function(response) {
					complete();
				}
			}).send();
		} else {
			complete();
		}
	},
	'update': function() {
		var childs = this.detail['slider'].getChildren();
		for (var j=0;j<childs.length;j++)
			childs[j].dispose();

		for (var i=0;i<this.pages.length;i++) {
			var children = this.pages[i].getChildren();
			for (var j=0;j<children.length;j++)
				children[j].dispose();
		}
		for (var i=0;i<this.elements.length;i++) {
			var page = Math.floor(i/this.options.perpage);
			if (this.pages[page]==null) this.pages[page] = new Element('div').addClass('page').setStyle('opacity',0).inject(this.overview['container']);
			this.elements[i].setData('num',i);
			this.elements[i].getThumbnail().inject(this.pages[page]);
			this.elements[i].getSmall().inject(this.detail['slider']);
		}
		this.detail['slider'].setStyle('width', this.elements.length*92);
	},
	'addElement': function(data) {
		data['num'] = this.elements.length;
		this.elements[data['num']] = new Picture(this,data);
		var page = Math.floor(data['num']/this.options.perpage);
		if (this.pages[page]==null) this.pages[page] = new Element('div').addClass('page').setStyle('opacity',0).inject(this.overview['container']);
		this.elements[data['num']].getThumbnail().inject(this.pages[page]);
		this.elements[data['num']].getSmall().inject(this.detail['slider']);
		this.detail['slider'].setStyle('width', this.elements.length*92);
	},
	'updateCount': function() {
		var start = 1+this.current.page*this.options.perpage;
		var end   = (parseInt(this.current.page)+1)*this.options.perpage;
		var count = this.elements.length;
		if (end > count) end = count;
		var html  = start+'-'+end+' von '+count;
		this.overview['pages'].set('html', html);
	},
	'previousPage': function() {
		if (this.view=='detail' && this.current.image!=0)  url.setParameter('mediaid',this.elements[this.current.image-1].getId());
		if (this.view=='overview' && this.current.page!=0) url.setParameter('page',this.current.page-1);
	},
	'nextPage': function() {
		if (this.view=='detail' && this.elements[this.current.image+1].getId()>0) url.setParameter('mediaid',this.elements[this.current.image+1].getId())
		if (this.view=='overview' && this.current.page!=Math.floor(this.elements.length/this.options.perpage)) url.setParameter('page',parseInt(this.current.page)+1);
	},
	'addButton': function(icon, label, click) {
		var button = new Element('a');
		button.setStyle('margin-right','5px');
		button.setStyle('float','left');
		button.addClass('input');
		button.setProperty('href','#');
		var left   = new Element('span').addClass('left').inject(button);
		var center = new Element('span').addClass('label').inject(button);
		var right  = new Element('span').addClass('right').inject(button);
		var icon   = new Element('div').addClass('icon').addClass(icon).inject(center);
		var label  = new Element('span').set('html',label).inject(center);
		button.addEvent('click', function(e) {
			click();
			return false;
		});
		return button;
	},
	'addElementEvents': function(element) {
	},
	'changePage': function(num) {
		var current = this.current['page'];

		var margin = num>current?540:-540;
		if (current==num)
			fx(this.pages[current], {'opacity':1}, {'visibility':'visible','opacity':0});
		else {
			if (current!=null) fx(this.pages[current], {'margin-left':margin*-1,'opacity':0}, {'margin-left':'0px' , 'visibility':'visible'});
			fx(this.pages[num],     {'margin-left':'0px'    ,'opacity':1}, {'margin-left':margin, 'visibility':'visible'});
		}
		this.current['page'] = num;
		this.updateArrows();
		this.updateCount();
	},
	'changePicture': function(num) {
		var _num;

		for (var i=0;i<this.elements.length;i++) {
			if (this.elements[i].getId()==num)
				_num = i;
		}
		if (_num!=this.current.image) {
			var element = this.elements[_num];
			var current = this.elements[this.current.image];
			var self    = this;
			var margin  = _num<this.current.image?650:-650;

			if (current!=null) fx(current.getSmall(),{'background-color':'#ffffff'});
			element.load(function() {
				if (current!=null) current.slideOut(margin);
				element.slideIn(margin*-1);
				self.overlay.setStyle('height',element.getSize().y);
				self.overlay.setStyle('margin-top',150);
				self.detail['container'].setStyle('height',element.getSize().y);
				self.element.setStyle('height',element.getSize().y+160);
				fx(self.detail['slider'],{'margin-left': (_num-2)*-92});
				element.getSmall().setStyle('background-color','#ff6666');
			}).setStyle('opacity',0).inject(this.detail['container']);
			this.current.image = _num;
			if (element.getOwner() == loggedin)
				this.detail['menu']['owner'].setStyle('display','block');
			else
				this.detail['menu']['owner'].setStyle('display','none');

			this.updateArrows();
		}
	},
	'updateArrows': function() {
		if (this.current.image==0) fx(this.detail['arrowLeft'], {'opacity':0});
		else fx(this.detail['arrowLeft'], {'opacity':0.5});
		if (this.current.image==this.elements.length) fx(this.detail['arrowRight'], {'opacity':0});
		else fx(this.detail['arrowRight'], {'opacity':0.5});

		if (this.current.page==0) fx(this.overview['arrowLeft'], {'opacity':0});
		else fx(this.overview['arrowLeft'], {'opacity':0.5});
		var pages = Math.floor(this.elements.length/this.options.perpage);
		if (this.current.page==pages) fx(this.overview['arrowRight'], {'opacity':0});
		else fx(this.overview['arrowRight'], {'opacity':0.5});
	},
	'addThumbnail': function(el, num) {
		var page = this.pages[this.current.page];
		if (page.getChildren()[num]!=el) {
			el.inject(page.getChildren()[num],'after');
			if (page.getChildren()[num]!=el)
				el.inject(page.getChildren()[num],'before');
		}
	},
	'insertElement': function(el, num) {
		this.elements.splice(num+this.current.page*this.options.perpage,0,el);
		this.update();
	},
	'linkFriend': function() {
		this.linking = true;
		this.overlay.setStyle('display','block');

		var current = this.elements[this.current.image];
		var shadow = new Element('div').addClass('shadow');
		$(window).scrollTo(0,current.getPosition().y);
		shadow.setStyles({
			'width': '650px',
			'height': current.getSize().y
		});

		var slider = new Element('div').addClass('selector');
		slider.setStyles({
			'background':'url('+getSource(current.getId(),'big')+')'
		});
		fx(shadow, {'opacity':0.5},{'opacity':0, 'visibility':'visible'});
		var self = this;
		var x;
		var y;

		var move = function(e) {
			x = e.page.x-self.detail.getPosition().x-120/2;
			y = e.page.y-current.getPosition().y-120/2;
			if (x<0) x = 0;
			if (y<0) y = 0;
			if (x>650-124) x = 650-(124);
			if (y>current.getSize().y-124) y = current.getSize().y-(124);
			slider.setStyles({
				'margin-left':x,
				'margin-top':current.getPosition().y-self.overlay.getPosition().y+y,
				'background-position':'-'+(x-(325-current.getSize().x/2)+2)+'px -'+(y+2)+'px'
			});
		};

		shadow.addEvent('mousemove', move);

		shadow.inject(this.overlay);
		slider.inject(shadow);

		var click = function(e) {
			var o = new overlay(300);
			o.setContent('<span style=\"clear:both;float:left;margin-bottom:5px;display:block;\">Wähle den Freund den du verlinken möchtest:</span>'+
			'<select style=\"clear:both;height:28px;padding-top:4px;float:left;width:200px;\" id=\"friend\"></select>'+
			'<a class=\"input\" href=\"#\" style=\"margin-left:5px;float:left;\" id=\"submit\">'+
			'	<span class=\"left\"></span>'+
			'	<span class=\"label\">'+
			'		<div class=\"icon link\" style=\"float:left;\"></div>'+
			'		Verlinken'+
			'	</span>'+
			'	<span class=\"right\"></span>'+
			'</a>');
			o.setTitle('Freund wählen');
			users.getUserInformation(self.friends, function(userinfo) {
				for (var l=0;l<current.getLinks().length;l++) {
					if (current.getLinks()[l]!=null && current.getLinks()[l].getUserid() == userinfo.id)
						return;
				}
				new Element('option').setProperty('value', userinfo.id).set('html', userinfo.username).inject($('friend'));
			});
			$('submit').addEvent('click', function(e) {
				var f = $('friend').value;
				if (f>0) {
					current.addLink(
						{
							'creator': self.friends[0],
							'x': x,
							'y': y,
							'userid': f
						}
					);
					var request = new Request({
						'url': '/Ajax/Media/LinkFriend.html',
						'evalScripts': true,
						'data': {'mediaid':current.getId(),'userid':f,'x':x,'y':y}
					}).send();
				}
				o.close();
				return false;
			});

			o.addEvent('close', function() {
				fx(shadow, {'opacity':0});
				fx(slider, {'opacity':0});
				setTimeout(function(){
					slider.dispose();
					shadow.dispose();
				},1000);
				self.linking = false;
				self.overlay.setStyle('display','none');
			});
			o.show();
			shadow.removeEvent('mousemove', move);
			slider.removeEvent('click', click);
			return false;
		};
		slider.addEvent('click', click);
	},
	'getSource': function(id, type ) {
		id = id+'';
		var folder = '/media';
		for (var i=0; i < id.length; i+=2) {
			folder += '/'+id.substring(i,i+2);
		}
		return 'http://www.benim.de'+folder+'/'+id+'_'+type+'.jpeg';
	}
});

var Picture = new Class({
	'initialize': function(parent, data) {
		this.parent    = parent;
		this.linkages  = [];
		this.data      = data;
	},
	'remove': function() {
		if (this.container!=null) this.container.dispose();
	},
	'setData': function(key, value) {
		this.data[key] = value;
	},
	'getOwner': function() {
		return this.data['owner'];
	},
	'getSize': function() {
		if (this.element!=null) {
			if (this.size==null)
				this.size = this.element.getSize();
			return this.size;
		}
	},
	'getPosition': function() {
		if (this.element!=null) {
			if (this.position==null)
				this.position = this.element.getPosition();
			return this.position;
		}
	},
	'uploaded': function(id) {
		this.data['id'] = id;
		this.data['file'] = null;
	},
	'load': function(_complete) {
		if (this.data['id']>0) {
			if (this.element==null) {
				this.container = new Element('div').addClass('image');
//				this.container.setStyle('left',-80);
				this.element   = new Element('img').inject(this.container);
				this.links     = new Element('div').addClass('links').inject(this.container);

				var self = this;
				this.links.addEvent('mouseover', function() {
					fx(self.links, {'opacity':1}, {'visibility':'visible'});
				});
				this.links.addEvent('mouseout', function() {
					fx(self.links, {'opacity':0, 'visibility':'visible'}, {'visibility':'visible'});
				});
				this.element.addEvent('click', function() {
					self.parent.nextPage();
				});
				var done = 0;

				var complete = function() {
					done++;
					self.links.setStyles({
						'width':'650px',
						'height':self.element.getSize().y,
						'margin-left':(650-self.element.getSize().x)/-2
					});
					if (done==2) _complete(this);
				};
				var request = new Request({
					'url': '/Ajax/Media/GetLinks.html',
					'evalScripts': true,
					'data': {'mediaid':this.data['id']},
					'onSuccess': function(response) {
						var links = eval('('+response+')');
						for (var i=0;i<links.length;i++) {
							self.addLink(links[i]);
						}
						complete();
					}
				}).send();

				this.element.addEvent('load', function() {
					complete();
				});
				this.element.setProperty('src', this.getSource(this.data['id'],'big'));
			} else {
				_complete(this);
			}
			return this.container;
		}
		return null;
	},
	'addLink': function(_link) {
		var link = new Link(this, _link);
		this.linkages.push(link);
		link.getElement().inject(this.links);
	},
	'getLinks': function() {
		return this.linkages;
	},
	'slideIn': function(margin) {
		if (this.container!=null) fx(this.container,{'margin-left':325-(this.element.getSize().x/2),'opacity':1},{'margin-left':margin,'position':'absolute','opacity':0,'visibility':'visible'});
	},
	'slideOut': function(margin) {
		if (this.container!=null) fx(this.container,{'margin-left':margin,'opacity':0},{'margin-left':325-(this.element.getSize().x/2),'position':'absolute','opacity':1,'visibility':'visible'});
	},
	'getId': function() {
		return this.data['id'];
	},
	'getData': function(key) {
		return this.data[key];
	},
	'getThumbnail': function() {
		if (this.data['file']!=null) {
			this.loading = new Element('div').addClass('image').setStyle('background','url(/img/ajax.gif) center center no-repeat');
			return this.loading;
		}
		else if (this.thumbnail==null) {
			var self = this;

			this.thumbnail = new Element('div').addClass('image');
			this.thumbnail.addEvent('mouseover', function() {
				fx(self.thumbnail);
				self.thumbnail.setStyle('background-color','#ff6666');
			});
			this.thumbnail.addEvent('mouseout', function() {
				fx(self.thumbnail,{'background-color':'#ffffff'});
			});
			this.thumbnail.addEvent('click', function() {
				url.setParameter('mediaid', self.getId());
			});

			var move = function(e) {
				if (self.drag>10) {
					if (self.dragElement==null) {
						self.dragElement = new Element('img').setProperty('src',getSource(self.data['id'],'middle')).setStyle('position','absolute').setStyle('opacity',0.7).inject($(document.body));
						self.parent.removeElement(self.data['num']);
					}

					var x = e.page.x-60;
					var y = e.page.y-60;
					self.dragElement.setStyles({
						'left': x,
						'top': y
					});
					var pos = {'x':e.page.x-self.parent.overview['container'].getPosition().x,'y':e.page.y-self.parent.overview['container'].getPosition().y};
					var posx = Math.floor(pos.x/132);
					if (posx>3) {
						if (self.pageTimeout==null) {
							var func = function(){
								self.parent.nextPage();
								if (self.currentDragNum!=null) self.parent.addThumbnail(self.getThumbnail(),self.currentDragNum);
								self.pageTimeout = setTimeout(func, 1000);
							};
							self.pageTimeout = setTimeout(func, 1000);
						}
						posx = 3;
					} else if (posx<0) {
						if (self.pageTimeout==null) {
							var func = function(){
								self.parent.previousPage();
								if (self.currentDragNum!=null) self.parent.addThumbnail(self.getThumbnail(),self.currentDragNum);
								self.pageTimeout = setTimeout(func, 1000);
							}
							self.pageTimeout = setTimeout(func, 1000);
						}
						posx = 0;
					} else {
						if (self.pageTimeout!=null) {
							clearTimeout(self.pageTimeout);
							self.pageTimeout = null;
						}
					}
					var posy = Math.floor(pos.y/132);
					if (posy<0) posy = 0;
					if (posy>3) posy = 3;
					var num = posy*4+posx;
					self.currentDragNum = num;
					self.parent.addThumbnail(self.getThumbnail(),num);
				} else {
					self.drag++;
				}
			};

			var up = function(e) {
				if (self.pageTimeout!=null) {
					clearTimeout(self.pageTimeout);
				}
				self.data['num'] = self.currentDragNum;
				var request = new Request({
					'url': self.parent.options.urls.move,
					'evalScripts': true,
					'data': {'mediaid':self.data['id'],'userid':self.parent.options.owner,'position':self.currentDragNum+self.parent.current.page*self.parent.options.perpage},
					'onSuccess': function(response) {
					}
				}).send();
				if (self.currentDragNum!=null) {
					self.parent.insertElement(self, self.currentDragNum);
					self.currentDragNum = null;
				}
				$(document.body).removeEvent('mousemove',move);
				$(document.body).removeEvent('mouseup',up);
				if (self.dragElement!=null) {
					self.dragElement.dispose();
					self.dragElement = null;
				}
			};
			this.thumbnail.setStyle('background','url('+this.getSource(this.data['id'],'middle')+') center center no-repeat');
			if (self.parent.options.owner == loggedin) {
				this.thumbnail.addEvent('mousedown', function(e) {
					self.drag = 1;
					$(document.body).addEvent('mousemove', move);
					$(document.body).addEvent('mouseup', up);
					return false;
				});
			}
		}

		return this.thumbnail;
	},
	'getSmall': function() {
		if (this.small==null) {
			var self = this;

			this.small = new Element('div').addClass('image');
			var img = new Element('img').setProperty('src',this.getSource(this.data['id'],'small')).inject(this.small);
			this.small.addEvent('click', function() {
				if (self.data['id']>0) {
					url.setParameter('mediaid', self.data['id']);
				}
			});
		}
		if (this.small.children.length==0)
			var img = new Element('img').setProperty('src',this.getSource(this.data['id'],'small')).inject(this.small);
		return this.small;
	},
	'getNum': function() {
		return this.data['num'];
	},
	'getSource': function(id, type ) {
		id = id+'';
		var folder = '/media';
		for (var i=0; i < id.length; i+=2) {
			folder += '/'+id.substring(i,i+2);
		}
		return 'http://www.benim.de'+folder+'/'+id+'_'+type+'.jpeg';
	},
	'removeLink': function(link) {
		var num = -1;
		for(var i=0;i<this.linkages.length;i++) {
			if (this.linkages[i].getUserid() == link.getUserid()) {
				num = i;
			}
		}
		if (num>-1) this.linkages.splice(num,1);

	}
});

function getSource(id, type) {
	id = id+'';
	var folder = '/media';
	for (var i=0; i < id.length; i+=2) {
		folder += '/'+id.substring(i,i+2);
	}
	return 'http://www.benim.de'+folder+'/'+id+'_'+type+'.jpeg';
}

function getButton(icon, label, click) {
	var button = new Element('a');
	button.setStyle('float','left');
	button.addClass('input');
	button.setProperty('href','#');
	var left   = new Element('span').addClass('left').inject(button);
	var center = new Element('span').addClass('label').inject(button);
	var right  = new Element('span').addClass('right').inject(button);
	var icon   = new Element('div').addClass('icon').addClass(icon).inject(center);
	var label  = new Element('span').set('html',label).inject(center);
	button.addEvent('click', function(e) {
		click();
		return false;
	});
	return button;
}

function getInput(name, value) {
	var button = new Element('div');
	button.setStyle('float','left');
	button.addClass('input');
	var left    = new Element('span').addClass('left').inject(button);
	var center  = new Element('span').addClass('label').inject(button);
	var right   = new Element('span').addClass('right').inject(button);
	var label   = new Element('input').setProperty('type', 'text').inject(center);
	label.value = value;
	return button;
}

var Link = new Class({
	'initialize': function(parent, link) {
		this.parent = parent;
		this.data = link;
	},
	'getUserid': function() {
		return this.data['userid'];
	},
	'getElement': function() {
		if (this.element==null) {
			var self = this;
			this.element = new Element('div').addClass('link').setStyles({
				'margin-left': this.data['x']+'px',
				'margin-top':  this.data['y']+'px'
			});
			this.element.addEvent('mousemove', function(e) {return false;});

			var over = function(e) {
				if (self.overlay == null || self.overlay.parentNode==null) {
					users.getUserInformation(self.data['userid'], function(userinfo) {
						var overlay = self.getOverlay(userinfo, self.element);
						fx(overlay, {'opacity':1}, {'opacity':0,'visibility':'visible'});
						overlay.inject(self.element);
					});
				}
			};
			this.element.addEvent('mouseover', over);
		}
		return this.element;
	},
	'getOverlay': function(userinfo, el) {
		if (this.overlay == null) {
			var self = this;

			this.overlay = new Element('div').addClass('overlay');
			var left = this.data['x']>325;
			if (left) this.overlay.setStyle('margin-left',-182);
			this.overlay.addEvent('mouseout', function(e) {
				if (e.page.x<self.overlay.getPosition().x+1
				 || e.page.x>self.overlay.getPosition().x+self.overlay.getSize().x-1
				 || e.page.y<self.overlay.getPosition().y+1
				 || e.page.y>self.overlay.getPosition().y+self.overlay.getSize().y-1) {
					self.overlay.dispose();
				}
			});
			if (userinfo.picture>0) {
				var img = new Element('img')
							.setProperty('src',getSource(userinfo.picture,'middle'))
							.setStyles({'float':left?'right':'left'})
							.inject(this.overlay);
			} else {
				var placeholder = new Element('div').setStyles({'width':'120px','height':'120px','float':left?'right':'left'}).inject(this.overlay);
			}
			var info   = new Element('div').addClass('info').inject(this.overlay);
			var name   = new Element('div').addClass('name').set('html', userinfo.username).inject(info);
			var sub    = new Element('div').addClass('sub').inject(info);
			var gender = new Element('div').addClass('icon').setStyles({'float':'left','margin-right':'5px'}).addClass(userinfo.gender==1?'female':'male').inject(sub);
			var age    = new Element('div').setStyles({'float':'left'}).set('html',userinfo.age+' Jahre alt').inject(sub);
			var buttons = new Element('div').setStyles({'float':'left','clear':'both','margin-top':'5px','width':'170px'}).inject(info);

			getButton('next','Profil besuchen',function(){
				window.location.href = '/Profil/'+self.data['userid']+'/Index.html';
			}).inject(buttons);

			if (userinfo.userid == loggedin || this.data.creator == loggedin) {
				getButton('linkBreak','Verlinkung löschen',function(){
					self.element.dispose();
					var request = new Request({
						'url': '/Ajax/Media/RemoveLink.html',
						'evalScripts': true,
						'data': {'mediaid':self.parent.getId(),'userid':self.data['userid']}
					}).send();
					self.parent.removeLink(self);
					return false;
				}).setStyle('margin-top','5px').inject(buttons);
			}
			this.created = true;
		}
		return this.overlay;
	}
});

var Loader = new Class({
	'initialize': function(element, text) {
		this.element = element;
		var height = element.getSize().y;
		var width = element.getSize().x;
		var left = element.getPosition().x;
		var top = element.getPosition().y;

		this.loader  = new Element('div').setStyles({
			'position':'absolute',
			'left':left+'px',
			'top':top+'px',
			'width':width+'px',
			'height':height+'px',
			'text-align':'center',
			'background':'#ffffff'
		}).inject($(document.body));
		new Element('img').setProperty('src','/img/ajax.gif').setStyle('margin-top', height/2-32).inject(this.loader);
		new Element('br').inject(this.loader);
		new Element('span').set('html',text).inject(this.loader);
	},
	'remove': function() {
		this.loader.dispose();
	}
});

function subscribeEvent(num) {
	var self = this;
	var request = new Request({
		"url": "/Ajax/Events/Subscribe.html",
		"data": {"event" : num},
		"evalScripts": true,
		"onSuccess": function(response) {
			$("event"+num+"no").setStyle("display","block");
			$("event"+num+"yes").setStyle("display","none");
		}
	}).send();
}

function unsubscribeEvent(num) {
	var self = this;
	var request = new Request({
		"url": "/Ajax/Events/Unsubscribe.html",
		"data": {"event" : num},
		"evalScripts": true,
		"onSuccess": function(response) {
			$("event"+num+"yes").setStyle("display","block");
			$("event"+num+"no").setStyle("display","none");
		}
	}).send();
}