var users, new_users, active, box_hover = false;
	var c, animation, loop, height;
	var count = 0;
	var inBox = new Array();
	var cookie = new Cookie();
	
	$(function(){
	
		getOnlineUsers();
		height = getBoxHeight();
		$('#online_notification').css({'bottom': '-'+height+'px'});
		
		$('#online_notification_close').bind('click', function(){
			if(confirm('Online notificatie uitschakelen?')){
				cookie.setCookie({'online_notification':1});
				$('#online_notification').slideDown(300);
				setTimeout(function(){
					$('#online_notification').remove();
				}, 300);
			}
		});
		
		$('#online_notification').mouseenter(function(){
			box_hover = active = true;
			clearTimeout(animation);
			$(this).stop(true, false).animate({'bottom':0}, 250);
		});
		
		$('#online_notification').mouseleave(function(){
			box_hover = false;
			setTimeout(function(){
				if(box_hover == false){
					height = getBoxHeight();
					active = false;
					$('#online_notification').stop(true, false).animate({'bottom':'-'+height+'px'}, 250);
				}
			}, 100);
		});
		
		$('#online_notification_view_all_list').mouseover(function(){
			$(this).show();
			$('#online_notification').css({'bottom': 0});
		});
		
		$('#online_notification_view_all').hover(function(){
			if(users != false){
				var list = '<li><strong class=\'list_online\'>Gebruikers online:</strong></li>';
				var c = 1;
				for(i in users){
					list += '<li><span>' + ((c < 10)?('0'+c):c) + ' </span><strong class=\'online_all\'> ' + users[i] + '</strong></li>';
					c++;
				}
			}else{
				var list = '<strong>Er is niemand online</strong>';
			}
			$('#online_notification_view_all_list_body').html(list);
			$('#online_notification_view_all_list').css({'left':''-+($('#online_notification_view_all_list').width())+'px'});
			$('#online_notification_view_all_list').fadeIn(300);
		}, function(){
			$('#online_notification_view_all_list').fadeOut(100);
		});
		
	});
	
	function getOnlineUsers(){
		$.ajax({
			dataType: 'json',
			url: '/data/chatdata.php',
			async: false,
			success: function(json){chatData(json)}
		});
	}
	
	function chatData(json){
		clearTimeout(loop);
		$('.chatOnline').html(json.logon_users);
		if(cookie.getCookie('online_notification') == undefined){
			if(json.logon_users != false){
				var box = $('#online_notification');
				var timestamp = getTimestamp();
				new_users = diff(json.users, users);
				if(new_users != false){
					active = true;
					for(i in new_users){
						var new_user_name = (new_users[i].length > 15)?new_users[i].substr(0, 13)+'..':new_users[i];
						box.find('ul').prepend('<li><span>'+timestamp+'</span><div class=\'notification_name_holder\'><a href=\'/flashchat.php\' onclick=\'openWindow(this.href);this.blur();return false;\' class=\'notification_name\' rel=\''+new_users[i]+'\'>'+new_user_name+'</a> is <strong class=\'notification_online\'>online</strong></div><div class=\'clear\'></div></li>');
						box.find('ul').children('li').slice(5, box.find('ul').children('li').length).remove();
						box.find('ul').children('li').removeClass('last_online');
						box.find('ul').children('li:last').addClass('last_online');
					}
					if((count == 0 && !cookie.getCookie('online_notification_active')) || count > 0){
						box.animate({'bottom':0}, 250, function(){
							animation = setTimeout(function(){
								if(active == true){
									height = getBoxHeight();
									box.animate({'bottom': '-'+height+'px'}, function(){
									active = false;
									});
								}
							}, 5000);
						});
					}
				}
			}
			new_users = false;
			users = json.users;
			garbageCollect();
			loop = setTimeout('getOnlineUsers()', 5000);
			cookie.setCookie({'online_notification_active':1});
			count++;
		}
	}
	
	function garbageCollect(){
		$('#online_notification').find('.notification_name').each(function(){
			if(inArray(users, $(this).attr('rel')) == false){
				$(this).siblings('.notification_online').text('offline');
				$(this).siblings('.notification_online').addClass('notification_offline');
			}
		});
	}
	
	function getBoxHeight(){
		return $('#online_notification_body').height();
	}
	
	function getTimestamp(){
		var date = new Date();
		var minutes = date.getMinutes();
		if(minutes < 10){ minutes = '0' + minutes };
		var hours = date.getHours();
		if(hours < 10){ hours = '0' + hours };
		return hours + ':' + minutes;
	}
	
	function inArray(arr, value){
		var r = false;
		for(i in arr){
			if(arr[i] == value){
				r = true;
			}
		}
		return r;
	}
	
	function diff(arr1, arr2) {
		var arr = new Array;
		var match;
		for(i in arr1){
			match = false;
			for(c in arr2){
				if(arr2[c].indexOf(arr1[i])!=-1){
					match = true;
				}
			}
			if(match == false){
				arr.push(arr1[i]);
			}
		}
		return arr;
	}