idLastPicture = 1;
function showPicture(idPicture,nbPictures) {
    document.getElementById('picture-'+idLastPicture).className = 'item';
    document.getElementById('picture-'+idPicture).className = 'item item-active';

    if (document.getElementById('thumbnail-'+idLastPicture) != null) {
        document.getElementById('thumbnail-'+idLastPicture).className = '';
        document.getElementById('thumbnail-'+idPicture).className = 'active';
    }

    document.getElementById('number-'+idLastPicture).className = '';
    document.getElementById('number-'+idPicture).className = 'active';

    idPrevious = idPicture-1;
    if (idPicture == 1) {
        idPrevious = nbPictures;
    }

    idNext = idPicture+1;
    if (idPicture == nbPictures) {
        idNext = 1;
    }

    document.getElementById('prev').innerHTML = '<a href="javascript:showPicture('+idPrevious+','+nbPictures+');"><</a>';
    document.getElementById('next').innerHTML = '<a href="javascript:showPicture('+idNext+','+nbPictures+');">></a>';

    idLastPicture = idPicture;
}

idLastPortrait = 1;
function showPortrait(idPortrait) {
    document.getElementById('portrait-'+idLastPortrait).style.position = 'absolute';
    document.getElementById('portrait-'+idLastPortrait).style.visibility = 'hidden';

    document.getElementById('portrait-'+idPortrait).style.position = 'relative';
    document.getElementById('portrait-'+idPortrait).style.visibility = 'visible';

    document.getElementById('thumbnail-'+idLastPortrait).className = '';
    document.getElementById('thumbnail-'+idPortrait).className = 'active';

    idLastPortrait = idPortrait;
}

idLastHighlight = 1;
function showHighlight(idHighlight,nbHighlights) {
    document.getElementById('highlight-'+idLastHighlight).style.position = 'absolute';
    document.getElementById('highlight-'+idLastHighlight).style.visibility = 'hidden';

    document.getElementById('highlight-'+idHighlight).style.position = 'relative';
    document.getElementById('highlight-'+idHighlight).style.visibility = 'visible';

    document.getElementById('number-'+idLastHighlight).className = '';
    document.getElementById('number-'+idHighlight).className = 'active';

    idPrevious = idHighlight-1;
    if (idHighlight == 1) {
        idPrevious = nbHighlights;
    }

    idNext = idHighlight+1;
    if (idHighlight == nbHighlights) {
        idNext = 1;
    }

    document.getElementById('prev').innerHTML = '<a href="javascript:showHighlight('+idPrevious+','+nbHighlights+');"><</a>';
    document.getElementById('next').innerHTML = '<a href="javascript:showHighlight('+idNext+','+nbHighlights+');">></a>';

    idLastHighlight = idHighlight;
}


function showPoint(value) {
    elm = getElementsByClass('point');
    for(var i = 0; i < elm.length; i++) {
        elm[i].style.visibility = "hidden";
    }
    document.getElementById('point-'+value).style.visibility = "visible";
}

function hidePoint() {
    elm = getElementsByClass('point');
    for(var i = 0; i < elm.length; i++) {
        elm[i].style.visibility = "hidden";
    }
}

function getElementsByClass(searchClass,node,tag) {
    var classElements = new Array();
    if(node == null) node = document;
    if(tag == null) tag = '*';

    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");

    for(i = 0, j = 0; i < elsLen; i++) {
        if (pattern.test(els[i].className) ) {
            classElements[j] = els[i];
            j++;
        }
    }

    return classElements;
}