document.observe('dom:loaded', function() {
	$$('.prod_desc_ids').invoke('hide');
	$$('.size_container').invoke('show');

	var els = $$('.size');
	els.each(function(item){
		Event.observe(item, 'click', changeSize);
		item.id = 'prod_id_size_' + item.innerHTML.replace(/[^a-zA-Z0-9]/, '_');
	});

	function changeSize(e)
	{
		//Get element selected
		var selected_el = e.element();
		//Get container for size spancs
		var selected_container = selected_el.up('.size_container');
		//Get the spans for the sizes
		var els = selected_container.select('.size');
		//Remove the selected class
		els.each(function(item){
			item.removeClassName('size_selected');
		});
		//Add the selected class
		selected_el.addClassName('size_selected');

		//Get the size drop-down menu for the spans
		var select_box = selected_container.up('.size_bar');
		//Get the list of options in the select menu
		var options = select_box.descendants();
		options.each(function(item){
			if('prod_id_size_' + item.innerHTML.replace(/[^a-zA-Z0-9]/, '_') == selected_el.id)
			{
				item.selected = true;
			}
		});
	}
});