Fablelane continuous reading demo

by ffMathy

HTML

<html>
    
    <head>
    
        <link href='http://fonts.googleapis.com/css?family=Cuprum:400,400italic,700,700italic' rel='stylesheet' type='text/css' />
        <link href='http://fonts.googleapis.com/css?family=Tienne|Cuprum:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
        
    </head>

<body>
        
    <h1>This is a story</h1>
    
    <div id="segments">

        <div class="segment" data-id="5" title="The witch dies." data-alternatives="5,7,8">
        
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
            
        </div>
    
        <div class="segment" data-id="5" title="The witch kills a lot of people." data-alternatives="2,5">
        
            Lorem ipsum dolor sit amet amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            
        </div>
    
        <div class="segment" data-id="5" title="The witch is a noob." data-alternatives="7,3,6,4,7,3,6,4">
        
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.
            
        </div>
    
        <div class="segment" data-id="5" title="The witch bursts into flames." data-alternatives="7,3,6,4">
        
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat...

CSS

div.segment:first-child {
    margin-left: 0px;
    margin-right: 0px;
}

div.clear {
    clear: both;
}

div#segments div#outcomes {
    text-align: center;
    padding-bottom: 500px;
}

div#segments div#outcomes #rating {
    float: left;
    width: 50%;
    text-align: center;
}

div#segments div#outcomes #recent {
    float: left;
    width: 50%;
    text-align: center;
}

div#segments div#outcomes {
    margin-top: 30px;
}

div#segments {
    float:left;
    width: 440px;
    border-right: 1px dashed #ccc;
    padding-right: 10px;
    text-align: left;
    padding-right: 15px;
}

div#sidebar {
    float:left;
    width:250px;
    border-right: 1px dashed #eee;
    height: 100%;
}

body {
    font-family: tienne;
    font-size: 14px;
    text-align: justify;
    line-height: 175%;
    min-width: 800px;
}

div#sidebar div#controller #summary {
    font-style: italic;
    color: #6c0;
    font-size: 14px;
    margin: 10px 10px 10px 10px;
}

div#sidebar div#controller #alternatives {
    text-align: left;
}

div#sidebar div#controller #alternatives i {
    font-size: 14px;
    color: #999;
    line-height: 0px;
}

div#sidebar div#controller #alternatives #outcomes a, div#segments div#outcomes a {
    color: #777;
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px dotted #ccc;
    font-family: cuprum;
}

div#sidebar div#controller #alternatives #outcomes {
    margin-top: 5px;
}

div#sidebar div#controller #alternatives #outcomes a:hover, div#segments div#outcomes a:hover {
    border-bottom: 1px dashed #aaa;
}

div#sidebar div#controller {
    border: 1px dotted #ccc;
    border-radius: 5px;
    margin-left: 10px;
    margin-right: 10px;
    font-size: 16px;
    padding: 10px 10px 10px 10px;
    display: none;
    background-color: #fefefe;
    clear:both;
    font-family: cuprum;
}


div.segment.highlighted:before, div.segment.highlighted:after {
    visibility: visible;
}

div.segment:before {
    content: "[";
}

div.segment:after {
   ...

JavaScript

$(function() {

    //toggle this to enable/disable echo ajax calls.
    var jsFiddle = true;
    var defaultTextColor = "#555";
    var focusedTextColor = "#5588ff";

    var loadingUrl = "http://s18.postimage.org/4w764cl91/ajax_loader.gif";

    var body = $("body");

    var sidebar = $("div#sidebar");
    var sidebarOffset = $(sidebar).offset().top;

    var segmentContainer = $("div#segments");

    var outcomes = $(segmentContainer).find("#outcomes");
    var outcomesRating = $(outcomes).find("#rating #content");
    var outcomesRecent = $(outcomes).find("#recent #content");

    var controller = $(sidebar).find("div#controller");

    var previousHighlighted = null;

    var segments = $("div.segment");
    
    function hideLoading(element) {
        $(element).find(".loadingImage").remove();
    }

    function showLoading(element) {
        $(element).empty();

        var loadingImage = $("<img></img>");
        $(loadingImage).attr("class", "loadingImage");
        $(loadingImage).attr("src", loadingUrl);

        $(element).append(loadingImage);
    }

    function redrawLines() {

        $(".line").remove();

        var previousDrawn = null;
        var lineCallback = function(element) {

            var spacing = 5;

            var currentStartOffset = 0;
            if (element === undefined) {
                currentStartOffset = $(previousDrawn).outerHeight() + $(previousDrawn).offset().top;
            } else {
                currentStartOffset = $(element).offset().top;
            }

            if (previousDrawn !== null || previousHighlighted !== null) {

                var previousStartOffset = 0;

                if (previousDrawn !== null) {
                    previousStartOffset = $(previousDrawn).offset().top;
                } else if (previousHighlighted !== null) {
                    previousStartOffset = $(previousHighlighted).offset().top;
                }

                generateRectangle($(sidebar).offset().left - 7,...