Drupal.behaviors.scrollable_gallery = function(context) {
	// initialize scrollable 
	var $images_container = $('#content .node-type-product .field-field-product-image', context);
	var $images = $images_container.scrollable({ size: 5 }).
	//	before('<div id="field-field-product-image-full" rel="#field-field-product-image-overlay"><img /></div><div id="field-field-product-image-overlay"><div class="close"/><img /></div>').end().
	find('.field-item img');

	var init = function (image) {
		// calclulate large image's URL based on the thumbnail URL (flickr specific) 
		//quickfix, should perhaps disable click action istead
		if(!$(image).parent().hasClass('active')) {

			var url = $(image).attr("src").replace('product_image_thumbnail', 'product_image_full');

			// get handle to element that wraps the image and make it semitransparent 
			var wrap_full = $('#field-field-product-image-full').fadeTo(0, 0); 

			// the large image from flickr 
			var img = new Image(); 

			// call this function after it's loaded 
			img.onload = function() { 
				// make wrapper fully visible 
				wrap_full.fadeTo('slow', 1); 

				// change the image and apply overlay behavior
				wrap_full.find('img').
				attr('src', url).
				attr('rel', '#field-field-product-image-overlay').
				overlay({effect: 'apple'});
			}; 

			// begin loading the images 
			img.src = url;
			$('#field-field-product-image-overlay img').attr('src', url.replace('product_image_full', 'product_image_overlay'));
		}
	}

	if($images.size()) {
		if($images.size() == 1) {
			$images_container.hide();
			init($images.eq(0));
		}
		else {
			$images.click(function() {
					init(this);
					// when page loads simulate a "click" on the first image 
				}).filter('img:first').trigger('click');
		}
	}
};