var FChat = {};

FChat.Init = function(){
	$(':checkbox:visible').iphoneStyle();
	FChat.Login.init($('a#loginlink'));
	FChat.About.init($('a#about'));
	FChat.TOS.init($('a#tos'));
};

FChat.About = {
	dialog: "",
	init : function(el){
		this.dialog = $('<div></div>');
		this.dialog.html('F-Chat was created as a fun project by a Redditor. If you want to place an F-Chat widget on your site, contact me for details. Contact me at dafenics [at] gmail [dot] com.');
		this.dialog.dialog({
			autoOpen: false,title: 'About F-Chat',modal: true, show: 'fade',hide: 'fade'
		});
		el.click(function(e) {
			FChat.About.open();
			e.preventDefault();
		});
	},
	open : function(){
		this.dialog.dialog('open');
	}
};

FChat.Login = {
	dialog: "",
	init : function(el){
		this.dialog = $('<div id="LoginWindow"></div>');
		this.dialog.html('<p>Nickname <input type="text" id="loginnick" placeholder="John Doe"/></p><p>Password <input type="password" id="loginpass" placeholder="******"/></p><p><input type="button" value="Login" onclick="FChat.AccountPanel.login();"/></p>');
		this.dialog.dialog({
			autoOpen: false,title: 'Login to F-Chat',modal: true, show: 'fade',hide: 'fade'
		});
		el.click(function(e) {
			FChat.Login.open();
			e.preventDefault();
		});
	},
	open : function(){
		this.dialog.dialog('open');
	}
};

FChat.TOS = {
	dialog: "",
	init : function(el){
		this.dialog = $('<div></div>');
		this.dialog.html('Behave. Follow US law. Avoid linking to obscene material. Be nice. Have lulz.');
		this.dialog.dialog({
			autoOpen: false,title: 'Terms of Service',modal: true, show: 'fade',hide: 'fade'
		});
		el.click(function(e) {
			FChat.TOS.open();
			e.preventDefault();
		});
	},
	open : function(){
		this.dialog.dialog('open');
	}
};


FChat.Create = {
	advanced : false,
	toggleAdvanced : function(){
		if($("#tadvanced").is(":checked")){
			$("#chatcreate .optional").slideDown("fast", function(){
				if(!this.advanced){
					$('.optional :checkbox').iphoneStyle();
				}
				this.advanced=true;
			});
		} else {
			$("#chatcreate .optional").slideUp("fast");
		}
	}
};

FChat.Busy = {
	enable : function(title, allowClose){
		if($("#olbg1").length>0){
			var $overlay=$("#olbg1");
			var $overlaycontent=$(".olbg2");
		} else {
			var $overlay = $('<div class="ui-widget-overlay" style="z-index:2000;" id="olbg1"></div>').hide().appendTo('body');
			var $overlaycontent = $('<div id="BusyPanel" class="LightPanel olbg2" style="z-index:2001;"><a class="close" onclick="FChat.Busy.disable();"></a><img src="images/throbber.gif" style=""/><p>' + title + '</p></div>').hide().appendTo('body');
		}
		if(!allowClose){
			$("#BusyPanel .close").hide();
		} else {
			$("#BusyPanel .close").show();
		}
		$("#olbg1, .olbg2").fadeIn("slow");
	},
	disable : function(){
		$("#olbg1, .olbg2").fadeOut();
	}
};

FChat.Registration = {
	show : function(){
		$("#chatcreate #innerpanel").fadeIn("slow");
		$("#regnick").focus();
	},
	hide : function(){
		$("#chatcreate #innerpanel" ).fadeOut("slow");
		
	},
	close : function(){
		$("#chatcreate #innerpanel" ).fadeOut("slow", function(){
			$(this).remove();
		});
	},
	submit : function(){
		FChat.Busy.enable('Creating account...',true);
		$.ajax({
			type: "POST",
			url: "http://www.f-chat.net/json/createAccount.php",
			dataType: "json",
			timeout: 10000,
			data: {
				nick: $("#regnick").val(), password: $("#regpass").val(), email: $("#regmail").val()
			},
			success: function (data) {
				if(data.error==""){
					FChat.Registration.close();
				} else {
					FChat.Error.show(data.error);
				}
				FChat.Busy.disable();
			},
			error: function (objAJAXRequest, strError, errorThrown) {
				FChat.Error.show(strError + ", " + errorThrown);
			}
		});
	}
};

FChat.AccountPanel = {
	login : function(){
		FChat.Busy.enable('Logging in...',true);
		$.ajax({
			type: "POST",
			url: "http://www.f-chat.net/json/login.php",
			dataType: "json",
			timeout: 10000,
			data: {
				nick: $("#loginnick").val(), password: $("#loginpass").val()
			},
			success: function (data) {
				if(data.error==""){
					$("#AccountPanel .notloggedin").fadeOut("slow", function(){
						$("#AccountPanel .loggedin").fadeIn("slow");
						FChat.Registration.hide();
						FChat.Login.dialog.dialog("close");
						$("#chatcreate p.nick").fadeOut("fast");
					});
				} else {
					FChat.Error.show(data.error);
				}
				
				FChat.Busy.disable();
			},
			error: function (objAJAXRequest, strError, errorThrown) {
				FChat.Error.show(strError + ", " + errorThrown);
			}
		});
	},
	logout : function(){
		$("#AccountPanel .loggedin").fadeOut("slow", function(){
			$("#AccountPanel .notloggedin").fadeIn("slow");
			$("#chatcreate p.nick").fadeIn("fast");
		});
	},
};

FChat.Error = {
	show: function(message){
		$("#elbg1, .elbg2").remove();
		var $overlay = $('<div class="ui-widget-overlay" style="z-index:2002;" id="elbg1"></div>').hide().appendTo('body');
		var $overlaycontent = $('<div id="ErrorPanel" class="LightPanel elbg2" style="z-index:2003;"><a class="close" onclick="FChat.Error.hide();"></a><img src="images/error.png" style=""/><p>' + message + '</p></div>').hide().appendTo('body');
		$("#elbg1, .elbg2").fadeIn("fast");
	},
	hide: function(){
		$("#elbg1, .elbg2").fadeOut("fast");
	}
};

$(document).ready(function() {

	FChat.Init();
	
	$( "#logoutbtn" ).button({
		text: false,
		icons: {
			primary: "ui-icon-power"
		}
	});
	$( "#morebtn" ).button({
		text: false,
		icons: {
			primary: "ui-icon-circle-triangle-s"
		}
	});
	
	$("#accountbutton").click(function(e){
		FChat.Registration.show();
		e.preventDefault();
	});
	
	$("#createroom").click(function(){
		$("#chatcreate").fadeOut("fast");
		$(document.body).append("<div id='ChatMain' class='LightPanel'><div id='innerpanel'><div><h2>Online &bull; 2</h2><a class='user'>Hank</a><a class='user'>Pete</a><a class='user'>David</a></div></div><a class='close'></a><a class='share'></a><b>Room name</b> <i>Room description goes here</i><div id='chatbox'>Test</div><div id='chatcontrols'><textarea></textarea></div></div>");
		$("#ChatMain").fadeIn("fast");
		$("#ChatMain, #innerpanel").fadeIn("fast");

	});
});
