var ws=null;
var currentPMUser="";
var currentMID=0;

/******************************************************************************/

function initWS() {
    ws = new WebSocket("wss://ws.juick.com/?hash="+hash);
    ws.onopen = function() {
        $('#sidepanel').addClass('online');
    };
    ws.onclose = function() {
        $('#sidepanel').removeClass('online');
        ws=null;
        initWS();
    };
    ws.onmessage = function(msg) {
        if(msg.data==' ') {
            ws.send(' ');
        } else {
            try {
                var jsonMsg=$.parseJSON(msg.data);
                if(jsonMsg.rid>0) {
                    incomingComment(jsonMsg);
                } else if(jsonMsg.mid>0) {
                    incomingPost(jsonMsg);
                } else {
                    incomingPM(jsonMsg);
                }
            } catch(err) {
                console.log(err);
            }
        }
    };
    setInterval(wsSendKeepAlive, 90000);
}

function wsSendKeepAlive() {
    if(ws!=null) {
        ws.send(' ');
    }
}

/******************************************************************************/

function initPMUList() {
    var ul=$('#pmulist');
    ul.empty();
    $.each(lastConversations,function(i,item) {
        var img=$("<img/>").attr("src","https://i.juick.com/as/"+item.uid+".png");
        var a=$("<a/>").attr("href","#").attr("onclick","return showPM('"+item.uname+"')");
        a.append(img).append(item.uname);
        if(item.MessagesCount) {
            a.append($("<div/>").attr("class","unreadcnt").text(item.MessagesCount));
        }
        var li=$("<li/>").append(a);
        ul.append(li);
    });
}

/******************************************************************************/

function incomingPost(msg) {
    console.log(msg);
    if(groups[0].MessagesCount>0) {
        groups[0].MessagesCount++;
    } else {
        groups[0].MessagesCount=1;
    }
    initGroupsList();
}

function incomingComment(msg) {
    console.log(msg);
}

function showGroup(gid) {
    currentPMUser="";
    currentMID=0;
    groups[0].MessagesCount=0;
    initGroupsList();
    
    $.getJSON('https://api.juick.com/home?hash='+hash+'&callback=?').done(function(data) {
        var ul=$('<ul/>');
        ul.attr("id","msglist");
        $.each(data,function(i,item) {
            var tags="";
            if(item.tags) {
                $.each(item.tags,function(t,tag) {
                    tags+=" *"+tag;
                });
            }
            var photo="";
            if(item.photo) {
                photo="<div class=\"msg-media\"><img src=\""+item.photo.small+"\"/></div>";
            }
            var replies="";
            if(item.replies>0) {
                replies="<div class=\"msg-replies\"><a href=\"#\" onclick=\"return showMessage("+item.mid+")\">"+item.replies+" ";
                if(item.replies%10==1) {
                    replies+="reply";
                } else {
                    replies+="replies";
                }
                replies+=" </a>";
                if(item.repliesby) {
                    replies+=" by "+item.repliesby;
                }
                replies+="</div>";
            }
            var li=$("<li/>").attr("class","msg").html(
                "<div class=\"msg-header\">"+
                "<div class=\"msg-menu\"></div>"+
                "<div class=\"msg-avatar\"><a href=\"#\" onclick=\"return showUser('"+item.user.uname+"')\"><img src=\"//i.juick.com/a/"+item.user.uid+".png\"/></a></div>"+
                "<div class=\"msg-uname\"><a href=\"#\" onclick=\"return showUser('"+item.user.uname+"')\">@"+item.user.uname+"</a>:"+tags+"</div>"+
                "<div class=\"msg-ts\"><a href=\"#\" onclick=\"return showMessage("+item.mid+")\">"+item.timestamp+"</a></div>"+
                "</div>"+
                "<div class=\"msg-txt\">"+item.body+"</div>"+
                photo+
                "<div class=\"msg-comment\"><textarea id=\"tareply-"+item.mid+"\" name=\"body\" rows=\"1\" class=\"reply\" placeholder=\"Add a comment...\" onkeypress=\"postformListener(this.form,event)\"></textarea></div>"+
                replies
                );
            ul.append(li);
        });
        $('#toppanel').css("display","none");
        $('#bottompanel').css("display","none");
        var content=$('#content');
        content.attr("class","");
        content.empty();
        content.append(ul);
        $(window).scrollTop(0);
    });
    return false;
}

