var Magnetic = function(){
	return {
		prepare: function(){
			Skinbox.disableSetup();
		}, 
		
		init: function(){
			Skinbox.init( { storage_ns: 'magnetic' } );
			
			(function($){
				var resizeHandler = function(){
					var width = 0;
					
					if( window.innerWidth )
					{
						width = window.innerWidth;
					}
					else
					{
						width = document.body.clientWidth;
					}
					
					var possibleWidths = [1920, 1600, 1440, 1280, 1024];
					var $el = $('body');
					var widthSet = false;
					
					possibleWidths.each( function(possibleWidth, index){
						if( $el.hasClass('viewport-' + possibleWidth) )
						{
							$el.removeClass('viewport-' + possibleWidth);
						}
						
						if( !widthSet && width >= possibleWidth )
						{
							$el.addClass('viewport-' + possibleWidth);
							widthSet = true;
						}
					} );
				};
				
				$(window).resize(resizeHandler);
				
				resizeHandler();
			})(jQuery);
		},
		
		shides: function(){				
			Skinbox.$store('#welcome-store .trigger-on', 'welcome_trigger_on');
			Skinbox.$store('#welcome-store .trigger-off', 'welcome_trigger_off');
			Skinbox.$store('#shide-trigger', 'welcome_trigger');
			
			Skinbox.shide( {
				ns: 'welcome',
				element: '.welcome > *:not(.hideit, .clear)',
				trigger: '.welcome .hideit',
				callback: function($, opts, visible){
					if( visible )
					{
						Skinbox.$switch('welcome_trigger', 'welcome_trigger_off', 'welcome_trigger_on');
					}
					else
					{
						Skinbox.$switch('welcome_trigger', 'welcome_trigger_on', 'welcome_trigger_off');
					}
				}
			} );
			
			var $left = jQuery('#left-content');
			var $welcome = jQuery('#left-content_welcome');
			var $right = jQuery('#right-content');
			var $trigger = jQuery('.shide-sidebar');
			
			var leftMargins = {
				top: $left.css('margin-top'),
				right: $left.css('margin-right'),
				bottom: $left.css('margin-bottom'),
				left: $left.css('margin-left')
			};
			
			var welcomeMargins = {
				top: $welcome.css('margin-top'),
				right: $welcome.css('margin-right'),
				bottom: $welcome.css('margin-bottom'),
				left: $welcome.css('margin-left')
			};
			
			Skinbox.shide( {
				ns: 'sidebar',
				element: '#right-content > *:not(.shide-sidebar)',
				trigger: '.shide-sidebar',
				
				direction: 'right',
				duration: 500,
				
				before: function($, opts, visible){
					if( visible )
					{
						// move the main wrapper to the left (0.5)
						$left.animate( {marginRight: leftMargins.right}, {duration: 250, queue: true} );
						$welcome.animate( {marginRight: welcomeMargins.right}, {duration: 250, queue: true} );
												
						// lets queue the right side disappearance as a final result of $left element animation 
						$left.queue( function( next ){
							$right.css( { width: 'auto', height: 'auto' } );
							next();
						} );
					}
				},
				
				complete: function($, opts, visible){
					if( !visible )
					{
						$right.css( { width: 0, height: 0 } );
						$left.animate( {marginRight: 10}, {duration: 300, queue: true} );
						$welcome.animate( {marginRight: 10}, {duration: 300, queue: true} );		
					}
				},
				
				// provides initial state to shides
				state: {
					shown: function($, opts){
						// provided by css - default markup state
					},
					
					hidden: function($, opts){
						$left.css( {
							marginRight: 10
						} );
						
						$welcome.css( {
							marginRight: 10
						} );
						
						$right.css( {
							width: 0,
							height: 0
						} );
						
						opts.$animation.css( {
							opacity: 0,
							right: opts.$animation.outerWidth()
						} );
					}
				}
			} );
		},
	
		dropdowns: function(){
			Skinbox.dropdown( {
				element: '#dropdown_1'
			} );
		}
	};
}();

Magnetic.prepare();

Skinbox.ready( [
	Magnetic.init,
	Skinbox.topLink,
	Skinbox.loginBox,
	Skinbox.creditsBox,
	Magnetic.shides,
	Magnetic.dropdowns
] );