var timer;

$(document).ready(function(){

    if( $("#createChatroomButton") )
    {
        $("#createChatroomButton").hover(
        function(e) {
            $("#createChatroomButton").css( 'background-position', 'bottom right' );
        },
        function(e) {
            $("#createChatroomButton").css( 'background-position', 'bottom left' );
        });
    }
   
    if( $("#message").length > 0 )
    {
    
        hideUsernameDialog();
        
        hideHelpDialog();
        
        hideAlertDialog();
        
        hideInviteOthersDialog();
    
        $("#message").keypress( function(e) {
            // send message
        
            if( e.keyCode == 13 )       // enter/return key
            {
                send_message();
                e.preventDefault();   
            }
        });
        
        $("#dismissHelpDialog").click( function(e) {
        
            hideHelpDialog();
            
            e.preventDefault();
        
        });
   
        $("#submitMessageButton").click( function(e) {
   
            send_message();
   
        });
        
        $("#changeUsername").click( function(e) {
            $("#newUsername").val( $("#username").text() );
            $("#changeUsernameDialog").show('fast');
            $("#newUsername").focus();
        });
        
        $("#cancelUsernameChange").click( function(e) {
            hideUsernameDialog();
        });
        
        $("#newUsername").keypress( function(e) {
        
            if( e.keyCode == 13 )
                $("#saveUsername").click();
        
        });
        
        $("#saveUsername").click( function(e) {
            var newUsername = $("#newUsername").val();
            if( newUsername == "" || newUsername == $("#username").text() )
            {
                $("#changeUsernameDialog").hide();
                return;
            }
            
            
            $.ajax({
                url: "./../chat/change-username",
                type: "POST",
                data: "newUsername=" + newUsername + "&roomid=" + $("#roomid").val(),
                dataType: "xml",
                success: function( data ) {
                
                    var outcome = $(data).find("outcome").text();
                    if( outcome != "success" )
                    {
                        alertDialog( outcome );
                    }
                    else
                    {
                        hideUsernameDialog();
                        $("#username").text( newUsername );
                    }
                
                }
            });
            
            ping();
            
        });
        
        $("#dismissAlert").click( function(e) {
        
            hideAlertDialog();
        
        });
        
        $("#inviteOthers").click( function(e) {
        
            $("#inviteOthersDialog").show();
        
        });
        
        $("#addRecipient").click( function(e) {
        
            var div = document.createElement("div");
            var input = document.createElement("input");
            $(input).attr('type', 'text');
            $(input).addClass('inviteOthersEmail');
            $(div).append(input);
            $("#inviteOthersRecipients").append( div );
        
        });
        
        $("#cancelInviteOthers").click( function(e) {
            hideInviteOthersDialog();
        });
        
        $("#sendInvitation").click( function(e) {
            var roomid = $("#roomid").val();
            
            var postData = "message=" + encodeURIComponent($("#customEmailMessage").val()) + "&roomid=" + encodeURIComponent(roomid) + "&sender=" + encodeURIComponent($("#your_email").val());
            
            $("#inviteOthersRecipients .inviteOthersEmail").each( function() {
                if( $(this).val() != "" )
                    postData += "&recipients[]=" + encodeURIComponent($(this).val());
            });
            
            $.ajax({
                url: "./../chat/send-invites",
                type: "POST",
                data: postData,
                success: function( data ) {
                    hideInviteOthersDialog();
                    alertDialog( data );
                }
            });
        });
        
        $("#increaseFontSize").click( function(e) {
        
            $("#messagesContainer").css('fontSize', (parseInt($("#messagesContainer").css('fontSize').match(/\d+/)[0]) + 1) + "px" );
        });
        
        $("#decreaseFontSize").click( function(e) {
        
            $("#messagesContainer").css('fontSize', (parseInt($("#messagesContainer").css('fontSize').match(/\d+/)[0]) - 1) + "px" );
        });
        
        ping();
        timer = setInterval( "ping()", 2500 );
        
        if( $("#username").text().substring(0,5) == "Guest" )
        {
            $("#newUsername").val( $("#username").text() );
            $("#changeUsernameDialog").show('slow');
            $("#newUsername").focus();
        }
    }
});

