jQuery(document).ready(function($) {

	asanacontainer = '.asana-practice-sequence';
	imagepath = 'http://www.iamronen.com/wp-content/gallery/asana-singles/';
	scalesize = 0.12;

	// for every .sequence.asana: replace with image, set height, set width
	$(asanacontainer + " .sequence .asana, " + asanacontainer + " .sequence .breath").each(function() { 
		imageurl = imagepath + $(this).html() + '.png';
		imagehtml = '<img src="' + imageurl + '"/>';
		$(this).empty();
		$(this).append(imagehtml);
	});


	// set height for all fullheight & halfheight elements
	$(".asana > img, .breath > img").each(function() {
		$(this).css("height", $(this).height() * scalesize);
	});


	// for each sequence-container - get the tallest asana and padd all the other asana accordingly
	$(".sequence-container").each(function() {
		maxasana = 0;
	
		// find largest asana height in sequence
		$(this).children(".sequence").children(".asana").each(function() {
			if ( $(this).height() > maxasana ) {
				maxasana = $(this).height();
			}
		});

		// find largest asana height in subsequence
		$(this).children(".sequence").children(".subsequence").children(".sequence").children(".asana").each(function() {
			if ( $(this).height() > maxasana ) {
				maxasana = $(this).height();
			}
		});


		// pad all the sequence asana accordingly
		$(this).children(".sequence").children(".asana").each(function() {
			paddingtop = maxasana - $(this).height();
			if (paddingtop > 0 ) {
				$(this).padding({top: paddingtop });
			}
		});

		// pad all the subsequence asana accordingly
		$(this).children(".sequence").children(".subsequence").children(".sequence").children(".asana").each(function() {
			paddingtop = maxasana - $(this).height();
			if (paddingtop > 0 ) {
				$(this).padding({top: paddingtop });
			}
		});


	});

	// vertically-center breath images 
	$(".breath > img").each(function() {
		paddingtop = ($(this).parents("li.sequence-container").height() - $(this).height()) / 2;
		if (paddingtop > 0) {
			$(this).padding({top: paddingtop });
		}
	});

	// vertically-center sequence instructions images 
	$(".sequence-container .instructions").each(function() {
		if ( $(this).parents(".subsequence").size() > 0) {
		} else {
			paddingtop = ($(this).parents("li.sequence-container").height() - $(this).height()) / 2;
			if (paddingtop > 0) {
				$(this).padding({top: paddingtop, bottom: paddingtop });
			}

		}
	});

	// set subsequence instruction width
	$(".subsequence").each(function() { 
		$(this).children(".instructions").css("width", $(this).width());
	});
	
 });