/*
**
** Last modified: 24/10/2007
** Author: Nico Degraef
** Instructions: Due to an IE bug, you have to set the top margin manually for IE (marked by //**)
**
*/

var state = 0;
var interval;
var handled;
var timeout;
var scrollamount=10; //amount of pixels an image is moved
var scrollinterval=50; //milliseconds between scrolls, lower is faster
var scrollpauze=3000; //milliseconds between pause and restart
var gallery;
var gallerypics;
function StartSlideShow()
{
    gallery = id("gallery");
    gallerypics = id("gallerypictures");
    var marginGallery;
    if (getStyle(gallery, "margin-top"))
        marginGallery = getStyle(gallery, "margin-top");
    else{ //IE stijl????
        marginGallery = "401"; //getStyle(gallery, "marginTop"); //**
    }
    var elem = tag("a", gallery);
    for(var i=0;i<elem.length;i++)
    {
        if (i==0)
        {
            setX(elem[i],0);
        }
        else
        {
            var newWidth = 0;
            for(var j=i-1;j>=0;j--)
            {
                newWidth = newWidth + fullWidth(elem[j]);
            }
            setX(elem[i],parseInt(newWidth));
        }
        elem[i].style.display = "block";
        setY(elem[i], parseInt(pageY(gallery)-marginGallery));
    }
    interval = setInterval("StartShow()", scrollinterval);
}
function RestartShow(){clearInterval(interval); clearTimeout(timeout); interval = setInterval("StartShow()",scrollinterval); }
function StartShow()
{
    var elem = tag("a", gallery);
    if(state == 0)
    {
        for(var i=0;i<elem.length;i++)
        {
            var cur = elem[i];
            cur.style.left = (posX(cur) - scrollamount) + "px";
            var centerViewport = parseFloat(fullWidth(gallerypics)/2);
            var posRightCur = parseFloat(posX(cur) + fullWidth(cur));
            var posMidCur = parseFloat(posX(cur) + parseFloat(fullWidth(cur)/2));
            if( (parseFloat(posX(cur)-scrollamount)) < (centerViewport - parseFloat(fullWidth(cur)/2)) && (posRightCur>centerViewport) && (handled != i) )
            {
                clearInterval(interval);
                timeout = setTimeout(RestartShow,scrollpauze);
                handled = i;
            }
            if( (parseInt(posX(cur)+fullWidth(cur)) < 0) )
            {
                if (i == 0)
                {
                    setX(cur,parseInt(posX(elem[elem.length-1])+fullWidth(elem[elem.length-1])));
                }
                else
                {
                    setX(cur,parseInt(posX(elem[i-1])+fullWidth(elem[i-1])));
                }
            }
        }
    }
    else
    {
        for(var i=elem.length-1;i>=0;i--)
        {
            var cur = elem[i];
            
            cur.style.left = (posX(cur) + scrollamount) + "px";
            var centerViewport = parseFloat(fullWidth(gallerypics)/2);
            var posRightCur = parseFloat(posX(cur) + fullWidth(cur));
            var posMidCur = parseFloat(posX(cur) + parseFloat(fullWidth(cur)/2));
            if( (posRightCur) > (centerViewport + parseFloat(fullWidth(cur)/2)) && (posX(cur)<centerViewport) && (handled != i) )
            {
                clearInterval(interval);
                timeout = setTimeout(RestartShow,scrollpauze);
                handled = i;
            }
            if(parseInt(posX(cur)) > fullWidth(gallerypics))
            {
                if (i == elem.length-1)
                {
                    setX(cur,parseInt(posX(elem[0])-fullWidth(cur)));
                }
                else
                {
                    setX(cur,parseInt(posX(elem[i+1])-fullWidth(cur)));
                }
            }
        }
    }
}
function ScrollLeft() { state=1; handled=-1; MoveClippedImages(state); RestartShow(); }
function ScrollRight() { state=0; handled=-1; MoveClippedImages(state); RestartShow(); }
function MoveClippedImages(newState)
{
    var elem = tag("a", gallery);
    if(newState == 1)
    {    
        for(var i=elem.length-1; i>=0;i--)
        {
            var cur = elem[i];
            if(posX(cur)>fullWidth(gallerypics))
            {
                if (i == elem.length-1)
                {
                    setX(cur,parseInt(posX(elem[0])-fullWidth(cur)));
                }
                else
                {
                    setX(cur,parseInt(posX(elem[i+1])-fullWidth(cur)));
                }
            }
        }
    }
    else
    {
        for(var i=0; i<elem.length;i++)
        {
            var cur = elem[i];
            if( (parseInt(posX(cur)+fullWidth(cur)) < 0) )
            {
                if (i == 0)
                {
                    setX(cur,parseInt(posX(elem[elem.length-1])+fullWidth(elem[elem.length-1])));
                }
                else
                {
                    setX(cur,parseInt(posX(elem[i-1])+fullWidth(elem[i-1])));
                }
            }
        }
    }
}
function PauseSlideShow()
{
    clearInterval(interval); clearTimeout(timeout);
}
function IncreaseInterval(){ if(scrollamount < 20) scrollamount = scrollamount + 1; }
function DecreaseInterval(){ if(scrollamount > 0) scrollamount = scrollamount -1; }
function id(name){ return document.getElementById(name); }
function tag(name, elem){ return (elem || document).getElementsByTagName(name); }
function getStyle(elem, name)
{
    if(document.defaultView && document.defaultView.getComputedStyle)
    {
        name = name.replace(/([A-Z])/g,"-$1");
        name = name.toLowerCase();
        
        var s = document.defaultView.getComputedStyle(elem,"");
        return s && s.getPropertyValue(name);
    }
    else if(elem.style[name])
        return elem.style[name];
    else if(elem.currentStyle)
    {
		return elem.currentStyle[name];
	}
    else
    {
        return "";
    }
}
/*function getStyle(el, style) {
   if(!document.getElementById) return;
   
     var value = el.style[toCamelCase(style)];
   
    if(!value)
        if(document.defaultView)
            value = document.defaultView.
                 getComputedStyle(el, "").getPropertyValue(style);
       
        else if(el.currentStyle)
            value = el.currentStyle[toCamelCase(style)];
     
     return value;
}*/

/** toCamelCase(input)
 * Converts string input to a camel cased version of itself.
 * For example:
 * toCamelCase("z-index"); // returns zIndex
 * toCamelCase("border-bottom-style"); // returns borderBottomStyle.
 */
function toCamelCase(s) {
	for(var exp = toCamelCase.exp; 
		exp.test(s); s = s.replace(exp, RegExp.$1.toUpperCase()) );
	return s;
}
toCamelCase.exp = /-([a-z])/;
function posX(elem){ return parseInt(getStyle(elem, "left")); }
function posY(elem){ return parseInt(getStyle(elem, "top")); }
function setX(elem, pos){ elem.style.left = pos + "px"; }
function setY(elem, pos){ elem.style.top = pos + "px"; }
function addX(elem, pos){ setX(posX(elem) + pos); }
function addY(elem,pos){ setY(posY(elem) + pos); }
function getWidth(elem){ return parseInt(getStyle(elem, 'width')); }
function fullWidth(elem){ if(getStyle(elem, 'display') != 'none') return elem.offsetWidth || getWidth(elem); var w = elem.clientWidth || getWidth(elem); return w; }
function pageX(elem){ return elem.offsetParent ? elem.offsetLeft + pageX(elem.offsetParent) : elem.offsetLeft; }
function pageY(elem){ return elem.offsetParent ? elem.offsetTop + pageY(elem.offsetParent) : elem.offsetTop; }