badmintion app js

app.js

;(function($){

		app = {

			init: function(config) {

				this.config = config;

				$(config.wrapper).hide();

				$(config.pages).each(function(k,v){

					$(this).width(config.winWidth).height(config.winHeight).css('float', 'left');
						
				});

				$('body').width($(config.pages).length * config.winWidth);

				app.setLoader(app.doJopp());
				app.bindings();

			},
			setLoader: function( callback ) {
				if( $('body #loader').length <= 0 )
					$('<div id="loader"><img src="images/loader.gif" /></div>').insertBefore(app.config.wrapper);

				var loader = $('body').find('#loader');

				loader.css({
					position: 'absolute',
					top: (app.config.winHeight / 2) - 16,
					left: app.config.winWidth + (app.config.winWidth / 2) - 16,				
				}).fadeIn(255, function(){
					if( typeof callback == "function" )
						callback(prams);
				});

			},
			doJopp: function() {
				var config = app.config;
				$(config.wrapper).jopp({
					direction: "horz",
					sectionSelector: config.pages,
				 	deepLinking: false,
				 	changeHash: true	 	
				});

				app.setView();
			},
			setView: function() {
				var config = app.config;
				$('body,html').animate({
					scrollLeft: (app.config.startSlide - 1) * config.winWidth
				},1,function(){
					$('body #loader').delay(app.config.delay).fadeOut(255, function(){
						$(config.wrapper).fadeIn(225, function(){
							$(document).trigger('app/load');		
						});
					});
				});
			},
			bindings: function() {
				$(document).on('app/resize', function(){});
			}

		};

		config = {

			winWidth: $(window).width(),    // Fetcher vindue bredden
			winHeight: $(window).height(),	// Fetcher vindue højden
			wrapper: "section",				// jopp wrapper
			pages: "article",				// sider ( kan være element som her, eller f.eks. en class )
			delay: 2000,					// Skal der være en delay på at loaderen fader ud og indholdet fader ind?
			startSlide: 2					// Hvilken "side" skal vi starte med?

		};

		// Her initalizer vi scriptet. Do not edit!
		app.init(config);

		// Not set to any function. (See the bindings function in app object).
		$(window).on('resize', function(){ $(document).trigger('app/resize') });

		// Når siden er loaded bliver denne her executed
		$(document).on('app/load', function(){
			// elm1
			$('.left').attr('class', 'bounceInLeft');

			// elm2
			$('.right').attr('class', 'bounceInRight');
		});
		
		// Trigger clicks
		$('.app-go').live('click', function(){
			$('nav li[data-elm="jopp-1"] a').trigger('click');		
			return false;
		});

	}(jQuery));