/**
 * @class DesignStoriesScrollerController Will control the Design Stories pane UI.
 *
 * @author Gerardo Rodriguez - grodriguez@cmdagency.com
 * @created 07/27/2010
 */
function DesignStoriesScrollerController( element )
{
	//-------------------------------------------------
	// Properties
	//-------------------------------------------------
	var self = this;
	var root;
	var currPosition;
	var scrollPane;
	var scrollContent;
	var leftBrowse;
	var rightBrowse;
	var totalItems;
		
	//-------------------------------------------------
	// Faux Constructor
	//-------------------------------------------------
	/**
	 * @private Will serve as our faux constructor.
	 */
	this.init = function( element )
	{
		self.root = element;
		self.currPosition = 0;
		self.scrollPane = $(self.root).find('.scrollPane');
		self.scrollContent = $(self.root).find('.scrollContent');
		self.leftBrowse = $(self.root).find('.left.browse');
		self.rightBrowse = $(self.root).find('.right.browse');
		self.totalItems = $(scrollContent).find('li').length;
		
		self.updateBrowseArrows();
		self.bindEvents();
	}
	//-------------------------------------------------
	// Public Methods
	//-------------------------------------------------

	//-------------------------------------------------
	// Private Methods
	//-------------------------------------------------
	/**
	 * @private Private method that binds all UI events.
	 */
	this.bindEvents = function()
	{
		$(self.root).delegate( '.browse', 'click', self.onBrowseClick );
	}
	/**
	 * @private Private method that scrolls the content left.
	 */
	this.scrollRight = function()
	{
		var currItem = $(self.scrollContent).find('li').eq(self.currPosition);
		var slideAmount = currItem.outerWidth(true);
		var positionObj = $(self.scrollContent).position();
		
		self.currPosition++;
		
		self.updateBrowseArrows();

		$(self.scrollContent).animate({
			left: (positionObj.left - slideAmount - 2) + "px"
		},{
			easing:'easeOutExpo',
			duration:500,
			complete: function(){
				self.bindEvents();
			}
		});
	}
	/**
	 * @private Private method that scrolls the content right.
	 */
	this.scrollLeft = function()
	{
		// var offsetPosition = (self.currPosition == 0) ? 3 : 4;
		var currItem = $(self.scrollContent).find('li').eq(self.currPosition-1);
		var slideAmount = currItem.outerWidth(true);
		var positionObj = $(self.scrollContent).position();

		self.currPosition--;
		
		self.updateBrowseArrows();
		
		$(self.scrollContent).animate({
			left: (positionObj.left + slideAmount + 2) + "px"
		},{
			easing:'easeOutExpo',
			duration:500,
			complete: function(){
				self.bindEvents();
			}
		});
	}
	/**
	 * @private Private method that updates the browser arrows by hiding and showing them.
	 */
	this.updateBrowseArrows = function()
	{
		if( self.currPosition <= 0 )
			self.leftBrowse.css('visibility','hidden');
		else
			self.leftBrowse.css('visibility','visible');
			
		var totalWidth = 0;
		$(self.scrollContent).find('li').each(function(i,item){
			if( i >= self.currPosition )
			{
				totalWidth += $(item).outerWidth(true);
			}
		});
		
		if( totalWidth <= $(self.scrollPane).width() )
			self.rightBrowse.css('visibility','hidden');
		else
			self.rightBrowse.css('visibility','visible');
	}
	//-------------------------------------------------
	// Event Handlers
	//-------------------------------------------------
	/**
	 * @private Private event handler method that handles the browse clicks.
	 * @param {Object} e The event.
	 */
	this.onBrowseClick = function(e)
	{
		e.preventDefault();
		
		$(self.root).undelegate( '.browse', 'click', self.onBrowseClick );
		
		if( $(e.currentTarget).hasClass('left') )
		{
			self.scrollLeft();
		}
		else
		{
			self.scrollRight();
		}
	}
	//-------------------------------------------------
	// Getters/Setters
	//-------------------------------------------------

	//-------------------------------------------------
	// Faux Constructor Init
	//-------------------------------------------------
	/**
	 * We need to call our faux constructor, since it won't actually run by itself.
	 * @param element The DOM element to store as our root.
	 */
	this.init( element );
}