$(document).ready(function() {
	initialize();
});

function initialize(){
	
	// Input event (enter)
	$('#inputfield').keypress(function(e){
		if(e.keyCode == '13' && $('#inputfield').val().length > 0){			
			Jabbify.send("message","create", { 'message': $('#inputfield').val(), 'data':{'options': user['options']}});
			$('#inputfield').val('');
		}
	});
	
	
	// Input label
	$('#inputfield').defaultValue('Type something and press enter..');
	
	
	// Ask for Username
	$('body').css({'background-image':''});
	$('#page-wrap').show();
	$.facebox.settings.overlay = true;
	jQuery.facebox($('#signupwrapper').html());
	
	// Load saved values from cookie
	if(cookie.get('username'))
		$('#facebox .username').val(cookie.get('username'));
	if(cookie.get('email'))
		$('#facebox .email').val(cookie.get('email'));
	if(cookie.get('colour'))
		setColour(cookie.get('colour'));
		
	function setColour(colour){
		$('.inputwrapper.colours .colour').removeClass('active');
		$('.inputwrapper.colours .colour[rel=' + colour + ']').addClass('active');
		$('.usercolour').val(colour);
	}
	
	// Make facebox draggable
	$("#facebox").easydrag();
	$("#facebox").setHandler('drag-1');
	$("#facebox").setHandler('drag-2');
	$("#facebox").setHandler('drag-3');
	$("#facebox").setHandler('drag-4');
	
	
	$('#facebox .username')
	$('#facebox .username').focus().valid8({
		regularExpressions: [
			{expression: /^.+$/, errormessage: 'Name is required.'}
		]
	});
	
	// Events
	$('#facebox .username, #facebox .email').live('keypress',function(e){
		if(e.keyCode == 13){
			signup($('#facebox .username').val(),$('#facebox .email').val(),$('.usercolour').val());
			jQuery.facebox.close();
		}	
	});
	
	// Colours
	$('.inputwrapper.colours .colour').live('click', function(){
		$('.inputwrapper.colours .colour').removeClass('active');
		$(this).addClass('active');
		var rel = $(this).attr('rel');
		$('.usercolour').val(rel);		
	});
	
	$('#facebox .buttonLogin').click(function(){
		if($('#facebox .username').isValid()){
			signup($('#facebox .username').val(),$('#facebox .email').val(),$('.usercolour').val());
			jQuery.facebox.close();
		}
	});



}

function signup(username,email,colour){	
	
	// Trim white spaces and keep it short.
	username = $.trim(username);
	user.name = username.substring(0,11);
	
	// Email
	user.email = $.trim(email);
	
	// Get Gravatar URL
	user.options.thumbnail = md5.encrypt(email);
	
	// Get colour
	user.options.colour = colour;
	
	if(username.length > 0)
		connect();
	else
		jQuery.facebox($('#signupwrapper').html());

}


function connect(username,thumbnail,colour){

	// Save data in cookie
	cookie.set('username',user.name,'30');
	cookie.set('email',user.email,'30');
	cookie.set('colour',user.options.colour,'30');
	
	// Connect to Jabbify
	Jabbify.connect({name: user.name, data: {options: {colour:user.options.colour,thumbnail:user.options.thumbnail}}});
	
	
	// Get chat history
	getHistory();
	
	// Set up messages subscription
	OpenAjax.hub.subscribe("jabbify.*.*", subscriptionHandler);
	
	$(window).unload(function(){
		Jabbify.send("user","destroy");
	});
	
	$(window).blur(function(){
		user.options.sound = true;
	});
	
	$(window).focus(function(){
		user.options.sound = false;
	});
	
}

function updateUserlist(){

	$('#userList').html($("<span class='online'>USERS: </span>"));
	Jabbify.users_list(function(results){
   		for(var i=0; i<results.data.length; i++){
   			var foo = results.data[i].name;
     		$('#userList').append($("<span>" + foo + " </span>"));
   		}
 	});

}

