Stories = new Array();
Reports = new Array();
OldReports = new Array();
SelectedStory = null;
LoggedUser = null;
isInitialise = true;

getStoryDataTimeout = null;
getReportDataTimeout = null;

$(window).resize(function() { HandleResizeEvent(); });

function HandleResizeEvent()
{
    var height = $(window).height();
    var width = $(window).width();
    $('#ReportList').height(height - $('#StoryBox').height() - 120);
    $('#data_placeholder').height(height - $('#StoryBox').height() - 110);
}

function Initialise()
{
    $(document).ready(function()
    {
        initPopUp();
        callServer(GET_USER_SESSION, null, "process_login");
        callServer(GET_STORIES, null, "processStories");
        callServer(GET_REPORTS, null, "processReports");

        load_userbar();
        HandleResizeEvent();

    });
}

function load_userbar()
{
    hide_userpage();
    var html = new Array();
    html.push('<table><tr>');
    html.push('<td id="user_login_text" class="user_bar_item user_sep" onclick="display_login()">Login</td>');
    html.push('<td id="user_register_text" class="user_bar_item" onclick="display_register()">Register</td>');
    html.push('<td class="userBarLoader"></td>');
    html.push('</tr></table>');
    $('#user_bar').html(html.join(''));
}
function processStories(serverdata)
{
    var temp = new Array(serverdata.length);

    if (Stories.length==0)

        Stories = serverdata;
    else
    {

        $.each(Stories, function(i, localstory)
        {
            $.each(serverdata, function(j, serverstory)
            {
                if (serverstory != null)
                {
                    if (localstory.Title == serverstory.Title)
                    {
                        temp[i] = serverstory;
                        serverdata[j] = null;
                    }
                }
            });
        });

        $.each(serverdata, function(j, serverstory)
        {
            var exist = false;

            $.each(temp, function(i, localnewstory)
            {
                if (localnewstory == null)
                {
                    temp[i] = serverstory;
                    return false;
                }
            });
        });

        Stories = temp;
        
    }
    
    updateStories();
}

function processReports(serverdata)
{
    Reports = serverdata;
    updateReports();
}

function updateStories()
{
    calculateHeightFactor();
    var HeighiestIndex = 0;
    var html = new Array();
    html.push('<table cellpadding="0" cellspacing="0" align="center"><tr>');

    $.each(Stories, function(i)
    {
        html.push('<td class="storyBoxWrapper" onclick="boxClick(' + this.StoryID + ')"><div class="storyBoxTitle">' + this.Title + '</div><div class="storyBoxWarning" storyboxwarning=' + this.StoryID + ' style="height:2px;width:82px;"></div><div class="Box" storybox=' + this.StoryID + ' style="height:' + this.ReportCount / BoxHeightFactor + 'px; background:' + getBoxColor(this) + '; width:80px;display:inline;margin:0 auto;">');
        html.push('Since ' + this.FirstAppeared + '</div></td>');
        if (this.ReportCount >= HeighiestCount)
            HeighiestIndex = i;

    });
    html.push('</tr></table>');
    $('#StoryBoxContents').html(html.join(''));

    if (Stories.length > 0)
    {
        $($('[storyboxwarning=' + Stories[HeighiestIndex].StoryID + ']')).effect("pulsate", { times: 1 }, 300);
        $($('[storyboxwarning=' + Stories[HeighiestIndex].StoryID + ']')).css({ background: '#d60202' });
        $($('[storybox=' + Stories[HeighiestIndex].StoryID + ']')).css({ borderTop: 'none' });
    }

    if (isInitialise && Stories.length > 0)
    {
        isInitialise = false;
        SelectedStory = Stories[HeighiestIndex];
        boxClick(Stories[HeighiestIndex].StoryID);
    }

    clearTimeout(getStoryDataTimeout);
    ServerStoryBusy = false;
    RefreshStoryData();
}

