var Surface = function(){
	return {
		init: function(){
			Skinbox.init( { storage_ns: 'surface' } );
		},
		
		shides: function(){				
			Skinbox.shide( {
				ns: 'welcome',
				element: '.welcome > *:not(.hideit, .clear)',
				trigger: '.welcome .hideit',
				callback: function($, opts, visible){
					if( visible )
					{
						$('.welcome').switchClass('sb-shide-element-off', 'sb-shide-element-on', 500);
					}
					else
					{
						$('.welcome').switchClass('sb-shide-element-on', 'sb-shide-element-off', 500);
					}
				}
			} );
		},
	
		dropdowns: function(){
			Skinbox.dropdown( {
				element: '#dropdown_1'
			} );
		},
		
		resizer: function(){
			(function($){
				var $wrapper = $('#wrapper');
				var $brandingSkin = $('.bottomlight');
				var $resizeHandle = $('#resize-handle');
				var state = {};
				
				if( Skinbox.storage.resizer != undefined )
				{
					$wrapper.css('width', Skinbox.storage.resizer);
					$brandingSkin.css('width', Skinbox.storage.resizer);
				}
				
				state.resizeHandle = {
					absolute: {
						left: $resizeHandle.offset().left,
						top: $resizeHandle.offset().top 
					},
					
					relative: {
						left: $resizeHandle.css('left'),
						top: $resizeHandle.css('top')
					}
				};
				
				$resizeHandle.css( {
					position: 'absolute',
					left: state.resizeHandle.absolute.left,
					top: state.resizeHandle.absolute.top
				} );
				
				$(window).resize( function(){
					$resizeHandle.css( {
						position: 'relative',
						left: state.resizeHandle.relative.left,
						top: state.resizeHandle.relative.top
					} );
					
					state.resizeHandle.absolute = {
						top: $resizeHandle.offset().top,
						left: $resizeHandle.offset().left
					};
					
					$resizeHandle.css( {
						position: 'absolute',
						left: state.resizeHandle.absolute.left,
						top: state.resizeHandle.absolute.top
					} );
				} );
				
				$resizeHandle.draggable( {
					axis: 'x',
					
					start: function(evt, ui){
						state.initial = {
							top: ui.offset.top,
							left: ui.offset.left
						};
					},
					
					drag: function(evt, ui){
						state.current = {
							top: ui.offset.top,
							left: ui.offset.left
						};
						
						var diff = state.current.left - state.initial.left;
						
						if( diff != 0 )
						{
							var pxWidth = ( $wrapper.width() + diff );
							
							if( pxWidth < 990 )
							{
								return false;
							}
							
							Skinbox.storage.resizer = (	pxWidth / $(window).width() * 100 ) + '%';
							
							if( parseInt(Skinbox.storage.resizer) > 97 )
							{
								Skinbox.storage.resizer = '97%';
								return false;
							}
							
							$wrapper.css( { width: Skinbox.storage.resizer } );
							$brandingSkin.css( { width: Skinbox.storage.resizer } );
														
							state.initial = {
								top: ui.offset.top,
								left: ui.offset.left
							};
						}
					},
					
					stop: function(evt, ui){
						Skinbox.commit();
					}
				} );
			})(jQuery);
		}
	};
}();

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