$(document).ready(function(){
    var navigation = $('<div class="page-navigation"></div>');
    var imagePrev = $('<img src="/uploads/images/cursor-left-inactive.png" />');
    var linkPrev = $('<a href=""><img src="/uploads/images/cursor-left.png" /></a>');
    var imageNext = $('<img src="/uploads/images/cursor-right-inactive.png" />');
    var linkNext = $('<a href=""><img src="/uploads/images/cursor-right.png" /></a>');
    var fadeSpeed = 'normal';
    
    var paragraphs = $('h2');
    var position = 0;
    
    // don't bother if we don't have at least two paragraphs
    if (paragraphs.length >= 2){                
        paragraphs.each(function(){
            var $this = $(this);
            
            // adjust padding of content div
            $('#content').css('padding', '70px 65px 30px 45px').css('height', '560px');
            
            // insert navigation
            if (position == 0){
                navigation.append(imagePrev).append(linkPrev).append(imageNext).append(linkNext);
                $this.before(navigation);
                
                linkPrev.hide();
                imagePrev.show();
                imageNext.hide();
            }
            // hide following paragraphs
            else {
                $this.hide().next('p, div.paragraph').hide();
            }
            ++position;
        });
        
        // IE needs this, as the class is not added to hidden nodes
        $('h2').each(function(){
            var $this = $(this);
            if (!$this.hasClass('sIFR-replaced')){
                $this.addClass('sIFR-replaced');
            }
        });
        
        // attach handler on next/prev links
        linkNext.click(function(e){
            e.preventDefault();
            $(this).blur();
            
            // fade out the current par and fade in the next one
            var el = $('h2:visible:first').fadeOut().next('p, div.paragraph').fadeOut(fadeSpeed, function(){
                el = el.nextAll('h2:hidden:first').fadeIn(fadeSpeed);
                el.next('p, div.paragraph').fadeIn(fadeSpeed);

                // disable next link if last par
                // TODO: find a nicer way to check this condition (is() doesn't work somehow...)
                if (el.html() == $('h2:last').html()){
                    linkNext.hide();
                    imageNext.show();
                }
            });
            
            // enable prev link
            linkPrev.show();
            imagePrev.hide();
        });
        
        linkPrev.click(function(e){
            e.preventDefault();
            $(this).blur();
            
            // fade out the current par and fade in the previous one
            var el = $('h2:visible:first');
            var elFirst = el.prevAll('h2:hidden:first');            
            el.fadeOut().next('p, div.paragraph').fadeOut(fadeSpeed, function(){
                el = elFirst.fadeIn(fadeSpeed);
                el.next('p, div.paragraph').fadeIn(fadeSpeed);
                
                // disable prev link if first par
                // TODO: find a nicer way to check this condition (is() doesn't work somehow...)
                if (el.html() == $('h2:first').html()){
                    linkPrev.hide();
                    imagePrev.show();
                }
            });
            
            // enable next link
            linkNext.show();
            imageNext.hide();
        });
    }
});