function updateReports()
{
    var html = new Array();
    var lastreportid = $('#ReportList ul li').attr('reportid');

    if (Reports.length > 0 && (!lastreportid || Reports[0].ReportID > lastreportid))
    {
        $.each(Reports, function()
        {
            if (!lastreportid || this.ReportID > lastreportid)
            {
                var photo = (this.User.Photo != "") ? '/temp/' + this.User.Photo : '/images/add_picture.png';
                html.push('<li class="reportTextItem" reportid="' + this.ReportID + '">');
                html.push('<div class="report_meta">');
                html.push('<div class="reportUsername" onclick="get_report_user_details(' + this.ReportID + ')">' + this.User.UserName + ':</div>');
                html.push('<div class="reportPhoto" onclick="get_report_user_details(' + this.ReportID + ')"><img class="user_report_photo" src="' + photo + '"/></div>');
                html.push('<div class="reportTime">' + this.TimeStamp + '</div>');
                html.push('</div>');
                html.push('<div class="reportText"> ' + this.Text + '</div>');
                html.push('</li>');
            }
        });
        $('#ReportList').hide();
        $('#ReportList ul').prepend(html.join(''));
        $('#ReportList').fadeIn("500");
    }

    clearTimeout(getReportDataTimeout);
    ServerReportBusy = false;
    RefreshReportData();

}

function RefreshStoryData()
{
    if (!ServerStoryBusy)
    {
        ServerStoryBusy = true;
        getStoryDataTimeout = setTimeout('getServerStoryUpdates()', StoriesRefreshInterval);
    }
}

function RefreshReportData()
{
    if (!ServerReportBusy)
    {
        ServerReportBusy = true;
        getReportDataTimeout = setTimeout('getServerReportsUpdates()', ReportsRefreshInterval);
    }

}

function getServerStoryUpdates()
{
    callServer(GET_STORIES, null, "processStories");
}

function getServerReportsUpdates()
{
    callServer(GET_REPORTS, null, "processReports");
}

function ReportIt()
{
    var jarray = new Object();
    jarray['Text'] = $('#txtReportit').val();

    callServer(REPORT_IT, jarray, "processReportIt");
    $('#txtReportit').val('');
}

function processReportIt()
{

}

function boxClick(storyid)
{
    $.each(Stories, function()
    {
        if (this.StoryID == storyid)
        {
            SelectedStory = this;
            return false;
        }
    });

    callServer(GET_NEWS, storyid, "displayDataPage", 1);
}

google.load('search', '1');

function googleImageSearchComplete(searcher)
{
    var html = new Array();
    html.push('<table cellpadding="0" cellspacing="0" style="margin: 6px;width:90%;"><tr>');
    html.push('<td style="vertical-align:top;">');

    // Check that we got results
    if (searcher.results && searcher.results.length > 0)
    {

        // Loop through our results, printing them to the page.
        var results = searcher.results;
        for (var i = 0; i < results.length; i++)
        {
            html.push('<img onclick="show_google_image_modal(\'' + results[i].url + '\')" class="google_image" src=' + results[i].tbUrl + '/>');

            //            // For each result write it's title and image to the screen
            //            var result = results[i];
            //            var imgContainer = document.createElement('div');

            //            var title = document.createElement('h2');
            //            // We use titleNoFormatting so that no HTML tags are left in the title
            //            title.innerHTML = result.titleNoFormatting;

            //            var newImg = document.createElement('img');
            //            // There is also a result.url property which has the escaped version
            //            newImg.src = result.tbUrl;

            //            imgContainer.appendChild(title);
            //            imgContainer.appendChild(newImg);

            //            // Put our title + image in the content
            //            contentDiv.appendChild(imgContainer);
        }
        html.push('</td>');
        html.push('</tr></table>');
        $('.other_news').html(html.join(''));

    }
}

function show_google_image_modal(url)
{
    var html = '<div style="text-align:center"><img class="google_image_full" src="' + url + '"/></div><div class="google_image_full" style="text-align:center">' + url + '</div>';
    ShowModal(html, SelectedStory.Title, 600, 400, null);
}

