index.html

<script src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="https://api.trello.com/1/client.js"></script>
<script src="tree-node.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">

<div style="height: 100%; overflow: hidden; font-size: 24px;">
    <div id="api_key_div" style="height:100%; background: #5C7AFF; color: #eee; text-align: center;">
        <div class="centered_content">
            <p>Please insert your api key in the field below. You can find it here:
                <a href="https://trello.com/app-key" target="_blank">https://trello.com/app-key</a></p>
            <p>
                <input type="text" id="api_key" placeholder="API KEY HERE" />
            </p>
            <p>
                <button class="btn btn-large" id="check_api_key">Continue
                </button>
            </p>
        </div>
    </div>
    <div id="card_url_div" style="height:100%; background: #4A8FE7; color: #eee; text-align: center;">
        <div class="centered_content">
            <p>Paste the url of one card from the column you need to prioritize and press The button</p>
            <p>
                <input type="text" id="card_url" placeholder="CARD URL"/>
            </p>
            <p>
                <button class="btn btn-large" id="retrieve_cards">The button
                </button>
            </p>
        </div>
    </div>
    <div id="second_div" class="centered_content"
         style="height:100%; background: #59D2FE; color: #1F2D3D; text-align: center;">
        <div class="row">
            <h2>Select the highest priority card</h2>
        </div>
        <div class="centered_content row" style="margin-top: -100px;">
            <div class="col-md-6">
                <div class="jumbotron choice_button" id="left_button" data-cardId="0">
                    <h1></h1>
                    <p class="card_content"></p>
                    <p class="card_link">
                        <a class="btn btn-primary btn-lg card_link" href="#" target="_blank"
                           role="button">See card</a>
                    </p>
                </div>
            </div>
            <div class="col-md-6">
                <div class="jumbotron choice_button" id="right_button" data-cardId="0">
                    <h1></h1>
                    <p class="card_content"></p>
                    <p class="card_link">
                        <a class="btn btn-primary btn-lg card_link" href="#" target="_blank" role="button">See card</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div id="last_div" class="centered_content"
         style="height:100%; background: #CCC9E7; color: #333; text-align: center;">
        <div class="centered_content">
            <span class="almost">Almost</span> <span class="done"> done:</span>
            <br>
            <button class="btn btn-large btn-success" id="update_board">Send ordered data to board</button>
            <span class="checkboard"> Check your Trello board :)</span>
        </div>
    </div>
</div>

<a class="forkMeRibbon" href="https://github.com/mazzcris/sortello" target="_blank">
    <img src="assets/forkme_orange.png" alt="Fork me on GitHub">
</a>

<script>

    var cards = [];

    jQuery('#retrieve_cards').click(function () {
        var cardUrl = jQuery('#card_url').val().replace("https://trello.com/c/", "");
        cardId = cardUrl.replace(/\/(.*)/g, "")
        Trello.cards.get(cardId, null, function (data) {
            var idList = data.idList;
            jQuery.ajax({
                url: "https://api.trello.com/1/lists/" + idList + "/cards?key=" + apiKey + "&token=" + Trello.token(),
            }).done(function (data) {
                listCards = data;
                handleCards(listCards);
                cards = listCards;
            });
        }, function () {
            console.log("Error in Trello.cards.get");
        });
    });

    var nodes = Array();
    var rootNode;

    function handleCards(listCards) {
        for (var i = 0; i < listCards.length; i++) {
            var node = new TreeNode(listCards[i]);
            nodes.push(node);
        }
        rootNode = nodes[0];
        navigateTo("second_div");
        startChoices(1);
    }

    function startChoices(currNode) {
        if (currNode < nodes.length) {
            getChoice(nodes[currNode], rootNode, currNode);
        } else {
            jQuery("#left_button").html("");
            jQuery("#right_button").html("");
            navigateTo("last_div");
        }
    }

    function getChoice(node, compareNode, currNode) {
        jQuery("#left_button h1").html(node.value.name);
        jQuery("#left_button .card_content").html(node.value.desc);
        jQuery("#left_button .card_link").prop("href", node.value.shortUrl);
        jQuery("#right_button h1").html(compareNode.value.name);
        jQuery("#right_button .card_content").html(compareNode.value.desc);
        jQuery("#right_button .card_link").prop("href", compareNode.value.shortUrl);
        jQuery(".choice_button").click(function () {
            if ($(this).attr("id") == "left_button") {
                compareNode = node.goLeft(compareNode);
            } else if ($(this).attr("id") == "right_button") {
                compareNode = node.goRight(compareNode);
            }
            jQuery(".choice_button").unbind("click");
            if (node.isPositioned) {
                startChoices(currNode + 1);
            } else {
                getChoice(node, compareNode, currNode);
            }
        });

    }

    function navigateTo(divId) {
        if ("card_url_div" == divId) {
            jQuery('#api_key_div').animate({'margin-top': -1 * jQuery('#api_key_div').outerHeight()});
        }

        if ("second_div" == divId) {
            jQuery('#card_url_div').animate({'margin-top': -1 * jQuery('#card_url_div').outerHeight()});
            jQuery('#card_url').click();
        }

        if ("last_div" == divId) {
            jQuery('#card_url_div').animate({'margin-top': -2 * jQuery('#card_url_div').outerHeight()});
        }
    }

    function showUploadDone() {
        jQuery(".almost").css("text-decoration", "line-through");
        jQuery(".done").text("Done!");
        jQuery("#update_board").fadeTo(500, 0, function () {
            jQuery("#update_board").animate({
                "width": "0px",
                "padding": "0px"
            });
            jQuery(".checkboard").css("display", "inline-block");
        });
    }


    jQuery('#update_board').click(function () {
        var reorderedNodes = traverseTree(rootNode);
        var putCalls = reorderedNodes.length;
        var position = 100;
        for (var j = 0; j < reorderedNodes.length; j++) {
            Trello.put('/cards/' + reorderedNodes[j].value.id, {pos: '' + position}, function () {
                putCalls--;
                if (putCalls == 0) {
                    showUploadDone();
                }
            });
            position += 100;
        }
    });

    var apiKey = false;

    jQuery(document).ready(function () {

        apiKey = localStorage.getItem("sortelloTrelloDevApiKey");
        jQuery("#check_api_key").click(function () {
            apiKey = jQuery("#api_key").val();
            localStorage.setItem('sortelloTrelloDevApiKey', apiKey);
            authenticateTrello();
        });

        if (apiKey) {
            authenticateTrello();
        }

    });

    function authenticateTrello() {
        console.log(apiKey);

        var authenticationSuccess = function (data) {
            console.log("Successful authentication");
            navigateTo("card_url_div");
        };
        var authenticationFailure = function () {
            console.log("Failed authentication");
        };
        Trello.setKey(apiKey);
        Trello.authorize({
            type: 'popup',
            name: 'Getting Started Application',
            scope: {
                read: 'true',
                write: 'true'
            },
            expiration: 'never',
            success: authenticationSuccess,
            error: authenticationFailure
        });
    }

    jQuery(".centered_content").each(function () {
        var content_height = jQuery(this).outerHeight();
        var viewport_height = jQuery(document).innerHeight();
        var padding_top = (viewport_height / 2) - content_height / 2;
        jQuery(this).css('padding-top', padding_top + 'px');
    });

    jQuery('.choice_button .card_link').click(function (e) {
        e.stopPropagation();
    });

</script>