Effect.ScrollVertical = Class.create();

Object.extend(Object.extend(Effect.ScrollVertical.prototype, Effect.Base.prototype),
{
   initialize: function(element)
   {
       if(typeof element == "string")
       {      
           this.element = $(element);
           if(!this.element)
           {
               throw(Effect._elementDoesNotExistError);
           }
       }
      
       var options = Object.extend({
           from: this.element.scrollTop || 0,
           to:   this.element.scrollHeight
       }, arguments[1] || {});
      
       options.to = options.to == this.element.scrollHeight ? options.to : options.from + options.to;
      
       this.start(options);
   },
  
   update: function(position)
   {
       this.element.scrollTop = position;
   }
});

Effect.ScrollHorizontal = Class.create();

Object.extend(Object.extend(Effect.ScrollHorizontal.prototype, Effect.Base.prototype),
{
   initialize: function(element)
   {
       if(typeof element == "string")
       {      
           this.element = $(element);
           if(!this.element)
           {
               throw(Effect._elementDoesNotExistError);
           }
       }
      
       var options = Object.extend({
           from: this.element.scrollLeft || 0,
           to:   this.element.scrollWidth
       }, arguments[1] || {});
      
       this.start(options);
   },
  
   update: function(position)
   {
       this.element.scrollLeft = position;
   }
});

var horizontalScrollBox = Class.create({
	
	initialize: function(holder,options){
		this.options = Object.extend({
			scrollAreaSelector : 'scrollArea',
			scrollContentSelector : 'scrollContent',
			previousLinkSelector : 'prev',
			previousLinkOff : '',
			nextLinkSelector : 'next',
			nextLinkOff : ''
		}, options || {});
		
		this.holder = $(holder);
		this.area = $$('#' + holder + ' .' + this.options.scrollAreaSelector)[0];
		this.content = $$('#' + holder + ' .' + this.options.scrollContentSelector)[0];
		this.prevLink = $$('#' + holder + ' .' + this.options.previousLinkSelector)[0];
		this.nextLink = $$('#' + holder + ' .' + this.options.nextLinkSelector)[0];
		this.children = this.content.immediateDescendants();
		this.width = this.area.getWidth();
		this.maxWidth = this.children.length * this.children[0].getWidth();
		this.curPos=0;
		this.moveNum=0;
		
		if (this.children[1]){
			this.maxWidth = this.children.length * this.children[1].positionedOffset().left;
		}
		
		// add the functions to the links
		Event.observe(this.prevLink,'click',this.onClick.bind(this),false);
		Event.observe(this.nextLink,'click',this.onClick.bind(this),false);
		
		this.onInit();
	},
	
	onInit: function(){
				
	},
	
	onClick: function(e){
		
		// Set animation state
		var animate=false;
		var clickFrom = e.currentTarget;
		
		if (!e.currentTarget){
			// this is for IE
			clickFrom = e.srcElement;
		}		
				
		if(clickFrom == this.prevLink){
		 	// move left	
			// If direction is left only change current position if more than 0
			if (this.curPos>0){
				this.moveNum=this.width;
				this.curPos-=this.width;
				animate=true;
			}
		}else{
			// move right
			// If direction is right only change next position if less than maxWidth - width
			if (this.curPos< (this.maxWidth-this.width)){
				this.moveNum=-this.width;	
				this.curPos+=this.width;	
				animate=true;	
			}
		}
		
		if (this.curPos<=0){
			this.prevLink.addClassName(this.options.previousLinkOff);
		}else{
			this.prevLink.removeClassName(this.options.previousLinkOff);			
		}
		
		if (this.curPos>= (this.maxWidth-this.width)){
			this.nextLink.addClassName(this.options.nextLinkOff);
		}else{
			this.nextLink.removeClassName(this.options.nextLinkOff);			
		}
		
		//animate
		if (animate){
			new Effect.ScrollHorizontal(this.area.identify(), {to:this.curPos,duration:.5});
		}	
		
		// remove focus
		clickFrom.blur();
		return false;
		
	}
});


var autoScrollBox = Class.create({
	
	initialize: function(holder,options){
		this.options = Object.extend({
			scrollAreaSelector : 'scrollArea',
			scrollContentSelector : 'scrollContent',
			padding:10,
			addPadding:true,
			delay:3
		}, options || {});
				
		this.holder = $(holder);
		this.area = $$('#' + holder + ' .' + this.options.scrollAreaSelector)[0];
		this.content = $$('#' + holder + ' .' + this.options.scrollContentSelector)[0];
		this.children = this.content.immediateDescendants();
		this.width = this.area.getWidth();
		this.childWidth = this.children[0].getWidth()+this.options.padding;
		this.maxWidth = this.children.length * (this.childWidth);
		this.curPos = 0;
		this.moveNum = 0;
		this.animate = true;
		this.anim = null;
		
		// set the width of the container
		this.content.setStyle({width:this.maxWidth + 'px'});
		
		// add a left padding that is equal to one child - made for a 3 in view example
		if (this.options.addPadding){
			this.content.setStyle({paddingLeft:this.childWidth + 'px',paddingRight:this.childWidth + 'px'});	
		}
		
		// init
		this.onInit();
	},
	
	onInit: function(){		
		this.area.scrollLeft = 0;
		this.setOpacity();
		this.anim = this.doAnimation.bind(this).delay(this.options.delay);
		
		this.children.each(this.childControls,this);
	},
	
	childControls: function(a,b){
				
		var c = this;
				
		a.observe('mouseover',function(event){
			
			if (b == c.curPos){
				// stop the animation if over the active one
				c.stopAnimation();		
			}
			
		});
		a.observe('mouseout',function(){
			
			if(c.animate == false){
				// restart animation
				c.startAnimation();	
			}
			
		});
		a.observe('click',function(){
			// stop the animation on a click
			c.stopAnimation();				
		});
		
	},
	
	doAnimation : function(){
		
		if (this.animate){
			if (this.curPos >= this.children.length-1){
				this.curPos = this.moveNum = 0;
			}else{
				this.curPos++;
				this.moveNum+=this.childWidth;	
			}
			
			new Effect.ScrollHorizontal(this.area.identify(), {to:this.moveNum,duration:.5});
			
			this.setOpacity.bind(this).delay(.5);
			
			this.anim = this.doAnimation.bind(this).delay(this.options.delay);
		}
	},
	
	setOpacity: function(){
		
		var curPos = this.curPos;
		
		// make each child's opacity .3 except the active one
		this.children.each(function(i,n){
			if (n == curPos){
				new Effect.Opacity(i.firstDescendant(), { to: 1, duration: 0.25 });
			}else{
				i.firstDescendant().setOpacity(.3);					
			}
		});
	},
	
	stopAnimation: function(){
		this.animate = false;
		window.clearTimeout(this.anim);
	},
	
	startAnimation: function(a){
		this.animate = true;	
		this.anim = this.doAnimation.bind(this).delay(this.options.delay);
	}
	
});