// JavaScript Document

NEW6TM.UI.AutoScroller = Class.create(NEW6TM.UI.Options, {
  options: {
    direction               : "vertical",
	numberElementInScene    : 3,
    container               : "NProduct",
    scrollInc               : "auto",
	compact                 : 'larger', // {auto || larger || smaller}
	forceLength             : null 
  },
  initialize: function(element, options) {
	this.setOptions(options);
    this.element = $(element);
	this.elements = $$('#' + element + ' div.'+this.options.container);
	if (this.elements.size() <= this.options.numberElementInScene) return 0;
	
	this.MyBody = $$('body')[0];
 	this.MyBody.appendChild(Builder.node('div',{id : '_' + element}));
	this.display = $('_' + element).setStyle({position : 'relative'});
	
	
	this.element.wrap(this.display);
	this.display.appendChild(Builder.node('div',{id : '_showtime'}));
	
	var pos = (this.options.direction == "horizontal") ? "left" : "top";
    var dim = (this.options.direction == "horizontal") ? "width" : "height";
	var dimR = (this.options.direction == "horizontal") ? "height" : "width";
	
	var SceneLengthFunc = (this.options.direction == "horizontal") ? Element.getHeight : Element.getWidth;
	var SceneLength = this.elements.collect(function(el) {return SceneLengthFunc(el);}).max();
	
	if(this.options.forceLength != null) SceneLength = this.options.forceLength;
	var containerLength = SceneLength * this.options.numberElementInScene + 4;	
	
	
	var DimR = (this.options.direction == "horizontal") ? this.element.getHeight() : this.element.getWidth(); 
	
	this.elements.each(function(el){el.setStyle("overflow:hidden;"+dim +":"+ SceneLength + "px;margin : 2px 0px");});
	
	this.showtime = $('_showtime').setStyle("position:absolute;overflow:hidden;"+dim+":"+ SceneLength + "px;" + dimR +":"+ DimR + "px;z-index:96");
	this.display.setStyle("overflow:hidden;" + dim +":"+containerLength + "px;"+ dimR + ":" + DimR + "px;margin:0 0;");
	this.element.setStyle({position : 'absolute','z-index': '91'});
	
	var position = SceneLength + 3;
	var gCallCount = 0;
	this.showtime.hide();
	this.activePe = true;
	
	this.element.observe("mouseover", function(event) {this.activePe = false;}.bind(this));
	this.element.observe("mouseout", function(event) {this.activePe = true;}.bind(this));
	
	this.observe("scroll:started", (function() {
							//$("console").update("started");
							  this.element.setStyle(pos + " : 0")							  	                          
							}).bind(this));
	
	this.observe("scroll:ended", (function(event) {
							//$("console").update("finished" + event.memo.shift);
							this.showtime.insert(this.element.firstDescendant());
							var trans = this.showtime.firstDescendant();
							trans.setStyle({height :SceneLength + 'px' });
							this.element.appendChild(trans);
							}).bind(this));
	 
	var that = this;
	
	new PeriodicalExecuter(function(pe){
        if (this.activePe) {         		 
           if (++gCallCount > this.elements.length - 1) gCallCount = 0;  
			  that.updateScreen().fire("scroll:started", { shift: gCallCount });
			  this.element.morph("opacity:0.3", {duration: 0.2,delay: 0.5,afterFinish: function() {
              that.element.firstDescendant().morph(dim + ' : 0px',{duration: 0.4,
                                 afterFinish: function() {
									 that.element.morph("opacity:1", {duration: 0.1});
                                     that.updateScreen().fire("scroll:ended", { shift: gCallCount });
								 }
              })}});
			}
    }.bind(this), 5);

  },
  fire: function(eventName, memo) {
    memo = memo || { };
    memo.carousel = this;
    return this.element.fire('scroller:' + eventName, memo);
  },
  observe: function(eventName, handler) {
    this.element.observe('scroller:' + eventName, handler.bind(this));
    return this;
  },
  updateScreen : function() {
	  return this;
  },
  OnStart : function(){
	 this.showtime.hide();
	 var trans = this.showtime.firstDescendant();
	 this.display.appendChild(trans);
  }
});