// JavaScript Document

var targetUserID = '';
var welcome = {
					
		users: {}, 
		usersExtra: {},
		activeUserID: null,
		ajaxLoginInProgress: false,
		
		animateDelay: 600,
		animateLastRandomNumber: 1,
		
		init: function()	{
			if (welcomeUserData == null)	return;
			for (var i=0; i < welcomeUserData.length; i++)	{
				var user = welcomeUserData[i];
				this.users[user.userID] = user;
				var userDiv = $('userPicture_' + user.userID);
				userDiv.setStyle('opacity', 0.99);
				userDiv.addEvent('mouseover', this.mouseOver.bind(this, user.userID))
				userDiv.addEvent('mouseout', this.mouseOut.bind(this, user.userID))
				userDiv.addEvent('click', this.showDetail.bind(this, user.userID))
			};

			
			if (welcomeUserDataExtra != '')	{
				this.usersExtra = welcomeUserDataExtra;
				// delay animation
				this.animatePreview.bind(this).delay(this.animateDelay * 4);
			}
			
			
		},
		
		lightInit: function()	{
			if (welcomeUserData == null)	return;
			for (var i=0; i < welcomeUserData.length; i++)	{
				var user = welcomeUserData[i];
				this.users[user.userID] = user;
			};
		},
		
		animatePreview: function()	{
			
			// get random number between 1 and 25 
			// and prepare switching this userpreview
			var randomNumber = $random(1,15);
			while (randomNumber == this.animateLastRandomNumber)	{
				randomNumber = $random(1,15);
			}
						
			//var randomNumber = this.animateLastRandomNumber + 1;
			if (randomNumber > 15) randomNumber = 1;
			this.animateLastRandomNumber = randomNumber;
			var userToRemove = welcomeUserData[randomNumber - 1];
			var userID = userToRemove.userID;
			var element = $('userPicture_' + userID);
			
			// remove all events from this preview
			element.removeEvents();
			// fade out
			element.effect('opacity', {duration: 200, onComplete: this.animateComplete.bind(this, userID)} ).start(1,0);
			
			// fetch next user from array
			var maxRandom = this.usersExtra.length - 1;
			var newUser = this.usersExtra[0];
			// preload picture
			this.animatePreload = new Image();
			this.animatePreload.src = newUser.thumbUrl;
			
		},
		
		animateComplete: function(oldUserID)	{
			// change picture
			// fade in
			var oldUserElement = $('userPicture_' + oldUserID);
			
			// replace with which user?
			var newUser = this.usersExtra[0];
			this.usersExtra.shift();

			// add user to this.users and welcomeuserdata
			this.users[newUser.userID] = newUser;
			welcomeUserData.splice(this.animateLastRandomNumber - 1, 1, newUser);
			
			
			// change div and add events
			oldUserElement.id = 'userPicture_' + newUser.userID;
			oldUserElement.addEvent('mouseover', this.mouseOver.bind(this, newUser.userID))
			oldUserElement.addEvent('mouseout', this.mouseOut.bind(this, newUser.userID))
			oldUserElement.addEvent('click', this.showDetail.bind(this, newUser.userID))
			
			// replace background image
			oldUserElement.setStyle('background', '#FFFFFF  url(' +  newUser.thumbUrl + ') center no-repeat');
			// fade in
			oldUserElement.effect('opacity', { duration: 500, onComplete: this.animatePrepareNext.bind(this)} ).start(0,0.99);
					
		},
		
		animatePrepareNext: function()	{
			if (this.usersExtra.length > 0)	{
				this.animatePreview.bind(this).delay(this.animateDelay);
			}
			
		},
		
		
		mouseOver: function(userID)	{
		
			$('userPicture_' + userID).addClass('welcomeUserPictureHighlight');
		},
		mouseOut: function(userID)	{
			$('userPicture_' + userID).removeClass('welcomeUserPictureHighlight');
		},
		mouseOutAll: function()	{
			$('userPicture_' + this.activeUserID).removeClass('welcomeUserPictureHighlight');
		},
				
		
		showDetail: function(userID)	{
			// fill with information
			var user = this.users[userID];
			this.activeUserID = user.userID;
			targetUserID = user.userID;
			
			window.parent.location="/register1";
		
			
		}		

};