function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload();
            func();
        }
    }
}

function moveSlideshow(elementID, final_x, final_y, interval) {
    if (!document.getElementById) {
        return false;
    }

    // if the element does not exist we have nothing to do
    if (!document.getElementById(elementID)) {
        return false;
    }
    var elem = document.getElementById(elementID);

    // the slideshow events stack up and the animation is not smooth anymore
    if (elem.movement) {
        clearTimeout(elem.movement);
    }

    // current slideshow position
    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);
    if (xpos == final_x && ypos == final_y) {
        return true;
    }

    // restrict moving to white area
    if (final_x <= -elem.max_x) {
        final_x = -elem.max_x;
    }
    if (final_x > 0) {
        final_x = 0;
    }

    if (final_y <= -elem.max_y) {
        final_y = -elem.max_y;
    }
    if (final_y > 0) {
        final_y = 0;
    }

    // animation bit (taken from the book DOM Scripting by Jeremy Keith)
    if (xpos < final_x) {
        var dist = Math.ceil((final_x - xpos)/10);
        xpos = xpos + dist;
    }
    if (xpos > final_x) {
        var dist = Math.ceil((xpos - final_x)/10);
        xpos = xpos - dist;
    }

    // animation bit (taken from the book DOM Scripting by Jeremy Keith)
    if (ypos < final_y) {
        var dist = Math.ceil((final_y - ypos)/10);
        ypos = ypos + dist;
    }
    if (ypos > final_y) {
        var dist = Math.ceil((ypos - final_y)/10);
        ypos = ypos - dist;
    }

    // again, restrict showing white area
    if (xpos <= -elem.max_x) {
        xpos = -elem.max_x;
    }
    if (xpos > 0) {
        xpos = 0;
    }
    if (ypos <= -elem.max_y) {
        ypos = -elem.max_y;
    }
    if (ypos > 0) {
        ypos = 0;
    }

    // fix the elements position
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";

    // and set up the event again after an interval
    var repeat = "moveSlideshow('"+elementID+"',"+final_x+","+final_y+","+interval+")";
    elem.movement = setTimeout(repeat,interval);
}

function prepareSlideshow() {
    // first lets make sure the browser understands the DOM methods we will be using
    if (!document.getElementsByTagName) {
        return false;
    }
    if (!document.getElementById) {
        return false;
    }
    
    
    // Make sure the elements exist
    if (!document.getElementById("thumbs")) {
        return false;
    }
       
    
    var slideshow = document.getElementById("thumbs");
    var wrapper = document.getElementById("thumbs_wrapper");
    wrapper.style.overflow = "hidden";

    var thumbs_set = document.getElementById("thumbs_set");
    thumbs_set.style.top = 0+"px";
    thumbs_set.style.left = 0+"px";

    
    
    // to get the max y position of the gallery image track we need to count all
    // the li items and multiply that number with 130
    var li = thumbs_set.getElementsByTagName("li");
    thumbs_set.max_x = (li.length-1) * 200;
    thumbs_set.max_y = li.length * 15;

    

    var max_thumbs = 8;
    var wide = $("#thumbs_wrapper").attr("thumb_width");
    if (wide) {
        max_thumbs = 2 * parseInt(wide, 10);
    }

    
    
    if (li.length > max_thumbs) {
    //if (li.length > 8) {
        // prepare the navigation bit we will be using
        // left
        
        var navigation = document.createElement("ul");
        navigation.setAttribute("id", "navigation");
        var li = document.createElement("li");
        var scroll_left = document.createElement("a");
        scroll_left.setAttribute("id", "scroll_left");
        scroll_left.href = "#";
        scroll_left.innerHTML = '&#x02C4;';
        li.appendChild(scroll_left);
        navigation.appendChild(li);
        slideshow.insertBefore(navigation, wrapper);

        
        //right
        var li = document.createElement("li");
        var scroll_right = document.createElement("a");
        scroll_right.setAttribute("id", "scroll_right");
        scroll_right.href = "#";
        scroll_right.innerHTML = '&#x02C5;';
        li.appendChild(scroll_right);
        navigation.appendChild(li);
        slideshow.insertBefore(navigation, wrapper);
        
        // Attach onmouseover event for left
        scroll_left.onclick = function() {
            // get the current position of the gallery element
            var thumbs_set = document.getElementById("thumbs_set");
//            var x = parseInt(thumbs_set.style.left);
//            if (x % 210 == 0) {
//                moveSlideshow("thumbs_set", x + 210, 0, 20);
//            }
            var y = parseInt(thumbs_set.style.top, 10);
            moveSlideshow("thumbs_set", 0, y + 100, 20);
            return false;
        }
        
        // Attach onmouseover event for right
        scroll_right.onclick = function() {
            // get the current position of the gallery element
            var thumbs_set = document.getElementById("thumbs_set");
//            var x = parseInt(thumbs_set.style.left);
//            if (x % 210 == 0) {
//                moveSlideshow("thumbs_set", x - 210, 0, 20);
//            }
            var y = parseInt(thumbs_set.style.top, 10);
            moveSlideshow("thumbs_set", 0, y - 100, 20);
            return false;
        }
    }
    
    // need the width of the gallery so that they do not scroll vertical
    //    var width = li.length * 200;
    //    thumbs_set.style.width = width + "px";
    var height = li.length * 15;
    if (!isNaN(height)) {
        thumbs_set.style.height = height + "px";
    }
}
//addLoadEvent(prepareSlideshow);