var bestsellerBusy = false;

function backBtn()
{
	var element = document.getElementById( "bestsellerGrid" );
	var x = document.getElementById( "bestsellerGrid" ).offsetLeft;
	var productWidth = 159;
	var containerWidth = 1450;
	
	if ( ( x < 0 ) && !bestsellerBusy )
	{
		bestsellerBusy = true;
		com.ydso.transitions.Tween( element, "x", com.ydso.easing.linear, x, x + productWidth, 500, setReady );
	}
}

function nextBtn()
{
	var element = document.getElementById( "bestsellerGrid" );
	var x = document.getElementById( "bestsellerGrid" ).offsetLeft;
	var productWidth = 159;
	var containerWidth = 1450;
	
	if ( ( x >= - ( containerWidth - ( 3 * productWidth ) ) ) && !bestsellerBusy )
	{
		bestsellerBusy = true;
		com.ydso.transitions.Tween( element, "x", com.ydso.easing.linear, x, x - productWidth, 500, setReady );
	}
}

function setReady()
{
	bestsellerBusy = false;	
}

/*****************************************************************************************************************************
 * Tween class to animate html blocks
 *****************************************************************************************************************************/
com = {};
com.ydso = {};
com.ydso.transitions = {};
com.ydso.transitions.Tween = function( id, property, easingFunction, begin, finish, duration, callback )
{
	/**
	 * 30fps = 1s / 30fps
	 * 1s = 1000ms
	 * 1000ms / 30fps = 33ms
	 * 1 frame = 33ms
	 *
	 * uitrekenen: hoe groot wordt de stap om div in "time" volledig te verplaatsen
	 * step = ( finish - begin ) / frames
	 * frames = duration / timeout
	 * timeout = duur van 1 frame = 33ms
	 * step = ( finish - begin ) / ( duration / 33 )
	 */
	 
	var _self			= this;													// Self reference for timer callback
	var stepCurrent		= 0;													// Current step number
	var begin			= begin;												// Start position/number
	var finish			= finish;												// End position/number
	var callback		= callback;												// Function to call when the tween is complete
	var property		= property;												// Which property to change ( x, y, alpha, width, height )
	var stepSize		= ( finish - begin ) / ( duration / 33 );				// Total change in one step
	var stepTotal		= Math.abs( ( finish - begin ) / stepSize ); 			// Total number of steps
	var stepValue		= begin;												// Current value...
	var stepTime		= setInterval( function() { _self.step(); }, 33 );		// Timer to perform next tween step
	var easingFunction	= easingFunction;
	
	if ( typeof id == "object" )
	{
		var element = id;
	}
	else
	{
		var element = document.getElementById( id );
	}
	
	//alert ( 'Stepsize: '+ stepSize +'\nstepValue: '+ stepValue +'\nstepCurrent: '+ stepCurrent +'\nstepTotal: '+ stepTotal +'\nbegin: '+ begin +'\nfinish: '+ finish );
	
	this.step = function()
	{
		if ( stepCurrent > stepTotal )
		{
			clearInterval( stepTime );
			
			stepValue = finish;
			
			setTimeout( function() { _self.change(); }, 33) 
			
			if ( callback )
			{
				callback();
			}
		}
		else
		{
			this.change();

			stepValue = easingFunction( stepCurrent * 33, begin, ++stepCurrent * stepSize, duration );
		}
	}

	this.change = function()
	{
		switch ( property )
		{
			/**
			 * Move over x axis
			 */
			case 'x':
				element.style.left 		= Math.round( stepValue ) + "px";
				break;
	
			/**
			 * Move over y axis
			 */
			case 'y':
				element.style.top		= Math.round( stepValue ) + "px";
				break;
	
			/**
			 * Change width
			 */
			case 'width':
				element.style.width		= Math.round( stepValue ) + "px";
				break;
				
			/**
			 * Change height
			 */
			case 'height':
				element.style.height	= Math.round( stepValue ) + "px";
				break;
				
			/**
			 * Change alpha
			 *
			 * Needs browser check for compatibility 
			 */
			case 'alpha':
				element.style.opacity		= stepValue;
				element.style.MozOpacity	= stepValue;
				element.style.KhtmlOpacity	= stepValue;
				element.style.filter		= "alpha( opacity=" + stepValue * 100 + ")";
				break;
		}
	}
}

/*****************************************************************************************************************************
 * Easing functions for animations
 *****************************************************************************************************************************/
com.ydso.easing = {
	linear : function ( t, b, c, d )
	{
		t/=d;
		return b+c*(t);
	},
	outBack : function ( t, b, c, d )
	{
		var ts=(t/=d)*t;
		var tc=ts*t;
		return b+c*(4*tc + -9*ts + 6*t);
	},
	inElastic : function(t, b, c, d)
	{
		var ts=(t/=d)*t;
		var tc=ts*t;
		return b+c*(33*tc*ts + -59*ts*ts + 32*tc + -5*ts);
	},
	backInCubic : function (t, b, c, d)
	{
		var ts=(t/=d)*t;
		var tc=ts*t;
		return b+c*(4*tc + -3*ts);
	},
	outBackCubic : function(t, b, c, d)
	{
		var ts=(t/=d)*t;
		var tc=ts*t;
		return b+c*(4*tc + -9*ts + 6*t);
	}
}