function SlidingScreenTransition(oldView, newView, direction, callback)

{

	/* DOM element to be "pushed out" */

	this.currentScreen = oldView.rootElement;

	/* DOM element to be "pulled in" */

	this.nextScreen = newView.rootElement;

	/* direction of the sliding transition */

	this.direction = direction;

	// callback when done

	this.callback = callback;

}

/* constant value for right-to-left transitions */

SlidingScreenTransition.DIRECTION_LEFT = 1;

/* constant value for left-to-right transitions */

SlidingScreenTransition.DIRECTION_RIGHT = -1;

/* total number of steps of the sliding transition */

SlidingScreenTransition.TRANSITION_STEPS = 10;

SlidingScreenTransition.prototype.start = function()

{

	var self = this;

	this.nextScreen.style.top = '0px';

	this.nextScreen.style.left = (this.direction * screen.availWidth) + 'px';

	this.transitionStep = 0;

	this.transitionInterval = setInterval(

		function()

		{

			self.doTransitionStep();

		},

		100

	);

}

SlidingScreenTransition.prototype.stop	 = function() {

	clearInterval ( this.transitionInterval );

	if (this.callback) {

		this.callback.call();

	}

}

SlidingScreenTransition.prototype.doTransitionStep = function()

{

	this.transitionStep++;

	if(this.transitionStep <= SlidingScreenTransition.TRANSITION_STEPS)

	{

		this.nextScreen.style.left = 

			(screen.availWidth * 

			(SlidingScreenTransition.TRANSITION_STEPS - this.transitionStep) * 

			this.direction / SlidingScreenTransition.TRANSITION_STEPS)

			 + 'px';

		this.currentScreen.style.left = 

			(- screen.availWidth * this.transitionStep * this.direction / 

			SlidingScreenTransition.TRANSITION_STEPS) 

			+ 'px';

	}

	else

	{

		this.stop();

	}

}