function showMessages(param) {
    currentPMUser="";
    currentMID=0;
    $.getJSON('https://api.juick.com/messages?hash='+hash+'&'+param+'&callback=?').done(function(data) {
        var ul=$('<ul/>');
        ul.attr("id","msglist");
        $.each(data,function(i,item) {
            var tags="";
            if(item.tags) {
                $.each(item.tags,function(t,tag) {
                    tags+=" *"+tag+"</a>";
                });
            }
            var photo="";
            if(item.photo) {
                photo="<div class=\"msg-media\"><img src=\""+item.photo.small+"\"/></div>";
            }
            var replies="";
            if(item.replies>0) {
                replies="<div class=\"msg-replies\"><a href=\"#\" onclick=\"return showMessage("+item.mid+")\">"+item.replies+" ";
                if(item.replies%10==1) {
                    replies+="reply";
                } else {
                    replies+="replies";
                }
                replies+=" </a>";
                if(item.repliesby) {
                    replies+=" by "+item.repliesby;
                }
                replies+="</div>";
            }
            var li=$("<li/>").attr("class","msg").html(
                "<div class=\"msg-header\">"+
                "<div class=\"msg-menu\"></div>"+
                "<div class=\"msg-avatar\"><a href=\"#\" onclick=\"return showUser('"+item.user.uname+"')\"><img src=\"//i.juick.com/a/"+item.user.uid+".png\"/></a></div>"+
                "<div class=\"msg-uname\"><a href=\"#\" onclick=\"return showUser('"+item.user.uname+"')\">@"+item.user.uname+"</a>:"+tags+"</div>"+
                "<div class=\"msg-ts\"><a href=\"#\" onclick=\"return showMessage("+item.mid+")\">"+item.timestamp+"</a></div>"+
                "</div>"+
                "<div class=\"msg-txt\">"+item.body+"</div>"+
                photo+
                "<div class=\"msg-comment\"><textarea name=\"body\" rows=\"1\" class=\"reply\" placeholder=\"Add a comment...\" onkeypress=\"postformListener(this.form,event)\"></textarea></div>"+
                replies
                );
            ul.append(li);
        });
        $('#toppanel').css("display","none");
        $('#bottompanel').css("display","none");
        var content=$('#content');
        content.attr("class","");
        content.empty();
        content.append(ul);
        $(window).scrollTop(0);
    });
    return false;
}

/******************************************************************************/

function showUser(uname) {
    showMessages('uname='+uname);
    return false;
}

/******************************************************************************/

function showMessage(mid) {
    currentPMUser="";
    currentMID=mid;
    $.getJSON('https://api.juick.com/thread?mid='+mid+'&hash='+hash+'&callback=?').done(function(data) {
        var ul=$('<ul/>');
        ul.attr("id","thread");
        
        var post=data.shift();
        var tags="";
        if(post.tags) {
            $.each(post.tags,function(t,tag) {
                tags+=" *"+tag+"</a>";
            });
        }
        var photo="";
        if(post.photo) {
            photo="<div class=\"msg-media\"><img src=\""+post.photo.small+"\"/></div>";
        }
        var li=$("<li/>").attr("class","msg").html(
            "<div class=\"msg-header\">"+
            "<div class=\"msg-menu\"></div>"+
            "<div class=\"msg-avatar\"><a href=\"#\" onclick=\"return showUser('"+post.user.uname+"')\"><img src=\"//i.juick.com/a/"+post.user.uid+".png\"/></a></div>"+
            "<div class=\"msg-uname\"><a href=\"#\" onclick=\"return showUser('"+post.user.uname+"')\">@"+post.user.uname+"</a>:"+tags+"</div>"+
            "<div class=\"msg-ts\">"+post.timestamp+"</div>"+
            "</div>"+
            "<div class=\"msg-txt\">"+post.body+"</div>"+
            photo+
            "<div class=\"msg-comment\"><textarea name=\"body\" rows=\"1\" class=\"reply\" placeholder=\"Add a comment...\" onkeypress=\"postformListener(this.form,event)\"></textarea></div>"
            );
        ul.append(li);
        
        var content=$('#content');
        var maxmargin=content.width()-li.width()-50;
        
        var start,end;
        start=new Date();
        showThread(ul,data,0,20,maxmargin);
        end=new Date();
        console.log("Execution time: "+(end.getTime()-start.getTime()));
        
        $('#toppanel').css("display","none");
        $('#bottompanel').css("display","none");
        content.attr("class","");
        content.empty();
        content.append($('<div/>').attr("id","threadwrap").append(ul));
        $(window).scrollTop(0);
    });
    return false;
}

