// --------------------------------------------------

var TWINKLER = function( $container , items )
{
	// Settings

	this.items_per_layer = 50;

	// Storage

	this.items = items;
	this.$container = $container;

	this.layers = null;

	// One-off initialisations

	this.sort_items_by_length();

	// Organise our layers
	this.layers = this.distribute_layers();
	
	// Build/refresh the DOM
	this.render();
};

// --------------------------------------------------

TWINKLER.prototype.render = function()
{
	var number_of_layers = this.layers.length;

	// Create somewhere to build the layers
	
	var $layers_staging = [];
	
	for( var l = 0 ; l < number_of_layers ; l ++ )
	{
		// Make the layer container
		var $layer = document.createElement( 'div' );
		$layer.classList.add( 'twinkler_layer' );
	
		$layers_staging.push( $layer );
	}
	
	// Create the items in each layer
	for( var i = 0 ; i < this.layers[ 0 ].length ; i ++ )
	{
		// Create the item in each layer
		for( var l = 0 ; l < number_of_layers ; l ++ )
		{
			var $item = document.createElement( 'div' );
			$item.innerHTML = this.layers[ l ][ i ];
	
			// Items in the first layer start visible
			if( l == 0 ) $item.classList.add( 'is_twinkling' );
	
			// Add to the staging area
			$layers_staging[ l ].appendChild( $item );
		}
	}
	
	// Empty our container first

	this.$container.innerHTML = '';

	// Add our layers to the DOM
	
	for( var l = 0 ; l < number_of_layers ; l ++ )
	{
		this.$container.appendChild( $layers_staging[ l ] );
	}

}

// --------------------------------------------------
// Sorts all items by name length

TWINKLER.prototype.sort_items_by_length = function()
{
	this.items.sort( function( a , b )
	{
		if( b.length == a.length )
		{
			return ( Math.random() * 2 ) - 1;
		}
		else return a.length - b.length;
	} );
}

// --------------------------------------------------
// Splits the one array into several layer arrays with synced item lengths

TWINKLER.prototype.distribute_layers = function()
{
	var number_of_layers = Math.ceil( this.items.length / this.items_per_layer );

	// Set up empty containers for our layers

	var layers = [];

	for( var l = 0 ; l < number_of_layers ; l ++ )
	{
		layers[ l ] = [];
	}

	// Distribute the items into their layers

	for( var i = 0 ; i < this.items.length ; i += number_of_layers )
	{
		for( var l = 0 ; l < number_of_layers ; l ++ )
		{
			layers[ l ].push( this.items[ i + l ] || "" );
		}
	}

	// Randomise the order of each layer

	var cursor = layers[ 0 ].length;

	while( cursor != 0 )
	{
		random_index = Math.floor( Math.random() * cursor ); 
		cursor--;

		// Swap items in each layer
		for( var l = 0 ; l < number_of_layers ; l ++ )
		{
			var swap = layers[ l ][ cursor ];
			layers[ l ][ cursor ] = layers[ l ][ random_index ];
			layers[ l ][ random_index ] = swap;
		}
	}

	return layers;
}

// --------------------------------------------------


		// --------------------------------------------------
		// Shuffle everything first
		
		var cursor = all_items.length;

		while( cursor != 0 )
		{
			random_index = Math.floor( Math.random() * cursor ); 
			cursor--;
			
			var temp = all_items[ cursor ];
			all_items[ cursor ] = all_items[ random_index ];
			all_items[ random_index ] = temp;
		}
		
		// --------------------------------------------------
		// Split into 2 arrays
		
		var midpoint = Math.ceil( all_items.length / 2 );
		
		var items_1 = all_items.slice( 0 , midpoint );
		var items_2 = all_items.slice( midpoint ) ;
		
		// --------------------------------------------------
		// Go!
		
		var twinkler_1 = new TWINKLER( document.getElementById( 'twinkler_1' ) , items_1 );
		var twinkler_2 = new TWINKLER( document.getElementById( 'twinkler_2' ) , items_2 );
		
		// --------------------------------------------------