/*  Prototype-UI, version trunk
 *
 *  Prototype-UI is freely distributable under the terms of an MIT-style license.
 *  For details, see the PrototypeUI web site: http://www.prototype-ui.com/
 *
 *--------------------------------------------------------------------------*/

if(typeof Prototype == 'undefined' || !Prototype.Version.match("1.6"))
  throw("Prototype-UI library require Prototype library >= 1.6.0");

/*
  Authors:
    - Sébastien Gruhier, <http://www.xilinus.com>
    - Samuel Lebeau, <http://gotfresh.info>
    - Thijs Wijnmaalen, <http://www.iwink.nl>
*/

var UI = {
  Abstract: { },
  Ajax: { }
};
Object.extend(Class.Methods, {
  extend: Object.extend.methodize(),

  addMethods: Class.Methods.addMethods.wrap(function(proceed, source) {
    // ensure we are not trying to add null or undefined
    if (!source) return this;

    // no callback, vanilla way
    if (!source.hasOwnProperty('methodsAdded'))
      return proceed(source);

    var callback = source.methodsAdded;
    delete source.methodsAdded;
    proceed(source);
    callback.call(source, this);
    source.methodsAdded = callback;

    return this;
  }),

  addMethod: function(name, lambda) {
    var methods = {};
    methods[name] = lambda;
    return this.addMethods(methods);
  },

  method: function(name) {
    return this.prototype[name].valueOf();
  },

  classMethod: function() {
    $A(arguments).flatten().each(function(method) {
      this[method] = (function() {
        return this[method].apply(this, arguments);
      }).bind(this.prototype);
    }, this);
    return this;
  },

  // prevent any call to this method
  undefMethod: function(name) {
    this.prototype[name] = undefined;
    return this;
  },

  // remove the class' own implementation of this method
  removeMethod: function(name) {
    delete this.prototype[name];
    return this;
  },

  aliasMethod: function(newName, name) {
    this.prototype[newName] = this.prototype[name];
    return this;
  },

  aliasMethodChain: function(target, feature) {
    feature = feature.camelcase();

    this.aliasMethod(target+"Without"+feature, target);
    this.aliasMethod(target, target+"With"+feature);

    return this;
  }
});

Object.extend(Number.prototype, {
  // Snap a number to a grid
  snap: function(round) {
    return parseInt(round == 1 ? this : (this / round).floor() * round);
  }
});

Object.extend(String.prototype, {
  camelcase: function() {
    var string = this.dasherize().camelize();
    return string.charAt(0).toUpperCase() + string.slice(1);
  },

  makeElement: function() {
    var wrapper = new Element('div'); wrapper.innerHTML = this;
    return wrapper.down();
  }
});

Object.extend(Array.prototype, {
  empty: function() {
    return !this.length;
  },

  extractOptions: function() {
    return this.last().constructor === Object ? this.pop() : { };
  },

  removeAt: function(index) {
    var object = this[index];
    this.splice(index, 1);
    return object;
  },

  remove: function(object) {
    var index;
    while ((index = this.indexOf(object)) != -1)
      this.removeAt(index);
    return object;
  },

  insert: function(index) {
    var args = $A(arguments);
    args.shift();
    this.splice.apply(this, [ index, 0 ].concat(args));
    return this;
  }
});

Element.addMethods({
  getScrollDimensions: function(element) {
    return {
      width:  element.scrollWidth,
      height: element.scrollHeight
    }
  },

  getScrollOffset: function(element) {
    return Element._returnOffset(element.scrollLeft, element.scrollTop);
  },

  setScrollOffset: function(element, offset) {
    element = $(element);
    if (arguments.length == 3)
      offset = { left: offset, top: arguments[2] };
    element.scrollLeft = offset.left;
    element.scrollTop  = offset.top;
    return element;
  },

  // returns "clean" numerical style (without "px") or null if style can not be resolved
  // or is not numeric
  getNumStyle: function(element, style) {
    var value = parseFloat($(element).getStyle(style));
    return isNaN(value) ? null : value;
  },

  // by Tobie Langel (http://tobielangel.com/2007/5/22/prototype-quick-tip)
  appendText: function(element, text) {
    element = $(element);
    text = String.interpret(text);
    element.appendChild(document.createTextNode(text));
    return element;
  }
});

