var moving = false;
var st = 0;
var smouse;
var swidth;
var sswidth;

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;
    }
    
    // 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;
    }
  
    // again, restrict showing white area
    if (xpos <= -elem.max_x) {
	    xpos = -elem.max_x;
    }
    if (xpos > 0) {
	    xpos = 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 scroll_slideshow() {
    var sspeed = (2 * smouse - swidth) / swidth;
    sspeed = sspeed * sspeed * sspeed;
    var slideshow_set = document.getElementById('slideshow_set');   // full set of images
    var scrollthumb = document.getElementById('scrollthumb');    // slideshow thumb
    var pos = parseInt(slideshow_set.style.left);
    var speed = Math.floor(60 - (Math.abs(sspeed * 50)));
    var add = 2;
    if (speed == 10) add = 12;
    if (speed == 11) add = 6;
    if (speed == 12) add = 3;
    if (sspeed + 1 < 1)
        pos += add;
    if (sspeed + 1 > 1)
        pos -= add;
    
    if (speed > 55) return false;
    //moveSlideshow("slideshow_set", pos, 0, 10);
    if (pos > 0)
        pos = 0;
    if (pos < -sswidth + swidth)
        pos = -sswidth + swidth;
    slideshow_set.style.left = pos + "px";
    scrollthumb.style.left = -(pos * swidth) / (sswidth) + "px";    // marginLeft volt regen
    st = setTimeout(scroll_slideshow, speed);
    return true;    
}

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("slideshow")) return false;
  	var slideshow = document.getElementById("slideshow");
  	var wrapper = document.getElementById("slideshow_wrapper");
  	wrapper.style.overflow = "hidden";
  	
	var slideshow_set = document.getElementById("slideshow_set");
	slideshow_set.style.top = 0+"px";
	slideshow_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 = slideshow_set.getElementsByTagName("li");
	slideshow_set.max_x = 0;
	//slideshow_set.max_x = (li.length-1) * 200;
	for (var i = 0; i < li.length; i++) {
	    slideshow_set.max_x += li[i].clientWidth;
	}
	slideshow_set.max_y = li.length * 330;

	// need the width of the gallery so that they do not scroll vertical
	var width = slideshow_set.max_x;
	slideshow_set.style.width = width + "px";

    try {
	    var smallthumbs = document.getElementById("fullsmallthumbs");
	    var thli = smallthumbs.getElementsByTagName("li");

	    smallthumbs.max_x = 0;
	    for (var i = 0; i < thli.length; i++) {
	        smallthumbs.max_x += thli[i].clientWidth;
	    }

	    // need the width of the gallery so that they do not scroll vertical
	    var thwidth = smallthumbs.max_x;
	    smallthumbs.style.width = thwidth + "px";
    }
    catch (c) {
    }
    
	var scrollthumb = document.getElementById('scrollthumb');       // scrollthumb
	swidth = wrapper.clientWidth;
	sswidth = parseInt(slideshow_set.style.width);
	scrollthumb.style.width = swidth * swidth / sswidth + "px";

	if (width < wrapper.clientWidth) {
	    document.getElementById('scrollbg').style.display = "none";
	    document.getElementById('scrollthumb').style.display = "none";
   	    return false;
	}
	
	// Attach mouse events
	wrapper.onmouseover = function() {
	    st = setTimeout(scroll_slideshow, 20);
	    moving = true;
	    return false;
	}
	wrapper.onmouseout = function() {
	    clearTimeout(st);
	    st = 0;
	    moving = false;
	    return false;
	}
	wrapper.onmousemove = function(e) {
	    if (!moving) return false;
	    if (!scroll) return false;
	    if (!e) var e = window.event;
	    var content = document.getElementById('content');               // content area
	    var slideshow = document.getElementById('slideshow');           // container area
	    var wrapper = document.getElementById('slideshow_wrapper');     // viewable area
	    var slideshow_set = document.getElementById('slideshow_set');   // full set of images
	    var scrollthumb = document.getElementById('scrollthumb');       // scrollthumb
	    // get position of mouse
	    var posx = e.clientX - parseInt(wrapper.offsetLeft) - parseInt(content.offsetLeft) - parseInt(slideshow.offsetLeft);
	    smouse = posx;
	    var width = this.clientWidth;
	    swidth = width;
	    sswidth = parseInt(slideshow_set.style.width);
	    scrollthumb.style.width = swidth * swidth / sswidth + "px";
	    return false;
	}
	
	slideshowdragger = new Draggable('scrollthumb', { constraint: 'horizontal', change: moved });
}	    

var currenteffect;

function moved(d) {
    var scrollbg = document.getElementById('scrollbg');             // scrollbg
    var scrollthumb = document.getElementById('scrollthumb');       // scrollthumb
    var slideshow_set = document.getElementById('slideshow_set');   // full set of images
    var slideshow = document.getElementById('slideshow');     // viewable area
	var maxleft = parseInt(scrollbg.style.width) - parseInt(scrollthumb.style.width);
    var curleft = parseInt(scrollthumb.style.left);
    if (maxleft < curleft)
        scrollthumb.style.left = maxleft.toString() + "px";
    if (0 > curleft)
        scrollthumb.style.left = "0px";
    
    curleft = parseInt(scrollthumb.style.left);

    var newpos = -(curleft/maxleft) * ( parseInt(slideshow_set.style.width) - slideshow.offsetWidth );
    
    if (currenteffect)
        currenteffect.cancel();
    currenteffect = new Effect.Move('slideshow_set', { x: newpos, mode: 'absolute', duretion: 1.0 })
    
    //document.getElementById("footer").innerHTML = scrollthumb.style.left;
}

var slideshowdragger;

function waitForImages() {
    if (undefined == loaded) {
        setTimeout(waitForImages, 100);
        return false;
    }
    if (!loaded) {
        setTimeout(waitForImages, 100);
        return false;
    }
    var imgs = document.images;
    var len = imgs.length;
    for (var i = 0; i < len; i++) {
        imgs[i].style.visibility = "visible";
    }
    prepareSlideshow();
    
    return false;
}

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

addLoadEvent(waitForImages);