function doGoogleImageSearch()
{
    // Our ImageSearch instance.
    var imageSearch = new google.search.ImageSearch();

    // Restrict to extra large images only
    imageSearch.setRestriction(google.search.ImageSearch.RESTRICT_IMAGESIZE,
                             google.search.ImageSearch.IMAGESIZE_MEDIUM);

    // Here we set a callback so that anytime a search is executed, it will call
    // the searchComplete function and pass it our ImageSearch searcher.
    // When a search completes, our ImageSearch object is automatically
    // populated with the results.
    imageSearch.setSearchCompleteCallback(this, googleImageSearchComplete, [imageSearch]);

    // Find the story image.
    imageSearch.execute(SelectedStory.Title);
}


function displayDataPage(serverdata)
{
    if (serverdata.length > 1)
    {
        var mainnewsimagelink = $(serverdata[0].Text).find('img[src]').attr('src');
        var mainewscontent = $(serverdata[0].Text).find('.lh').html();
    }

    var html = new Array();
    html.push('<table cellpadding="0" cellspacing="0" align="center" style="vertical-align:top;width:100%;">');
    html.push('<tr><td class="data_title" colspan="2">More about ' + SelectedStory.Title + '</tr></tr>');
    html.push('<tr><td style="vertical-align:top;">');
    html.push('<table><tr>');
    html.push('<td class="data_links_menu"><ul>');
    html.push('<li class="data_links_menu_selected">From Google</li>');
    html.push('<li onclick="alert(\'Coming soon\')">Users Pictures</li>');
    html.push('<li onclick="alert(\'Coming soon\')">Users Links</li>');
    html.push('</ul></td>');
    html.push('</tr></table>');
    html.push('</td>');
    if (serverdata.length < 1)
        html.push('<td class="newsItem">' + SelectedStory.Title + ' got no news</td>');
    else
    {
        if (mainnewsimagelink == "" || mainnewsimagelink == null)
            html.push('<td class="detailed_newsbox"><div style="padding-top:4px;">' + mainewscontent + '</div></td>');
        else
            html.push('<td class="detailed_newsbox"><div style="float:left;padding:7px;"><img src="' + mainnewsimagelink + '"></div><div style="padding-top:4px;">' + mainewscontent + '</div></td>');
    }

    html.push('</tr>');
    html.push('</td><tr>');
    html.push('<td class="other_news" colspan="2"></td>');

    html.push('</tr></table>');
    hideBusy();
    show_datapage('up', html.join(''));
    doGoogleImageSearch();
}

function getGoogleImages()
{
    google.setOnLoadCallback(function()
    {
        $(function()
        {
            doGoogleImageSearch;
        });
    });
}

function display_login()
{

    var html = new Array();
    html.push('<div>');
    html.push('<table>');
    html.push('<tr><td>User name</td><td><input type="text" id="txt_username" onkeydown="return onEnter(event, this, \'do_login()\');"></td>');
    html.push('<td>Password</td><td><input type="password" id="txt_password" onkeydown="return onEnter(event, this, \'do_login()\');"></td>');
    html.push('<td><input type="button" value="Login" onclick="do_login()"></td></tr>');
    html.push('<tr><td colspan="3" id="login_message" class="errorText">&nbsp;</td></tr>');
    html.push('</table>');
    html.push('<div>');

    show_userpage(html.join(''));

}

function show_userpage(content)
{
    hide_datapage();
    var userbarPosition = $('#user_bar').position();
    $('#pages_placeholder').html(content);
    $('#user_bar').css({ 'border-top': '0px' });
    $('#pages_placeholder').show('slide', { direction: 'down' }, 200);

}

function hide_userpage()
{
    $('#pages_placeholder').hide();
    $('#user_bar').css({ 'border-top': '1px solid #d5defb' });
}

function show_datapage(slidedirection, content)
{
    hide_userpage();
    var userbarPosition = $('#user_bar').position();
    $('#data_placeholder').html(content);
    $('#data_placeholder').show('slide', { direction: slidedirection }, 200);

}

function hide_datapage()
{
    $('#data_placeholder').hide();
}

