var progressiveSelector = function (id, source, callback)
{
		// object to be returned 
	var that		= {},

		// containing node 
		home_div	= dojo.byId(id),
		
		// array of select nodes in the home_div
		node_stack	= [],

	// render's the dropdown for a specific slice, destroys existing and following dropdowns
	render_slice = function (source_index, child_key)
	{
		// returns null if this index does not exist in the source data
		if (!source || !source[source_index])
			return null;
		
		if (source_index > 0  && child_key == '')
			return null;
			
		// defines local copy of the current part of the source
		var source_slice	= source[source_index],
		
			// new select node to be attached to the home_div
			option_node		= dojo.create('select'),

			// create the onchange event function
			onchange_event = function(value)
			{
				// creates new dropdown
				if (render_slice(source_index + 1, value) === null)
				{
					// if null is returned then this is already the last branch and we should call the callback function
					callback(value, that);
				}
			};
		;

		// iterates through all of this slice's values and creates option nodes for each
		for (sku in source_slice.values)
		{
			// local item object for easy reading
			var item = {
				parent	: source_slice.values[sku][0],
				name	: source_slice.values[sku][1],
				id		: source_slice.values[sku][2]
			};

			// skip if this value does not belong to the current parent
			if (item.parent != child_key)
				continue;
			
			// create and attach the actual node
			dojo.create(
				'option',
				{value : item.id || sku},
				option_node
			)
			// for the display use the item.name if it exists, otherwise use the sku			
			.innerHTML = item.name || sku;
		}

		// place the node into the home_div
		place_slice(option_node, source_index);

		// if there's more then 1 option then create attach the onchange event
		if (option_node.children.length > 1)
		{
			// creates first row of option node and attaches 
			dojo.create(
				'option',
				{selected:true},
				option_node,
				'first'
			).innerHTML = '- '+ source_slice.title +' -' || ' - SELECT - ';
			
			dojo.connect(option_node, 'onchange', null, function(event)
			{
				onchange_event( event.target.value );
			});

		// if there's 1 option then auto select it and populate the next dropdown using same logic as the onchange event 
		} else {
			onchange_event( option_node.value );
		}

		// return the node
		return option_node;
	},

	// places the node into the home_div, also clobers existing dropdowns
	place_slice = function (option_node, source_index)
	{
		// delete invalid dropdowns
		// iterate over all nodes of the stack that at the location of the new dropdown or past it 
		for (i=source_index; i < node_stack.length; i++)
		{
			dojo.destroy(node_stack[i]);
		}
		
		var div_node = dojo.create('div'); 

		// place the node into the stack for future reference
		node_stack[source_index] = div_node;

		// actually place the node into the DOM
		dojo.place(
				div_node,
				home_div
		);
		
		// actually place the node into the DOM
		dojo.place(
			option_node,
			div_node
		);
		
	};

	// render's the first dropdown
	that.render = function ()
	{
		render_slice(0, 0);

		return that;
	};

	return that.render();
};