var ImageSlider = {
	create : function(elementId, options) {
		return new ImageSlider.Box(elementId, options);
	}
}

var CookbookSlider = {
	create : function(elementId, options) {
		return new CookbookSlider.Box(elementId, options);
	}
}
	
	
	
ImageSlider.Box = Class.create({
	
    initialize: function(elementId) {
	
        this.elementId = elementId;
		this.element = $(elementId);
		this.options = Object.extend({
			startImage: 0,
			imageCount: 1,
			imageWidth: 100,
			visibleImageCount: 1,
			autoScroll: false,
			onClickFunction: function(img){ }
		}, arguments[1] || {});
		
		this.options.minOffset = this.options.imageWidth * this.options.imageCount - this.options.imageWidth;
        this.options.autoScrollDuration = this.options.imageCount * 2;
        this.options.resetDuration = this.options.imageCount / 2;	
        this.options.windowWidth = this.options.imageWidth * this.options.visibleImageCount;
        this.options.initialOffset = -this.options.imageWidth * this.options.startImage + (this.options.windowWidth - this.options.imageWidth) / 2;
        this.options.maxX = (this.options.windowWidth - this.options.imageWidth) / 2;
        this.options.minX = -this.options.minOffset + (this.options.windowWidth - this.options.imageWidth) / 2;
        
        this.element.parentNode.style.width=this.options.windowWidth + "px";
        this.element.style.left="0px";

        
	 	this.scroll(this.options.initialOffset, 0.3);

	 	if (this.options.autoScroll) {
	 		this.scrollSlowly();
	 	}
	 	
   	},
   	
   	movePrev: function()
	{
  		this.stopEffects();
  		this.scroll(this.options.imageWidth, 0.4);
        if (this.options.autoScroll) { this.scrollSlowly(); };
	},
	
	moveNext: function()
	{
  		this.stopEffects();
  		this.scroll(-this.options.imageWidth, 0.4);
        if (this.options.autoScroll) { this.scrollSlowly(); };
	},
	
	centerImage: function(img) {
  		var offset = 0 - img.offsetLeft + ((this.options.windowWidth - this.options.imageWidth) / 2);
  		new Effect.Move(this.elementId, { x: offset, y: 0, duration:0.2, mode:"absolute", transition: Effect.Transitions.sinoidal, queue:{position:"end", scope:this.elementId } });
        this.options.onClickFunction(img);
        if (this.options.autoScroll) {
        	this.scrollSlowly();
        }
	},
	
	scroll: function(offset, relDuration) {
  		var currPos = parseInt(this.element.style.left);
  		var offset = offset - (currPos % this.options.imageWidth);
  		if ((currPos + offset) > this.options.maxX) {
  	  		new Effect.Move(this.elementId, { x: this.options.minX, y: 0, duration:1.0, mode:"absolute",  transition: Effect.Transitions.sinoidal, queue:{position:"end", scope:this.elementId }});
  		} else if ((currPos + offset) < this.options.minX) {
  	  		new Effect.Move(this.elementId, { x: this.options.maxX, y: 0, duration:1.0, mode:"absolute",  transition: Effect.Transitions.sinoidal, queue:{position:"end", scope:this.elementId }});
  		} else {
  			var dura = (relDuration / this.options.imageWidth * (offset < 0 ? offset * -1 : offset));
  			new Effect.Move(this.elementId, { x: offset, y: 0, duration:dura, mode:"relative",  transition: Effect.Transitions.sinoidal, queue:{position:"end", scope:this.elementId } });
  		}
	},

	stopEffects: function () {
		var queue = Effect.Queues.get(this.elementId);
		queue.each(function(effect) { effect.cancel(); });
	},
	
	scrollSlowly: function() {
		
		//alert("who am i : " + (this) + "   --  " + this.element);
		var x = parseInt(this.element.style.left);
		var dura = (this.options.autoScrollDuration / this.options.minOffset) * (this.options.minOffset + x);
		new Effect.Move(this.elementId, { x: 0, y: 0, duration:3.0, mode:"relative",  transition: Effect.Transitions.linear, queue:{position:"end", scope:this.elementId }});
		new Effect.Move(this.elementId, { x: this.options.minX, y: 0, duration:dura, mode:"absolute",  transition: Effect.Transitions.linear, queue:{position:"end", scope:this.elementId }});
		new Effect.Move(this.elementId, { x: 0, y: 0, duration:this.options.resetDuration, mode:"absolute",  transition: Effect.Transitions.spring, queue:{position:"end", scope:this.elementId},  afterFinish:function(){} });
		for(var i = 0; i<20;i++) {
			new Effect.Move(this.elementId, { x: 0, y: 0, duration:3.0, mode:"relative",  transition: Effect.Transitions.linear, queue:{position:"end", scope:this.elementId }});
			new Effect.Move(this.elementId, { x: this.options.minX, y: 0, duration:this.options.autoScrollDuration, mode:"absolute",  transition: Effect.Transitions.linear, queue:{position:"end", scope:this.elementId }});
			new Effect.Move(this.elementId, { x: 0, y: 0, duration:this.options.resetDuration, mode:"absolute",  transition: Effect.Transitions.spring, queue:{position:"end", scope:this.elementId} });
		}

	}
  
});