function showThread(ul,data,rid,margin,maxmargin) {
    $.each(data,function(i,item) {
        var replyto=item.replyto || 0;
        if(replyto==rid) {
            var photo="";
            if(item.photo) {
                photo="<div class=\"msg-media\"><img src=\""+item.photo.small+"\"/></div>";
            }
            var li=$("<li/>").attr("class","msg").css("margin-left",margin).html(
                "<div class=\"msg-header\">"+
                "<div class=\"msg-menu\"></div>"+
                "<div class=\"msg-avatar\"><a href=\"#\" onclick=\"return showUser('"+item.user.uname+"')\"><img src=\"//i.juick.com/a/"+item.user.uid+".png\"/></a></div>"+
                "<div class=\"msg-uname\"><a href=\"#\" onclick=\"return showUser('"+item.user.uname+"')\">@"+item.user.uname+"</a>:</div>"+
                "<div class=\"msg-ts\">"+item.timestamp+"</div>"+
                "</div>"+
                "<div class=\"msg-txt\">"+item.body+"</div>"+
                photo//+
                //"<div class=\"msg-comment\"><textarea name=\"body\" rows=\"1\" class=\"reply\" placeholder=\"Add a comment...\" onkeypress=\"postformListener(this.form,event)\"></textarea></div>"
                );
            ul.append(li);
            
            var newmargin=margin+20;
            if(newmargin>maxmargin) {
                newmargin=maxmargin;
            }
            showThread(ul,data.slice(i),item.rid,newmargin,maxmargin);
        }
    });
}

/******************************************************************************/

function incomingPM(msg) {
    try {
        if(msg.user.uname===currentPMUser) {
            $('#pmlist').append($("<li/>").attr("class","pm-in").text(msg.body));
            $(window).scrollTop($(document).height());
        } else {
            var modified=false;
            $.each(lastConversations,function(i,item) {
                if(item.uname===msg.user.uname) {
                    if(item.MessagesCount>0) {
                        item.MessagesCount++;
                    } else {
                        item.MessagesCount=1;
                    }
                    modified=true;
                }
            });
            if(!modified) {
                lastConversations.unshift({
                    uname:msg.user.uname,
                    uid:msg.user.uid,
                    MessagesCount:"1"
                });
            }
            initPMUList();
        }
    } catch(err) { }
}

function showPM(uname) {
    currentMID=0;
    
    var modified=false;
    $.each(lastConversations,function(i,item) {
        if(item.uname===uname && item.MessagesCount>0) {
            item.MessagesCount=0;
            modified=true;
        }
    });
    if(modified) {
        initPMUList();
    }
    
    $.getJSON('https://api.juick.com/pm?hash='+hash+'&uname='+uname+'&callback=?').done(function(data) {
        var ul=$('<ul/>');
        ul.attr("id","pmlist");
        $.each(data,function(i,item) {
            var li=$("<li/>");
            if(item.user.uid==user_id) {
                li.attr("class","pm-out");
            } else {
                li.attr("class","pm-in");
            }
            li.text(item.body);
            ul.append(li);
        });

        currentPMUser=uname;

/*
        var toppanel=$('#toppanel');
        toppanel.css("display","block");
        toppanel.html("<h1>"+uname+"</h1>");

        var bottompanel=$('#bottompanel');
        bottompanel.html("<input type=\"text\" name=\"reply\" id=\"replypmtext\" onkeypress=\"sendPMformListener(this.form,event)\"/><input type=\"button\" value=\">\" id=\"replypmbutton\" onclick=\"return sendPM()\"/>");
        bottompanel.css("display","block");
*/

        var content=$('#content');
        content.empty();
        content.append(ul);
        $(window).scrollTop($(document).height());
        //$('#replypmtext').focus();
    });
    return false;
}

function sendPMformListener(formEl,ev) {
    if(ev.ctrlKey && (ev.keyCode==10 || ev.keyCode==13)) {
        sendPM();
    }
}

