// ==UserScript==
// @name        Liferay's Social Office forums revamp
// @namespace   in.liferay.com brandizzi
// @include     https://in.liferay.com/*
// @include     https://dev.liferay.com/*
// @version     1
// @grant       none
// ==/UserScript==

var fromCamelCaseToDashSeparated = function(str) {
    return str.replace(/([a-z][A-Z])/g, function (g) {
        return g[0] + '-' + g[1].toLowerCase();
    });
}

var GlobalStyleSheet = function() {
    this.title = Math.random().toString(36);
    this.element = document.createElement('style');
    this.element.title = this.title;
    getChildByTag(document, 'head').appendChild(this.element);

    for (var i in document.styleSheets) {
        var styleSheet = document.styleSheets[i];

        if (styleSheet.title == this.title) {
            this.styleSheet = styleSheet;
            this.styleSheet.disbled = false;
        }
    }
}

GlobalStyleSheet.prototype.addRule = function(selector, properties) {
    var rule = selector + ' {\n';

    for (var k in properties) {
        var value = properties[k];
        var property;

        if (k == 'cssFloat') {
            property = 'float';
        } else {
            property = fromCamelCaseToDashSeparated(k);
        }

        rule += '    ' + property + ': ' + value + ';\n';
    }

    rule += '}\n\n';

    this.styleSheet.insertRule(rule, this.styleSheet.cssRules.length);
}

var convertToSpan = function(item) {
    var span = document.createElement('span');

    while (item.childNodes.length > 0) {
        span.appendChild(item.childNodes[0]);
    }

    return span;
}

var getChildByClass = function(node, clazz, index) {
    if (typeof index == "undefined") {
        index = 0;
    }
    return node.getElementsByClassName(clazz)[index];
}

var getChildByTag = function(node, tag, index) {
    if (typeof index == "undefined") {
        index = 0;
    }
    return node.getElementsByTagName(tag)[index];
}

var setStyle = function(node, style) {
    for (var k in style) {
        node.style[k] = style[k];
    }
}

var deleteNode = function(node) {
    node.parentNode.removeChild(node);
}

var moveControls = function(destination, controls, acc) {
    for (var j=0; j<controls.length; j++) {
        var control = controls[j];
        var lis = control.getElementsByTagName('li');

        for (var k=0; k < lis.length; k++) {
            var li = lis[k];
            var span = getChildByTag(li, 'span');

            acc.push(span);
            destination.appendChild(span);
        }
    }
}

document.moveQuickReply = function(messageId) {
    var message = document.getElementById(messageId);
    var messageContainer = message.parentNode;
    var quickReplyDiv = document.getElementById('_19_addQuickReplyDiv');

    // There is an "a" element with the same id, should take the table.
    message = document.evaluate(
        ".//table[@id='" + messageId + "']",
        messageContainer, null, XPathResult.ANY_TYPE, null
    ).iterateNext();

    messageContainer.insertBefore(quickReplyDiv, message.nextElementSibling);
}

var messageContainers = document.getElementsByClassName('message-container');

for (var i=0; i < messageContainers.length; i++) {
    var messageContainer = messageContainers[i];
    var message = getChildByClass(messageContainer, 'thread-message-view');

    var row = getChildByTag(message, 'tr');

    var userInfo = getChildByTag(row, 'td', 0);
    var content = getChildByTag(row, 'td', 1);

    var userActionItems = [];

    var threadTop = getChildByClass(message, 'thread-top');
    var feedbackControls = threadTop.getElementsByClassName('edit-controls');
    var feedbackDiv = document.createElement('div');

    moveControls(feedbackDiv, feedbackControls, userActionItems);

    var flags = getChildByClass(message, 'taglib-flags');
    var flagsSpan = getChildByTag(flags, 'span');

    userActionItems.push(flagsSpan);
    feedbackDiv.appendChild(flagsSpan);

    var thumbs = getChildByClass(message, 'thumbs');
    var rating = getChildByTag(thumbs, 'div');
    var ratingSpan = convertToSpan(rating)

    var ratingInputContainer = getChildByClass(ratingSpan, 'rating-input-container');
    var ratingLabel = getChildByClass(ratingSpan, 'rating-label');

    userActionItems.push(ratingSpan);
    feedbackDiv.appendChild(ratingSpan);

    var threadBottom = getChildByClass(message, 'thread-bottom');
    var editControls = threadBottom.getElementsByClassName('edit-controls');
    var editDiv = document.createElement('div');

    moveControls(editDiv, editControls, userActionItems);

    var subject = getChildByClass(threadTop, 'subject');

    var taglibUserDisplay = getChildByClass(userInfo, 'taglib-user-display');
    var userProfileImage = getChildByClass(taglibUserDisplay, 'user-profile-image');
    var avatar = getChildByClass(userProfileImage, 'avatar');
    var userName = getChildByClass(taglibUserDisplay, 'user-name');



    userInfo.appendChild(subject);
    userInfo.appendChild(feedbackDiv);
    userInfo.appendChild(editDiv);

    var messageAttachments = getChildByClass(content, 'message-attachments');
    if (typeof messageAttachments != "undefined") {
        var h3 = getChildByTag(messageAttachments, 'h3');

        h3.style.lineHeight = '1em';
        userInfo.appendChild(messageAttachments);
    }

    for (var j in userActionItems) {
        setStyle(userActionItems[j], {
            margin: '0.5em 1em 0 0',
            display: 'inline-block'
        });
    }

    setStyle(messageContainer, {borderStyle: 'none'});

    setStyle(message, {width: '70%', marginLeft: '10%'});

    setStyle(userInfo, {
        minWidth: '300px',
        width: '25%',
        minHeight: '280px',
        display: 'table-cell',
        position: 'relative',
        fontSize: '90%',
        marginLeft: '5%'
    });

    setStyle(userProfileImage, {
        display: 'block',
        maxWidth: '100%',
        height: 'auto',
        textAlign: 'left'
    });

    setStyle(userName, {
        display: 'block',
        position: 'relative',
        textAlign: 'left',
        marginLeft: '0',
        left: '0',
        top: '0'
    });

    setStyle(avatar, {width: '100px'});

    setStyle(ratingInputContainer, {display: 'none'});

    setStyle(ratingLabel, {display: 'inline-block'});

    setStyle(row, {display: 'table-row'});

    setStyle(subject, {marginTop: '1em'});

    setStyle(content, {
        display: 'table-cell',
        width: '70%',
        marginLeft: '5%',
        fontSize: '120%'
    });

    var globalStyleSheet = new GlobalStyleSheet();

    globalStyleSheet.addRule('#_19_addQuickReplyDiv', {
        width: '46%',
        marginLeft: '33%'
    });
    globalStyleSheet.addRule('#_19_addQuickReplyDiv .control-label', {
        display: 'none'
    });


    var floatContainer = getChildByClass(content, 'float-container');

    deleteNode(threadBottom);
    deleteNode(floatContainer);

    var hr = document.createElement('hr');
    messageContainer.appendChild(hr);

/*  // Some day, maybe...
    var quickReply = document.evaluate(
        ".//a[starts-with(@href, 'javascript:_19_addQuickReply')]",
        feedbackDiv, null, XPathResult.ANY_TYPE, null
    ).iterateNext();

    quickReply.href = quickReply.href.replace('javascript:',
        'javascript:document.moveQuickReply("' + message.id + '");'
    );*/
}