$(document).ready(function() {
	$(".hiding-sheet").click(toggleSheet);
});

$(window).on("load", function() {
	layout();
});

$(window).on("resize", function() {
	layout();
});

function layout() {
	layout_pic_and_description();
}

function toggleSheet() {
	$(this).children("*").each(function(index){
		$(this).slideToggle();
	});
}

function layout_pic_and_description() {
	$("div.pic_and_description > *").css({ position : 'absolute' });
	$("div.pic_and_description").each(function(index){
		if ($(this).is(':hidden')) {
			return;
		}
		if ($(this).hasClass("second_left")) {
			$thisDesc = $("> *:nth-child(1)",this);
			$thisPic = $("> *:nth-child(2)",this);
			if (!$(this).data('second_top_toggle_thrown')) {
				$(this).data('second_top_toggle_thrown','true');
				$(this).toggleClass("second_top");
			}
		} else {
			$thisPic = $("> *:nth-child(1)",this);
			$thisDesc = $("> *:nth-child(2)",this);
		}
		if (!$thisPic.data('originalWidth')) {
			var width;
			var nextWidth;
			width = $thisPic.width();
			nextWidth = parseInt($thisPic.css("width"), 10);
			if (nextWidth)
			width = Math.max(width,nextWidth);
			$thisPic.data('originalWidth',width);
		}
		if (!$thisDesc.data('originalWidth')) {
			$thisDesc.data('originalWidth',$thisDesc.width());
		}
        
		$thisDesc.css({ position : 'absolute' });
		$thisPic.css({ position : 'absolute' });
        
		var viewWidth;
		viewWidth = $(this).outerWidth();
		viewWidth = Math.min(viewWidth, $(window).width());
		var margin = 0;
		var padding = 15;
		var marginGap = 0;
		if ($(this).css('padding')) {
			padding = parseInt($(this).css('padding'));
		}
		if ($(this).css('margin')) {
			margin = parseInt($(this).css('margin'));
		}
		$(this).css({
			'margin': margin,
			'padding': padding,
			'position' : 'relative'
		});
        
		// getting the image's actual width
		// Get on screen image
		var imageHeight;
		var imageWidth;
		var screenImage = $thisPic;
		var originalImage = new Image();
		originalImage.src = screenImage.attr("src");
		var realImageWidth = originalImage.width;
		realImageWidth = $thisPic.data('originalWidth');
        
		if (realImageWidth + margin*2 + padding*2 > viewWidth) {
			imageWidth = viewWidth - margin*2 - padding*2;
		} else {
			imageWidth = realImageWidth;
		}
		$thisPic.css({
			width : imageWidth,
		});
        
		imageHeight = $thisPic.height();
		imageWidth = $thisPic.width();
        
		var divWidth = 0;
		var divTop = 0;
		var divLeft = 0;
		var imageLeft = 0;
		var imageTop = 0;
		if (viewWidth - imageWidth < 300) { // stack pic and description; width is to little for side by side
			if (margin == 0 && padding == 0) {
				marginGap = 15;
				$(this).css({
					'margin-bottom': marginGap
				});
			}
			divWidth = (viewWidth - margin*2 - padding*2);
			$thisDesc.css({ width : divWidth, });
			if ($(this).hasClass("second_top")) {
				var divHeight = $thisDesc.outerHeight(true);
				imageTop = divHeight + padding*2 + margin;
				divTop = 0;
			} else {
				divTop = imageHeight + padding*2 + margin;
				imageTop = 0;
			}
			divLeft = padding;
			imageLeft = (viewWidth - margin*2 - padding*2 - imageWidth) / 2;
			$thisDesc.css({
				width : divWidth,
				left : divLeft,
				top : divTop,
			});
			$thisPic.css({
				'margin-left' : imageLeft,
				'margin-top' : imageTop,
			});
		} else { // set pic and description side by side
			if (margin == 0 && padding == 0) {
				marginGap = 15;
				$("div:nth-child(2)",this).css({
					'margin-left': marginGap
				});
			}
			divWidth = (viewWidth - margin*2 - padding*3 - imageWidth-marginGap);
			divLeft = (imageWidth + padding*2);
			$thisPic.css({
				'margin-left' : imageLeft,
				'margin-top' : imageTop,
			});
			$thisDesc.css({
				width : divWidth,
				left : divLeft,
			});
            
			if ($thisDesc.height() < imageHeight) {
				var descriptionBlockHeight = $thisDesc.height();
				divTop = ((imageHeight - descriptionBlockHeight) / 2) + padding;
			} else {
				divTop = 0;
			}
			$thisDesc.css({ top : divTop });
		}
		var viewHeight = Math.max(imageTop + imageHeight + margin + padding, divTop + $thisDesc.height() + margin + padding)+marginGap;
        
		$(this).css({
			'height' : viewHeight,
		});
	});
}