function do_login()
{
    var user = new Object();
    user.UserName = $('#txt_username').val();
    user.Password = $('#txt_password').val();
    callServer(LOGIN, user, "process_login", 2);
}

function process_login(serverdata)
{
    if (serverdata.UserID == 0)
        $('#login_message').html('Wrong User name/Password');

    else
    {
        LoggedUser = serverdata;
        var newmeesagescount = 0;

        if (LoggedUser.Messages.length > 0)
        {
            $.each(LoggedUser.Messages, function()
            {
                if (this.Status = MESSAGE_STATUS_UNREAD)
                {
                    newmeesagescount++;
                }

            });
        }

        $('#pages_placeholder').hide('slide', { direction: 'down' }, 200);

        var html = new Array();
        html.push('<table style="width:100%;"><tr>');
        html.push('<td id="user_login_text" class="user_sep" style="white-space:nowrap;font-weight:bold;">Hi&nbsp;' + serverdata.FirstName + '</td>');
        html.push('<td id="user_profile_text" class="user_bar_item user_sep" onclick="display_profile()">Profile</td>');
        //html.push('<td id="user_messages_text" class="user_sep" onclick="display_messages()"><span class="user_bar_item">Messages (' + newmeesagescount + ')</span></td>');
        html.push('<td id="user_signout_text" class="user_bar_item" onclick="signout()" style="width:100%;">Sign out</td>');
        html.push('</tr></table>');
        $('#user_bar').html(html.join(''));
        hide_userpage();
    }

    hideBusy();
}

function display_profile()
{
    $('#pages_placeholder').hide();

    var dob = (LoggedUser.DOB == null) ? '' : LoggedUser.DOB;
    var about = (LoggedUser.About == null) ? '' : LoggedUser.About;

    var html = new Array();
    html.push('<div style="margin:10px;">');
    html.push('<table class="profile_update">');
    html.push('<tr><td class="nowrap td_label">Name</td><td><input type="text" value="' + LoggedUser.FirstName + ' ' + LoggedUser.LastName + '" id="txt_name" onkeydown="return onEnter(event, this, \'update_user()\');"></td><td rowspan="4"><table id="user_photo_wrap"><tr><td id="user_photo" onclick="modal_attach_photo()">&nbsp;</td></tr></table></td></tr>');
    html.push('<tr><td class="nowrap td_label">Email Address</td><td><input type="text" value="' + LoggedUser.Email + '" id="txt_email" onkeydown="return onEnter(event, this, \'update_user()\');"></td></tr>');
    html.push('<tr><td class="nowrap td_label">User Name</td><td><input type="text" value="' + LoggedUser.UserName + '" id="txt_username" onkeydown="return onEnter(event, this, \'update_user()\');"><span class="link" style="padding-left:5px;" onclick="display_changepassword()">Change Password</span></td></tr>');
    html.push('<tr><td class="nowrap td_label">Date of Birth</td><td><input type="text" id="txt_dob" value="' + dob + '"onkeydown="return onEnter(event, this, \'update_user()\');"></td></tr>');
    html.push('<tr><td class="nowrap td_label" style="vertical-align:top;">About me</td><td colspan="2"><textarea style="height: 100px; width: 300px;" id="txt_aboutme">' + about + '</textarea></td></tr>');
    html.push('<td><input type="button" value="Update" onclick="update_user()"></td>');
    html.push('</tr></table>');
    html.push('<div>');

    show_userpage(html.join(''));
    display_user_photo();
}