function hideInviteOthersDialog()
{
    $("#inviteOthersDialog").hide();
    $("#inviteOthersRecipients .inviteOthersEmail").each( function() {
        $(this).detach();
    });
    
    var div = document.createElement("div");
    var input = document.createElement("input");
    $(input).attr('type', 'text');
    $(input).addClass('inviteOthersEmail');
    $(div).append(input);
    $("#inviteOthersRecipients").append( div );
    
}

function hideUsernameDialog()
{
    $("#changeUsernameDialog").hide();
    $("#newUsername").blur();
}

function hideHelpDialog()
{
    $("#helpDialog").hide();
}

function hideAlertDialog()
{
    if( $("#alertMessage").text() == "You're not logged in to this chatroom." )
    {   
        $(window.location).attr( 'href', 'http://zippychat.com' );
    }
    $("#alertDialog").hide();
}
 
function send_message()
{
    var msg = $("#message").val();
    
    if( msg.substring( 0, 5 ) == "/help" )
    {
        
        showHelpDialog();
        
    }
    else {
        var roomid = $("#roomid").val();
        $.ajax({
            url: "./../chat/post",
            type: "POST",
            data: "message=" + encodeURIComponent(msg) + "&roomid=" + roomid,
            dataType: "xml",
            success: function( data ) {
            
                processPing( data );
            
            }
        });
    }
    $("#message").val( '' );
}

function ping()
{
    var roomid = $("#roomid").val();
    
    $.ajax({
        url: "./../chat/ping",
        data: "roomid=" + roomid,
        dataType: "xml",
        success: function( data ) {
            
            processPing( data );
            
        }
    });
    
}

function showHelpDialog()
{
    $("#helpDialog").show();
}

function alertDialog( message )
{
    $("#alertMessage").text( message );
    $("#alertDialog").show();
}

function processPing( data )
{

            $(data).find("outcomeMessage").each( function()
            {
                alertDialog( $(data).find("outcomeMessage").text() );
            });

            var oldScrollHeight = $("#messagesContainer").attr("scrollHeight");

            $(data).find("message").each( function()
            {
                var messageid = $(this).find("messageid").text();
                
                if( messageid )
                {
                    var message = $(this).find("message").text();
                    var userid = $(this).find("userid").text();
                    var username = $(this).find("username").text();
                    var color = $(this).find("color").text();
                    var command = $(this).find("command").text();

                    var messageEl = document.createElement( "div" );
                    $(messageEl).addClass( 'message' );
                    if( username && username != null && username != '' && command == 0)
                    {
                        var usernameEl = document.createElement( "span" );
                        $(usernameEl).addClass( 'username' );
                        $(usernameEl).append( username + ": " );
                        $(usernameEl).css("color", "#" + color);
                    } else if ( command == 1 ) {
                        var usernameHtml = '<span class="username" style="color: #' + color + ';">' + username + '</span>';
                        message = message.replace(/\_username\_/i, usernameHtml);
                    } else
                        $(messageEl).addClass( 'systemMessage' );
                    $(messageEl).append( $(usernameEl) );
                    var messageSpan = document.createElement("span");
                    $( messageSpan ).html( message );
                    $(messageEl).append( messageSpan );
                    $("#messagesContainer").append( $(messageEl) );
                }
                
                var newScrollPos = $("#messagesContainer").attr("scrollTop") + ($("#messagesContainer").attr("scrollHeight") - oldScrollHeight);
                $("#messagesContainer").attr({ scrollTop: newScrollPos });
                
            });
            
            $("#userList").empty();
            
            $(data).find("user").each( function()
            {
            
                var userid = $(this).find("userid").text();
                var username = $(this).find("username").text();
                var color = $(this).find("color").text();
                
                var usernameEl = document.createElement("div");
                $( usernameEl ).append( username );
                $( usernameEl ).addClass( 'user' );
                $( usernameEl ).css( 'color', '#' + color );
                $("#userList").append( usernameEl );
            
            });
            
            $(data).find("usernameChange").each( function()
            {
                var old = $(this).find("old").text();
                var newU = $(this).find("new").text();
                var color = $(this).find("color").text();
                
                $(".username").each( function()
                {
                    if( $(this).text() == (old + ": ") )
                    {
                        $(this).text( newU + ": " );
                        $(this).css( 'color', '#' + color );
                    }
                    else if( $(this).text() == old ) {
                        $(this).text( newU );
                        $(this).css( 'color', '#' + color );
                    }
                        
                });
            });

}