document.observe("dom:loaded", function() {
    var VISIBLE_WINDOW_SIZE = 3;
    var SCROLL_SPEED = 0.3;         // in s
    var thumbnail_width = '112px';
		var thumbnail_height = '75px';
    var regular_width = '350px';
		var regular_height = '233px';
    
    var i = 0;
    var elements = new Array();
    var cur_element = 0;    // Index into elements[]. The top element in the viewable space
    var in_scroll = 0;
    var elm_width = null;

    var thumbnails_elm = $$("#thumbshow .scrolling")[0];
    var fullsized_elm = $$("#thumbshow .pic_container")[0];
    
    // Setup each of the thumbnail elements
    // remove them and store in the array.
    $$("#thumbshow .scrolling > li").each(function(e) {
        elements[i] = e;

        if (elm_width == null) elm_width = e.getWidth();
        e.absolutize();

        e.addClassName("picture_"+i);
        e.hide();
        e.remove();
        i++;
        
        var img = e.select("img")[0];
        img.setStyle({width: thumbnail_width, height: thumbnail_height});
        
        e.observe("click", function() {
            // Show the larger picture in the view
            var img = e.select("img")[0];
            showFullSized(img);
            pauseAutoScrollTimer();
        });
    });
    
    // Show the first three images
    for(i = 0; i < VISIBLE_WINDOW_SIZE; i++) {
        if (elements[i]) {
           thumbnails_elm.insert(elements[i]);
           elements[i].show();
           elements[i].setStyle({left: i*elm_width+'px'});
        }
    }
    
    // Setup the up and down arrows
    $$("#thumbshow .upbtn")[0].observe("click", function(){scrollUp(); pauseAutoScrollTimer();});
    $$("#thumbshow .downbtn")[0].observe("click", function(){scrollDown(); pauseAutoScrollTimer();});
    
    // Returns the nth element in the array.
    // It wraps around if need be.
    function getNthElement(n)
    {
        if (n < 0) n = elements.length + (n%elements.length);
        var i = (cur_element + n) % elements.length;
        return elements[i];
    }
    
    // Returns the *next* element outside the viewable space
    function getNextElement()
    {
        return getNthElement(VISIBLE_WINDOW_SIZE);
    }
    
    // Returns the *previous* element outside the viewable space
    function getPreviousElement()
    {
        return getNthElement(-1);
    }
    
    // Returns the first element in the viewable space
    function getFirstElement()
    {
        return getNthElement(0);
    }
    
    // Returns the last element in the viewable space
    function getLastElement()
    {
        var elm = getNthElement(VISIBLE_WINDOW_SIZE-1);
        return elm;
    }
        
    function scrollDown()
    {
        if (elements.length > 3) {
           if (in_scroll != 0) return;
           in_scroll = 2;
           var oldelm = getFirstElement();
           var newelm = getNextElement();

           // Insert new element at the bottom
           thumbnails_elm.insert({bottom:newelm});
           newelm.setStyle({
               display: 'block',
               left: (elm_width*VISIBLE_WINDOW_SIZE)+"px"
           })
           newelm.show();
           scrollElements(-1);
           queueForRemoval(oldelm);
        }

        // reset cur_element
        cur_element = (cur_element+1) % elements.length;
    }
    
    function scrollUp()
    {
        if (elements.length < 4) {
           return;
        }
       
        if (in_scroll != 0) return;
        in_scroll = 2;
        var oldelm = getLastElement();
        var newelm = getPreviousElement();
        // Insert new element at the bottom
        thumbnails_elm.insert({top:newelm});
        newelm.setStyle({
            display: 'block',
            left: (0-elm_width)+"px"
        })
        newelm.show();
        
        queueForRemoval(oldelm);

        // reset cur_element
        cur_element = (cur_element-1) % elements.length;
        if (cur_element < 0) cur_element = elements.length-1;
        scrollElements(1);
    }
    
    function scrollElements(direction)
    {
        var i = 0;
        for (i = 0; i < VISIBLE_WINDOW_SIZE+1; i++) {
            new Effect.Move(getNthElement(i), {duration: SCROLL_SPEED, x: (elm_width*direction)});
        }
    }
    
    function showFullSized(imgelm)
    {
        var old_img = fullsized_elm.down();
        var old_a = $$("#thumbshow > a.large_link")[0];
        if (old_a) old_a.remove();
        
        if (old_img != undefined) new Effect.Fade(old_img, {duration: SCROLL_SPEED/2, afterFinish: function() {old_img.remove()}});
        
        var new_elm = imgelm.cloneNode(false);
        var rel = new_elm.readAttribute('rel');
        if (rel != null) {
           var a = new Element("a", {href: rel});
           a.addClassName("large_link");
           a.innerHTML = "&nbsp;";
           $("thumbshow").insert({bottom: a});
           
           fullsized_elm.appendChild(new_elm);
        } else {
           fullsized_elm.insert({bottom: new_elm});
        }
        
        new_elm.setStyle({width: regular_width, height: regular_height, position: 'absolute'});
        new_elm.hide();
        new Effect.Appear(new_elm, {duration: SCROLL_SPEED/2});
    }
    
    // Removes the given element after a delay
    // allows the DOM to catch up before cleaning up
    function queueForRemoval(elm)
    {
        setTimeout(function() {
            $(elm.identify()).remove();
            in_scroll = 0;
        }, (SCROLL_SPEED*1000)+100);
    }
    
    function autoScroll()
    {
        scrollDown();
        setTimeout(function() {autoShow()}, SCROLL_SPEED*1000);
        autoscroll_timer = setTimeout(function() {autoScroll()}, 5000);
    }
    function autoShow()
    {
        showFullSized(elements[cur_element].select('img')[0]);
    }

    function pauseAutoScrollTimer()
    {
        if (autoscroll_timer) {
            clearTimeout(autoscroll_timer);
            autoscroll_timer = null
        }
    }
    autoShow();
    var autoscroll_timer = setTimeout(function() {autoScroll()}, 2000);
});