// Dynamically load images based on container size

(function($){
	var dynamicImage = '[data-sircontheme_dynamicimage=1]',
		sircon = window.sircon || {};

	sircon.funcs = sircon.funcs || {};
	sircon.funcs.loadDynamicImages = function(){
		var $imgs = $(dynamicImage);

		$imgs.each(function(){
			console.log('dynamic image loading');
			//We are using all these vars!
			var $figure = $(this),
				//useBackgroundImageOnly = $figure.attr('data-only_background_image') == 1, //Whatever.. 
				figureWidth = $figure.width(),
				figureHeight = $figure.outerHeight(),
				imgAlt = $figure.attr('data-alt'),
				sizeNames = $figure.attr('data-formatnames').split(';'),
				currentFormat = $figure.attr('data-currentformat'), //If already loaded
				sizeName = '',
				sizeVals = [],
				checkWidth = 9999;
				smallestSize = 9999,
				smallestFormat = '',
				largestSize = 0,
				largestFormat = '',
				hasLoadedAtleastOnce = $figure.attr('src') || $figure.find('img').length > 0;

			//Gather sizes, and determine the appropriate one

			//Find the smallest format larger than current figure width
			console.log('figureWidth: '+figureWidth);
			console.log('figureHeight: '+figureHeight);
			var sizeVal, checkWH,
				tooSmallCheck;
				
			if(figureHeight > figureWidth){
				sizeVal = 2;
				tooSmallCheck = figureHeight;

			}else{
				sizeVal = 1;
				tooSmallCheck = figureWidth;
			}

			for(var i=0, l=sizeNames.length; i<l; i++){
				sizeName = sizeNames[i];
				if(typeof $figure.attr(sizeName) !== 'string'){continue;}
				sizeVals = $figure.attr(sizeName).split(';');
				checkWH = parseInt(sizeVals[sizeVal]);

				//Provide a larger fallback
				if(checkWH > largestSize){
					console.log(checkWH + ' is larger than '+ largestSize);
					largestSize = checkWH;
					largestFormat = sizeName;
				}

				if(checkWH < figureWidth){
					continue;  //Is too small!
				}

				//Is large enough, is it the smallest of the large-enoughs?
				if(checkWH < smallestSize){
					console.log(checkWH + ' is smaller than '+ smallestSize);
					smallestSize = checkWH;
					smallestFormat = sizeName;
				}
			}
			console.log('smallestSize '+smallestSize);

			/* If already at determined format, do nothing! (do not reload same image) */
			if(smallestFormat && currentFormat && smallestFormat === currentFormat){
				console.log('Skipping loading format "'+smallestFormat+'", is already loaded with format "'+currentFormat+'"');
				return;
			}

			/* If determined format is smaller than the currently loaded format, do nothing!
			(do not waste bandwidth loading an image with less detail in addition to the current one) */
			if(typeof currentFormat !== 'undefined'){
				var currentFormatWidth = $figure.attr(currentFormat).split(';')[1];
				if(currentFormatWidth >= smallestSize){
					//Is smaller or same size! Abort!
					console.log('Skipping loading smaller format size '+smallestSize+'px, is already '+currentFormatWidth+'px');
					return;
				}
			}

			//Did we find a large enough smallest format?
			if(smallestSize === 9999){				
				smallestSize = largestSize;
				smallestFormat = largestFormat;
			}

			if(typeof $figure.attr(smallestFormat) !== 'string'){
				console.error('Sircontheme dynamic image seems to be missing its sources!');
				return;
			}
			var formatData = $figure.attr(smallestFormat).split(';'),
				img = new Image(),
				simulationHeight = figureWidth * formatData[3];

			if(!hasLoadedAtleastOnce){
				//Try to avoid jumping images by putting in a very accurate height on the figure before the image is loaded
				$figure.css('height', simulationHeight+'px');
			}

			img.onload = function(){
				//Remember current format
				$figure.attr('data-currentFormat', smallestFormat);

				//Put image in figure
				$figure.css('backgroundImage', 'url('+this.src+')');
				$figure.html(this);

				if(!hasLoadedAtleastOnce){
					$figure.css('height', ''); //Jumpy behaviour avoidance complete!
				}

				setTimeout(function(){
					//Delaying adding the class will make transitions work!
					$figure.addClass('dynamic-image-is-loaded')
				},1);

			};
			img.src = formatData[0];
			img.alt = imgAlt;
		});
	}
	
	$(window).resize(sircon.funcs.loadDynamicImages);

})(window.jQuery);