// JavaScript Document
	
var Employees = new Class({
					
	Implements: [Options, Events],

	options: {
		url: 				'employees.php',
		refreshTime: 		45000,
		contentDiv: 		'ajax_content',
		contentShortDiv: 	'ajax_content_short',
		reg: 				new RegExp('"txtefc">*([^,]*)'),
		colorOnline: 		'#3bab19',
		colorCalling: 		'#ff0000',
		colorPaused: 		'#ffff00',
		colorOffline: 		'#c74513',
		constantOnline: 	'beschikbaar',
		constantCalling: 	'in gesprek'
	},
	
	initialize: function(options)
	{
		this.setOptions(options);
		
		// get all employees 	
		var req = this.doRequest({}, this.handleEmpRequest);
		req.send();
		
		// get all employees status
		this.statusUpdate = this.doRequest({ 'act' : 'getstatus' }, this.handleEmpStatusRequest);
	},
	
	handleEmpRequest: function(response)
	{
		this.handleEmployees(response);
					
		// start update 
		this.startUpdate.bind(this).delay(this.options.refreshTime);
	},
	
	handleEmpStatusRequest: function(response)
	{
		var theResponse = this.handleResponse(response);
		
		if(this.checkResponse(theResponse))
		{	
			// set var update with statuses
			this.update = theResponse.boxes;
						
			// set status employees
			this.setStatus();
		}
	},
	
	doRequest: function(reqData, reqOnComplete)
	{ 
		return new Request({
			method: 'post',
			url: this.options.url,
			data: reqData,
			onComplete: reqOnComplete.bind(this)
		});		
	},
	
	startUpdate: function()
	{ 
		// start request
		this.statusUpdate.send();
		
		// repeat request
		this.doRefresh.bind(this).periodical(this.options.refreshTime);		
	},
	
	doRefresh: function()
	{ 
		this.statusUpdate.send();	
	},
	 
	/* AJAX HANDLING */
    handleResponse: function(result)
    {
		try {
			var result = JSON.decode(result);
		} 
		catch (e) {
			var result = {result : false, message : e.message};
		}
	
		return result;
    },
 
	checkResponse: function(result)
	{
		return result['result'] == true;
	},

	setConfig: function(config)
	{
		this.options.colorOnline = config.colorOnline,
		this.options.colorCalling = config.colorCalling,
		this.options.colorPaused = config.colorPaused,
		this.options.colorOffline = config.colorOffline,
		this.options.constantOnline = config.statusOnline,
		this.options.constantCalling = config.statusCalling	
		this.options.constantPaused = config.statusPaused
	},

	handleEmployees: function(response)
	{
		// check ajax response
		var theResponse = this.handleResponse(response);
		
		// if ok
		if(this.checkResponse(theResponse))
		{
			//if(theResponse.config.length > 0)
			//{
				this.setConfig(theResponse.config);
			//}
			
			this.startLeftBox();
			
			// add employees to array to show the 1st who is calling or online in the left box			
			if(theResponse.isOnline != null && theResponse.isOnline.length > 0)
			{
				// loop them
				theResponse.isOnline.each(function(value, index)
				{
					var m = this.options.reg.exec(value);
					this.isOnline.extend([m[1]]);
				}.bind(this));
				
				this.empsOnline = true;
			}
			
			if(theResponse.isCalling != null && theResponse.isCalling.length > 0)
			{
				// loop them
				theResponse.isCalling.each(function(value, index)
				{
					var m = this.options.reg.exec(value);
					this.isCalling.extend([m[1]]);
				}.bind(this));
				
				this.empsCalling = true;
			}
			
			if(theResponse.isPaused != null && theResponse.isPaused.length > 0)
			{
				// loop them
				theResponse.isPaused.each(function(value, index)
				{
					var m = this.options.reg.exec(value);
					this.isPaused.extend([m[1]]);
				}.bind(this));
				
				this.empsIsPaused = true;
			}
			
			// set var boxes with html boxes
			this.boxes = theResponse.boxes;
			
			// parse first time boxes
			this.parseBoxesFirstTime();
		}			
		else // show error
		{
			$(this.options.contentDiv).set('html', theResponse.message);
		}
	},
		
	parseBoxesFirstTime: function()
	{
		var html = '';
		
		// loop the employee boxes 
		for(var i in this.boxes)
		{
			var value = this.boxes[i];
			html += value;
		}
		
		// display employees
		this.showBoxes(html);
      //  this.doRefresh();
	},

	showBoxes: function(content)
	{
		// get short content
		var contentShort = this.getShortContent();
		
		// set short content
		$(this.options.contentShortDiv).set('html', contentShort);	
		
		// set content
		$(this.options.contentDiv).set('html', content);
	
		var guestbox = 'box33';
		var result = $(this.options.contentDiv).hasChild(guestbox);
		if(result)
		{
			$(guestbox).inject($(this.options.contentDiv), 'top');

		}
		
		var message = '<p>Er zijn momenteel geen consulenten beschikbaar, probeert u het later nog eens...<br /><br /><img src="./images/emp/roos2.gif" /></p>';
		//var messageDiv = new Element('div', {'html': message, styles : {'display':'none'}}).inject($(this.options.contentDiv));
		var messageDiv = new Element('div', {'id':'message', 'html': message}).inject($(this.options.contentDiv));
		
		this.checkMessage();

		// after refresh scroll to top
		var scrollToTop = new Fx.Scroll(this.options.contentDiv);
		scrollToTop.toTop(); //go to the top
	},
	
	getShortContent: function()
	{
		var contentShort = '';
		
		if(this.empsOnline == true)
		{
			contentShort += '<font style="color: ' + this.options.colorOnline + ';"><strong>Beschikbaar:</strong></font><br />';
			
			var a = 0;
			var lengthOnline = this.isOnline.length;
			this.isOnline.each(function(value)
			{
				a++;
				contentShort += value;
				if(a < lengthOnline)
				{
					contentShort += ',<br />';
				}
			});
			
			contentShort += '<br /><br />';
		}
		
		if(this.empsCalling == true)
		{
			contentShort += '<font style="color: ' + this.options.colorCalling + ';"><strong>In gesprek:</strong></font><br />';
			
			var b = 0;
			var lengthCalling = this.isCalling.length;
			this.isCalling.each(function(value)
			{
				b++;
				contentShort += value;
				if(b < lengthCalling)
				{
					contentShort += ',<br />';
				}
			});
			
			contentShort += '<br /><br />';
		}
		
		if(this.empsIsPaused == true)
		{
			contentShort += '<font style="color: ' + this.options.colorPaused + ';"><strong>Pauze:</strong></font><br />';
			
			var b = 0;
			var lengthIsPaused = this.isPaused.length;
			this.isPaused.each(function(value)
			{
				b++;
				contentShort += value;
				if(b < lengthIsPaused)
				{
					contentShort += ',<br />';
				}
			});
			
			contentShort += '<br /><br />';
		}
		
		if(this.empsOnline == false && this.empsCalling == false && this.empsIsPaused == false)
		{
			contentShort += 'Er zijn momenteel geen medewerkers online.';
		}
		contentShort += '<br><br><font class="leeg" style="font-size: 8pt">Deze carousel is mogelijk gemaakt door:<br><a href="http://www.4iceproductions.nl" target="_blank" style="font-size: 9pt">4ice Productions</a></font>';
		return contentShort;
	},

	setStatus: function()
	{
		// status arrays
		this.online = new Array();
		this.calling = new Array();
		this.paused = new Array();
		this.offline = new Array();
			
		// loop the boxes for status and add it to an array
		for(var i in this.boxes)
		{
			var value = this.boxes[i];
			var status = this.update[i];
			//console.log(i + ' - ' + status + ' - '+  this.options.constantPaused);
			// check status and add to array
			switch(status)
			{
				case this.options.constantOnline:
					this.online[i] = value;
					break;
				case this.options.constantCalling:
					this.calling[i] = value;
					break;
				case this.options.constantPaused:
					this.paused[i] = value;
					break;
				default:
					this.offline[i] = value;
			}
		}
	
		// parse the boxes
		this.parseBoxes();
	},
	
	setBoxVis: function(i)
	{
		$('box' + i).setStyle('display', 'block');
	},
	
	setBoxUnVis: function(i)
	{
		$('box' + i).setStyle('display', 'none');
	},
	
	showMessage: function()
	{
		$('message').setStyle('display', 'block');
	},
	
	hideMessage: function()
	{
		$('message').setStyle('display', 'none');
	},
	
	checkMessage: function()
	{
		if(this.empsOnline == false && this.empsCalling == false && this.empsIsPaused == false)
		{
			this.showMessage();
		}
		else
		{
			this.hideMessage();	
		}
	},
	
	parseBoxes: function()
	{
		var html = '';
		
		this.startLeftBox();
		
		// shuffle all online employees
		this.shuffle(this.online);
		
		// loop them
		this.online.each(function(value, index)
		{
			// if value is not undefined (due to shuffle and empty keys)
			if(value != null)
			{
  				var m = this.options.reg.exec(value);
				this.isOnline.extend([m[1]]);
				
				html += value;
				this.empsOnline = true;
			}
		}.bind(this));
		
		// shuffle all calling employees
		this.shuffle(this.calling);
		
		// loop them
		this.calling.each(function(value, index)
		{
			// if value is not undefined (due to shuffle and empty keys)
			if(value != null)
			{
  				var m = this.options.reg.exec(value);
				this.isCalling.extend([m[1]]);
				
				html += value;
				this.empsCalling = true;
			}
		}.bind(this));
		
		// shuffle all calling employees
		this.shuffle(this.paused);
		
		// loop them
		this.paused.each(function(value, index)
		{
			// if value is not undefined (due to shuffle and empty keys)
			if(value != null)
			{
  				var m = this.options.reg.exec(value);
				this.isPaused.extend([m[1]]);
				
				html += value;
				this.empsIsPaused = true;
			}
		}.bind(this));
		
		// shuffle all offline employees
		this.shuffle(this.offline);
		
		// loop them
		this.offline.each(function(value, index)
		{
			// if value is not undefined (due to shuffle and empty keys)
			if(value != null)
			{
				html += value;
			}
		}.bind(this));
		
		// display employees
		this.showBoxes(html);
	
		// set the status
		for(var i in this.update)
		{
		   // $('box' + i).setStyle('display', 'block');
			var status = this.update[i];
			
			switch(status)
			{
				case this.options.constantOnline:
					value = this.createStatus(this.options.colorOnline, status);
					break;
				case this.options.constantCalling:
					value = this.createStatus(this.options.colorCalling, status);
					break;
				case this.options.constantPaused:
					value = this.createStatus(this.options.colorPaused, status);
					break;
				default:
					value = this.createStatus(this.options.colorOffline, status);
			}
			
			if(status == "offline")
			{
				this.setBoxUnVis(i);
			}
			else
			{
				this.setBoxVis(i);
			}
			//$('box' + i).setStyle('display', 'none');
			
			$('emp' + i).set('html', value);
		}
	},
	
	createStatus: function(color, status)
	{
		return '<font style="font-size: 9.5pt; color: ' + color + ';">' + status + '</font>';
	},
	
	startLeftBox: function()
	{
		// array for left box (short content)
		this.isOnline = new Array();
		this.isCalling = new Array();
		this.isPaused = new Array();

		this.empsOnline = false;
		this.empsCalling = false;
		this.empsIsPaused = false;
	},

	shuffle: function(o)
	{ 
		for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
		return o;
	}
});

var domReady = function()
	{
		var employees = new Employees();
	}