function getHistory(){
	
	var options, thumbnail, colour = "";
	
	// Get recent messages from Jabify and render
	Jabbify.messages_list(20, function(results){
		
		for(var i=0; i<results.data.length; i++){
			options = results.data[0].options || null;
			if(options){
				thumbnail = (options.thumbnail)?options.thumbnail:"";
				colour = (options.colour)?options.colour:"";
   			}

   			renderMessage('message', results.data[i].name, results.data[i].message, thumbnail, 'colour-0', results.data[i].timestamp);
   		}
 	});
 	
}

function subscriptionHandler(type, results){
	
	var options, thumbnail, colour = false;
	
	function getOptions(){
		options = results.data[0].data.options || null;
		if(options){
			thumbnail = (options.thumbnail)?options.thumbnail:"";
			colour = (options.colour)?options.colour:"";
   		}
   	}
   	
   	
	// Handle logins, messages and error
	switch (type){
		case "jabbify.user.create":
			getOptions();
			updateUserlist();
			renderMessage('status',results.data[0].name, ' joined the conversation.', thumbnail, colour, results.data[0].timestamp);
			break;
		case "jabbify.message.create":
			getOptions();
			handleNotifications();
			renderMessage('message', results.data[0].name, handleMessage(results.data[0].message), thumbnail, colour, results.data[0].timestamp);
			break;
		case "jabbify.user.destroy":
			updateUserlist();
			renderMessage('status',results.data[0].name, ' left.', thumbnail, 'colour-0', new Date());
			break;
		case "jabbify.comet.break_connection":
			break;
		default:
			renderMessage('error','', 'Something unknown happened.');
	}
}

function handleMessage(msg){
	if(msg.match(/^\/youtube/))
		msg = messageYoutube(msg)
	if(msg.match(/^\/image/))
		msg = messageImage(msg)
	if(msg.match(/^\/recepie/))
		msg = messageRecepie(msg)
		
	return msg;
}

function handleNotifications(){

	if(user.options.sound){
		$.sound.play('/sounds/dink.wav');
		user.options.sound = false;
	}
}			

function renderMessage(type, author, message, thumbnail, colour, time){
	if(!thumbnail)
		thumbnail = "false";
	
	var date = new Date(time);
	h = (date.getHours()>=10)?date.getHours():"0"+date.getHours();
	m = (date.getMinutes()>=10)?date.getMinutes():"0"+date.getMinutes();
	
	
	var src = "<div style='display:none;' class='message " + colour + "'> \
					<div class='icon'> \
						<div class='corner tr'></div> \
						<div class='corner br'></div> \
						<div class='corner bl'></div> \
						<div class='corner tl'></div> \
						<div class='time'>" + h + ":" + m + "</div> \
						<div class='thumbnail'> \
							<div class='corner tr'></div> \
							<div class='corner br'></div> \
							<div class='corner bl'></div> \
							<div class='corner tl'></div> \
							<img src='http://www.gravatar.com/avatar/" + thumbnail.replace('http://','') + "?s=30.jpg'/> \
						</div> \
					</div> \
					<div class='author'> \
						" + author + " \
					</div> \
					<div class='body'> \
						" + message + " \
					</div> \
				</div>"
	
	$('#messages').append($(src).fadeIn());	
	
}

user = {name:'',email:'',options:{thumbnail:'',colour:'',sound:''}};


function messageYoutube(msg){
	$.facebox.settings.overlay = false;
	data = msg.replace('/youtube ','');
	yid = $.trim(data.replace(/^.+v\=/,''));
	var link = $('<div />').html($("<a href='#'></a>").attr('onclick',"jQuery.facebox(\"<object width='320' height='265'><param name='movie' value='http://www.youtube.com/v/" + yid + "'></param><param name='allowFullScreen' value='true'></param><param name='allowscriptaccess' value='always'></param><embed src='http://www.youtube.com/v/" + yid + "' type='application/x-shockwave-flash' allowscriptaccess='always' allowfullscreen='true' width='320' height='265'></embed></object>\");").html('embedded a Youtube video. [click me to open]. Close it by pressing ESC.'));
	return link.html();
}

function messageImage(msg){
	$.facebox.settings.overlay = false;
	data = msg.replace('/image ','');
	var link = $('<div />').html($("<a href='#'></a>").attr('onclick',"jQuery.facebox(\"<img src='" + data + "' />\");").html('embedded an image. [click me to open]. Close it by pressing ESC.'));
	return link.html();
}