var BubbaHoo = {
	settings: {
		fancyBox: {		
			'zoomOpacity' : true,
			'overlayShow' : false,
			'zoomSpeedIn' : 500,
			'zoomSpeedOut' : 500,
			'easingIn' : 'easeOutBack',
			'easingOut' : 'easeInBack',
			'hideOnContentClick': false
		}
	}
}

jQuery().ready(function() {
	//alert("HERE");
	//jQuery('ul.images a').fancybox(BubbaHoo.settings.fancyBox);
	jQuery('ul.images a, .image a').fancybox();

	jQuery("#slideshow").cycle({fx:'fade',speed:3000, timeout:4000 });
	
	// Give our ordering form the ability to show the image when selected
	jQuery('form select').each(function() {
		// We only want our specific select boxes for products
		if (this.id.match(/^online_orderTitle/)) return;
		
		// First give this an image container.  We will add it now to make things more uniformed.
		//jQuery(this).before(jQuery('<img src="#" width="100" height="50" />'));
		
		jQuery(this).bind('change', function() {
			var imgElm = jQuery(this).siblings('img');
			var imageHref = '/images/photos/photos-coming-soon.gif';
			
			// We will use the $items[] array.  Do we have an image referenced for this product?
			if ($items[this.options[this.selectedIndex].value]) {
				var imageHref = $items[this.options[this.selectedIndex].value];
			}
			
			if (this.selectedIndex == 0) {
				// Remove the image if they've selected the '-select product-' option
				if (imgElm.length) imgElm.remove();
				return;
			}
				
			// If we have no image object, then lets create one =)
			if (!imgElm.length) {
				jQuery(this).before(jQuery('<img src="'+imageHref+'" width="100" />'));
			} else {
				imgElm.attr('src', imageHref);
			}
		});
	});
});