path: root/static/js/pichat.js

var cache = {}
var PendingMessages = {}

var MaxImagePosts = 40

// Utils

// use e.g. "backgroundColor" not "background-color"
function isCSSPropertySupported(prop){
    return prop in document.body.style;
}

function escapeHtml(txt) {
    if (!txt) { return ""; }
    else { return $("<span>").text(txt).html(); }
}

function linkify(text) {
    LastMsgContainsImage = false
    var URLRegex = /((\b(http\:\/\/|https\:\/\/|ftp\:\/\/)|(www\.))+(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
    return text.replace(URLRegex, linkReplace);
}

// durty hack to use a global to check this... but otherwise i'd have to rewrite the String.replace function? :/
var LastMsgContainsImage = false
function linkReplace(url) {
    var PicRegex = /\.(jpg|jpeg|png|gif|bmp)$/i;
    var urlWithoutParams = url.replace(/\?.*$/i, "");
    
    if (url.indexOf('http://') == 0 || url.indexOf('https://') == 0 || url.indexOf('ftp://') == 0)
        linkUrl = url;
    else
        linkUrl = 'http://' + url;
    
    if (PicRegex.test(urlWithoutParams)){
        LastMsgContainsImage = true
        return "<a target='_blank' href='" + linkUrl + "'><img src='" + linkUrl + "'></a>"
    } else {
        return "<a target='_blank' href='" + linkUrl + "'>" + url + "</a>"
    }
}

function linkifyWithoutImage(text) {
    LastMsgContainsImage = false
    var URLRegex = /((\b(http\:\/\/|https\:\/\/|ftp\:\/\/)|(www\.))+(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?)/gi;
    return text.replace(URLRegex, linkReplaceWithoutImage);
}

function linkReplaceWithoutImage(url){
    var PicRegex = /\.(jpg|jpeg|png|gif|bmp)$/i;
    var urlWithoutParams = url.replace(/\?.*$/i, "");
    linkUrl = url.indexOf('http://') == 0 ? url : 'http://' + url;

    return "<a target='_blank' href='" + linkUrl + "'>" + url + "</a>"
}

// Message Handling

var ImageMsgCount = 0
function removeOldMessages(){
    // don't count posts that are all text
    if (LastMsgContainsImage) ImageMsgCount += 1;
    while (ImageMsgCount > MaxImagePosts) {
        var imgMsg = $(".contains-image:first")
        if (imgMsg.length) {
            imgMsg.prevAll().remove() // remove all text messages before the image message
            imgMsg.remove()
        } else break;
        ImageMsgCount -= 1;
    }
}

function buildMsgContent(content) {
    return linkify(escapeHtml(content));
}

function buildMessageDiv(msg, isLoading) {
    removeOldMessages()
    var nick = escapeHtml(msg.nick);
    var msgId = !isLoading ? 'id="message-' + msg.msg_id + '"' : '';
    var loadingClass = isLoading ? ' loading' : '';
    var containsImageClass = LastMsgContainsImage ? ' contains-image' : '';
    return '<div class="msgDiv ' + loadingClass + containsImageClass + '" ' + msgId  + '>'
        + '<b><a href="/u/' + nick + ' ">' + nick + '</a>: </b>'
        + buildMsgContent(msg.content)
        + '</div>';
}

function buildUserDiv(user) {
    if (user.avatar) {
        return '<div class="username">'
            + '<a href="/u/' + escapeHtml(user.nick) + '" target="_blank">'
            + '<img src="' + user.avatar + '" width="50" height="50">'
            + escapeHtml(user.nick) + '</a></div>';
    } else {
        return '<div class="username">'
            + '<a href="/u/' + escapeHtml(user.nick) + '" target="_blank">'
            + '<img src="/static/noinfo.png" width="50" height="50">'
            + escapeHtml(user.nick) + '</a></div>';
    }
}

// Growl

function buildGrowlDataAndPopDatShit(msg) {
    var nick = escapeHtml(msg.nick);
    nick = '<a href="/u/' + nick + ' " style="color:pink">' + nick + '</a>:'
    var msg = buildMsgContent(msg.content)
    growl(nick, msg)
}

function growl(user, msg) {
    $.gritter.add({title: user, text: msg});
}

function handleMsgError(resp) {
    var respText = resp.responseText ? resp.responseText.trim() : false;
    if (respText  == 'MUST_LOGIN') {
        alert("Can't send message! Please login.");
    } else if (respText) {
        alert("Can't send message! (" + respText + ")");
    } else {
        alert("Can't send message!");
    }
}

// Messages

function submitMessage() {
    var content = $.trim($('#msgInput').val());
    $('#msgInput').val('');
    if (content ==  '') { return; }
    if (content.length > 1000) {
      alert("POST TOO LONG DUDE!");
      return;
    } // this shouldn't just be client side :V
    PendingMessages[content] = true;

    var msg = { 'nick': Nick, 'content': content };
    var div = addNewMessage(msg, true);

    var onSuccess = function(json) {
	if (typeof pageTracker !== 'undefined') {
            pageTracker._trackEvent('Message', 'Submit', typeof Room !== 'undefined' ? Room : 'UnknownRoom');
        }
        div.attr('id', 'message-' + json)
            .removeClass('loading').addClass('loaded');
    };
    var onError = function(resp, textStatus, errorThrown) {
        div.remove();
        handleMsgError(resp);
    };

    $.ajax({
        type: 'POST',
        timeout: 5000,
        url: '/msg',
        data: { 'room': Room, 'content': content },
        cache: false,
        dataType: 'json',
        success: onSuccess,
        error: onError
    });
}

function ifEnter(fn) {
    return function(e) {
        if (e.keyCode == 13) { fn(); }
    };
}

function addNewMessages(msgs) {
    var msgStr = $.map(msgs, buildMessageDiv).join('');
    $('#messageList').append(msgStr);
}

function addNewMessage(msg, isLoading) {
    var msgStr = buildMessageDiv(msg, isLoading);
    var div = $(msgStr).appendTo('#messageList');
    return div;
}

function setUserList(users) {
    $("#userList").html($.map(users, buildUserDiv).join(''));
}

function flattenUserJson(users) {
    var s = "";
    $.map(users.sort(), function(user) {
        s += user.nick + user.avatar;
    });
    return s;
}

function updateUI(msgs, users) {
    if (window['growlize'] && msgs && msgs.length > 0) {
        $.map(msgs, buildGrowlDataAndPopDatShit)
    } else if (msgs && msgs.length > 0) {
        addNewMessages(msgs);
    }
    if (users !== null) {
        var flattened = flattenUserJson(users);
        if (!('userlist' in cache) || flattened != cache.userlist) {
            $("#userList").html($.map(users.sort(sortUsersByAlpha), buildUserDiv).join(''));
        }
        cache.userlist = flattened
    }
}

function sortUsersByAlpha(a, b){
    var nickA = a.nick.toLowerCase()
    var nickB = b.nick.toLowerCase()
    if (nickA > nickB) return 1
    else if (nickA < nickB) return -1
    return 0
}

function isDuplicateMessage(m) {
    if (m.nick == Nick && m.content in PendingMessages) {
        delete PendingMessages[m.content];
        return true;
    } else {
        return false;
    }
}

var CurrentTopic = null;

function isSameTopic(curTopic, newTopic) {
    if (!!curTopic != !!newTopic) { return false; }
    else if (!curTopic) { return false; } // => !newTopic also
    else {
        return curTopic.topic == newTopic.topic &&
            curTopic.deadline == newTopic.deadline &&
            curTopic.maker == newTopic.maker;
    }
}

function updateTopic(newTopic) {
    if (isSameTopic(CurrentTopic, newTopic)) { return; }
    alert('new topic');
    CurrentTopic = newTopic;
    $('#topic').text(topic.topic);

}

function refresh() {
    var onSuccess = function(json) {
        try {
            Timestamp = json.timestamp;
            var messages = $.grep(
                json.messages,
                function(m) { return !isDuplicateMessage(m) });
            updateUI(messages, json.users);
            if (typeof UnseenMsgCounter !== 'undefined' && !HasFocus) {
                UnseenMsgCounter += messages.length;
            }
            if (json.topic) {
                updateTopic(json.topic);
            }
        } catch(e) {
            if (IsAdmin && window.console) {
                console.error(e);
            }
        }
        setTimeout(refresh, 1000);
    };
    var onError = function(resp, textStatus, errorThrown) {
        if (IsAdmin && window.console) {
            console.error(resp, textStatus, errorThrown);
        }
        setTimeout(refresh, 1000);
    };

    $.ajax({
        type: 'GET',
        timeout: 5000,
        url: '/refresh',
        data: { 'room': Room, 'since': Timestamp },
        cache: false,
        dataType: 'json',
        success: onSuccess,
        error: onError
    });
}

function initChat() {
    $('.msgDiv .content').each(function() {
        var t = $(this);
        t.html(buildMsgContent(t.text()));
    });

    $('#msgInput').keyup(ifEnter(submitMessage));
    $('#msgSubmit').click(submitMessage);

    messageList = $("#messageList")[0]

    scrollToEnd()
    scrollWatcher()
    
    // see /static/webcam/webcam.js
    if ('webcam' in window) webcam.init()
    
    setTimeout(refresh, 1000);
}

function makePlainText() {
    var j = $(this);
    j.text(j.text());
}

function activateProfileEditable() {
    var onSubmit = function(attr, newVal, oldVal) {
        newVal = $.trim(newVal);
        if (newVal == oldVal) { return oldVal };
        
        $.ajax({
            type: "POST",
            timeout: 5000,
            url: "/update-profile",
            data: { 'attr': attr, 'val': newVal }
        });
        if (attr == 'avatar') {
            if (newVal != "") {
                var s = '<img id="avatarPic" src="' + newVal + '" width="150" />';
                $('#avatarPic').replaceWith(s).show();
            } else {
                $('#avatarPic').hide();
            }
        }
        return escapeHtml(newVal);
    };

    var avatarOpts = { 'default_text': 'Paste URL here!',
                       'callback': onSubmit,
                       'field_type': 'text',
                       'callbackShowErrors': false };
    if ($('#avatar.editable').length > 0) {
        $('#avatar.editable').editInPlace(avatarOpts);
        setupUploadAvatar('upload');
    }

    var textareaOpts = { 'default_text': 'Enter here!',
                         'callback': onSubmit,
                         'field_type': 'textarea',
                         'callbackShowErrors': false };
    $('#contact.editable, #bio.editable')
        .editInPlace(textareaOpts)
        .each(makePlainText);
}

function enableProfileEdit() {
    $('img#contact').replaceWith('<div id="contact" class="linkify"></div>');
    $('img#bio').replaceWith('<div id="bio" class="linkify"></div>');
    $('#contact, #bio, #avatar').addClass('editable');
    $('#avatar-editing').show();
    var resetPage = function() { location.reload() };
    $('#edit-toggle a').text('done editing').click(resetPage);
    activateProfileEditable();
}

function initProfile() {
    $(".linkify").each(function() {
        var text = jQuery(this).text();
        jQuery(this).html(linkifyWithoutImage(text));
    });    

    $('#edit-toggle').click(enableProfileEdit);
    activateProfileEditable();

    $('.logged-dump .content').each(function() {
        var t = $(this);
        t.html(buildMsgContent(t.text()));
    });
};

function initLog() {
    $('.logged-dump .content').each(function() {
        var t = $(this);
        t.html(buildMsgContent(t.text()));
    });
}

// TODO
function favoriteImage() {};

function setupUpload(elementId, roomKey) {
    var onSubmit = function(file, ext) {
	if (!(ext && /^(jpg|png|jpeg|gif|bmp)$/i.test(ext))) {
	    alert('SORRY, NOT AN IMAGE DUDE... ');
	    return false;
	}
    };
    var onComplete = function(file, response) {
        if (response.match(/FILE_TOO_BIG/)) {
            var maxSize = response.split(" ")[1] / 1024;
            alert("Sorry. Your file is just too fucking big. "
                  + maxSize + "KB or less please.");
            return;
        } else if (response.match(/FILE_NOT_IMAGE/)) {
            alert("What did you upload? Doesn't seem like an image. Sorry.");
            return;
        } else if (response.match(/INVALID_RESOLUTION/)) {
            var maxWidth = response.split(" ")[1];
            var maxHeight = response.split(" ")[2];
            alert("Sorry, the maximum image resolution is "
                  + maxWidth + "x" + maxHeight);
            return;
        }
    	if (typeof pageTracker !== 'undefined') {
            var r = typeof Room !== 'undefined' ? Room : 'UnknownRoom';
            pageTracker._trackEvent('Message', 'Upload', r);
        }
    }
    new AjaxUpload(elementId, {
        action: '/upload/message',
        autoSubmit: true,
        name: 'image',
        data: { room: roomKey },
	onSubmit: onSubmit,
        onComplete: onComplete
    });
}

function setupUploadAvatar(elementId) {
    // NOTE: AjaxUpload responses aren't converted from JSON.
    var onSubmit = function(file, error) {
        $('#spinner').show();
    };
    var onComplete = function(file, resp) {
        $('#spinner').hide();
        if (resp == 'INVALID_REQUEST') {
            location.reload();
        } else if (resp == 'NOT_LOGGED_IN') {
            location.reload();
        } else if (resp == 'INVALID_IMAGE') {
            alert("Sorry, dump.fm can't deal with your image. Pick another :(");
            return;
        }
        var s = '<img id="avatarPic" src="' + resp + '" width="150" />';        
        $('#avatarPic').replaceWith(s).show();
        $('#avatar').text(resp);
    };
    new AjaxUpload(elementId, {
        action: '/upload/avatar',
        autoSubmit: true,
        name: 'image',
        onSubmit: onSubmit,
        onComplete: onComplete
    });
}


// scrolling stuff
// this code keeps the div scrolled to the bottom, but will also let the user scroll up, without jumping down

function isScrolledToBottom(){
    var threshold = 15;
    
    var containerHeight = messageList.style.pixelHeight || messageList.offsetHeight
    var currentHeight = (messageList.scrollHeight > 0) ? messageList.scrollHeight : 0

    var result = (currentHeight - messageList.scrollTop - containerHeight < threshold);

    return result;  
}

function scrollIfPossible(){
    if (lastScriptedScrolledPosition <= messageList.scrollTop || isScrolledToBottom())
        scrollToEnd()
}

var lastScriptedScrolledPosition = 0
function scrollToEnd(){
    messageList.scrollTop = messageList.scrollHeight
    lastScriptedScrolledPosition = messageList.scrollTop
}

function scrollWatcher(){
    scrollIfPossible()
    setTimeout(scrollWatcher, 500)
}

// well fuck webkit for not supporting {text-decoration: blink}

function blinkStart(){
    blinkTimer = setInterval(function(){
        $(".blink").removeClass("blink").addClass("blink-turning-off")
        $(".blink-off").removeClass("blink-off").addClass("blink")
        $(".blink-turning-off").removeClass("blink-turning-off").addClass("blink-off")
    },500);
}

function blinkStop(){
    clearInterval(blinkTimer);
}

function initDirectory() {    
    $(".linkify").each(function() {
        var text = jQuery(this).text();
        jQuery(this).html(linkify(text));
    });       
}

//big hand stuff
// TODO: replace this with simple pointer-events thing.

function initBigHand(id){
    var cursorId = "#cursor-big"
    var cursor = $(cursorId)[0]
    
    // jquery's reported element sizes are not exactly the same as the browser's 'mouseover' target sizes
    // so we'll allow a few pixels extra
    var fudgeFactor = 2

    $(id).addClass("no-cursor")

    // i have to do this weirdly bc putting the cursor image where the mouse cursor is causes problems with mouse events:
    // * it stops mousemove events on the image below the mouse cursor
    // * it fucks up mouseover/out and even mouseenter/leave events, as well as click
    
    // so i am doing this:
    // on mousing over the image:
    //    make cursor visible
    //    find image co-ords
    //    bind a global mousemove func
    //    bind cursor click event
    //    unbind mouseover
    // mousemove func:
    //    move image to mouse co-ords
    //    if mouse co-ords are outside the image co-ords:
    //        make cursor invisible
    //        unbind mousemove func
    //        unbind cursor click event

    var mousemove = function(e){
        var y = e.pageY, x = e.pageX, coords = initBigHand.coords
        
        cursor.style.top = y + "px"
        cursor.style.left = x - 32 + "px" // 32: (4 pixels * 8 pixels per big pixel) to line up pointy finger with cursor
        if (y < coords.top || 
            y > coords.bottom ||
            x < coords.left || 
            x > coords.right) {
            $(cursorId).addClass('invisible')
            $(cursorId).css({"top": 0, "left": 0 })
            $(cursorId).unbind('click', cursorClick)
            $('logo7').unbind('mousemove', mousemove)
            $(id).mouseover(imageMouseOver)
        }    
    }
    
    var cursorClick = function(){ $(id).click() }
    
    var imageMouseOver = function(){
        //console.log("moused over...")
        initBigHand.coords = {
            "left":   $(id).offset().left - fudgeFactor,
            "top":    $(id).offset().top - fudgeFactor,
            "right":  $(id).offset().left + $(id).width() + fudgeFactor,
            "bottom": $(id).offset().top + $(id).height() + fudgeFactor
        }
        $('body').mousemove(mousemove)
        $(cursorId).click(cursorClick)
        $(cursorId).removeClass('invisible')
        $(id).unbind('mouseover', imageMouseOver)
    }
    
    $(id).mouseover(imageMouseOver)
    
}

Share = {
    "getMessage": function(button){
        var message = $(button).parents(".logged-dump")
        var id = message.attr("id").substr(8) // cut "message-001" to "001"
        var nick = message.attr("nick") // cut "/u/timb" to "timb"
        var link = "http://dump.fm/p/" + nick + "/" + id
        var content = message.find(".linkify")
        if (!content.length) content = message.find(".content")
        var rawContent = content.html()
        var img = content.find("img").attr("src")
        var via = "via " + nick + " on dump.fm"
        return {"nick": nick, "id": id, "link": encodeURIComponent(link), 
                "content": content, "img": encodeURIComponent(img), 
                "via": encodeURIComponent(via)}
    },
    "openLink": function(url){
        window.open(url, "_blank")
    },
    "facebook": function(button){
        var message = Share.getMessage(button)
        var url = "http://www.facebook.com/share.php?u=" + message.img + "&t=" + message.via
        Share.openLink(url)
    },
    "tumblr": function(button){
        var message = Share.getMessage(button)
        var url = "http://www.tumblr.com/share?v=3&u=" + message.img + "&t=" + message.via
        Share.openLink(url)
    },
    "twitter": function(button){
        var message = Share.getMessage(button)
        var url = "http://twitter.com/home?status=" + message.img + encodeURIComponent(" ") + message.via
        Share.openLink(url)
    },
    "delicious": function(button){
        var message = Share.getMessage(button)
        var url = "http://delicious.com/save?url=" + message.img + "&title=" + message.img + "&notes=" + message.via
        Share.openLink(url)
    }
}