var Grid = {
	
	//----------------------------------------------------------
	// Initialize
	//
	
	Initialize: function( Category, MoveURL )
	{
		
		this.MoveURL = MoveURL;
		this.Category = Category;
		this.CreateDraggables( );
		this.CreateDroppables( );
		
	},

	//----------------------------------------------------------
	// Move a picture to another category
	//
	
	Move: function( ID, Category )
	{
	
		$.get( this.MoveURL + '/' + ID + '/' + Category );
		
	},
	
	//----------------------------------------------------------
	// Sort pictures
	//
	
	Sort: function( ID )
	{
	
		
		
	},
	
	//----------------------------------------------------------
	// Create draggable elements
	//
	
	CreateDraggables: function( )
	{
		
		$( 'ul.grid li' ).draggable( {
			
			revert: 'invalid',
			revertDuration: 250,
			opacity: 0.5,
			distance: 10
			
		} );
		
		/*$( 'ul.grid' ).sortable( { 
		
			revert: true,
			revertDuration: 250,
			opacity: 0.5,
			distance: 10,
			update: function( e, ui ) {
				
				Grid.Sort( ui.draggable.attr( 'series' ) );
				
			}
		
		} ).disableSelection( );*/
		
		// Hover effects
		
		( this.Categories = $( '.category[cat!=' + this.Category + ']' ) ).css( {
			
			marginBottom: '7px',
			height: '105px' //'155px'
			
		} );
		
	},
	
	//----------------------------------------------------------
	// Create droppable elements
	//
	
	CreateDroppables: function( )
	{
		
		this.Categories.droppable( {
			
			tolerance: 'pointer',
			hoverClass: 'hover',
			drop: function( e, ui )
			{
				
				var Draggable = ui.draggable;
				var ID = Draggable.attr( 'series' );
				var Category = $( this ).attr( 'cat' );
				
				// Animate
				
				Draggable.css( 'visibility', 'hidden' )
						 .animate( { width: 0, marginRight: 0 }, 250, function( ) { $( this ).remove( ) } );
				$( 'a', this ).effect( 'pulsate', { times: 1 } );
				
				// Move
				
				Grid.Move( ID, Category );
				
			}
			//activate: function( ) { $( this ).animate( { paddingLeft: '15px' }, 100 ) },
			//deactivate: function( ) { $( this ).animate( { paddingLeft: '0px' }, 100 ) },
			
		} );
		
	}
	
};