CookbookSlider.Box = Class.create({
	
    initialize: function(elementId) {
	
        this.elementId = elementId;
		this.element = $(elementId);
		this.options = Object.extend({
			startImage: 0,
			imageCount: 1,
			imageWidth: 100,
			visibleImageCount: 1,
			autoScroll: false,
			onClickFunction: function(img){ }
		}, arguments[1] || {});
		
		this.options.minOffset = this.options.imageWidth * this.options.imageCount - this.options.imageWidth;
        this.options.autoScrollDuration = this.options.imageCount * 2;
        this.options.resetDuration = this.options.imageCount / 5;	
        this.options.windowWidth = this.options.imageWidth * this.options.visibleImageCount;
        this.options.initialOffset = -this.options.imageWidth * this.options.startImage + (this.options.windowWidth - this.options.imageWidth) / 2;
        this.options.maxX = ((this.options.windowWidth - (this.options.imageWidth*2))) - this.options.imageWidth;
        this.options.minX = (-this.options.minOffset + (this.options.windowWidth - (this.options.imageWidth*2))) + this.options.imageWidth;
        
        this.element.parentNode.style.width=this.options.windowWidth + "px";
        this.element.style.left="0px";

        
	 	this.scroll(this.options.initialOffset, 0.3);

   	},
   	
   	movePrev: function()
	{
  		this.stopEffects();
  		this.scroll(this.options.imageWidth, 0.4);
	},
	
	moveNext: function()
	{
  		this.stopEffects();
  		this.scroll(-this.options.imageWidth, 0.4);
	},
	
	scroll: function(offset, relDuration) {
  		var currPos = parseInt(this.element.style.left);
  		var offset = offset - (currPos % this.options.imageWidth);
  		if ((currPos + offset) > this.options.maxX) {
  	  		new Effect.Move(this.elementId, { x: this.options.minX, y: 0, duration:0.4, mode:"absolute",  transition: Effect.Transitions.sinoidal, queue:{position:"end", scope:this.elementId }});
  		} else if ((currPos + offset) < this.options.minX) {
  	  		new Effect.Move(this.elementId, { x: this.options.maxX, y: 0, duration:0.4, mode:"absolute",  transition: Effect.Transitions.sinoidal, queue:{position:"end", scope:this.elementId }});
  		} else {
  			var dura = (relDuration / this.options.imageWidth * (offset < 0 ? offset * -1 : offset));
  			new Effect.Move(this.elementId, { x: offset, y: 0, duration:dura, mode:"relative",  transition: Effect.Transitions.sinoidal, queue:{position:"end", scope:this.elementId } });
  		}
	},

	stopEffects: function () {
		var queue = Effect.Queues.get(this.elementId);
		queue.each(function(effect) { effect.cancel(); });
	}
  
});