(function($) {

	window.app = {
	
		spritely: {
			
			init: function() {
				$('#stage-car')
					.sprite({fps: 24, no_of_frames: 4})
					.spRandom({top: 210, bottom: 250, left: 350, right: 500})
					.active();
				$('#stage-clouds').pan({fps: 30, speed: 0.7, dir: 'left', depth: 10});
				$('#stage-hills-far').pan({fps: 30, speed: 2, dir: 'left', depth: 30});
				$('#stage-hills-near').pan({fps: 30, speed: 3, dir: 'left', depth: 70});
				$('#stage-hills-near, #stage-hills-far, #stage-clouds').spRelSpeed(3);
				
				$('#stage-slider')
					.slider({
						value: 3,
						min: 0,
						max: 100,
						slide: function() {
							window.app.spritely.sliderChange($(this).slider('value'));
						},
						change: function() {
							window.app.spritely.sliderChange($(this).slider('value'));
						}
				});
			},
	        
			sliderChange: function(value) {
				if ($('#stage-drag-me').css('display') == 'block') {
					if (!$.browser.msie) {
						$('#stage-drag-me').fadeOut('slow');
					} else {
						$('#stage-drag-me').hide();
					}
				}
				var sliderSpeed = value;
				$('#stage-hills-near, #stage-hills-far, #stage-clouds').spRelSpeed(sliderSpeed);
				
				var carSpeed = sliderSpeed;
				if (sliderSpeed < 12) {
					var carSpeed = 12;
				} else if (sliderSpeed > 24) {
					var carSpeed = sliderSpeed / 2;
				}
				$('#stage-car').fps(carSpeed - 3);
			}

		}

	};

	$(document).ready(function() {
		window.app.spritely.init();
	});

})(jQuery);