// slideshow.js v1.0
//
// Copyright (c) 2007 Will Shaver
// Author: Will Shaver | primedigit.com
// 
// Slide Accordion is freely distributable under the terms of an MIT-style license.
//
/*-----------------------------------------------------------------------------------------------*/
if (typeof Effect == 'undefined')
	throw("slideshow.js requires including script.aculo.us' effects.js library!");

var slideShow = Class.create();
slideShow.prototype = {
	//
	//  Setup the Variables
	//
	index : null,
	items : null,
	animating : false,
	hoverPE: null,
	loaded: false,
	
	//  
	//  Initialize the accordions
	//
	initialize: function(container, backButton, forwardButton, options) {
		this.options = Object.extend({
			align: 'left', //left, right
			duration: .3,
			classNames : {
				item : 'slide_item',				
				itemHover: 'slide_item_hover',
				buttonInactive: 'slide_button_inactive'
			},
			onEvent : 'click',
			hoverDelay: .3
		}, options || {});
		
		document.observe("contentloaded", function() {
		    if(!this.loaded)
    		    $(container).hide();
		}.bind(this));
		this.index = 0;
		Event.observe(window, 'load', this.onLoad.bind(this,container, backButton, forwardButton), false);
    },
    
    onLoad: function(container, backButton, forwardButton)
    {
		this.loaded = true;
		this.container = $(container);
		this.container.show();
		this.backButton = $(backButton);
		this.forwardButton = $(forwardButton);
        this.container.makePositioned().makeClipping();
		
		items = $$('#' + container+' .'+this.options.classNames.item);
		this.items = items.toArray();
		items.push(this.backButton)
		items.push(this.forwardButton);
		items.each(function(item) {		
		    /* this sets up the hover class */
		    Event.observe(item, 'mouseout', function(item) {
 			    item.removeClassName(this.options.classNames.itemHover);
			}.bind(this, item));
			Event.observe(item, 'mouseover', function(item) {
    			item.addClassName(this.options.classNames.itemHover);			    
			}.bind(this, item));
		    /* end hover class */
		}.bind(this));
		
		if(this.options.onEvent == 'mouseover')
		{ /*this sets up the delay for mouseover sliding */
		    [this.backButton, this.forwardButton].each(function(item) { 
		        Event.observe(item, 'mouseout', function() {
		            if(this.hoverPE)
		                this.hoverPE.stop();
		        }.bind(this));
		    }.bind(this));
		    
			Event.observe(this.backButton, 'mouseover', function()
			{
			    this.hoverPE = new PeriodicalExecuter(this.scrollBackward.bind(this),this.options.hoverDelay);
			}.bind(this));
			
			Event.observe(this.forwardButton, 'mouseover', function()
			{
			    this.hoverPE = new PeriodicalExecuter(this.scrollForward.bind(this),this.options.hoverDelay);
			}.bind(this));
		}
		else
		{
			Event.observe(this.backButton, this.options.onEvent, this.scrollBackward.bind(this), false);
			Event.observe(this.forwardButton, this.options.onEvent, this.scrollForward.bind(this), false);
		}
		this.backButton.addClassName(this.options.classNames.buttonInactive);
	},

	scrollForward : function() {
        if(this.animating || this.items.length <= this.index + 1)
            return false;
        showMe = this.items[this.index + 1];
        this.nextIndex = this.index + 1;        
        this.scrollTo(showMe);
      },
      
	scrollBackward : function() {
        if(this.animating || this.index == 0)
            return false;
        showMe = this.items[this.index - 1];
        this.nextIndex = this.index - 1;
        this.scrollTo(showMe);
      },
      
      scrollTo: function(showMe) {
        tX = 0;
        if(this.options.align == 'left')
            tX = -showMe.positionedOffset()[0];
        if(this.options.align == 'right')
            tX = -showMe.positionedOffset()[0] + (this.container.clientWidth - showMe.scrollWidth);
        if(this.options.align == 'center')
            tX = -showMe.positionedOffset()[0] + ((this.container.clientWidth - showMe.scrollWidth) / 2);
        tX = Math.min(0, tX);
            
		new Effect.Scroll(this.container, {
		    targetX: tX,
		    scrollY: false,
		    duration: this.options.duration,
    		queue: {position: 'end', scope: 'slideaccordion'},
			beforeStart: function() {			    
				this.animating = true;
				if(this.nextIndex == 0)
				    this.backButton.addClassName(this.options.classNames.buttonInactive);
				else
				    this.backButton.removeClassName(this.options.classNames.buttonInactive);
				if(this.nextIndex == (this.items.length - 1))
				    this.forwardButton.addClassName(this.options.classNames.buttonInactive);
				else
				    this.forwardButton.removeClassName(this.options.classNames.buttonInactive);	
			}.bind(this),
			afterFinish: function(direction) {
				this.index = this.nextIndex;
				this.animating = false;							
			}.bind(this)
	    });		
	}
};

Effect.Scroll = Class.create(Effect.Base, {
  initialize: function(element) {
    this.element = $(element);
    this.subElement = $(element).down();
    if (!this.element) throw(Effect._elementDoesNotExistError);
    var options = Object.extend({
      scrollX: true,
      scrollY: true,
      targetX: 0,
      targetY: 0
    }, arguments[1] || { });
    this.start(options);
  },
  setup: function() {    
    this.element.makePositioned().makeClipping();   
    this.subElement.makePositioned();
      
    this.originalTop  = this.subElement.offsetTop;
    this.originalLeft = this.subElement.offsetLeft;
    
    this.factorX = (this.options.targetX - this.originalLeft);
    this.factorY = (this.options.targetY - this.originalTop);
  },
  
  update: function(position) {
    var currentScaleX = (this.factorX * position);
    var currentScaleY = (this.factorY * position);    
    this.setPosition(this.originalLeft + currentScaleX, this.originalTop + currentScaleY);
  },
  setPosition: function(x, y) {
    var d = { };
    if (this.options.scrollX) d.left = x.round() + 'px';
    if (this.options.scrollY) d.top = y.round() + 'px';    
    this.subElement.setStyle(d);
  }
});