var currentProject; // is set in next function, and used in viewportfunctions in custom.js
var count = 1 // is set in next function, and used in viewportfunctions in custom.js


window.addEvent('domready', function() {

    //create our Accordion instance
    myAccordion = new Accordion($('accordion'), 'h3.toggler', 'div.element', {
        opacity: true,
        onActive: function(toggler, element) {
            toggler.setStyles({
                color: '#5f5f5f'
            });
            currentProject = toggler.id
            // laad na 1 seconde het plaatje in
            if ((toggler.id != 'intro') && (toggler.id != 'clientlist')) {
                document.getElementById('subtitle_' + toggler.id).className = 'subtitle sel';
                document.getElementById(toggler.id + 'Img1').src = '/media/portfolio/' + toggler.id + '_1.jpg';
                toggler.setStyles({
                    fontSize: '30px'
                })
                element.setStyles({
                    marginBottom: '20px'
                });
            }
            setTimeout("showPageCurl()", 350);

        },
        onBackground: function(toggler, element) {
            hidePageCurl();
            toggler.setStyles({
                color: '#919191',
                fontSize: '20px'
            })
            element.setStyles({
                marginBottom: '0px'
            });
            // zet alle viewports op de beginstand
            if ((toggler.id != 'intro') && (toggler.id != 'clientlist')) {
                document.getElementById(toggler.id + 'Img').style.left = 0;
                document.getElementById(toggler.id + 'goLeft').style.display = 'none';
                document.getElementById(toggler.id + 'goRight').style.display = 'block';
                //document.getElementById(toggler.id + 'Img1').src = '/media/nix.gif';
                document.getElementById('subtitle_' + toggler.id).className = 'subtitle';
                //document.getElementById('bg_clientlist').style.display = 'none';
            }
            count = 1
        }
    });
});

function reposition() {
    h = viewportheight();
    document.getElementById('accordion').style.height = h - 12 + 'px';
}

function showPageCurl() {
    document.getElementById('pageCurlImg').src = '/media/pageCurl.gif';
}

function hidePageCurl() {
    document.getElementById('pageCurlImg').src = '/media/nix.gif';
}

function changeStyle(obj) {
    if (document.getElementById('subtitle_' + obj.id).className.indexOf('sel') != -1) {
        if (document.getElementById('subtitle_' + obj.id).className.indexOf('over') != -1) {
            document.getElementById('subtitle_' + obj.id).className = 'subtitle';
        } else {
            document.getElementById('subtitle_' + obj.id).className = 'subtitle sel';
        }
    } else if (document.getElementById('subtitle_' + obj.id).className.indexOf('sel') == -1) {
        if (document.getElementById('subtitle_' + obj.id).className.indexOf('over') != -1) {
            document.getElementById('subtitle_' + obj.id).className = 'subtitle';
        } else {
            document.getElementById('subtitle_' + obj.id).className = 'subtitle over';
        }
    }
}

// viewport functions

function slideRight() {
    var imgTotal;
    document.getElementById(currentProject + 'goRight').style.display = 'none';
    var currPos = parseInt(document.getElementById(currentProject + 'Img').offsetLeft);
    document.getElementById(currentProject + 'Img').style.left = document.getElementById(currentProject + 'Img').offsetLeft - 20 + 'px';
    if ((currPos * -1) < ((count * 480) - 500)) {
        setTimeout('slideRight();', 50);
        return;
    }
    var imgTotal = (document.getElementById(currentProject + 'Count').innerHTML); //getattribute('name').
    if (count != imgTotal) {
        document.getElementById(currentProject + 'goRight').style.display = 'block';
    }
}

function slideLeft() {
    document.getElementById(currentProject + 'goLeft').style.display = 'none';
    var currPos = parseInt(document.getElementById(currentProject + 'Img').offsetLeft);
    document.getElementById(currentProject + 'Img').style.left = document.getElementById(currentProject + 'Img').offsetLeft + 20 + 'px';
    if (currPos < ((count * 480) - 460) * -1) {
        setTimeout('slideLeft();', 50);
        return;
    }
    if (count != 1) {
        document.getElementById(currentProject + 'goLeft').style.display = 'block';
    }
}

var currentProject;
var count = 1;

function changeProjectImg(id, dir) {
    //document.getElementById('test').innerHTML = currentProject;
    if (dir == 'left') {
        document.getElementById(id + 'goRight').style.display = 'block';
        count = count - 1;
        //laad het volgende plaatje
        document.getElementById(id + 'Img' + count).src = '/media/portfolio/' + id + '_' + count + '.jpg';
        // schuif de rij plaatjes op
        slideLeft();
    } else if (dir == 'right') {
        document.getElementById(id + 'goLeft').style.display = 'block';
        count = count + 1;
        //laad het volgende plaatje
        document.getElementById(id + 'Img' + count).src = '/media/portfolio/' + id + '_' + count + '.jpg';
        // schuif de rij plaatjes op

        slideRight();
    }

}

function showAccordion() {
    setTimeout("document.getElementById('accordion').style.visibility = 'visible';", 100);
    //setTimeOut('drawAccordeon()',100);
    if (nr != '') {
        setTimeout("myAccordion.display(nr)", 1);
    } else {
        setTimeout("myAccordion.display(0)", 1);
    }
}