(function($){
	//what in 9 hells was I thinking...
	var p_number = 0 ;

	$.show_box = function(box_id, title, text){
		var pwindow = "<div class='popwindow pop_"+box_id+"'><h4>"+title+"</h4><div class='cont'> "+text+" </div><p><a href='#'>close</a></p></div>";
		$('body').append(pwindow);
		var this_window=$('div.pop_'+box_id);
		this_window.css({
			'position' : 'absolute',
			'background' : '#222',
			'color' : '#EEE',
			'border' : '2px solid #FFF',
			'margin' : 0,
			'padding' : '3px'
		}).hide();
		$('div.popwindow > h4').css({
			'padding-bottom' : "4px",
			'margin' : 0
		});
		$('div.popwindow > p').css({
			'padding' : 0,
			'margin' : 0
		});
		$('div.popwindow > p > a')
			.css({clear:'both',float:'left'})
			.click(function(ev){
				ev.preventDefault();
				$(this).parent().parent().remove();
			});
		var cX = scrollX + ($(window).width()/2) - this_window.width()/2 - 10;
		var cY = scrollY + ($(window).height()/2) - this_window.height()/2 -10;
		this_window.css({
			'top' : cY,
			'left' : cX
		});
		//
		this_window.show('fast');

		return this_window;
	}

	$.show_comment = function(id){
		p_number+=1;
		var my_p_number = p_number;
		var invalid = false;
		$('div.popwindow h4').each(function(){
			if($(this).html() == 'Comment'){
				$.show_box(my_p_number, "Error", "Another comment box is already open!");
				invalid = true;
			}
		});
		if(!invalid){
			var variables="";
			var form = "<form><div><textarea name='comment' rows='8' cols='40'></textarea></div><div><a class='form_submit' href='#'> Submit</a></div></form>";
			var this_window = $.show_box(my_p_number, "Comment", form);
			$('a.form_submit').click(function(e){
				//TODO: handle "logged in".
				e.preventDefault();
				var data1 = this_window.children('div').children('form').serialize();
					if(id){
						data1 = data1 +"&parent="+id;
					}
					//alert(data1);
					$.ajax({
						url: '/comment_submit.php',
						type: 'POST',
						data: data1,
						success: function(data) {
							this_window.children('div').html(data);
						},
						error: function(){
							this_window.children('div').html('Submission failed (non-specific JavaScript failure. Try using a different browser, maybe...)');
						}
					});
					return false;
			});
		}
	}


	// page mutations that should be made for logged in users.
	$.logged_in = function(root){
		//remove login button if needed.
		$('a.wkwkwk').parent().remove();
		var extra = "";
		if(root==1){
			extra = '<li><a href="/new.php">New article</a></li>';
		}
		$('li.listend').before('<li><a class="wkwkwk" href="#">User Stuff</a><ul>'+extra+'<li><a href="/logout.php">Logout</a></li></ul></li>');
	}

	$.show_login = function(){
		p_number+=1;
		var my_p_number = p_number;
		$('div.popwindow h4').each(function(){
			if($(this).html() == 'Login / Register'){
				$(this).parent().remove();
			}
		});
			var form = "<form>\
							<div><label for='login_uname'>username</label><input id='login_uname' name='login_uname' type='text' /></div>\
							<div><label for='login_password'>password</label><input id='login_password' name='login_password' type='password' /></div>\
							<div>Usernames should be more than 3 chars, a-z A-Z only. Passwords should be > 3 chars</div>\
							<div><a class='login_submit' href='#'> Login</a></div>\
							<div><a class='register_submit' href='#'> Register</a></div></form>";
			var this_window = $.show_box(my_p_number, "Login / Register", form);
			$('a.login_submit').click(function(e){
				e.preventDefault();
				var data1 = this_window.children('div').children('form').serialize();
				$.ajax({
						url: '/login.php',
						type: 'POST',
						data: data1,
						success: function(data) {
							this_window.children('div').html(data);
							// on success we should trigger logged in modo.
							if(data=='logged in.'){
								$.logged_in();
							}
						},
						error: function(){
							this_window.children('div').html('Submission failed (non-specific JavaScript failure. Try using a different browser, maybe...)');
						}
					});
			});
			this_window.children('div').children('form').submit(function(){
				//alert('123');
			});
			$('a.register_submit').click(function(e){
				e.preventDefault();
				//alert("Not available yet.");
				if($('#login_uname').val().length < 3 || $('#login_password').val().length < 3){
					alert("You've either left the fields blank or not entered enough text (3 char minimum for username or password)");
					return false;
				}
				var data1 = this_window.children('div').children('form').serialize();
				var form2 =  "<form>\
							<div><img src='/fagcha.php?v="+my_p_number+"' /></div>\
							<div><label for='register_code'>humanity check</label><input id='register_code' name='register_code' type='text' /></div>\
							<div><label for='register_password'>retype your password</label><input id='register_password' name='register_password' type='password' /></div>\
							<div><a class='register_submit2' href='#'>Register</a></div></form>";
				this_window.children('div').html(form2);
				$('a.register_submit2').click(function(){
					e.preventDefault();
					data1=data1+"&"+this_window.children('div').children('form').serialize();
					$.ajax({
						url: '/register.php',
						type: 'POST',
						data: data1,
						success: function(data) {
							this_window.children('div').html(data);
							// on success we should trigger logged in modo.
						},
						error: function(){
							this_window.children('div').html('Submission failed (non-specific JavaScript failure. Try using a different browser, maybe...)');
						}
					});

				});
			});
	}

	$.show_image = function(image_url){
		p_number+=1;
		var my_p_number = p_number;
		var this_window = $.show_box(my_p_number, "Loading...",image_url);

		$('<img />')
			.attr('id', 'at_im'+my_p_number)
			.css({
				'padding' : 0,
				'margin' : 0,
				'display' : 'block'
			})
			.load(function(){
				this_window
					.empty()
					.append($(this));
				var im = $('#at_im'+my_p_number);
				if((im.width()+20 > $(window).width() || im.height()+20 > $(window).height()) && im.height() > 100 && im.width() > 100){
					var im_original_width = im.width();
					var im_original_height = im.height();
					if((im.width() / im.height()) > $(window).width() / $(window).height()){
						im.width($(window).width() *0.9);
					}else{
						im.height($(window).height() *0.9);
					}
					var scaler = $('<img />')
						.css({
							'padding' : 0,
							'margin' : 0,
							'position' : 'relative',
							'display' : 'block',
							'float' : 'right',
							'margin-top' : '-40px'
						})
						.click(function(){
							$(this).hide('fast');
							im.animate({'width' : im_original_width, 'height' : im_original_height}, 'fast');
						})
						.attr('src', '/scale.png');
					this_window.append(scaler);
				}
				var cX = scrollX + ($(window).width()/2) - im.width()/2 - 10;
				var cY = scrollY + ($(window).height()/2) - im.height()/2 -10;
				this_window.css({
					'top' : cY,
					'left' : cX
				});
				im.wrap('<a class="modal_close" href="#" />');
				$('a.modal_close').click(function(e){
					e.preventDefault();
					this_window.remove();
				});
			})
			.error(function(e){
				e.preventDefault();
				this_window.children('h4').html("Couldn't load:");
			})
			.attr('src', image_url);
	};
})(jQuery);