/*
 * convertPictureQuestions
 * @param image path (needed for the handler)
 *
 */
function convertPictureQuestions() {
	/*
	 * iterate over all questions
	 */
	 
	var containerPictureId	= "container-picture";
	var pictureLargeId		= "picture_large";
	var itemTmp				= null;
	 
	$$(".container-pictureQuestion").each(function(question) {
		
		// determine which picture is selected
		var itemSelected = (question.select("input:checked").length !== 0)
			?  question.select("input:checked")[0].up("li")
			:  question.select("li").first();
		;
		
		var containerPicture	= new Element('div', { 'id' : containerPictureId});
		var pictureLarge		= new Element('img', { 'id' : pictureLargeId, 'src' : null }); // gets overwritten by displayPicturelarge()
		
		containerPicture.insert(pictureLarge);
		
		question.select("ul")[0].insert({
			"after" : containerPicture
		});
		
		displayPicturelarge(itemSelected);
		
		question.select("input, label").invoke("observe", "click", function(e) {
			var itemClicked = e.element().up("li");
			displayPicturelarge(itemClicked);
		});
		
		function displayPicturelarge(item) {
			if (item == itemTmp) {
				return;
			}
			
			var itemClickedInput = item.down("input");
				
			if (itemClickedInput.checked == false) {
				itemClickedInput.checked = true;
			}
			
			item.addClassName("selected");
			
			var pictureSelected		= item.down("img");
			var pictureSelectedSrc	= pictureSelected.getAttribute("src");
			var pictureLargeSrc		= pictureSelectedSrc.split("_thumb").join("");
			
			
			$(pictureLargeId).writeAttribute("src", pictureLargeSrc);
			
			if (itemTmp !== null) {
				itemTmp.removeClassName("selected");
				itemTmp.down("input").checked = false;
			}
			
			itemTmp = item;
		}
		
		
	});
} // end convertPictureQuestions()