/*  Element functions borrowed and modified from http://www.garyharan.com/index.php/2007/11/26/how-to-unobtrusively-scroll-a-div-with-prototype-scriptaculous/ */

Element._returnOffset = function(l, t) {
  var result = [l, t];
  result.left = l;
  result.top = t;
  return result;
};

Element.addMethods({
  scrollTo: function(element, left, top){
    var element = $(element);
    if (arguments.length == 1){
      var pos = element.cumulativeOffset();
      window.scrollTo(pos[0], pos[1]);
    } else {
      element.scrollLeft = left;
      element.scrollTop  = top;
      
    }
    return element;
  }
});

Effect.Scroll = Class.create();
Object.extend(Object.extend(Effect.Scroll.prototype, Effect.Base.prototype), {
  initialize: function(element) {
    this.element = $(element);
    if(!this.element) throw(Effect._elementDoesNotExistError);
    this.start(Object.extend({x: 0, y: 0}, arguments[1] || {}));
  },
  setup: function() {
    var scrollOffsets = (this.element == window) 
                ? document.viewport.getScrollOffsets() 
                : Element._returnOffset(this.element.scrollLeft, this.element.scrollTop) ;
    this.originalScrollLeft = scrollOffsets.left;
    this.originalScrollTop  = scrollOffsets.top;
  },
  update: function(pos) {
    this.element.scrollTo(Math.round(this.options.x * pos + this.originalScrollLeft), Math.round(this.options.y * pos + this.originalScrollTop));
  },
  finish: function() {
        finishedScrolling(this.element);
  }
});

var scrolling = 0;
var currentElement = null;
var currentElementId = 0; //is 1 , not 0 as first element is empty span to ensure middle element is selected
var replaceElement = null;

function finishedScrolling ( element )
{
    // finished scrolling, display current image
    scrolling = 0;
    
    var elements = element.getElementsByTagName("img");
    
    // find currently selected item
    currentElement = elements[currentElementId];
    
    if ( currentElement )
    {
        replaceElement.src = currentElement.src.replace('/thumbs/', '/medium/');
    }
}

function scrollScrollerLeft ( elementName )
{
    // prevent user front trying to scroll in two directions at once!
    if  ( scrolling == 0 )
    {
        var elements = $(elementName).getElementsByTagName("span");
        
        if ( elements.length > 1 ) {
            
            if ( $(elementName).scrollLeft > 0 )
            {
                scrolling = 1;
                currentElementId-=1;
                var event = new Effect.Scroll(elementName, { x: -(elements[0].clientWidth), duration: 1 });
            }
            
        }
    }
    
}

function scrollScrollerRight ( elementName )
{   
    // prevent user front trying to scroll in two directions at once!
    if  ( scrolling == 0 )
    {
        var elements = $(elementName).getElementsByTagName("span");
        
        var elementcount = ((elements.length-1))-1;
        if ( elements.length > 1 ) {
            var elementsActualWidth = (elementcount) * elements[0].clientWidth;
            
            if ( ( $(elementName).scrollLeft ) < elementsActualWidth )
            {
                scrolling = 1;
                currentElementId+=1;
                var event = new Effect.Scroll(elementName, { x: elements[0].clientWidth, duration: 1 });
            }
            
        }
    }
    
}

function initScroller ( elementName, replaceElementId ) 
{
    Event.observe(window, 'load', function() {
    
        var elements = $(elementName).getElementsByTagName("span");
        currentElementId = 0;
        replaceElement = $(replaceElementId);
        
        if ( elements.length > 1 ) {
            scrolling = 1;
            
                var scrollAmount = ( -($(elementName).scrollLeft) ) - (elements[0].clientWidth);
                var event = new Effect.Scroll(elementName, { x: ( scrollAmount ), duration: 0 });
        }
    });
}