function display_changepassword()
{
    PasswordStrength = 0;

    var html = '<table style="vertical-align:top;height:100%;">' +
               '<tr><td id="changepassword_contents" style="height: 100%; padding:10px;">' +
               '<table>' +
               '<tr>' +
                    '<td class="nowrap td_label">' +
                        'Current password:' +
                    '</td>' +
                    '<td>' +
                        '<table class="inputs_settings_modal" style="width:auto;"><tr><td><input type="password" id="input_user_currentpassword" style="border: none 0px; color:black;" onkeydown="changepassword_resetwarnings();"/></td></tr></table>' +
                    '</td>' +
                    '<td id="validator_settings_currentpassword" class="label_validator">' +

                    '</td>' +
               '</tr>' +
               '<tr>' +
                    '<td colspan="3" style="padding:10px;">' +
                    '</td>' +
               '</tr>' +
               '<tr>' +
                    '<td class="nowrap td_label">' +
                        'New password:' +
                    '</td>' +
                    '<td style="padding-bottom: 0px;">' +
                        '<table class="inputs_settings_modal" style="width:auto;"><tr><td><input type="password" id="input_user_newpassword" style="border: none 0px; color:black;" onkeyup="testPassword(this.value)" onblur="testPassword(this.value)"/></td></tr></table>' +
                    '</td>' +
                    '<td style="vertical-align: top; padding-bottom: 0px;">' +
                        '<table cellpadding="0" cellspacing="0" id="pmeter">' +
                            '<tr>' +
                                '<td class="nowrap" style="padding: 4px 5px 0 0;">' +
                                    'Password strength:' +
                                '</td>' +
                                '<td id="pmeterstring" style="padding-bottom: 0px; font-weight: bold; font-size: 13px;' +
                                    'width: 100px;">' +
                                    '&nbsp;' +
                                '</td>' +
                            '</tr>' +
                            '<tr>' +
                                '<td colspan="2" style="padding-bottom: 0px;">' +
                                    '<div style="height: 4px; background: #e0e0e0; width: 160px;">' +
                                        '<div id="pmeterbar" style="height: 4px;">' +
                                        '</div>' +
                                    '</div>' +
                                '</td>' +
                            '</tr>' +
                        '</table>' +
                    '</td>' +
                '</tr>' +
                '<tr>' +
                    '<td class="nowrap td_label">' +
                        'Confirm password:' +
                    '</td>' +
                    '<td>' +
                        '<table class="inputs_settings_modal" style="width:auto;"><tr><td><input type="password" id="input_user_newpassword2" style="border: none 0px; color:black;" onkeydown="changepassword_resetwarnings();"/></td></tr></table>' +
                    '</td>' +
                    '<td id="validator_settings_confirmpassword" class="label_validator">' +

                    '</td>' +
                '</tr>' +
                '<tr>' +
                    '<td colspan="3">' +
                        '<table align="center">' +
                        '<tr><td><table style="margin:10px;"><tr>' +
                            '<td style="width:75px;padding-right:20px;padding-bottom:5px;" class="buttondisabled" id="btn_changepassword"><input type="button" value="Change" onclick="change_password_save()"/></td>' +
                            '<td style="width:75px;padding-bottom:5px;" class="button"><input type="button" value="Cancel" onclick="CloseModal()"/></td>' +
                        '</tr></table>' +
                        '</td></tr>' +
                        '</table>' +
                    '</td>' +
                '</tr>' +
        '</table>' +
        '</td></tr>' +
        '</table>';

    ShowModal(html, "Change password", 500, 150);
    toggle_change_password();
}

function changepassword_resetwarnings()
{
    $('#validator_settings_confirmpassword').html('');
    $('#validator_settings_currentpassword').html('');

}
function change_password_save()
{
    if ($("#btn_changepassword").is(".buttondisabled"))
    {
        return;
    }

    if ($('#input_user_newpassword').val() !== $('#input_user_newpassword2').val())
    {
        $('#validator_settings_confirmpassword').html('Passwords do not match.');
        return;
    }

    var user = new Object();

    user.Password = $('#input_user_currentpassword').val();
    user.NewPassword = $('#input_user_newpassword').val();

    GoServer(null, 'ChangePassword', JSON.stringify(user));
}

function process_changepassword(jdata)
{
    if (jdata == 'wrongpassword')
        $('#validator_settings_currentpassword').html('Current password is incorrect');
    else
    {
        CloseModal();
        ConfirmationMessage('info', '5000', MSG_PASSWORD_CHANGED);
    }
}

