/*
Author: Andrew Masri 
Eye candy and stuff to hide/reveal content
*/






	//load less important images - these have the (invalid) "source" attribute defined instead of "src"
	function loadQueuedImages() {
		//find images with the "source" attribute	  	
		jQuery('img[source]').each(function () {
			//copy the fake "source" attribute to the valid "src" attribute to cause the images to be finally loaded
			var src = jQuery(this).attr('source');
			jQuery(this).attr('src', src).removeAttr('source');
		});
				
	}


	//replace any low quality (marked with "upgradeMe") with it's hi quality counterpart
	function upgradeImages() {

		//find any upgradeable images
		jQuery('.upgradeMe').each( function() {
			var upgradeImage = jQuery(this);
			var replacementUrl = replaceThumbnail(this.src);	//determine the url of the high-quality image
			if (this.src != replacementUrl) {
				//load the image somewhere it won't be noticed
				jQuery('body').append('<img id="loadingImage" src="'+replacementUrl+'" style="width:1px;"/>');
				jQuery('#loadingImage').load(function(){
					upgradeImage.attr('src', replacementUrl); //upgrade the upgradeable image
					upgradeImage.removeClass('upgradeMe'); //remove the class marker
					jQuery('#loadingImage').remove(); //remove hidden loader image
				});
			}
		});
	}
	
	
			



	//call onDocumentReady - used to hide and then fade in content after the page finishes loading (enables layered appearance of content) 
	function delayedFadeIn() {
		if (browserOpacitySupport()) {		//changing the opacity of PNGs in MSIE destroys transparency built into the PNG
			jQuery('.bgFade').animate({ opacity: 1 }, 3000);	  		
		}
	}





/////////////////// Functions to allow Background Image Management /////////////////////


		
		
	function selectImage(targetImageSelector, $selectedImage, aspectRatioThreshold, altWidth) {

		$targetImage = jQuery(targetImageSelector);

		aspectRatioThreshold = (typeof aspectRatioThreshold == 'undefined'  || typeof altWidth == 'undefined') ? false : aspectRatioThreshold;
		
		
		$selectedImage = jQuery($selectedImage);
		if (!$selectedImage.length) {
			alert('system error: selected image not found');
			return;
		}	
		
		if ($selectedImage.attr('src') == 'undefined') {
			alert("selected image doesn't exist or not fully loaded yet");
			return;
		}

		//mark the selected image as selected (necessary for delete and config functions to locate clicked image)
		$selectedImage.parent().parent().find('.selected').removeClass('selected');	//deselect previous selection
		$selectedImage.addClass('selected');	//mark selected image


		//if there is no target image or it's the same as the selected image then skip transition
		if (!$targetImage.length || $selectedImage.attr('src') == $targetImage.attr('src')) {
			return;
		}

	
	//switch in the selected image with a sequential fade effect
		$targetImage.stop(true); //halt any existing animations

		
		//switch the bgImages and fade-in the bgImage and other content - but provide a few seconds to display full-width images before fading in content that covers it   
		var $bgFade = jQuery('.bgFade');
		if (browserOpacitySupport()) {		//changing the opacity of PNGs in MSIE destroys transparency built into the PNG
			$bgFade.animate({ opacity: 0.0 }, 500);	//fade out top layer of content
		}

		$targetImage.animate({ opacity: 0.0 }, 500, function() {
			//set image width based on selected image's aspect ratio - if an aspect ratio threshold has been specified
			if (aspectRatioThreshold && ($selectedImage.width() / $selectedImage.height() > aspectRatioThreshold)) {
				$targetImage.css('width', '100%');
				if (browserOpacitySupport()) { //changing the opacity of PNGs in MSIE destroys transparency built into the PNG
					$bgFade.animate({
						opacity: 0.0
					}, 4000).animate({
						opacity: 1.0
					}, 1500);
				}				
			}
			else {
				$targetImage.css('width', altWidth);
				if (browserOpacitySupport()) { //changing the opacity of PNGs in MSIE destroys transparency built into the PNG
					$bgFade.animate({
						opacity: 1.0
					}, 1500);
				}
			}

			$targetImage.attr('src', $selectedImage.attr('src'));
			$targetImage.attr('title', $selectedImage.attr('title'));
			//do any width resizing based on image aspect ratio
			$targetImage.animate({ opacity: 1.0 }, 1500);
		});
		
		if (jQuery(targetImageSelector+'Info').css('display') != 'none') {
			var selectedImageId = $selectedImage.attr('id').replace(/images-/, '');
			showImageInfo(selectedImageId);
		}
	}






	function showImageInfo(imageId, reposition, target) {
		Post.Send('imageId='+imageId, base_url+'dataserver/imageInfo');

		//position the information box near the selected image
		if (typeof reposition != 'undefined' && reposition) {
			var selectedImage = jQuery('#sidebarImage-'+imageId);
			var imageTop = selectedImage.position().top;
			var imageWidth = selectedImage.width();
			var imageHeight = selectedImage.height();
			target = (typeof target == 'undefined') ? '#imageInfo' : target;
			jQuery(target).css({'top': imageTop+10, 'right': imageWidth+10});
		}
	
		jQuery('#bgImageInfoButton').css('display', 'none');
		initDraggable();	//make the image info box draggable
	}




	
	
	
	//this function, while it works, also restricts element draggable area when inside a jquery-ui dialog box  
	//bind an thumbnail drop event to the selected elements so that they are replaced by their full-quality counterparts on drag/dropping into the ckeditor  
	//requires jquery-ui draggable module
	function bindImageDrop(selector) {
		jQuery(selector).draggable({
   			stop: function(event, ui) { 
				alert('dragstop'); 
			}, 
			containment: 'window',
			zIndex: 2700,
			insideParent: false
		});
	}