//main = new Box('white','#fafafa','black',100,0,'#f3f3f3',0,"fill");

var i, 
    a = addblock("center",0,100,20).style('color','midnightblue'), 
    b = addblock("center",23,90,77).style('color','midnightblue'),
    slides = getfile("bbm_neurotask_2015_uva.txt").split("\n---"),
//    slides = getfile("slide_show.txt").split("\n---"),
    current = 0,
    renderer = new marked.Renderer();

main.style('background','linear-gradient(lightskyblue,antiquewhite)');
main.style('body-background-color','black');

main.setfontsize(70);

renderer.image = function(href,title,t)
{
    var s = href.split('='),
        w = +s[1] || 100,
        out;

    href = s[0].trim();
    
    // we are deleting .centerdiv and so use the pseudo class 'toplevel'
    b.preload(href,50,'id'+href,'toplevel'); 
    href = util.convertFileName(href);
    
    // from marked.js library, adjusted for width and height and mangled 
    // to prevent XSS from doing its worst
    out = '<' + 'im' + 'g style="width:' + w + '%;height:auto;'
          + (s[1] && s[1].charAt(0) === '+' ? 'float:right;' : '')
          + '" s' + 'rc="' 
          + href + '" alt="' + t + '"';

    if (title) 
    {
        out += ' title="' + title + '"';
    }
    
    out += this.options['xh' + 'tml'] ? '/>' : '>';

    return out;
}    

// Calling marked here is useless but it finds and preloads all images as a side effect            
for (i = 0; i < slides.length; i++)               
{ 
    marked(slides[i],{renderer:renderer}); 
}              

renderer.old_heading=  renderer.heading;

renderer.heading= function(t,level,raw) 
{
    if (level === 1)
    {
        a.text(t,250).style('font-weight','bold'); 
        return "";
    } 
    else
    {
        return renderer.old_heading(t,level,raw); 
    }
}

function showslides(back,clicked) 
{
    var e, p, 
        old_format= String.prototype.format,
        change_slide = false,
        nodes, n;

    // Temporarily replace `format()` to prevent code blocks being messed up. 
    // n.b. now the {name} approach does not work 
    String.prototype.format = function() {return this;} 
    b.text(marked(slides[current],{renderer:renderer}),125,'toplevel'); 
    a.animate('opacity',0,1,500);
    b.animate('opacity',0,1,500);
    String.prototype.format = old_format;

    nodes = $('li');

    if (nodes.length && !clicked)
    {
        if (back)
        {
            nodes.css('opacity',1);
            n = nodes.length-1;
        }
        else
        {
            nodes.css('opacity',0);
            n = -1;
        }
        
        while (1)
        {
            waitfor {
                awaitkey('LEFT_ARROW'); 
                if (n === 0)
                {
                    current = Math.max(0,current-1);       
                    change_slide = true;
                    back = true;
                    break;
                }
                nodes[n--].style.opacity = 0;
            } or {
                awaitkey('RIGHT_ARROW');
                if (n === nodes.length-1)
                {
                    current = Math.min(slides.length-1,current+1);
                    change_slide = true;
                    back = false;
                    break;
                }
                nodes[++n].style.opacity = 1;
            }
        }            
    }    

    if (!change_slide)
    {
        waitfor {
            awaitkey('LEFT_ARROW'); 
            current = Math.max(0,current-1);   
            back = true;
            clicked = false;
        } or {
            awaitkey('RIGHT_ARROW'); 
            current = Math.min(slides.length-1,current+1);
            back = false;
            clicked = false;
        } or {
            e = b.await('click'); 
            p =  b.getmouse(e);
            current =  p.x > 50 ? Math.min(slides.length-1,current+1) 
                                : Math.max(0,current-1);
            clicked = true;
        }
    }
    
    a.animate('opacity',1,0,500);
    b.animate('opacity',1,0,500);
    showslides(back,clicked);
}

showslides();