document.whenReady = function(callback) {
  if (document.loaded)
    callback.call(document);
  else
    document.observe('dom:loaded', callback);
};

Object.extend(document.viewport, {
  // Alias this method for consistency
  getScrollOffset: document.viewport.getScrollOffsets,

  setScrollOffset: function(offset) {
    Element.setScrollOffset(Prototype.Browser.WebKit ? document.body : document.documentElement, offset);
  },

  getScrollDimensions: function() {
    return Element.getScrollDimensions(Prototype.Browser.WebKit ? document.body : document.documentElement);
  }
});

(function() {
  UI.Options = {
    methodsAdded: function(klass) {
      klass.classMethod($w(' setOptions allOptions optionsGetter optionsSetter optionsAccessor '));
    },

    setOptions: function(options) {
      if (!this.hasOwnProperty('options'))
        this.options = this.allOptions();

      this.options = Object.extend(this.options, options || {});
    },

    allOptions: function() {
      var superclass = this.constructor.superclass, ancestor = superclass && superclass.prototype;
      return (ancestor && ancestor.allOptions) ?
          Object.extend(ancestor.allOptions(), this.options) :
          Object.clone(this.options);
    },

    optionsGetter: function() {
      addOptionsAccessors(this, arguments, false);
    },

    optionsSetter: function() {
      addOptionsAccessors(this, arguments, true);
    },

    optionsAccessor: function() {
      this.optionsGetter.apply(this, arguments);
      this.optionsSetter.apply(this, arguments);
    }
  };

  // Internal
  function addOptionsAccessors(receiver, names, areSetters) {
    names = $A(names).flatten();

    if (names.empty())
      names = Object.keys(receiver.allOptions());

    names.each(function(name) {
      var accessorName = (areSetters ? 'set' : 'get') + name.camelcase();

      receiver[accessorName] = receiver[accessorName] || (areSetters ?
        // Setter
        function(value) { return this.options[name] = value } :
        // Getter
        function()      { return this.options[name]         });
    });
  }
})();

