function getHashFragment(prefix) {
	var hash = window.location.hash;
	if (hash.indexOf('#') != -1) {
		// Sometimes the # is included in the hash 
		hash = hash.substr(1)
	}
	if (undefined != prefix && prefix.length > 0) {
		if (hash.slice(0, prefix.length) == prefix) {
			// The hash begins with the prefix.
			// Remove the prefix
			hash = hash.substr(prefix.length);
		} else {
			// A prefix was given, but the hash doesn't begin with it.
			// Ignore the hash
			return '';
		}
	}
	return hash;
}

window.addEvent('domready', function() {
	
	$$('a.thumbnailImage').each(function(el) {
		el.addEvent('click', (function(event) {
			// Change the main image when the thumbnails are clicked
			// See also selectColour()
			$('largeImage').src = el.href;
			// selectColour() is out for now as it doesn't work properly
			// when there are multiple images - it would be nice to 
			// revisit and fix properly as some point
			// selectColour();
			event.stop();
		}).bindWithEvent());
	});
	
	var productsReceived = (undefined != productData);
	if (productsReceived) {
		// Set up the page for a specific product variant if required
		var item = getHashFragment('item');
		if (item) {
			// If an item was given, it should be an integer
			item = parseInt(item);
			if (undefined != productData['product_item_data'] &&
					undefined != productData['product_item_data'][item]) {
				var data = productData['product_item_data'][item]
				// Select the right image
				$('largeImage').src = data['image_url'];
				// Preselect the right item in the drop-down
				if (data['colour'] && $('id_attr_colour')) {
					$('id_attr_colour').getElements('option').each(function(el) {
						// Check for the one with the colour name given
						if (el.text == data['colour']) {
							el.selected = true;
						}
					});
				}
			}
		}
		
		// If a colour is selected in the drop down, select the corresponding image
		if ($('id_attr_colour')) {
			var colour_dropdown = $('id_attr_colour')
			colour_dropdown.addEvent('change', function(event) {
				colour_text = colour_dropdown[colour_dropdown.selectedIndex].text
				all_item_data = productData['product_item_data']
				for (item_number in all_item_data) {
					item_data = all_item_data[item_number];
					if (colour_text == item_data['colour']) {
						$('largeImage').src = item_data['image_url'];
						break;
					}
				}
				event.stop();
			});
		}
	}
});

//If an image thumbnail is selected, select the corresponding colour drop down
function selectColour() {
	if (undefined != productData['product_item_data']) {
		large_img_url = $('largeImage').src;
		all_item_data = productData['product_item_data'];
		for (item_number in all_item_data) {
			item_data = all_item_data[item_number];
			item_url = item_data['image_url'];
			item_file_name = item_url.substr(item_url.lastIndexOf('/'))
			large_img_filename = large_img_url.substr(large_img_url.lastIndexOf('/'))
			if (item_data['colour'] && $('id_attr_colour')) {
				if (item_file_name == large_img_filename) {
					$('id_attr_colour').getElements('option').each(function(op_el) {
						// Check for the one with the colour name given
						if (op_el.text == item_data['colour']) {
							op_el.selected = true;
						}
					});
					break;
				}
			}
		}
	}
}