(function ($) {
	
	$.categoryLanding = function (options) {
		return $.categoryLanding.impl.init(options);
	};
	
	$.fn.categoryLanding = function (options) {
		return $.categoryLanding.impl.init(this, options);
	};
	
	/*
	 * default options
	 */
	$.categoryLanding.defaults = {
	    
	};
	
	$.categoryLanding.impl = {
		
		/*
		 * options
		 */
		opts:           null,
		
		/*
		 * helper
		 */
		helper:         {},
		
		/*
		 * Initialize the page
		 */
		init: function (options) {
            
            var self = this;
            
            this.opts = $.extend({}, $.categoryLanding.defaults, options);
            
            // helper objects
            self.helper.container = $('div.page-landing');
            self.helper.nav = self.helper.container.find('.nav-landing-container');
            self.helper.background = self.helper.container.find('li.background img');
            
            // load the background image
		    $(new Image()).load(function(){
		        
		        self.helper.background.parent()
		            .fadeIn(3000)
		            ;
		        
		        self.initNav()
		        
		    }).attr('src', self.helper.background.attr('src'));
            
			return self;
		},
		
		/*
		 * Initialize the nav
		 */
	    initNav: function () {
		    
		    var self                = this;
		    var $innerContainer     = self.helper.nav.find('.nav-landing-inner-container')
		    var $innerContainerBg   = $('<div class="nav-landing-inner-container-bg"></div>');
		    
		    $innerContainerBg
		        .css({
		            height:     $innerContainer.outerHeight() + 'px'
		        })
		        ;
		    
		    $innerContainer.wrap('<div class="nav-landing-inner-container-wrapper"></div>');
		    self.helper.nav.find('.nav-landing-inner-container-wrapper').prepend($innerContainerBg);
		    
		    // show it
		    self.helper.nav
		        .css({
		            right:      -1*(self.helper.nav.outerWidth() + 1) + 'px',
		            opacity:    '0.00'
		        })
		        .animate({
		            right:      0,
		            opacity:    '1.00'
		        }, 2000, 'easeOutExpo')
		        ;
		    
		    return;
		}
		
	};
})(jQuery);
