function toggleDivForward( paragraph ) {
    var div = document.getElementsByTagName( "div" );
    var pClass = "paragraph_pic" + paragraph;
    var tDiv = Array();
    
    // differentiate
    for ( var i = 0; i < div.length; i++ ) {
        if ( div[i].className == pClass ) {
            tDiv.push(div[i]);
        }
    }
    // display:none on all elements. catch pos of active
    var next = 0;
    for ( i = 0; i < tDiv.length; i++ ) {
        if ( i == tDiv.length-1 && next == 0  && tDiv[i].style.display == "") {
            tDiv[i].style.display = "none";
            next = i;
        }
        if ( tDiv[i].style.display == "" && next == 0 ) {
            // if current pic has display = "", mark pos and set the next display = ""
            next = i;
        }
        if ( i < tDiv.length - 1 ) {
            tDiv[i].style.display = "none";
        }             
    }
    // set next pic
    if ( next < tDiv.length - 1 ) {
        tDiv[ next + 1 ].style.display = "";
    }
    else
        tDiv[0].style.display = "";
}

function toggleDivBack( paragraph ) {
    var div = document.getElementsByTagName( "div" );
    var pClass = "paragraph_pic" + paragraph;
    var tDiv = Array();
    
    // differentiate
    for ( var i = 0; i < div.length; i++ ) {
        if ( div[i].className == pClass ) {
            tDiv.push(div[i]);
        }
    }
    // display:none on all elements. catch pos of active
    var next = 0;
    for ( i = 0; i < tDiv.length; i++ ) {
        if ( tDiv[i].style.display == "" && next == 0 ) {
            // if current pic has display = "", mark pos and set the next display = ""
            next = i;
        }            
        if ( i > 0 ) {
            tDiv[i].style.display = "none";
        }
         if(i == 0 && next == 0 && tDiv[i].style.display == ""){
            next = i;
        }
    }             
    // set next pic
    if ( next >= 1 ) {
        tDiv[ next - 1 ].style.display = "";
    }
    if (next == 0){
         for ( i = 0; i < tDiv.length; i++ ) {
            tDiv[i].style.display = "none";
         }
         tDiv[tDiv.length-1 ].style.display = "";
    }   
}