/***************************************************************************

	FeatureCarousel  
	by: Craig Coles (with help from Adam Slayer)
	date: July 28th 2009
	for: Uproot
	
	description:
		This class can handle two types of carousels.  One that scrolls
		infinitely, and one that goes back to the start when you reach the 
		end. 
		
	parameters:
		element: the id of the element that contains the scrollable elements
		obj: an object that the user can set the following properties to
			
			-buttons(string): the css class used to identify the buttons used to activate the scrolling actio
		 	-offSet(int): the amount of pixels the slides are away from the edge
			-speed(int):800,
			-infinite(boolean):false
				
****************************************************************************/

var WorkDetailCarousel = new Class({
	Implements:Options,
	options: {
		offSet:0,
		speed:800,
		infinite:false,
		buttons:null,
		indicator:null,
		info:null,
		rotate:0,
		hover:false,
		title:false,
		wrapper:null,
		noAction:null,
		specialAction:null
	},
	initialize: function(el,options){
		this.instance = el;
		this.setOptions(options);
		this.scrollButtons = options.buttons;
		this.sliderImages = el.getElements('img');
		this.sliderImageWidth = this.sliderImages[0].getStyle('width').toInt();
		this.extraWidth = this.getExtraWidths();
		this.slideWidth = this.sliderImageWidth + this.extraWidth;
		this.sliderWidth = (this.sliderImageWidth + this.extraWidth) * this.sliderImages.length;
		this.infinite = options.infinite;
		this.offSet = options.offSet;
		this.speed = options.speed;
		this.inMotion = false;
		this.indicator = options.indicator;
		this.info = options.info;
		this.rotate = options.rotate;
		this.slideStartOrder();
		//this.indicator.addEvent('click', this.slideByIndicator.bindWithEvent(this));
		el.setStyle('width',this.sliderWidth);
		this.showElements();
	},
	hideElements:function(){
		this.sliderImages.setStyle('visibility','hidden');
	},
	showElements:function(){
		this.instance.setOpacity(0);
		var fadeIn = new Fx.Morph(this.instance,{duration:400});
		fadeIn.start({'opacity':1});
		this.sliderImages.setStyle('visibility','visible');
	},
	slideStartOrder: function(){
		this.startPos = -this.slideWidth + this.offSet;
		this.instance.setStyle('left', this.startPos);
		for(var i = 0; i < this.sliderImages.length;i++){
			this.sliderImages[i].setStyle('position','absolute');	
			this.sliderImages[i].setStyle('left',this.sliderImageWidth * i);
		}
		//this.scrollButtons.addEvent('click', this.slideInfinite.bindWithEvent(this));	
		$('carousel-btn-left').addEvent('click',this.slideInfiniteLeft.bind(this));
		$('carousel-btn-right').addEvent('click',this.slideInfiniteRight.bind(this));
		
	},
	getExtraWidths: function(){
		var extraWidth = 0;
		if(this.sliderImages[0].getStyle('padding-left')!=0){
			extraWidth = extraWidth+this.sliderImages[0].getStyle('padding-left').toInt();
		}
		if(this.sliderImages[0].getStyle('padding-right')!=0){
			extraWidth = extraWidth+this.sliderImages[0].getStyle('padding-right').toInt();
		}
		if(this.sliderImages[0].getStyle('margin-right')!=0){
			extraWidth = extraWidth+this.sliderImages[0].getStyle('margin-right').toInt();
		}
		if(this.sliderImages[0].getStyle('margin-left')!=0){
			extraWidth = extraWidth+this.sliderImages[0].getStyle('margin-left').toInt();
		}
		return extraWidth;
	},
	slideInfiniteRight: function(e){
		
		if(this.inMotion){
			return false;
		} else {
			this.updateIndicator('right');
			this.inMotion = true;
			var outterRightPos = (this.sliderImages.length - 1) * this.slideWidth;
			for(var i = 0; i < this.sliderImages.length;i++){
				var slidePos = this.sliderImages[i].getStyle('left').toInt();
				new Fx.Morph(this.sliderImages[i],{duration:this.speed,onComplete: function(){
					this.inMotion = false;
					for(var i = 0; i < this.sliderImages.length;i++){
						var slidePos = this.sliderImages[i].getStyle('left').toInt();
						if(slidePos < 0){
							this.sliderImages[i].setStyle('left',outterRightPos);
							this.updateIndicator(i);
						}
					}
				}.bind(this)}).start({
					'left': slidePos-this.slideWidth 
				});	
			}
		}
	},
	slideInfiniteLeft: function(e){
		
		if(this.inMotion){
			return false;
		} else {
			this.updateIndicator('left');
			this.inMotion = true;
			var outterRightPos = (this.sliderImages.length - 1) * this.slideWidth;
			for(var i = 0; i < this.sliderImages.length;i++){
				var slidePos = this.sliderImages[i].getStyle('left').toInt();
				new Fx.Morph(this.sliderImages[i],{duration:this.speed,onComplete: function(){
					this.inMotion = false;
					
					for(var i = 0; i < this.sliderImages.length;i++){
						var slidePos = this.sliderImages[i].getStyle('left').toInt();
						if(slidePos > outterRightPos){
							this.sliderImages[i].setStyle('left',0);
							this.updateIndicator(i);
						}
					}
				}.bind(this)}).start({
					'left': slidePos+this.slideWidth 
				});	
			}
		}	
	},
	slideByIndicator: function(e){
		e.stop();
		//this.inMotion = true;
		for(var i = 0; i < this.options.indicator.length;i++){
			if(e.target == this.options.indicator[i]){
				var num = i
				if(num == 0){
					this.slideInfiniteLeft();
				}
				
				if(num == this.options.indicator.length -1){
					this.slideInfiniteRight();
				}
				
				
			}
		}
	},
	updateIndicator: function(direction){
		
		for(var i = 0; i < this.options.indicator.length;i++){
			if(this.options.indicator[i].hasClass('highlight')){
				var current = i;
			}
			this.options.indicator[i].removeClass('highlight');
		}
		
		if(direction == 'right'){
			if(current == this.options.indicator.length-1){
				current = 0;
			} else {
				current = current + 1;
			}
		}
		
		if(direction == 'left'){
			if(current == 0){
				current = this.options.indicator.length-1;
			} else {
				var current = current - 1;
			}
		
		}
		
		this.options.indicator[current].addClass('highlight');
	
	}
	
});