function sendPM() {
    var replypmtext=$('#replypmtext');
    var replypmbutton=$('#replypmbutton');
    replypmtext.prop('disabled', true);
    replypmbutton.prop('disabled', true);
    
    var body=replypmtext.val();
    
    $.ajax({
        url:"https://api.juick.com/pm",
        type:"POST",
        data:{
            hash:hash,
            uname:currentPMUser,
            body:body
        },
        success:function(data) {
            replypmtext.val("");
            $('#pmlist').append($("<li/>").attr("class","pm-out").text(body));
            $(window).scrollTop($(document).height());
        },
        error:function(jqxhr,status) {
            alert("Error: "+status);
        },
        complete:function() {
            replypmtext.removeAttr("disabled");
            replypmbutton.removeAttr("disabled");
            replypmtext.focus();
        }
    });
    return false;
}

/******************************************************************************/
/******************************************************************************/
/******************************************************************************/

function inlinevideo(mid) {
    var flashvars={
        file:'http://i.juick.com/video/'+mid+'.mp4',
        image:'http://i.juick.com/thumbs/'+mid+'.jpg',
        skin:'http://static.juick.com/glow.zip',
        autostart:'true'
    };
    var params={
        allowfullscreen:'true'
    };
    swfobject.embedSWF('//static.juick.com/player.swf','video-'+mid,'512','384','9.0.115','false',flashvars,params,null);
}

function postformListener(formEl,ev) {
    if(ev.ctrlKey && (ev.keyCode==10 || ev.keyCode==13)) formEl.submit();
}

function showMoreReplies(id) {
    $('#'+id+' .msg-comments').hide();

    var replies=$('#replies>li');
    var flagshow=0;
    for(var i=0; i<replies.length; i++) {
        if(flagshow==1) {
            if(replies[i].style.display=="none") {
                replies[i].style.display="block";
            } else {
                break;
            }
        }
        if(replies[i].id==id) {
            flagshow=1;
        }
    }
    return false;
}

function showCommentForm(mid,rid) {
    if($('#replies #'+rid+' textarea').length==0) {
        var c=$('#replies #'+rid+' .msg-comment');
        c.wrap('<form action="/post" method="POST" enctype="multipart/form-data"/>');
        c.before('<input type="hidden" name="mid" value="'+mid+'"/><input type="hidden" name="rid" value="'+rid+'"/>');
        c.append('<textarea name="body" rows="1" class="reply narrow" placeholder="Add a comment..." onkeypress="postformListener(this.form,event)"></textarea><input type="submit" value="OK"/>');
    }
    //    $('#replies #'+rid+' .msg-links').hide();
    $('#replies #'+rid+' .msg-comment').show();
    $('#replies #'+rid+' textarea')[0].focus();
    $('#replies #'+rid+' textarea').autoResize({
        extraSpace: 0,
        minHeight: 1
    });
    return false;
}

function unfoldReply() {
    if((0+window.location.hash.substring(1))>0) {
        var el=$(window.location.hash);
        while(el.is(":hidden")) {
            el=el.prev();
        }
        showMoreReplies(el.attr('id'));
        window.location.replace(window.location.hash);
    }
}

function showMessageLinksDialog(mid,rid) {
    var hlink="http://juick.com/"+mid;
    var mlink="#"+mid;
    if(rid>0) {
        hlink+="#"+rid;
        mlink+="/"+rid;
    }
    $('#dialogl').html(hlink);
    $('#dialogn').html(mlink);
    
    $('#dialogw li>a').click(function(event) {
        event.preventDefault();
        openSocialWindow($(this).attr('href'));
    });
    var hlinkenc=encodeURIComponent(hlink);
    $('#sharefb').attr('href','https://www.facebook.com/sharer/sharer.php?u='+hlinkenc);
    $('#sharetw').attr('href','https://twitter.com/intent/tweet?url='+hlinkenc);
    $('#sharevk').attr('href','https://vk.com/share.php?url='+hlinkenc);
    $('#sharegp').attr('href','https://plus.google.com/share?url='+hlinkenc);
   
    var w=$('#dialogw');
    var b=$('#dialogb');
    w.css("top", Math.max(0, ((b.height() - w.outerHeight()) / 2) + b.scrollTop()) + "px");
    w.css("left", Math.max(0, ((b.width() - w.outerWidth()) / 2) + b.scrollLeft()) + "px");
    b.show();
    w.show();
}

