/*	
 *	Image Details Script
 * 
 *	Van Stokes
 *	11.7.2009
 *	
*/


function imageDetailsFunc(){
		
	// grayBoxSetting holds page specific vars to pass to the script
	// passes activeDetail as something like 85_1_0003 when imageSize is not 'big' when on galleryBig.php and gallery.php
	
	var getSettings = $("#grayBoxSetting").attr("title");
	// looks like: 1-big-85_1_0000 or 1-thumbs, depending on if clicking through to lightbox or enlarged
	
	var splitSettings = getSettings.split(/-/g);
	var useGrayBox = splitSettings[0];
	var imageSize = splitSettings[1];
	var activeDetail = splitSettings[2];
	if(imageSize == 'big' )
		{
			
			var splitActive = activeDetail.split(/_/g);
			var gallery = splitActive[0];
			var image = splitActive[1];
			var detail = splitActive[2];
			
			// string of detailIDs that exist
			// example: 0001-0003-0004-
			// alert('getSettings = ' + getSettings + ' splitActive = ' + splitActive + ' useGrayBox = ' + useGrayBox + ' imageSize = ' + imageSize + ' activeDetail = ' + activeDetail + ' detail = ' + detail ) ;
			var biggestDetails = $("#biggestDetails").attr("title");
		
			// when clicking through to galleryBig.php a detail may already be active
			// on carousel view it will not apply, but is set to 0000 anyway
			
			var activeImg = '#' + activeDetail;
			if(useGrayBox == 1)
				{
					$(activeImg).attr("src", "templateImages/grayBoxDetailDark.png");
				}
			else
				{
					var activeDetailUrl = 'artistInfo/smallest/' + image + '.jpg';
					//alert(activeDetailUrl);
					$(activeImg).attr("src", activeDetailUrl);
				}
				
			//set the click state for active.  Does nothing if nothing is active.
			$(activeImg).data("buttonState", {down: 1});
			
			// if a biggest is available for whatever detail is being looked at make a lightbox link
			if(detail != '0000' && imageSize == 'big')
				{
								
					// make sure that the biggest version exists before setting link
					var searchingForBiggest = biggestDetails.indexOf(detail);
						
					if(searchingForBiggest > -1)
						{
							
							//set the lightbox URL of the active details
							var thumbId = "#thumb" + image;
							var replacementHtml = '<a href="artistInfo/biggest/' +  image + '_det_' + detail + '.jpg" id="largeImage" alt="" title=""><img src="artistInfo/big/'+ image + '_det_' + detail + '.jpg" ></a>';

							//alert(detail +' - '+ imageSize);
							$(thumbId).html(replacementHtml);

						}						
				}
		}

	//alert(useGrayBox + imageSize);
			
	// preload images
	$(".imageDetail").each(function(i){
		var newElement = this.id;
		var splitId = newElement.split(/_/g);
		var gallery = splitId[0];
		var image = splitId[1];
		var detail = splitId[2];
		
		
		var imgUrl = 'artistInfo/'+ imageSize +'/' + image + '_det_' + detail + '.jpg';
		var thumbUrl = 'artistInfo/' + imageSize + '/' + image + '.jpg';
		
		var biggestImgUrl = 'artistInfo/biggest/' + image + '_det_' + detail + '.jpg';
		var biggestThumbUrl = 'artistInfo/biggest/' + image + '.jpg';
		
		
		$('<img />')
			.attr('src', imgUrl)
		    .load(function(){
		        $('.profile').append( $(this) );
		    })
		
		
		var elId = '#' + newElement;
		// store click states and replacement HTML vars to each element
		$(elId).data("detailInfo", {detailPath: imgUrl, thumbPath: thumbUrl,biggestImgUrl: biggestImgUrl,biggestThumbUrl: biggestThumbUrl ,  galleryId: gallery, imageId: image, detailId: detail});
		
		// don't set button state to 0 if active image
		if(newElement != activeDetail)
			{
				$(elId).data("buttonState", {down: 0});	
			}
		
		
	})
	
	

	
	// select images with the class
	$(".imageDetail")
	.click(function(){
		

			
		var el = $(this);
		var elAttr = el.attr("id");
		var detailPath = el.data("detailInfo").detailPath;
		var thumbPath = el.data("detailInfo").thumbPath;
		var galleryId = el.data("detailInfo").galleryId;
		var imageId = el.data("detailInfo").imageId;
		var detailId = el.data("detailInfo").detailId;	
		
		var biggestImgUrl = el.data("detailInfo").biggestImgUrl;	
		var biggestThumbUrl = el.data("detailInfo").biggestThumbUrl;	
			
		var buttonState = el.data("buttonState").down;
		
		 // alert(detailPath + '--' + thumbPath + '--' + galleryId + '--' + imageId + '--' + detailId + '--' + buttonState);
				
		if(buttonState == 0)
			{
				var imagePath = detailPath;
				//var lightBoxUrl = biggestImgUrl;
				
				if(imageSize == 'big'  || thumbToLightbox == 1)
					{
							
							if(imageSize == 'big' )
								{
									//make sure biggest exists
									var searchingForBiggest = 0;
									searchingForBiggest = biggestDetails.indexOf(detailId);
									
									
								}
								
							//alert(searchingForBiggest + ' ' + detailId + ' ' + biggestDetails + ' ' + thumbToLightbox);
							
							if((searchingForBiggest > -1 || thumbToLightbox == 1) && showLightBox == 1)
								{
									var lightBoxUrl = '<a href="' + biggestImgUrl + '" id="largeImage" alt="" title=""  class="thumb"><img src="' + imagePath + '" ></a>';
								
							
								}
							else
								{
									var lightBoxUrl = '<img src="' + imagePath + '" >';
								}
											
					}
						
				// make others in same div light, or reverted to original state and set button state to 0
				var clickedDiv = '#detailDiv' + imageId;
				var weedOutSelector = clickedDiv + ' > img';
						
				$(weedOutSelector).each(function(i){
					
					var revertingEl = $(this);
					var revertingElInfo = revertingEl.attr('id');
					var revertingDetailId = revertingEl.data("detailInfo").detailId;

					// don't revert back the one that was clicked since it will get changed again
					if (revertingDetailId != detailId)
						{	
						
							if(useGrayBox == 1)
								{
									var revertedImagePath = 'templateImages/grayBoxDetail.png';	
								}
							else
								{
									var revertedImagePath = 'artistInfo/smallest/' + imageId + '_det_' + revertingDetailId + '.jpg';
								}

								revertingEl.attr("src", revertedImagePath);
						}
					})
				
				$(weedOutSelector).data("buttonState", {down: 0});
				
				// make this one dark or the main image
				if(useGrayBox == 1)
					{
						var clickedImagePath = 'templateImages/grayBoxDetailDark.png';	
					}
				else
					{
						var clickedImagePath = 'artistInfo/smallest/'  + imageId + '.jpg';	
					}
				
				el.attr("src", clickedImagePath);
				el.data("buttonState", {down: 1});
		
			}
		else
			{
				var imagePath = thumbPath;
				//var lightBoxUrl = biggestThumbUrl;
				
				
				if(imageSize == 'big'  || thumbToLightbox == 1)
					{
							
							if(imageSize == 'big')
								{
									//make sure biggest exists
									var searchingForBiggest = 0;
									searchingForBiggest = biggestDetails.indexOf('0000');
								}

							if((searchingForBiggest > -1 || thumbToLightbox == 1) && showLightBox == 1)
								{
									var lightBoxUrl = '<a href="' + biggestThumbUrl + '" id="largeImage" alt="" title="" class="thumb"><img src="' + imagePath + '" ></a>';
								}
							else
								{
									var lightBoxUrl = '<img src="' + imagePath + '" >';
								}
				
					
					}
				
				// reset the de-activating image
				if(useGrayBox == 1)
					{
						var clickedImagePath = 'templateImages/grayBoxDetail.png';	
					}
				else
					{
						var clickedImagePath = 'artistInfo/smallest/'  + imageId + '_det_' + detailId + '.jpg';	
					}
				el.attr("src", clickedImagePath);
				el.data("buttonState", {down: 0});
				
				detailId = '';
			}
		
		if(imageSize == 'thumbs' && thumbToLightbox != 1)
			{
				var linkPath = 'pages.php?content=galleryBig.php&amp;navGallID=' + galleryId + '&amp;navGallIDquer=' + galleryId + '&amp;imageID=' + imageId + '&amp;view=big&amp;detailId=' + detailId ;		
				var replacementHtml = '<a href="' + linkPath + '"><img src="' + imagePath + '"></a>';						
			}
		else
			{
				
				var replacementHtml = lightBoxUrl;
			}
		var thumbId = "#thumb" + imageId;
		$(thumbId).html(replacementHtml);
		
		if(imageSize == 'big')
			{
				// must reselect for lightbox script
				$(function() {
				    $('#largeImage').lightBox();
				});
			}

		if(thumbToLightbox == 1)
			{
				// must reselect for lightbox script
				$(function() {
				    $('.thumb').lightBox();
				});
			}

	})
	
}

$(document).ready(function(){

	imageDetailsFunc();
	
});