/**
 * @author Thomas Gillis <thomaswgillis@gmail.com>
 * @package Sliding
 * @license MIT
 * @version 0.0.1
 * @dependencies prototype.js 1.5.1+, effects.js


	inspired by Bruno Bornsztein's "Glider" class
	* @author Bruno Bornsztein <bruno@missingmethod.com>
	* @copyright 2007 Curbly LLC
	

 */

/*  
left/right slideshow class
	moves html div's
	move on arrows
	multiple sets of arrows per slideshow
	multiple instances per page
	optional slide / rewind on click
*/
section = "";

Sliding = Class.create();

Sliding.prototype = {
	panelClass: "div.panel",
	containerClass:"div.panel-container",
	leftArrowClass: "div.left-arrow",
	rightArrowClass: "div.right-arrow",
	clippingContainer: "div.sliding-panels",
	//move when panel is clicked
	slideOnClick: false,
	startPanel: 0,
	//motion options
	duration: 0.5,
	transition: Effect.Transitions.sinoidal,
	
	initialize: function(assembly, options){
		//events
		this.events = {
			moveLeft: this.moveLeft.bind(this),
			moveRight: this.moveRight.bind(this)
		};
		
		//internal
		this.containerWidth= 0,
		this.wrapper= null,
		this.currentPanel= 0,
		this.inMotion= 0,
		this.panels= $A(),

		//multiple left / right arrows per slideshow - each panel can have its own set of controls
		this.leftArrow= $A(),
		this.rightArrow= $A(),

    this.assembly    = $(assembly);
		//IE7 overlfow hack
		if (this.assembly.select("div.sliding-panels").first()) {
			this.assembly.select("div.sliding-panels").first().makeClipping();
			this.assembly.select("div.sliding-panels").first().setStyle({position:"relative"});
		}
		
		//wrapper contains the slides
		this.wrapper = this.assembly.select(this.containerClass).first();
		
		//build the array of slides
		this.panels = this.wrapper.select(this.panelClass);		
		this.panelWidth = this.assembly.select("div.sliding-panels").first().getWidth()
		this.containerWidth = this.wrapper.getWidth();
		this.setScrollWidths();
		this.leftArrow = this.assembly.select(this.leftArrowClass);
		this.rightArrow = this.assembly.select(this.rightArrowClass);
	  this.setObservers();
		this.currentPanel =this.startPanel;
		this.onFinish();
		this.checkArrows();
	},
	addObservers: function(){

    this.leftArrow.each((function(e){e.observe("click",this.moveLeft)}).bind(this));
    this.rightArrow.each((function(e){e.observe("click",this.moveRight)}).bind(this));

	},
	setObservers: function(){
		//ugh, scope fixer
		var _this = this;
		this.leftArrow.each(function(la){
			Event.observe(la,"click",(function(event){
				event.stop();
    		if(section != undefined && section == "home")
				  stopPeriodicalExecuter();
				this.moveLeft();
        this.onStart();        
        this.onFinish();        
    		if(section != undefined && section == "home")
  		    setTimeout(resetPanels, 600);
			}).bindAsEventListener(_this));
		});

		this.panels.each(function(p){
			p.observe("click",(function(event){
				event.stop();
				this.clickToSlide();
			}).bindAsEventListener(_this))
		})
		this.rightArrow.each(function(ra){
			ra.observe("click",(function(event){
				event.stop();
    		if(section != undefined && section == "home")
				  stopPeriodicalExecuter();
				this.moveRight();
				this.onStart();
        this.onFinish();
    		if(section != undefined && section == "home")
    		  setTimeout(resetPanels, 600);
			}).bindAsEventListener(_this))
		});
	},
	moveLeft: function(){
		if (this.inMotion==false){
			this.inMotion = true;
			new Effect.Move(this.wrapper, {
				x:this.currentPanel * -(this.panelWidth) + this.panelWidth, y:0, 
				duration:0.5, mode:'absolute', transition:this.transition
				
			});
			this.currentPanel = this.currentPanel -1;
			if (this.currentPanel < 0) this.currentPanel = 0;
		}
		this.checkArrows();
		if(section != undefined && section == "home") {
		  sectionPanel = this.currentPanel;
      startPeriodicalExecuter();
		}
	},
	moveRight: function(){
		if (this.inMotion==false){
			this.inMotion = true;
		 	new Effect.Move(this.wrapper, {
				x:this.currentPanel * -(this.panelWidth) - this.panelWidth, y:0,
				duration:this.duration, mode:'absolute', transition:this.transition });
		}
		if (this.currentPanel >= this.panels.size()-1) {
			this.currentPanel = this.panels.size() -1;	
		} else {
			this.currentPanel++;
		}
		this.checkArrows();
		if(section != undefined && section == "home") {
		  sectionPanel = this.currentPanel;
      startPeriodicalExecuter();
		}
	},
	
	onStart: function(event){
		this.inMotion = true;		
	},

	onFinish: function(event){
		this.inMotion = false;
    this.checkArrows();
	},


	checkArrows: function(){    
		if (this.currentPanel == 0) {
			this.leftArrow.each(function(e){e.setStyle({visibility:"hidden"})});
		} else {
			this.leftArrow.each(function(e){e.setStyle({visibility:"visible"})});
		}
		if (this.currentPanel ==(this.panels.size()-1)) {
			this.rightArrow.each(function(e){e.setStyle({visibility:"hidden"})});
		} else {
			this.rightArrow.each(function(e){e.setStyle({visibility:"visible"})});
		}	
	},
  	clickToSlide: function(){
		//only if slideOnClick is set
		if (!this.slideOnClick) return false;
		if (!this.inMotion){
			if (this.panels[this.currentPanel]._index < this.panels.size()-1){
				this.moveRight();
			} else {
				this.rewind();
			}
		}
	},
	rewind: function(){
		new Effect.Move(this.wrapper, { x:this.containerWidth + (-1*this.panels[1].moveLeft), y:0,
			duration:this.duration, transition:this.transition, 
			mode:'relative' ,  afterFinish:function(){this.inMotion = false;}, beforeStart: this.onStart()})
			this.currentPanel = 0;
			this.inMotion = false;
	},
	scrollToPosition: function(position){
		//numbered divs 1 , 2 , 3 , 4 etc
		//TODO implement this function as well as an observer
		
	},
	setScrollWidths: function(){
		var w = 0;
		var test = $A();
		this.panels.each(function(panel,index){
			w += panel.getWidth();
			panel._index = index;
			panel.moveLeft = panel.getWidth();
			panel.moveRight = panel.getWidth() * -1;
			test[index] = panel.getWidth();
		});
		this.panels[0].moveLeft = 0;
		this.panels[this.panels.size()-1].moveRight = 0;
		this.containerWidth = w;
		this.wrapper.setStyle({width:w+"px"});
	}
};