UI.Carousel = Class.create(UI.Options, {
  // Group: Options
  options: {
    direction               : "horizontal",
    previousButton          : ".previous_button",
    nextButton              : ".next_button",
    container               : ".container",
    scrollInc               : "auto",
    disabledButtonSuffix    : '_disabled',
    overButtonSuffix        : '_over',
    clickSelector           : 'a'
  },

  initialize: function(element, options) {
    // console.log('initialize()');
	this.setOptions(options);
    this.element = $(element);
    this.zapperid = this.element.getAttribute('ovm:id');
    
    //	Modus: default, uitgelicht , categorie
    this.modus = this.element.getAttribute('ovm:modus');
    
    if (this.element.select('a[ovm:veilingid]').first())
    	this.veilingid = this.element.select('a[ovm:veilingid]').first().getAttribute('ovm:veilingid');
    else
    	this.veilingid = 0;
    
    this.countdown = new Countdown(); // 1 object instantie per veiling
    this.id = this.element.id;
    this.container   = this.element.down(this.options.container).firstDescendant();
    this.elements    = this.container.select('div.carouselItem');
    this.previousButton = this.options.previousButton == false ? null : this.element.down(this.options.previousButton);
    this.nextButton = this.options.nextButton == false ? null : this.element.down(this.options.nextButton);
    this.clickSelector = this.options.clickSelector == false ? this.clickSelector : this.options.clickSelector;

    this.posAttribute = (this.options.direction == "horizontal" ? "left" : "top");
    this.dimAttribute = (this.options.direction == "horizontal" ? "width" : "height");

    this.elementSize = this.computeElementSize();

    
    this.lowestVisible  = parseInt(this.element.readAttribute('ovm:startoffset'))-1;// index 
    this.highestVisible = parseInt(this.lowestVisible + this.currentSize() / this.elementSize) -1; // index

	// console.log('initialize()::lowestVisible: ' + this.lowestVisible + ' highestVisible: ' + this.highestVisible);
    
    var scrollInc = this.options.scrollInc;
    if (scrollInc == "auto")
      scrollInc = Math.floor(this.highestVisible);
    [ this.previousButton, this.nextButton ].each(function(button) {
      if (!button) return;
      var className = (button == this.nextButton ? "next_button" : "previous_button") + this.options.overButtonSuffix;
      button.clickHandler = this.scroll.bind(this, (button == this.nextButton ? -1 : 1) * scrollInc * this.elementSize);
      button.observe("click", button.clickHandler)
            .observe("mouseover", function() {button.addClassName(className)}.bind(this))
            .observe("mouseout",  function() {button.removeClassName(className)}.bind(this));
    }, this);
    this.updateButtons();
    this.observeKavels();
    
    //	Initialize: find the index of the active element and scroll to there:
    for( i = 0 ; i < this.elements.size() ; i++ ) {
    	if ( this.elements[i].down('a').hasClassName( 'active' ) && i > this.highestVisible ) {
    		this.scrollTo( i );
    	}
    }
    
  },

  destroy: function($super) {
    [ this.previousButton, this.nextButton ].each(function(button) {
      if (!button) return;
        button.stopObserving("click", button.clickHandler);
    }, this);
	  this.element.remove();
	  this.fire('destroyed');
  },

  fire: function(eventName, memo) {
    memo = memo || { };
    memo.carousel = this;
    return this.element.fire('carousel:' + eventName, memo);
  },


  observe: function(eventName, handler) {
    this.element.observe('carousel:' + eventName, handler.bind(this));
    return this;
  },

  stopObserving: function(eventName, handler) {
    this.element.stopObserving('carousel:' + eventName, handler);
    return this;
  },

  checkScroll: function(position, updatePosition) {
    // console.log('checkScroll() position:' + position);
    // console.log('checkScroll() updatePosition:' + updatePosition);

    if (position > 0)
      position = 0;
    else {
      var limit = this.elements.last().positionedOffset()[this.posAttribute] + this.elementSize;
      var carouselSize = this.currentSize();

      if (position + limit < carouselSize)
        position += carouselSize - (position + limit);
      position = Math.min(position, 0);
    }
    if (updatePosition)
      this.container.style[this.posAttribute] = position + "px";

    // console.log('checkScroll() return position:' + position);
    
    return position;
  },

  scroll: function(deltaPixel) {
    // console.log('scroll() deltaPixel:' + deltaPixel);
    /*
     * dp > 0 -> terugscrollem
     * dp < 0 -> vooruitscrollen
     */
    if (this.animating)
    return this;

    // Compute new position
    var position =  this.currentPosition() + deltaPixel;

    // console.log('scroll() position:' + position);
    
    // Check bounds
    position = this.checkScroll(position, false);

    // Compute shift to apply
    deltaPixel = position - this.currentPosition();
    if (deltaPixel != 0) {
      this.animating = true;
      this.fire("scroll:started");

      var that = this;
      // Move effects
      this.container.morph("opacity:0.5", {duration: 0.2, afterFinish: function() {
        that.container.morph(that.posAttribute + ": " + position + "px", {
          duration: 0.4,
          delay: 0.2,
          afterFinish: function() {
            that.container.morph("opacity:1", {
              duration: 0.2,
              afterFinish: function() {
                that.animating = false;
                that.updateButtons()
                  .fire("scroll:ended", { shift: deltaPixel / that.currentSize() });
              }
            });
          }
        });
      }});
    }
    return this;
  },

  /*
    Method: scrollTo
      Scrolls carousel, so that element with specified index is the left-most.
      This method is convenient when using carousel in a tabbed navigation.
      Clicking on first tab should scroll first container into view, clicking on a fifth - fifth one, etc.
      Indexing starts with 0.

    Parameters:
      Index of an element which will be a left-most visible in the carousel

    Returns:
      this
  */
  scrollTo: function(index) {
  
	// console.log('scrollTo() index:' + index);
	  
	if 	(this.animating || index < 0 || index > this.elements.length || index == this.currentIndex() || isNaN(parseInt(index)))
      return this;
    return this.scroll((this.currentIndex() - index) * this.elementSize);
  },

  updateButtons: function() {
	  this.updatePreviousButton();
    this.updateNextButton();
    return this;
  },

  updatePreviousButton: function() {
    var position = this.currentPosition();
    var previousClassName = "previous_button" + this.options.disabledButtonSuffix;

    if (this.previousButton.hasClassName(previousClassName) && position != 0) {
      this.previousButton.removeClassName(previousClassName);
      this.fire('previousButton:enabled');
    }
    if (!this.previousButton.hasClassName(previousClassName) && position == 0) {
	    this.previousButton.addClassName(previousClassName);
      this.fire('previousButton:disabled');
    }
  },

  updateNextButton: function() {
    var lastPosition = this.currentLastPosition();
    var size = this.currentSize();
    var nextClassName = "next_button" + this.options.disabledButtonSuffix;

    if (this.nextButton.hasClassName(nextClassName) && lastPosition != size) {
      this.nextButton.removeClassName(nextClassName);
      this.fire('nextButton:enabled');
    }
    if (!this.nextButton.hasClassName(nextClassName) && lastPosition == size) {
	    this.nextButton.addClassName(nextClassName);
      this.fire('nextButton:disabled');
    }
  },

  observeKavels : function () {
    this.element.select(this.clickSelector).each (function (element) {
      if (!element.hasAttribute('ovm:observed')) {
        element.observe("click", this.clickItem.bindAsEventListener(this), true).writeAttribute('ovm:observed', 1);
      }
    }.bind(this));
  },

  clickItem: function (e) {
    Event.stop(e);

    // console.log('clickItem()');
    
    // get anchor element
    
    var element = Event.element(e);
    
    if (!element.getAttribute('ovm:veilingid'))
    	element = Event.element(e).up('a');
    
    if (!element.getAttribute('ovm:veilingid'))
    	return false;
    
    if (element.hasClassName('active')) return;

    // switch 'active' class from current item to clicked one
    [this.element.select('a.active').first(), element].each(function (elem) {
      if (elem)
		elem.toggleClassName('active');
    });

    // request kavel via ajax
    var veilingid 	=  element.getAttribute('ovm:veilingid');
    var volgnummer 	= element.getAttribute('ovm:volgnummer');
    var titel		= element.getAttribute('ovm:titel');
    //var uri = '/nl/nuindeveiling/index/' + veilingid + '/' + volgnummer;
    var uri = '/nl/veiling/index/' + veilingid + '/' + volgnummer;

    new Ajax.Request (uri, {
      method : 'get',
      parameters : { kz : 1 },
      onSuccess : function (transport) {
        $('kavelContainerElement' + this.zapperid).innerHTML = transport.responseText;
        this.countdown.observeKavels();
        initLightbox();
        
        //	Titels aanpassen bij zappen naar nieuwe kavel
        $$('.zapper-changeable-title').each( function( element ) {
			element.innerHTML	= titel;
		});
        
      }.bind(this),
      onFailure : function () {
        throw('Kavel ' + volgnummer + ' could not be loaded');
      }
    });

  },

  computeElementSize: function() {
    return this.elements.first().getDimensions()[this.dimAttribute];
  },

  currentIndex: function() {
    return - this.currentPosition() / this.elementSize;
  },

  currentLastPosition: function() {
    if (this.container.childElements().empty())
      return 0;
    return this.currentPosition() +
           this.elements.last().positionedOffset()[this.posAttribute] +
           this.elementSize;
  },

  currentPosition: function() {
    return this.container.getNumStyle(this.posAttribute);
  },

  currentSize: function() {
    return this.container.parentNode.getDimensions()[this.dimAttribute];
  }

});

