Problema com ajax

bom e o seguinte, estou aprendendo a usar javascript, entao tentei criar um script que funcionaria como chat, a pessoa digita alguma coisa, entao o javascript chama o arquivo php para salvar os dados no mysql, mesma coisa para visualizar mensagens, script:

index.html

<title>Site de teste</title>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/main.js"></script>

<form action="javascript:;" class="form_chat">
 <input maxlength="100" type="text" placeholder="O que há em sua mente?" class="input_chat" style="width:155px" />
 <input type="submit" value="Enviar" />
</form>

<table border="0" class="chat"></table>

<a href="" class="load_chat">Carregar mais</a>

main.php

<?php
mysql_connect("127.0.0.1", "andre", "senha");
mysql_select_db("db_novo_site");

switch($_POST["action"])

{ case "submit_chat_text":

	mysql_query("INSERT INTO messages VALUES(NULL, '".$_POST["chat_text"]."')" );

case "list_messages":
{

	if($_POST["id"] != -1)
 echo is_array($query = mysql_fetch_row( mysql_query("SELECT message FROM messages WHERE id = '".$_POST["id"]."'") ) )? array_pop($query) : "";

	else
 echo mysql_num_rows( mysql_query("SELECT message FROM messages") );
}
}
?>

js/main.js

var class = "chat"
var message_pos

$(document).ready( function()
{
$(".input_" + class).focusin( function()
{
$(this).animate({"width" : "220px"}, 200)
})
$(".input_" + class).focusout( function()
{
if( $(".input_" + class).val() == "")
$(this).animate({"width" : "155px"}, 200)
})

$(".form_" + class).submit( function()
{
submit_chat_text($(".input_" + class).val(), true, true)
$(".input_" + class).val("")
})

$.ajax({url: "main.php", type: "POST", data: {action: "list_messages", id: -1} }).done( function(num)
{
for(message_pos = num; message_pos > (num - 7); message_pos--)
{

 if(message_pos == 0)
 {
 $(".load_" + class).html("")
 break
 }

 $.ajax({url: "main.php", type: "POST", data: {action: "list_messages", id: message_pos} }).done( function(msg)
 {
 submit_chat_text(msg)
 })
	}
})
$(".load_" + class).click( function()

{

	$.ajax({url: "main.php", type: "POST", data: {action: "list_messages", id: -1} }).done( function(num)
	{
 var i
 for(i = message_pos; message_pos > (i - 7); message_pos--)
 {
 if(message_pos == 0)
 {
 $(".load_" + class).html("")
 break
 }
 $.ajax({url: "main.php", type: "POST", data: {action: "list_messages", id: message_pos} }).done( function(msg)
 {
 submit_chat_text(msg)
 })
 }
	})

	return false
})
})

function submit_chat_text(text, save_msg, inverse_text)

{

if(text == "")
	return

var old_text = $("." + class).html()

if(inverse_text)

{

	$("." + class).html("<tr><td>" + text + "</td></tr>")
	$("." + class).append(old_text)
}

else

	$("." + class).append("<tr><td>" + text + "</td></tr>")

if(save_msg)
	$.ajax({url: "main.php", type: "POST", data: {action: "submit_chat_text", chat_text: text} })
}

sql:

CREATE TABLE `messages` (
 `id` smallint(10) unsigned NOT NULL auto_increment,
 `message` varchar(100) NOT NULL,
 PRIMARY KEY (`id`)
)

estou usando o jQuery v1.7

aparentemente o script parece nao ter erros, mais as vezes as mensagens saem fora de ordem, alguem sabe resolver isto?