// JavaScript Document

$(document).ready(function(){
	$clickcount = 0;
	/* $('#detail').html('text can include <b>html code</b>'); */
	
	$('.productViewGallery').addClass('gallery_demo'); // adds new class name to maintain degradability
	
	$('ul.gallery_demo').galleria({
		
		history   : false, // activates the history object for bookmarking, back-button etc.
		clickNext : false, // helper for making the image clickable
		insert    : '#main_image', // the containing selector for our main image
		
		onImage : function(image,caption,thumb)
		{ // let's add some image effects for demonstration purposes
		
			
			// fade in the image & caption
		//	var _myDefault = $('.galleria_container').children('.myDefaultImage');
		//	console.log(_myDefault);
		//	_myDefault.hide();
			image.css('display','none').fadeIn(800);
			image.css({cursor:'pointer'});
			image.click(function() { 
								 $arr = image[0].src.split('/');
								 
								 //alert($arr[$arr.length-1]);
								
								 tb_show(null, '/assets/display/'+$arr[$arr.length-1],'gallery-shoes');
								// console.debug(image[0].src);
								 });
			
			caption.css('display','none').fadeIn(800);
			// fetch the thumbnail container
			var _li = thumb.parents('li');
			
			// fade out inactive thumbnail
			_li.siblings().children('img.selected').fadeTo(200,0.5);
			// fade in active thumbnail
			thumb.fadeTo('fast',1).addClass('selected');	
			// add a title for the clickable image
			image.attr('title','Click to enlarge');
			$clickcount++;
		
		},
	
		onThumb : function(thumb)
		{ // thumbnail effects goes here
			//alert(thumb);
			//console.debug(thumb[0].src);
			
			///### HACK by stuart - go on Joe, tell me this feature already exists!!!!!!!
			$arr = thumb[0].src.split("/0/194/");
			//console.debug($arr);
			thumb[0].src = $arr[0]+'/0/40/'+$arr[1];
			//---------------------------------------------------------------------------
			
			// fetch the thumbnail container
			var _li = thumb.parents('li');
			// if thumbnail is active, fade all the way.
			var _fadeTo = _li.is('.active') ? '1' : '0.3';	
			// fade in the thumbnail when finnished loading
			thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
			
			// hover effects
			thumb.hover(
				function() { thumb.fadeTo('fast',1);	},
				function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
			)
			
		}
		
	});
	
});