UI.Ajax.Carousel = Class.create(UI.Carousel, {

  options: {
    elementSize : -1,
    url         : null
  },

  initialize: function($super, element, options) {
    if (!options.url)
      throw("url option is required for UI.Ajax.Carousel");
    if (!options.elementSize)
      throw("elementSize option is required for UI.Ajax.Carousel");

    $super(element, options);

    this.beginIndex = 0;
    this.endIndex   = parseInt(this.element.readAttribute('ovm:startoffset')) + this.elements.length - 1;

    // console.log('UI.Ajax.Carousel.initialize() beginIndex:' + this.beginIndex + ' endIndex:' + this.endIndex);

    // Cache handlers
    this.updateHandler = this.update.bind(this);
    this.updateAndScrollHandler = function(nbElements, transport) {
      this.update(transport);
      this.scroll(nbElements);
    }.bind(this);

  },

  runRequest: function(options) {
    this.requestRunning = true;
    new Ajax.Request(this.options.url, Object.extend({method: "GET"}, options));
    this.fire("request:started");
    return this;
  },

  scroll: function($super, deltaPixel) {
    if (this.animating || this.requestRunning)
      return this;

    // too few items, no need to scroll
    if (this.endIndex < this.highestVisible && this.beginIndex > this.lowestVisible) {
    	// console.log('UI.Ajax.Carousel.scroll(): too few items, no need to scroll');
      return this;
    }

    var nbElements = (-deltaPixel) / this.elementSize;
    // console.log('scroll(): nbElements:' + nbElements);
    
    // Check if there is not enough
    if (nbElements > 0 && this.currentIndex() + this.highestVisible + nbElements - 1 > this.endIndex) {
      var from = this.endIndex + 1;
      var to   = Math.ceil(from + this.highestVisible);
      this.requestRunningDirection = 'after';
      this.runRequest({parameters: {from: from, to: to, veiling: this.veilingid, modus: this.modus}, onSuccess: this.updateAndScrollHandler.curry(deltaPixel).bind(this)});
      return this;
    // there are items before the first one
    } else if (nbElements < 0 && this.lowestVisible > 1) {
      var from = this.lowestVisible-(8+1);
      var to   = Math.floor(from + this.lowestVisible);
      this.requestRunningDirection = 'before';
      this.runRequest({parameters: {from: from, to: to, veiling: this.veilingid}, onSuccess: this.updateAndScrollHandler.curry(deltaPixel).bind(this)});
      return this;
    } else
      $super(deltaPixel);
  },

  update: function(transport) {
    this.requestRunning = false;
    this.fire("request:ended");

    //	Eerst elementen toevoegen, dan pas nieuwe breedte berekenen:
    if (this.requestRunningDirection == 'after') {
    	this.elements = this.container.insert({bottom: transport.responseText}).childElements();
    } else if (this.requestRunningDirection == 'before') {
    	this.elements = this.container.insert({top: transport.responseText}).childElements();
    	this.lowestVisible = this.lowestVisible - 8;
    }
    
    if (this.element.select('.items.wrapper').first())
    	this.element.select('.items.wrapper').first().setStyle( {width : (this.options.elementSize * (this.elements.length+8)) + 'px'} );

    this.endIndex = Math.max(this.endIndex, this.elements.length-1);
    this.observeKavels();
    return this.updateButtons();
  },

  computeElementSize: function() {
    return this.options.elementSize;
  },

  updateNextButton: function($super) {
    var lastPosition = this.currentLastPosition();
    var size = this.currentSize();
    var nextClassName = "next_button" + this.options.disabledButtonSuffix;

    if (this.nextButton.hasClassName(nextClassName) && lastPosition != size) {
      this.nextButton.removeClassName(nextClassName);
      this.fire('nextButton:enabled');
    }
    if (!this.nextButton.hasClassName(nextClassName) && lastPosition == size && !true) {
	    this.nextButton.addClassName(nextClassName);
      this.fire('nextButton:disabled');
    }
  }
});

document.observe('dom:loaded', function () {
  $$('div[ovm:id]').each(function (zapper) {
    new UI.Ajax.Carousel(zapper, {
        previousButton: ".button.previous",
        nextButton: ".button.next",
        container : '.container',
        clickSelector : 'div.carouselItem a[ovm:volgnummer]',
        elementSize : 80,
        //url : '/nl/nuindeveiling/getkavels'
        url: '/nl/veiling/getkavels'
      }
    );
  });
});