/**
 * javascript carousel specifically for the Bloom specials UI.
 *
 * While most carousels don't have a concept of a 'focal item' this one treats
 * it's center-most item as the focal point.
 */

C.CatCarousel = Class.create();

C.CatCarousel.prototype = {

	initialize: function( config )
	{
		this._zeroWidth = {width:"0px"};

		this.items = [];
		this.currentFloat = 'left';
		this.queue = [];
		this.inProgress = false;

		this.centerIdx = 0;
		this.itemWidth = 0;
		this.scrollSpeed = 0.20;
		this.itemsToDisplay = 4;
		this.itemsPanelOffset = 0;
		this.totalItemWidth = 0;
		this.leftArrowEl = $(config.leftEl);
		this.rightArrowEl = $(config.rightEl);
		
		this.loadAfterSlideTimeout = false
		

		Object.extend(this,config);

		this.targetEl = $(this.targetEl);

	},

	setup : function()
	{

		//setup arrows
		this.leftArrowEl.observe('click',this.slideLeft.bind(this));
		this.rightArrowEl.observe('click',this.slideRight.bind(this));
		this.leftArrowEl.setStyle( { cursor:"pointer"} );
				this.rightArrowEl.setStyle( { cursor:"pointer"} );

//		this.exLeft = $('ex-left');
//		this.exRight = $('ex-right');

		this.items =	$$('.cat-item');
		var w = 0;
		var itemList = [];
		this.items.each( function(e){
				itemList.push(e);
//				w += Element.getWidth(e);
				w += this.itemWidth;
				if ( !this.itemWidth ) this.itemWidth = w;
				e.observe('click',this.handleItemClick.bind(this,e));
		}.bind(this));

		this.centerIdx = Math.floor((this.items.length + 1) / 2);
	
		this.totalItemWidth = w;
		

		this.itemsPanel = this.targetEl.down();

		carouselWidth = this.itemsToDisplay * parseInt(this.itemWidth);
		
		

		

		this.itemsPanelOffset = (w - carouselWidth) / 2;
		
		// if there are an even number of items in the carousel,
		//  offset by an additional item
		// -------------------------------------------------------
		
		if ( this.items.length % 2 == 0 ) this.itemsPanelOffset -= (this.itemWidth / 2) ;
		
		
		

		this.targetEl.setStyle( { width: carouselWidth + "px" } );

//		alert(carouselWidth +"-" + this.itemsPanelOffset );


		this.itemsPanel.setStyle({position:"relative",top:"0px",left:"0px"});
		this.itemsPanel.setStyle( {width:w+"px", left:"-"+this.itemsPanelOffset+"px"} );


	},

	slideLeft : function()
	{
		if ( !this.inProgress ) this.queueSlide('left',true,true);
	},

	slideRight : function()
	{
		if ( !this.inProgress ) this.queueSlide('right',true,true);
	},


	slide : function(dir)
	{
		
		var offset =  (dir == 'left') ? -this.itemWidth : this.itemWidth;
		new Effect.Move( this.itemsPanel,{x: offset, mode:'relative' , transition: Effect.Transitions.linear, duration: this.scrollSpeed  ,afterFinish: this.afterSlide.bind(this,dir)} );
	},



	handleItemClick : function(e)
	{
		if ( !this.inProgress )
		{
			var img = e.down('img');
			if ( img.src.match(/-over/) ) return;
			
						
			this.slideToCenter(e);

			this.setImageOn(img);
			
			this.onItemClick(e);
		}
	},


	setImageOn : function(img)
	{

		this.items.each( function(e){
			var cImg = e.down('img');
			if ( cImg == img )
			{
				cImg.src = cImg.src.replace(/.gif/,"-over.gif");
			}
			else
			{
				cImg.src = cImg.src.replace(/-over/,"");
			}
		});

	},

	slideToCenter : function(el)
	{

		if ( Object.isString(el) )
		{
			this.items.each( function(e){
				var cid = e.readAttribute('carousel_id');
				if ( cid == el) el = e;
			});
		}
		
		if  (!el) console.log("no section",el);


		var elPos = -1;
		for( var i = 0 ; i < this.items.length ; i++ )
		{
			if ( this.items[i] == el )
			{
				elPos = i;

			}
		}

		var shiftCount = this.centerIdx - elPos-1;
		if ( shiftCount == 0 ) return;
		
		var dir = (shiftCount < 0) ? 'left' : 'right';
		for ( var i = 0 ; i < Math.abs(shiftCount); i++ ) this.queueSlide(dir);
		this.processQueue();

	},

	queueSlide : function(dir,proc,runTimer)
	{
		if (runTimer) 
		{
			clearTimeout(this.loadAfterSlideTimeout);
			this.loadAfterSlideTimeout = this.onSlideTimeout.bind(this).delay(1);
		}
		this.queue.push(dir);
		if ( proc && !this.inProgress ) this.processQueue();
	},

	processQueue : function()
	{
		if ( this.queue.length == 0 ) return false;
		this.inProgress = true;
		var d = this.queue.shift();
		this.slide(d);
		return true;
	},

	afterSlide : function(dir)
	{
		if ( dir == 'right')
		{
			var last = this.items.pop();
			this.items.unshift(last);
			this.itemsPanel.insert( {top:last } );
		}
		else
		{
			var first = this.items.shift();
			this.items.push(first);
			this.itemsPanel.insert( {bottom:first } );
		}
		this.itemsPanel.setStyle(  { left:"-"+this.itemsPanelOffset+"px"} );
		this.inProgress = this.processQueue();

		if ( !this.inProgress )
		{
			this.onSlideComplete();
		}
		
		

	},

	onSlideComplete : function()
	{

	},
	
	/**
	 * called when a set interval passes after the carousel is slided.  eg, 1 second after a slide
	 * happens with no futher user input this function is called
	 */
	onSlideTimeout : function()
	{
		// note: this seems to be broken.  centerIdx should be the center item, but 
		// for some reason it isnt', however other code seems to handle it properly.
		// for now just tweak the number to make it work as expected
		var selectIdx = this.centerIdx - 1;
		this.handleItemClick( this.items[ selectIdx] );
	},
	
	
	onItemClick  : function(el)
	{
		console.log(el);
		
	}
	
	


};