function update_user()
{
    var user = new Object();
    user.FirstName = $('#txt_name').val();
    user.Email = $('#txt_email').val();
    user.UserName = $('#txt_username').val();
    user.Email = $('#txt_email').val();
    user.Email = $('#txt_email').val();
    user.Email = $('#txt_email').val();
}

function display_user_photo()
{
    if (LoggedUser.Photo == "" || LoggedUser.Photo == null)
        return;
    $('#user_photo').css({ background: 'url(temp/' + LoggedUser.Photo + ')  no-repeat' });
}

function modal_attach_photo()
{
    var html = '<table style="vertical-align:top;height:100%;">' +
    '<tr><td id="attach_photo_modal" style="height: 100%; vertical-align:top;">' +
    '<table><tr><td>' +
    '<div id="photo_upload_divFrame">' +
    '<iframe id="ifrPhoto" onload="initPhotoUpload()" scrolling="no" frameborder="0" hidefocus="true" src="PhotoUpload.aspx"></iframe>' +
    '</div>' +
    '</td></tr>' +
    '<tr><td id="photo_preview_edit"></td><td><table><tr><td><div style="width:100px; height:100px;overflow:hidden;" id="previewWrap"><img style="overflow:hidden;display:none;" id="previewImage"/></div></td></tr><tr><td id="previewrap_text" class="info" style="display:none;text-align:center;">Preview</td></tr></td></table></tr>' +
    '</table>' +
    '</td></tr>' +
    '<tr><td>' +
        '<table>' +
        '<tr><td valign="bottom"><table style="margin:5px;"><tr>' +
            '<td style="padding-right:5px;" class="button"><input type="button" value="Save" onclick="save_user_photo()"></td>' +
            '<td class="button"><input type="button" value="Cancel" onclick="CloseModal(false)"></td>' +
        '</tr></table></td></tr>' +
     '</table>';
    '</td></tr>' +
    '</table>';

    ShowModal(html, "Attach a photo", 500, 300, null);

    $('#btn_photo_upload_save').css({ display: 'none' });
}

function save_user_photo()
{
    var jarray = new Object();
    jarray['PhotoFileName'] = user_photo_temp;
    jarray['X1'] = UserPhotoCoords.x;
    jarray['Y1'] = UserPhotoCoords.y;
    jarray['X2'] = UserPhotoCoords.x2;
    jarray['Y2'] = UserPhotoCoords.y2;
    callServer(SAVE_USER_PHOTO, jarray, "process_user_photo_save");
    CloseModal();
}

function process_user_photo_save(phototemppath)
{
    if (phototemppath == "")
        return;
    $('#user_photo').css({ background: 'url(temp/' + phototemppath + ')  no-repeat' });
}

function signout()
{
    LoggedUser = null;
    callServer(SIGNOUT, null, "load_userbar");
}

function display_register()
{
    $('#pages_placeholder').hide();
    var html = new Array();
    html.push('<div>');
    html.push('<table>');
    html.push('<tr><td>First Name</td><td><input type="text" id="txt_firstname" onkeydown="return onEnter(event, this, \'register_user()\');"></td><td id="valFirstname" class="errorText"></td></tr>');
    html.push('<tr><td>Last Name</td><td><input type="text" id="txt_lastname" onkeydown="return onEnter(event, this, \'register_user()\');"></td><td></td></tr>');
    html.push('<tr><td>Email Address</td><td><input type="text" id="txt_email" onkeydown="return onEnter(event, this, \'register_user()\');"></td><td id="valEmail" class="errorText"></td></tr>');
    html.push('<tr><td>User Name</td><td><input type="text" id="txt_username" onkeydown="return onEnter(event, this, \'register_user()\');"></td><td id="valUsername" class="errorText"></td></tr>');
    html.push('<tr><td>New Password</td><td><input type="password" id="txt_password" onkeydown="return onEnter(event, this, \'register_user()\');"></td><td id="valPassword" class="errorText"></td></tr>');

    html.push('<td><input type="button" value="Register" onclick="register_user()"></td>');
    html.push('</tr></table>');
    html.push('<div>');

    show_userpage(html.join(''));
}

