/*a few comments on the variables, by yiangos:
bxs:the position of the left side of the visible part of the thumbstrip ul element, 
    relative to the left of the window
bxe:marks the end of the left "active" area of the thumbstrip. If the mouse is within the area marked
    by bxs,bxe,ys and ye, then the thumbstrip moves right (revealing thumbs hidden on the left)
fxs:marks the start of the right "active" area of the thumbstrip. If the mouse is within the area marked 
    by fxs,fxe ys and ye, then the thumbstrip moves left (revealing thumbs hidden on the right).
fxe:the position of the right side of the visible part of the ul thumbstrip element,
    relative to the left of the window.
ys:the position of the top side of the thumbstrip ul element, relative to the top of the window.
ye:ys+the height of the ul, i.e. the position of the bottom side of the thumbstrip ul element,
     relative to the top of the window.
ta:the ul element with all the thumbnails
ia:the element holding the main image
ie: true if the browser is internet explorer, false otherwise
st: timer interval for scrolling (in milliseconds)
ss: Scrolling interval. If the remaining hidden thumbstrip area is saller than this, 
    then stop scrolling. Else, scroll by this amount.
ft:10
fs:3
xp: mouse position x within the page
yp: mouse position y within the page
ci:
t:array/list of li elements holding all the thumbnails
tar:array/list of all the images to load as main images.
tarl:length (number of items) of the tar list.
*/
var slideShow = function() {
    var bxs, bxe, fxs, fxe, ys, ye, ta, ia, ie, st, ss, ft, fs, xp, yp, ci, t, tar, tarl;
    ta = document.getElementById(thumbid); ia = document.getElementById(imgid);
    t = ta.getElementsByTagName('li'); ie = document.all ? true : false;
    st = 50; ss = 3; ft = 10; fs = 3; xp, yp = 0;
    return {
        //Gallery initialization
        init: function() {
            document.onmousemove = this.pos; window.onresize = function() { setTimeout("slideShow.lim()", 500) };
            ys = this.toppos(ta); ye = ys + ta.offsetHeight;
            len = t.length; tar = [];
            for (i = 0; i < len; i++) {
                var id = t[i].value; tar[i] = id;
                t[i].onclick = new Function("slideShow.getimg('" + id + "')");
                if (i == 0) { this.getimg(id) }
            }
            tarl = tar.length;
        },
        //Scroll the thumbnail strip smoothly
        scrl: function(d) {
            clearInterval(ta.timer);
            var l = (d == -1) ? 0 : (t[tarl - 1].offsetLeft - (ta.parentNode.offsetWidth - t[tarl - 1].offsetWidth) + 10)
            ta.timer = setInterval(function() { slideShow.mv(d, l) }, st);
        },
        //Move the thumbnail strip left or right
        mv: function(d, l) {
            ta.style.left = ta.style.left || '0px';
            var left = ta.style.left.replace('px', '');
            if (d == 1) {
                if (l > 0) {
                    if (l - Math.abs(left) <= ss) {
                        this.cncl(ta.id); ta.style.left = '-' + l + 'px';
                    } else { ta.style.left = parseInt(left) - ss + 'px'; }
                }
            } else {
                if (Math.abs(left) - l <= ss) {
                    this.cncl(ta.id); ta.style.left = l + 'px';
                } else { ta.style.left = parseInt(left) + ss + 'px' }
            }
        },
        //clear the timer for scrolling the thumbstrip
        cncl: function() { clearTimeout(ta.timer) },
        //load a main image (either by click or by timed event)
        getimg: function(id) {
            getClientData(id, curlang);
            if (auto) { clearTimeout(ia.timer) }
            if (ci != null) {
                var ts, tsl, x;
                ts = ia.getElementsByTagName('img'); tsl = ts.length; x = 0;
                for (x; x < tsl; x++) {
                    if (ci.id != id) { var o = ts[x]; clearInterval(o.timer); o.timer = setInterval(function() { slideShow.fdout(o) }, fs) }
                }
            }
            if (!document.getElementById(id)) {
                var i = document.createElement('img');
                ia.appendChild(i);
                i.id = id; i.av = 0; i.style.opacity = 0;
                i.style.filter = 'alpha(opacity=0)';
                i.src = ImageArray[id];
            } else {
                i = document.getElementById(id); clearInterval(i.timer);
            }
            i.timer = setInterval(function() { slideShow.fdin(i) }, fs);
        },
        //Load next/previous main image
        nav: function(d) {
            var c = 0;
            for (key in tar) { if (tar[key] == ci.id) { c = key } }
            if (tar[parseInt(c) + d]) {
                this.getimg(tar[parseInt(c) + d]);
            } else {
                if (d == 1) {
                    this.getimg(tar[0]);
                } else { this.getimg(tar[tarl - 1]) }
            }
        },
        //Initiate auto slideshow
        auto: function() { ia.timer = setInterval(function() { slideShow.nav(1) }, autodelay * 1000) },
        //Fade in for a new main image
        fdin: function(i) {
            if (i.complete) { i.av = i.av + fs; i.style.opacity = i.av / 100; i.style.filter = 'alpha(opacity=' + i.av + ')' }
            if (i.av >= 100) { if (auto) { this.auto() }; clearInterval(i.timer); ci = i }
        },
        //Fade out for an old main image
        fdout: function(i) {
            i.av = i.av - fs; i.style.opacity = i.av / 100;
            i.style.filter = 'alpha(opacity=' + i.av + ')';
            if (i.av <= 0) { clearInterval(i.timer); if (i.parentNode) { i.parentNode.removeChild(i) } }
        },
        //Find the active areas of the thumbstrip for scrolling when mouseover.
        lim: function() {
            var taw, taa, len; taw = ta.parentNode.offsetWidth; taa = taw / 18;
            bxs = slideShow.leftpos(ta); bxe = bxs + taa; fxe = bxs + taw; fxs = fxe - taa;
        },
        //Find position of the mouse and scroll the thumbstrip if in an active area.
        pos: function(e) {
            xp = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX;
            yp = ie ? event.clientY + document.documentElement.scrollTop : e.pageY;
            if (xp > bxs && xp < bxe && yp > ys && yp < ye) {
                slideShow.scrl(-1);
            } else if (xp > fxs && xp < fxe && yp > ys && yp < ye) {
                slideShow.scrl(1);
            } else { slideShow.cncl() }
        },
        //Find left position of an element relative to window left
        leftpos: function(t) {
            var l = 0;
            if (t.offsetParent) {
                while (1) { l += t.offsetLeft; if (!t.offsetParent) { break }; t = t.offsetParent }
            } else if (t.x) { l += t.x }
            return l;
        },
        //Find top position of an element relative to window top
        toppos: function(t) {
            var p = 0;
            if (t.offsetParent) {
                while (1) { p += t.offsetTop; if (!t.offsetParent) { break }; t = t.offsetParent }
            } else if (t.y) { p += t.y }
            return p;
        }
    };
} ();

//Moz workaround. Only IE recognizes the syntax document.body.onload=function(){}
if (document.all) {
    document.body.onload = function() { slideShow.init(); slideShow.lim(); }
} else {
    slideShow.init(); slideShow.lim();
}