var scrollPos = 0;
var imagesPerPage = 2;
var maxImages = 3;
var imgWidth = 137; /* inkl Border und Margin */
var numSteps = 10;
var scrollAnimationStep = 0;

function getMaxImages() {
    var projectImages = document.getElementsByName('projectImage');
    return projectImages.length;
}

function scrollPrevImg() {
    if (scrollPos > 0) {
        scrollAnimationStep = 0;
        scrollAnimationPrev();
    }
}

function scrollAnimationPrev() {
    var scrollTo;
    var projectImgContainer;
    var stepWidth = imgWidth / numSteps;
            
    scrollAnimationStep++;
    projectImgContainer = document.getElementById('projectImgContainer')
    scrollTo = -scrollPos * imgWidth + stepWidth * scrollAnimationStep;
    projectImgContainer.style.left = scrollTo + 'px';
    
    if (scrollAnimationStep < numSteps) {
        window.setTimeout('scrollAnimationPrev()', 10);
    } else {
        // beim letzten Aufruf muss wegen m�glicher Rundungsfehler noch die Position korrigiert werden
        projectImgContainer.style.left = -scrollPos * imgWidth + imgWidth;
        // und die Scroll-Position gesetzt werden.
        scrollPos--;
    }
}

function scrollNextImg() {
    if (scrollPos < getMaxImages() - imagesPerPage) {
        scrollAnimationStep = 0;
        scrollAnimationNext();
    }
}

function scrollAnimationNext() {
    var scrollTo;
    var projectImgContainer;
    var stepWidth = imgWidth / numSteps;
            
    scrollAnimationStep++;
    projectImgContainer = document.getElementById('projectImgContainer')
    scrollTo = -scrollPos * imgWidth - stepWidth * scrollAnimationStep;
    projectImgContainer.style.left = scrollTo + 'px';
    
    if (scrollAnimationStep < numSteps) {
        window.setTimeout('scrollAnimationNext()', 10);
    } else {
        // beim letzten Aufruf muss wegen m�glicher Rundungsfehler noch die Position korrigiert werden
        projectImgContainer.style.left = -scrollPos * imgWidth - imgWidth;
        // und die Scroll-Position gesetzt werden.
        scrollPos++;
    }
}

function showProjectImageDiv(id, imageKey, sizeType) {
    var projectOverviewDiv = document.getElementById('project' + id + 'OverviewDiv');
    var projectImageDiv = document.getElementById('project' + id + 'ImageDiv');
    var projectImage = document.getElementById('project' + id + 'LargeImage');

    projectOverviewDiv.style.display = 'none';
    projectImageDiv.style.display = 'block';
    projectImage.src = 'home.ProjectImage.html?key=' + imageKey +  '&type=' + sizeType;
    centerPopup();
}

function showProjectOverviewDiv(id) {
    var projectOverviewDiv = document.getElementById('project' + id + 'OverviewDiv');
    var projectImageDiv = document.getElementById('project' + id + 'ImageDiv');

    projectOverviewDiv.style.display = 'block';
    projectImageDiv.style.display = 'none';
    centerPopup();
}