var FriendsHandler = new Class({
	
	userid: 0,
	cont: null,
	member: null,
	count: 0,
	offset: 0,
	delOffset: 0,
	rawdata: null,
	toDraw: 12,
	count: 0,
	yScroll: 0,
	lastBuild: 0, 
	lastDel: 0,	
	lastTop: 0,
	columns: 3,
	mark: null,
	divWidth: 0,
	friendCnt: 0,
	getoffset: 0,
	itemsperpage: 800,
	actsite: 1,
	navi: false,
	type: null,
	itemid: null,
	
	initialize: function(cont_id, mark, width, items, type, itemid) {
		this.itemid = itemid;
		this.type = type;
		this.cont = $(cont_id);
		this.mark = mark;
		this.divWidth = width;
		this.itemsperpage = items;
		
		// this.cont.addEvent('scroll', this.updateScroll.bind(this));
		this.member = new Array();
	},
	
	updateScroll: function() {
		this.yScroll = this.cont.getScroll().y;
		if(this.lastBuild == 0) {
			limit = 104;
		}
		else {
			limit = 380;
		}
		if(this.yScroll > (this.lastBuild+limit)) {
			this.makeMember();
			if(this.yScroll > (this.lastDel+500)) {
				this.deleteMember();
				this.lastDel = this.yScroll;
			}
			this.lastBuild = this.yScroll;			
		}
	},
	
	get: function(id) {
		this.count = 0;
		if($('filter_friends') == null) return;
		$('filter_friends').setProperty('readonly', 'readonly');
		if(this.userid == 0) {
			this.userid = id;
		}
		aUsers = new Array();
		req = new Request.JSON({
			url: '/freunde/freundesliste,' + this.userid + '/offset,' + this.getoffset + '/items,' + (this.getoffset+this.itemsperpage) + '/type,' + this.type + '/item,' + this.itemid,
			method: 'get',
			onSuccess: this.updateData.bind(this)						
		}).send();
		
		return false;
	},
	
	next: function() {
		this.getoffset += this.itemsperpage;
		this.get();
		this.actsite++;
		return false;
	},
	
	prev: function() {
		this.getoffset -= this.itemsperpage;
		this.get();
		this.actsite--;
		return false;
	},
	
	first: function() {
		this.getoffset = 0;
		this.get();
		this.actsite = 1;
		return false;
	},
	
	last: function() {
		var cnt = Math.ceil(this.friendCnt/this.itemsperpage)*this.itemsperpage-this.itemsperpage;
		this.getoffset = cnt;
		this.get();
		this.actsite = Math.ceil(this.friendCnt/this.itemsperpage);
		return false;
	},
	
	selected: function() {
		this.getoffset = (this.actsite*this.itemsperpage)-this.itemsperpage;
		this.get();	
		return false;
	},
	
	
	updateData: function(data) {
		this.cont.getChildren().dispose();
		this.offset = 0;
		this.friendCnt = data['cnt']
		this.rawdata = data;
		
		if(this.friendCnt > this.itemsperpage || this.navi) {
			
			this.navi = true;
			var div = new Element('div', { 
										'id': 'navi-cont',
										'styles': {
											'text-align': 'right',
											'display': 'none'}
										});
			var ul = new Element('ul', {
						'class': 'pagination'						
					 });
			
			if(this.actsite != 1) {
				var lifirst = new Element('li');
				lifirst.appendChild(new Element('a', {
							'title': 'Erste Seite',
							'href': '#',
							'class': 'prev-first',
							'events': { 'click': this.first.bind(this)}
						}));
				ul.appendChild(lifirst);
			}
			
			if(this.actsite != 1) {
				var liback = new Element('li');
				liback.appendChild(new Element('a', {
							'title': 'Zurück',
							'href': '#',
							'class': 'prev',
							'events': { 'click': this.prev.bind(this)}
						}));
				ul.appendChild(liback);
			}
			
			var cnt = Math.ceil(this.friendCnt/this.itemsperpage);			
			for(var i=1; i <= cnt; i++) {
				var li = new Element('li');
				if(this.actsite == i) {
					li.appendChild(new Element('span', { 
								'html': i
							}));					
				}
				else {
					li.appendChild(new Element('a', {
								'id': i,
								'title': 'Seite ' + i,
								'href': '#',
								'html': i,
								'events': { 'click': function(e) { this.actsite = e.target.get('id'); this.selected(); }.bind(this)}
							}));					
				}
				ul.appendChild(li);
			}
			
			if(this.actsite != Math.ceil(this.friendCnt/this.itemsperpage)) {
				var linext = new Element('li');
				linext.appendChild(new Element('a', {
							'title': 'Vor',
							'href': '#',
							'class': 'next',
							'events': { 'click': this.next.bind(this)}
						}));
				var lilast = new Element('li');
				ul.appendChild(linext);
			}
			
			if(this.actsite != Math.ceil(this.friendCnt/this.itemsperpage)) {
				lilast.appendChild(new Element('a', {
							'title': 'Letzte Seite',
							'href': '#',
							'class': 'next-last',
							'events': { 'click': this.last.bind(this)}
						}));			
				ul.appendChild(lilast);
			}
			
			div.appendChild(ul);
			div.inject(this.cont);
		}
		
		$('loading-bar').setStyle('width',  '0%');
		$('loading-div').setStyle('display', 'block');
		this.makeMember();
	},
	
	deleteMember: function() {
		if((this.offset-this.toDraw) < 0) {
			return false;
		}
		this.member.slice(this.delOffset, this.delOffset+this.toDraw).each(function(id) {
			el = $('user_' + id);
			if(el != null) {				
				el.destroy();
				this.delOffset++;
			}
		}, this);		
	},
	
	makeMember: function() {
		if(this.offset > this.rawdata['items'].length) {
			return false;
		}
		$('all-friends').set('html', this.rawdata['items'].length);
		this.rawdata['items'].slice(this.offset, this.offset+this.toDraw).each(function(oUser) {
			var borderDiv = new Element('div', {
				'id': 'user_' + oUser.id,				
				'class': 'item',
				'styles': {
					'width': this.divWidth + 'px'						
				}
			});
			
			if(oUser.i) {
				borderDiv.setStyle('-ms-filter', '"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"');
				borderDiv.setStyle('filter', 'alpha(opacity=50)');
				borderDiv.setStyle('opacity', '0.5');				
			}		
			else {
				borderDiv.addEvent('click', function() {
					markItem(borderDiv, 'user');				
					return false;
				});			
			}
			
			var div = new Element('div', {
				'class': 'container container-member even',
				'styles': {
					'height': '80px'					
				}
			});
			
			var a = new Element('a', {
				'class': 'image',
				'title': oUser.n + ' auswählen', 
				'href': '#'
			});
			
			a.appendChild(new Element('img', {
				src: oUser.a,
				alt: oUser.n
			}));
			
			div.appendChild(a);
			
			var ul = new Element('ul', {
				'class': 'description'
			});
			
			var li1 = new Element('li');
			var a = new Element('a', {
				'id': 'nickname',
				'class': 'name',
				'title': oUser.n + ' auswählen',
				// 'href': '/mitglieder/profil/' + oUser.n,
				'href': '#',
				'html': oUser.n
			});
			
			a.appendChild(new Element('img', {
				'src': (oUser.g == 1?this.rawdata['icons'].g1:this.rawdata['icons'].g0),
				'alt': '',
				'styles': {
					'border': 'none',
					'margin': '3px 0 0 4px'
				}
			}));
			
			a.appendChild(new Element('img', {				
				'src': (oUser.o?this.rawdata['icons'].o1:this.rawdata['icons'].o0),
				'alt': '',
				'styles': {
					'border': 'none',
					'margin': '3px 0 0 4px'
				}
			}));			
			
			li1.appendChild(a);	
			
			li2 = new Element('li', {
				'html': oUser.n2
			});
			
			if (oUser.t == 1) {
				var ico3 = new Element('img', {
					'src': this.rawdata['icons'].t,
					'alt': '',
					'styles': {
						'border': 'none',
						'margin': '3px 0 0 4px'
					}
				});
		
				li2.appendChild(ico3);
			}
			
			if (oUser.c == 1) {
				var ico4 = new Element('img', {
					'src': this.rawdata['icons'].c,
					'alt': '',
					'styles': {
						'border': 'none',
						'margin': '3px 0 0 4px'
					}
				});

				li2.appendChild(ico4);
			}
			
			li3 = new Element('li', {
				'html': oUser.rn
			});
			
			li4 = new Element('li', {
				'html': oUser.ms
			});
			
			ul.appendChild(li1);
			ul.appendChild(li2);
			ul.appendChild(li3);
			ul.appendChild(li4);
			div.appendChild(ul);
			borderDiv.appendChild(div);
			this.member.include(oUser.id);
			borderDiv.inject(this.cont);
			this.count++;
			$('loaded-friends').set('html', this.count);
			if(this.mark.contains('user_' + oUser.id)) {
				markItem($('user_' + oUser.id), 'user');
			}
		}, this);
		
		this.offset += this.toDraw;
		if(this.offset < this.rawdata['items'].length) {
			$('loading-bar').setStyle('width',  (this.offset/this.rawdata['items'].length*100) + '%');
			this.makeMember.delay(100, this);
			
		}
		else {
			$('loading-div').setStyle('display', 'none');
			if(this.navi) {
				$('navi-cont').setStyle('display', 'block');
			}
			$('filter_friends').removeProperties('readonly');
			oFriendFilter = new Filter('filter_friends', 'friend_suggest');
		}
	}
});


function markItem(element, type, maxcnt) {
	element = $(element);
	
	if(maxcnt == null) {
		maxcnt = 50;
	}
	
	if (element.hasClass('friend-suggest-enabled')) {			
		// remove
		var cnt = parseInt($('mark_cnt').get('html'));
		$(type + '_' + element.id).destroy();
		$('mark_cnt').set('html', cnt-1);
		element.toggleClass('friend-suggest-enabled');
	}
	else {
		// add
		var cnt = parseInt($('mark_cnt').get('html'));
		if(cnt < maxcnt) {
			addItem(element.id, type);
			$('mark_cnt').set('html', cnt+1);
			element.toggleClass('friend-suggest-enabled');
		}
		else {
			alert('Du hast die maximale Anzahl erreicht');
		}
	}		 
}

function addItem(id, type) {	
	var d = new Element('input', {
		'type': 'hidden',
		'name': type + '[]',
		'value': id,
		'id': type + '_' + id
	});	
	$('send-message').appendChild(d);
}