function register_user()
{
    var iserror = false;
    $('#valFirstname').html('');
    $('#valEmail').html('');
    $('#valUsername').html('');
    $('#valPassword').html('');

    if ($('#txt_firstname').val() == '')
    {
        $('#valFirstname').html('Enter your first name');
        iserror = true;
    }

    if ($('#txt_email').val() == '')
    {
        $('#valEmail').html('Enter a valid email address');
        iserror = true;
    }
    if ($('#txt_username').val() == '')
    {
        $('#valUsername').html('Enter a valid username');
        iserror = true;
    }
    if ($('#txt_password').val() == '')
    {
        $('#valPassword').html('Enter a valid password');
        iserror = true;
    }

    if (iserror)
        return;

    var user = new Object();
    user.FirstName = $('#txt_firstname').val();
    user.LastName = $('#txt_lastname').val();
    user.Email = $('#txt_email').val();
    user.UserName = $('#txt_username').val();
    user.Password = $('#txt_password').val();
    callServer(REGISTER_USER, user, "process_user_regiser", 2);
}

function process_user_regiser(serverdata)
{
    callServer(GET_USER_SESSION, null, "process_login");
}

function get_report_user_details(reportid)
{
    var user = null;
    $.each(Reports, function(i)
    {
        if (this.ReportID == reportid)
        {
            user = this.User;
            return false;
        }
    });

    callServer(GET_REPORT_USER_DETAILS, user.UserID, "display_report_user_details", 1);
}

function display_report_user_details(serverdata)
{
    hideBusy();
    var user = serverdata;

    var html = new Array();
    var photo = (user.Photo != "") ? '/temp/' + user.Photo : '/images/add_picture.png';


    html.push('<table cellpadding="0" cellspacing="0" align="center" style="vertical-align:top;width:100%;">');
    html.push('<tr><td class="data_title">' + user.UserName + '</tr>');
    html.push('<tr><td style="vertical-align:top;">');
    html.push('<table id="user_details_data">');
    html.push('<tr><td class="user_details_label">Name: ' + user.FirstName + ' ' + user.LastName + '</td><td rowspan="3" style="width:100%;"><img class="user_details_photo" src="' + photo + '"/></td></tr>');
    if (user.DOB != null)
        html.push('<tr><td class="user_details_label">Age: ' + user.DOB + '</td></tr>');
    html.push('</table>');
    html.push('</td>');
    html.push('</tr>');
    if (user.About != null && user.About != '')
    {
        html.push('<tr><td style="vertical-align:top;">');
        html.push('<table id="user_details_data">');
        html.push('<td class="user_details_label">About ' + user.UserName + ':</td><td style="width:100%;">' + user.About + '</td></tr>');
        html.push('</table>');
        html.push('</td>');
        html.push('</tr>');
    }
    html.push('<tr><td style="vertical-align:top;">');
    html.push('<table id="user_send_message"><tr>');
    html.push('<td class="user_details_label">Send a message to ' + user.UserName + ':</td><td style="width:100%;">');
    if (LoggedUser != null)
    {
        html.push('<textarea id="txtarea_user_message" style="height: 100px; width: 300px;"></textarea></td></tr>');
        html.push('<tr><td></td><td><input type="button" onclick="user_send_message(' + user.UserID + ')" value="Send"><span class="userMessageLoader">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>');
    }
    else
        html.push('You have to be logged in to send a message.');

    html.push('</td></tr>');
    html.push('</table>');
    html.push('</td>');
    html.push('</tr>');
    html.push('</td>');
    html.push('</tr>');
    html.push('</table>');
    show_datapage('left', html.join(''));
}

function user_send_message(userid)
{
    var message = new Object();
    message.From = LoggedUser.UserID;
    message.To = userid;
    message.MessageText = $('#txtarea_user_message').val();

    callServer(SEND_USER_MESSAGE, message, "message_sent", 3);
}

function message_sent(serverdata)
{
    hideBusy();

    if (serverdata != null)
    {
        $('#user_send_message').html('<tr><td style="color:green;">Message has been sent!</td></tr>');
    }
}