from IPython.core.display import publish_html

publish_html('<scrip src="http://code.jquery.com/jquery-1.8.3.min.js"></scrip>')

def setInterval(js, time):
    publish_html('''<script>
    window.setInterval(function(){{
            {0}
        }}, {1});
    </script>
    '''.format(js, time))

css='''
.text_cell, .code_cell, .text_cell_render{
  max-width:810px;
}
.text_cell_render
{
  position:relative!important;
}
aside
{
  background:rgba(255,255,80,0.4);
  border:1px solid rgba(255,210,80,0.8);
  border-radius:4px;
  border-top:5px;
  display:block;
  font-size:.85em;
  left:845px;
  padding:1em;
  position:absolute;
  top:0px;
  text-align:left;
  width:150px;
  z-index:5;
  -moz-box-shadow: 2px 2px 5px #CCC;
  -webkit-box-shadow: 2px 2px 5px #CCC;
  box-shadow: 2px 2px 5px #CCC;
}
.footnote
{
  color:red;
  font-size:.7em;
  position:relative;
  top:-.7em;
  text-transform: uppercase;
}

.footnote.big
{
  font-size:1em;
  top:0;
  text-transform: uppercase;
}
'''
publish_html('<style>'+css+'</style>')

js='''
var jCounter=0;
$('.text_cell_render p, .text_cell_render li').each(function(){
    var x=$(this).html().match(/[\s]*\\\\footnote\{(.|[\s-]|<[\/][\w]*>)*?\}/gi);
    if( x!=null ){  
        
        for(var i=0; i<x.length; ++i){
            try{
                ++jCounter;
                $(this).html($(this).html().replace(x[i],'<span class="footnote">'
                                                    +jCounter
                                                    +'</span><aside><span class="footnote big">'
                                                    +jCounter
                                                    +'</span>'
                                                    +' '
                                                    +x[i].substring(10+x[i].length-$.trim(x[i]).length, x[i].length-1)
                                                    +'</aside>'));
            }
            catch(err){
                continue;
            }
            
        }
    }  
});
'''

#This I found somewhere on the Internet and I think I changed some little things
jsOffsets='''
try{
    var orgOffset=[]
    var elements=[]
    var offsets=[]
    $('aside').each(function(){
        orgOffset.push($(this).css('top'));
    });
    $('aside').css('top',0)
    window.lastOffset=$('aside').first().offset()['top'];
    $('aside').each(function(i){
        curOffset=$(this).offset()['top'];
        shiftOffset=0;
        while( curOffset+shiftOffset<window.lastOffset + 5){
            ++shiftOffset;
        }
    
        window.lastOffset=curOffset+shiftOffset+$(this).outerHeight();
            elements.push($(this));
            offsets.push(shiftOffset);
            $(this).css('top', orgOffset[i]);
    });
    for(i=0; i<offsets.length; i++){
        if( offsets[i]!=orgOffset[i]){
            elements[i].animate(
                {
                top: offsets[i]
                },
                'slow');
        }
    }
}
catch(err){
    console.log(err);
}
'''

setInterval(js+jsOffsets, 10000)

autosaveJs='''
IPython.notebook.save_notebook();
'''
setInterval(autosaveJs, 10000)