function openSocialWindow(url) {
    var w=window.open(url,'juickshare','width=640,height=400');
    if(window.focus) w.focus();
}

function checkUsername() {
    var uname=$('#username').val();
    $.ajax('http://api.juick.com/users?uname='+uname).done(function() {
        $('#username').css('background','#FFCCCC');
    }).fail(function() {
        $('#username').css('background','#CCFFCC');
    });
}

/******************************************************************************/

jQuery.fn.selectText = function(){
    var d = document;
    if (d.body.createTextRange) {
        var range = d.body.createTextRange();
        range.moveToElementText(this[0]);
        range.select();
    } else if (window.getSelection) {
        var selection = window.getSelection();        
        var range = d.createRange();
        range.selectNodeContents(this[0]);
        selection.removeAllRanges();
        selection.addRange(range);
    }
};

/*
 * jQuery.fn.autoResize 1.14
*/ 

(function($){

    var uid = 'ar' + +new Date,

    defaults = autoResize.defaults = {
        onResize: function(){},
        onBeforeResize: function(){
            return 123
        },
        onAfterResize: function(){
            return 555
        },
        animate: {
            duration: 200,
            complete: function(){}
        },
        extraSpace: 50,
        minHeight: 'original',
        maxHeight: 500,
        minWidth: 'original',
        maxWidth: 500
    };

    autoResize.cloneCSSProperties = [
    'lineHeight', 'textDecoration', 'letterSpacing',
    'fontSize', 'fontFamily', 'fontStyle', 'fontWeight',
    'textTransform', 'textAlign', 'direction', 'wordSpacing', 'fontSizeAdjust',
    'paddingTop', 'paddingLeft', 'paddingBottom', 'paddingRight', 'width'
    ];

    autoResize.cloneCSSValues = {
        position: 'absolute',
        top: -9999,
        left: -9999,
        opacity: 0,
        overflow: 'hidden'
    };

    autoResize.resizableFilterSelector = [
    'textarea:not(textarea.' + uid + ')',
    'input:not(input[type])',
    'input[type=text]',
    'input[type=password]',
    'input[type=email]',
    'input[type=url]'
    ].join(',');

    autoResize.AutoResizer = AutoResizer;

    $.fn.autoResize = autoResize;

    function autoResize(config) {
        this.filter(autoResize.resizableFilterSelector).each(function(){
            new AutoResizer( $(this), config );
        });
        return this;
    }

    function AutoResizer(el, config) {

        if (el.data('AutoResizer')) {
            el.data('AutoResizer').destroy();
        }
		
        config = this.config = $.extend({}, autoResize.defaults, config);
        this.el = el;

        this.nodeName = el[0].nodeName.toLowerCase();

        this.originalHeight = el.height();
        this.previousScrollTop = null;

        this.value = el.val();

        if (config.maxWidth === 'original') config.maxWidth = el.width();
        if (config.minWidth === 'original') config.minWidth = el.width();
        if (config.maxHeight === 'original') config.maxHeight = el.height();
        if (config.minHeight === 'original') config.minHeight = el.height();

        if (this.nodeName === 'textarea') {
            el.css({
                resize: 'none',
                overflowY: 'hidden'
            });
        }

        el.data('AutoResizer', this);

        // Make sure onAfterResize is called upon animation completion
        config.animate.complete = (function(f){
            return function() {
                config.onAfterResize.call(el);
                return f.apply(this, arguments);
            };
        }(config.animate.complete));

        this.bind();

    }

    AutoResizer.prototype = {

        bind: function() {

            var check = $.proxy(function(){
                this.check();
                return true;
            }, this);

            this.unbind();

            this.el
            .bind('keyup.autoResize', check)
            //.bind('keydown.autoResize', check)
            .bind('change.autoResize', check)
            .bind('paste.autoResize', function() {
                setTimeout(function() {
                    check();
                }, 0);
            });
			
            if (!this.el.is(':hidden')) {
                this.check(null, true);
            }

        },

        unbind: function() {
            this.el.unbind('.autoResize');
        },

        createClone: function() {

            var el = this.el,
            clone = this.nodeName === 'textarea' ? el.clone() : $('<span/>');

            this.clone = clone;

            $.each(autoResize.cloneCSSProperties, function(i, p){
                clone[0].style[p] = el.css(p);
            });

            clone
            .removeAttr('name')
            .removeAttr('id')
            .addClass(uid)
            .attr('tabIndex', -1)
            .css(autoResize.cloneCSSValues);

            if (this.nodeName === 'textarea') {
                clone.height('auto');
            } else {
                clone.width('auto').css({
                    whiteSpace: 'nowrap'
                });
            }

        },

        check: function(e, immediate) {

            if (!this.clone) {
                this.createClone();
                this.injectClone();
            }

            var config = this.config,
            clone = this.clone,
            el = this.el,
            value = el.val();

            // Do nothing if value hasn't changed
            if (value === this.prevValue) {
                return true;
            }
            this.prevValue = value;

            if (this.nodeName === 'input') {

                clone.text(value);

                // Calculate new width + whether to change
                var cloneWidth = clone.width(),
                newWidth = (cloneWidth + config.extraSpace) >= config.minWidth ?
                cloneWidth + config.extraSpace : config.minWidth,
                currentWidth = el.width();

                newWidth = Math.min(newWidth, config.maxWidth);

                if (
                    (newWidth < currentWidth && newWidth >= config.minWidth) ||
                    (newWidth >= config.minWidth && newWidth <= config.maxWidth)
                    ) {

                    config.onBeforeResize.call(el);
                    config.onResize.call(el);

                    el.scrollLeft(0);

                    if (config.animate && !immediate) {
                        el.stop(1,1).animate({
                            width: newWidth
                        }, config.animate);
                    } else {
                        el.width(newWidth);
                        config.onAfterResize.call(el);
                    }

                }

                return;

            }

            // TEXTAREA
			
            clone.width(el.width()).height(0).val(value).scrollTop(10000);
			
            var scrollTop = clone[0].scrollTop;
				
            // Don't do anything if scrollTop hasen't changed:
            if (this.previousScrollTop === scrollTop) {
                return;
            }

            this.previousScrollTop = scrollTop;
			
            if (scrollTop + config.extraSpace >= config.maxHeight) {
                el.css('overflowY', '');
                scrollTop = config.maxHeight;
                immediate = true;
            } else if (scrollTop <= config.minHeight) {
                scrollTop = config.minHeight;
            } else {
                el.css('overflowY', 'hidden');
                scrollTop += config.extraSpace;
            }

            config.onBeforeResize.call(el);
            config.onResize.call(el);

            // Either animate or directly apply height:
            if (config.animate && !immediate) {
                el.stop(1,1).animate({
                    height: scrollTop
                }, config.animate);
            } else {
                el.height(scrollTop);
                config.onAfterResize.call(el);
            }

        },

        destroy: function() {
            this.unbind();
            this.el.removeData('AutoResizer');
            this.clone.remove();
            delete this.el;
            delete this.clone;
        },

        injectClone: function() {
            (
                autoResize.cloneContainer ||
                (autoResize.cloneContainer = $('<arclones/>').appendTo('body'))
                ).append(this.clone);
        }

    };
	
})(jQuery);

/******************************************************************************/

$(document).ready(function() {
    initPMUList();
    
    var tareply=$('textarea.reply');
    tareply.autoResize({
        extraSpace: 0,
        minHeight: 1
    });
    tareply.click(function () {
        $(this).addClass("narrow");
        $(this).after('<input type="submit" value="OK"/>');
        $(this).off('click');
    });
    
    if(!!$('#column').offset()) {
        var stickyTop = $('#column').offset().top;
        $(window).scroll(function() {
            var windowTop = $(window).scrollTop();
            var column=$('#column');
            var rcol=$('#rcol');
            if (stickyTop < windowTop) {
                if(column.hasClass('fix')==false) {
                    column.removeClass('abs');
                    column.addClass('fix');
                    rcol.removeClass('abs');
                    rcol.addClass('fix');
                }
            } else if(column.hasClass('fix')==true) {
                column.removeClass('fix');
                column.addClass('abs');
                rcol.removeClass('fix');
                rcol.addClass('abs');
            }
        });
    }
    
    unfoldReply();
    $(window).bind('hashchange',unfoldReply);
});