/***********************************************************************
                          elearning_functions.js
************************************************************************
Do not change this file unless it should change for all users.

This file defines general functions that have nothing to do with layout.

************************************************************************/

//Används för att visa kapitelindikering
Content.prototype.nextTriggered = false;

/* Drag and drop-functions */
Content.prototype.helper_makeDraggable = function(){
	var c = this;
	
	$(".lcDraggable").each(function(i,v){
		//$(v).css("left",$(v).attr("x")+"px").css("top",parseInt(topOffset[0])+parseInt($(v).attr("y"))+"px");
		$(v).attr("id",$(v).attr("e-id"));
		if($(v).find("img").length > 0){
			$(v).find("img").parent().addClass("DragImg");
		}
		$(v).draggable({
			snap:false,
			containment: $("#at_main"),
			scroll: 'true',
			zIndex: 500,
			opacity: 0.7,
			handle:".DragDropText, .DragImg"
		});
		
	});
	
	var t = setTimeout(function(){
		$(".lcDraggable").each(function(i,v){
			if($(v).find(".lcDragDropText").length > 0){
				$(".DragDropText").css("height",$(".DragDropText").parent().height()-5+"px");
			}
		})
	},200);
}


/*Completely rewritten for Tobii to fix problems with dragging in and out and changing responses resulting in incorrect responses and errors messages when attributes didn't exist*/
Content.prototype.helper_makeDroppable = function(){
	var c = this;
	
	$(".lcDroppable").each(function(i,v){
		$(v).droppable({
			accept:$(".lcDraggable"),
			tolerance:"intersect",
			hoverClass: "drop-hover",
			drop:function(event,ui){
				var responseList = $(event.target).attr("correct_response");
				if(responseList.length == 0){
					//We have no correct responses here, set responses to nothing to avoid length problems
					responses = "";
				} else {
					responses = $(event.target).attr("correct_response").split(",");
				}
				
				thisresponse = $(ui.draggable).attr("id");
				
				//Check if the attribute even exists
				var dropAttr = $(event.target).attr("dropped");
				if (typeof dropAttr == typeof undefined || dropAttr == false) {
					//Attribute doesn't exist
					$(event.target).attr("dropped",thisresponse);
				}else if(dropAttr[0] == ","){
					//First character is a , this means it should just be replaced entirely
					$(event.target).attr("dropped",thisresponse);
				}else{
					//Just add our response to the list
					$(event.target).attr("dropped",$(event.target).attr("dropped")+","+thisresponse);
				}
				
				if(responses.length > 1){
					//Multiple responses
					droppedResponses = $(event.target).attr("dropped").split(",");
					
					//If length of correct responses and dropped responses match, check if correct ones been dropped
					correct = 0;
					if(responses.length == droppedResponses.length){
						for(var i=0;i<droppedResponses.length;i++){
							if(jQuery.inArray(droppedResponses[i],responses) != -1){
								correct+=1;
							}
						}
						
						if(correct == responses.length){
							$(event.target).attr("correct",1);
						}else{
							$(event.target).attr("correct",0);
						}
					}else{
						$(event.target).attr("correct",0);
					}
					
				} else if(responses.length == 0){
					//No responses are correct
					$(event.target).attr("correct",0);
				}else{
					//Single response				
					if(jQuery.inArray(thisresponse,responses) != -1){
						$(event.target).attr("correct",1);
					}else{
						$(event.target).attr("correct",0);
					}
				}
				$(ui.draggable).css("left",$(event.target).css("left"));
			},
			out: function( event, ui ) {
				
				thisresponse = $(ui.draggable).attr("id");
				
				//Check if the element is even in the dropped section, otherwise just return. (caused by the user moving an element in and then out again without dropping it)
				var dropAttr = $(event.target).attr("dropped");
				if (typeof dropAttr == typeof undefined || dropAttr == false) {
					return;//Nothing in the dropped field at all
				}
				
				//A section to make sure that we actually have correct responses
				var responseList = $(event.target).attr("correct_response");
				if(responseList.length == 0){
					//We have no correct responses here, set responses to nothing to avoid length problems
					responses = "";
				} else {
					responses = $(event.target).attr("correct_response").split(",");
				}

				droppedResponses = $(event.target).attr("dropped").split(",");
				if(droppedResponses[0] == ","){
					droppedResponses = droppedResponses.substr(1);
				}
				
				//Reset dropped-attribute
				$(event.target).removeAttr("dropped","");
				
				//Remove dragged-out-element from the array
				if(jQuery.inArray(thisresponse,droppedResponses) != -1){
					droppedResponses.splice(jQuery.inArray(thisresponse,droppedResponses),1);
				} else {
					return;//Does not exist in the array, never been dropped
				}
				
				$(event.target).attr("dropped",droppedResponses.toString())
			
				//Check if remaining responses are correct
				//If length of correct responses and dropped responses match, check if correct ones been dropped
				correct = 0;
				if(responses.length == droppedResponses.length){
					for(var i=0;i<droppedResponses.length;i++){
						if(jQuery.inArray(droppedResponses[i],responses) != -1){
							correct+=1;
						}
					}
					
					if(correct == responses.length){
						$(event.target).attr("correct",1);
					}else{
						$(event.target).attr("correct",0);
					}
				}else{
					$(event.target).attr("correct",0);
				}
			}
		});

	});
	
	var t = setTimeout(function(){
		$(".lcDroppable").each(function(i,v){
			if($(v).find("div").length > 0){
				$(v).find("img").on("load", function(){

					
				}).each(function() {
				  if(this.complete) $(this).load();
				});				
			}
		})
	},200);
	
}



/*********************************************
Function: resolveDataObject
Indata: dataObjectTags (array with dataobjects)

Decides what types of dataobjects exist and
then handles them
*********************************************/
var tempID = 0;
Content.prototype.resolveDataObject = function(dataObjectTags, template){
	tempID ++;
	var dataObjects;
	var dataType;
	var c = this;
	
	
	$(dataObjectTags).each(function(i,v){
		/***FLIPBOOK START***/
		//Check if there is a type=flipbook
		var objectType = $(this).attr("type");

		if(objectType == "flipbook"){
			c.Flipbook();		
		}
		/***FLIPBOOK END***/
		else if(objectType == "audio"){
			//Audio is specified in arbortext
			//Don't do anything right now, we're going to handle audio separately
			//c.resolveAudio(this);
		} else if(objectType == "video"){
			/*Used with the new video tag from arbortext, still comes out as an img though*/
			var imgObjects = $(this).find("img.videofile");
			if(imgObjects.length){
				var videoObjects=new Array();
				for(var vInd = 0; vInd < imgObjects.length;vInd++) {
					videoObjects[vInd] = $(imgObjects[vInd]).attr("src");
				}
				if(videoObjects.length){
					var videohtml = createVideo(videoObjects, template);
					var videoObjID = $(this).attr("id");
					
					var divName2 = $("div[id='"+videoObjID+"']");
					$(divName2).html(videohtml).addClass("vPlayer");
					
					//Now pause the video!
					var jwPlayerObject = jwplayer(videoObjID);
					jwPlayerObject.pause();
					
				}else{
					if(consoleSupported){
						console.log("ERROR: No video files found!");
					}
				}
			} else {
				//Look for video links and make them into iframes
				var videoSource = $(this).find(".videolink").attr("href");
				var currTemplate = c.pageTemplate;
				var videoHTML = "";

				//Check if this is a youtube clip
				var isYouTube = (videoSource.toLowerCase().indexOf('youtube') >= 0);
				var isVimeo = (videoSource.toLowerCase().indexOf('vimeo') >= 0);
				if(isYouTube){
					//Add some stuff to the link to allow it to work with youtube's api
					videoSource = videoSource + "?enablejsapi=1&amp;wmode=transparent&amp;";
					//Go create an iframe
					videoHTML = c.createExternalLink(videoSource);
				} else if(isVimeo){
					//Add some stuff to the link to allow it to work with vimeo's api
					videoSource = videoSource + "?api=1&amp;";
					//Go create an iframe
					videoHTML = c.createExternalLink(videoSource);
				}
				
				var videoObjID = $(this).attr("id");
					
				var divName2 = $("div[id='"+videoObjID+"']");
				$(divName2).html(videoHTML).addClass("vPlayer");
			}
		}
		else {			
			dataObjects = $(this).find("img");

			if(dataObjects.length > 0){
				dataType = checkObjectDataType($(dataObjects[0]).attr("src"));
			}
			if(!dataType){
				//OM datatype är falsk, radera elementet ur DOM
				$(this).remove();
			}
			if(dataType == "cdata"){
				//Om den inte ingår i en section-4...
				loadCDATA($(dataObjects[0]).attr("src"),$(this).attr("id"));
			}
			else if(dataType == "audio"){
				//No audio type was set, we figure out ourselves that it is audio
				//Don't do anything right now, we're going to handle audio separately
				//c.resolveAudio(this);
			}
			else if(dataType == "video"){
				var videoObjects=new Array();
				for(var vInd = 0; vInd < dataObjects.length;vInd++) {
					videoObjects[vInd] = $(dataObjects[vInd]).attr("src");
				}
				var videohtml = createVideo(videoObjects, template);

				var videoObjID = $(this).attr("id");
				
				var divName2 = $("div[id='"+videoObjID+"']");

				$(divName2).html(videohtml).addClass("vPlayer");
			}
		}
	});
	
	//Om flera video-element finns på sidan
	c.helper_videoCarousel();
	//Show all the vPlayers (they start as hidden to avoid flashing)
	$('.video_object').css('visibility','visible');
};

var videoPlayerId = 0;
/*********************************************
Function: createExternalLink
Indata: link
Outdata: html string

Creates a video link with the proper sizes
*********************************************/
Content.prototype.createExternalLink = function(linkString){
	var c = this;
	var currTemplate = c.currentPageItem.template;
	var playerId = "iframe_video_"+videoPlayerId;
	var videoHTML = '<iframe id="'+playerId+ '" wmode="transparent" allowtransparency="true" class="'+currTemplate+'_vPlayer vIframe" src="'+linkString+'color=00AF66&amp;title=0&amp;byline=0&amp;portrait=0&amp;player_id='+playerId+'"';
	videoPlayerId++; //Increase this for next time
	
	if(currTemplate == "Page"){
		videoHTML += ' width="100%" height="100%"';
	} else if (currTemplate == "Start"){
		videoHTML += ' width="'+START_IMAGE_WIDTH+'" height="'+START_IMAGE_HEIGHT+'"';
	} else {
		videoHTML += ' width="100%" height="100%"';
	}
	videoHTML += ' frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>';
	return videoHTML;
};


/*********************************************
Function: createDialogues
Indata: fordjupning (array with fordjupnings)

Skapar dialogrutor för fördjupningsavsnitt
*********************************************/
var dialogsCreated = false;
Content.prototype.createDialogues = function(fordjupning){
	if(dialogsCreated){
		//Prevents duplicate dialogs from being created
		return;
	}
	var c = this;
	var id;
	$(fordjupning).each(function(i,v){
		id = $(this).attr("id");
		
		//This code prevents anything in the box from being highlighted. Previously the first link would be highlighted (forcing the dialog to scroll down to it when opened), or the x button would be highlighted in an ugly blue color on default. This small line of code fixes that.
		$(this).prepend('<span class="ui-helper-hidden-accessible"></span>');
		
		$(this).clone().appendTo($("body")).hide();
		$("#"+id).dialog({ 
			autoOpen: false,
			width:600,
			closeText: false,
			position: { my: "center", at: "center", of: "#at_main" }
		});
		
		//Check for cdata in a fordjupningvar
		var dataObjects = $(this).find("."+elements.dataObjectTag);
		if($(dataObjects).length){
			c.resolveDataObject(dataObjects, "Extra_Info");
		}
		$(this).remove();
	});
	dialogsCreated = true;
}

/*********************************************
Function: createExternals
Indata: none

Skapar dialogrutor för externa länkningar
*********************************************/
var externalsCreated = false;
Content.prototype.createExternals = function(){
	if(externalsCreated){
		//Prevents duplicate dialogs from being created
		return;
	}
	var c = this;
	var str = '<div id="searchResult" title="Sökresultat"><div id="resultText"></div></div>';
	$("#at_main").append(str);
	
	$( "#searchResult" ).dialog({ autoOpen: false, width:300, closeText: false });
	externalsCreated = true;
}

/*********************************************
Function: setNextButton
Indata: next page id

Sets the functions on next button
*********************************************/
Content.prototype.setNextButton = function(nextID) {
	var c = this;
	
	//Remove audio
	removeAudio();
	
	$("#quizBtn").remove();
	$("#"+ elements.nextButton).unbind();
	$("#"+ elements.nextButton).show();
	
	if(nextID == false){
		//We're on the last page.
		$("#"+ elements.nextButton).hide();
		//Here we also set scorm complete if this isn't a test.
		if(c.containsTest == false){
			setStatusPassed();
			setStatusComplete();
			setScore("1");
			LMSCommit();
		}
	} else{
		$("#"+ elements.nextButton).click(function(){
			$("#"+ elements.nextButton).unbind();
			c.loadCurrentPage(nextID);		
		});
	}
}

/*********************************************
Function: setBackButton
Indata: prev page id

Sets the functions on back button
*********************************************/
Content.prototype.setBackButton = function(prevID) {
	var c = this;
	$("#"+ elements.backButton).unbind();
	$("#"+ elements.backButton).show();
	
	if(prevID == false){
		$("#"+ elements.backButton).hide();
	} else{
		$("#"+ elements.backButton).click(function(){c.loadCurrentPage(prevID);});
	}
}

/*********************************************
Function: setNavigationButtons
Indata: none

Sets the functions on buttons
*********************************************/
Content.prototype.setNavigationButtons = function() {
	var c = this;

	$("#homeBtn").click(function(e){
		c.gotoFirstPage();
	});
	
	$("#menuBtn").unbind();//Remove any previous bindnings just to be safe
	$("#menuBtn").click(function(e){
		//Always unbind this button as soon as it is clicked.
		//This prevents double clicks and other oddities.
		//We rebind this again at the end of the toggleMenu function
		$("#menuBtn").unbind();
		c.toggleMenu();
	});
	$("#helpBtn").click(function(e){
		c.showHelpOverlay();
	});
	
	/*Tobii doesn't use speedImages
	$("#speedBtn").html("<img src='"+c.Pace()+"' id='speedImage'>");

	$("#speedBtn").click(function(e){
		c.SetPace();
	});
	
	$("#speedImage").unbind("mouseenter");
	$("#speedImage").unbind("mouseleave");
	$("#speedImage").mouseenter(function(e){
		var src = c.Pace();
		var nsrc = src.split(".");
		$(this).attr("src",nsrc[0]+"_down."+nsrc[1]);
	});
	$("#speedImage").mouseleave(function(e){
		$(this).attr("src",c.Pace());
	});*/
}



/*********************************************
Function: addSearchBar
Indata: none

Fixes the search bar
*********************************************/
Content.prototype.addSearchBar = function(){
	var c = this;
	var strFor;
	
	//Hämta cookie
	var storedVal = getCookie("searchString");
	//"searchString"
	$("#searchBar").val(storedVal).select().focus();
	
	$("#searchButton").click(function(e){
		strFor = $("#searchBar").val();
		c.doSearch(strFor);
	});
	
	$("#searchButton").hover(function(e){
		$("#searchButton").attr("src","images/btn_find_down_2.png");
	},function(e){
		$("#searchButton").attr("src","images/btn_find.png");
	});
	
	
	$("#searchBar").keydown(function(e){
		if (e.which == 13) {
			strFor = $("#searchBar").val();
			c.doSearch(strFor);
		}
	});
}


/*********************************************
Function: toggleMenu
Indata: state

Toggles the visibility of the menu
*********************************************/
Content.prototype.menuState = 0;
Content.prototype.toggleMenu = function(state){
	$("#menuBtn").unbind();
	var c = this;
	if(state === "hide"){
		//hide menu
		c.menuState = 1;
	}
	if(c.menuState == 0){
		//Show menu
		$(".TOCParent").css("z-index",80);
		$("#at_menu_container").show()
		$("#at_menu_container").animate({
			top: 0
		}, 500, function() {
			// Animation complete.
			c.menuState = 1;			
		});
		
		
	}else{
		//Hide menu
		if(state == "hide"){
			$("#at_menu_container").css("top",440);
		}

		$("#at_menu_container").animate({
			top: 440
		}, 500, function() {
			// Animation complete.
			c.menuState = 0;
			
			$(".TOCParent").css("z-index",0);
			$("#at_menu_container").hide();
		});
	}
	$("#menuBtn").click(function(e){
		c.toggleMenu();
	});
};

/*********************************************
Function: createCarousels

Skapar klickbara punkter under overlay-element
*********************************************/
Content.prototype.createCarousels = function(){
	var c = this;
	
	//Om flera graphic-element finns på sidan pa root niva
	c.helper_imageCarousel();
};
/*********************************************
Function: helper_imageCarousel

Skapar klickbara punkter under overlay-element
*********************************************/
Content.prototype.helper_imageCarousel = function(){
	var c = this;
	//var imageList = $("."+elements.pageDelimiter).children(".graphic");
	var imageList = $("#imageHolder").children(".graphic");
	
	//Skala om bredd/höjd baserat på om bilden är stående eller liggande
	//Stående bild (höjden > bredden) ska skalas till 100% höjd
	//Liggande bild (bredden > höjden) ska skalas till 100% bredd
	
	var imageList2 = $("#imageHolder").not(".imageHolderStart, .imageHolderFull").children(".graphic");
	var fullPageImgs = $(".imageHolderStart, .imageHolderFull").children(".graphic");
	
	
	$(imageList2).each(function(i,v){
		var img = $(v).find("img");

		var image = new Image();
		
		image.src = $(img).attr("src");
		if(navigator.appName == 'Microsoft Internet Explorer'){
			if(getInternetExplorerVersion() > 8){
				if(window.console){
					console.log("Firing for > IE8");
				}
				image.onload = function() {
					h = this.height;
					w = this.width;
					centerAdjust = 0;
					if(h > w){
						//$(img).css("height","50vh");
						$(img).css("height","28rem");
						$(img).css("height","28em");
						$(img).css("width","auto");
						centerAdjust = 3.5;
					}else{
						//$(img).css("width","32vw");
						$(img).css("width","24rem");
						$(img).css("width","24em");
						$(img).css("height","auto");
					}
					$(v).show();
					var center = $(v).width()/2;
					var center1 = $(img).width()/2;
					
					var centerVal = parseInt(center,10) - parseInt(center1,10);
					centerVal = Math.round((centerVal/$(window).width())*100);
					
					//if(centerVal > 0){
					//$(img).css("margin-left",centerVal+"vw");
					$(img).css("margin-left",(centerVal-centerAdjust)+"rem");
					$(img).css("margin-left",(centerVal-centerAdjust)+"em");
					//}
					if(i>0) $(v).hide();
					//$(img).css("left",center);
				};
			}
		}else{
			if(window.console){
				console.log("Firing for GC & FF");
			}
			image.onload = function() {
				h = this.height;
				w = this.width;
				centerAdjust = 0;
				if(h > w){
					//$(img).css("height","50vh");
					$(img).css("height","28rem");
					$(img).css("height","28em");
					$(img).css("width","auto");
					centerAdjust = 3.5;
				}else{
					//$(img).css("width","32vw");
					$(img).css("width","24rem");
					$(img).css("width","24em");
					$(img).css("height","auto");
				}
				$(v).show();
				var center = $(v).width()/2;
				var center1 = $(img).width()/2;
				
				var centerVal = parseInt(center,10) - parseInt(center1,10);
				centerVal = Math.round((centerVal/$(window).width())*100);
				
				//if(centerVal > 0){
					//$(img).css("margin-left",centerVal+"vw");
					$(img).css("margin-left",(centerVal-centerAdjust)+"rem");
					$(img).css("margin-left",(centerVal-centerAdjust)+"em");
				//}
				if(i>0) $(v).hide();
				//$(img).css("left",center);
			};
		}
	});
	
	$(fullPageImgs).each(function(i,v){
		var img = $(v).find("img");
		
		
		
		var image = new Image();
		
		image.src = $(img).attr("src");
		image.onload = function() {
			h = this.height;
			w = this.width;
			if(window.console){
				/*
				console.log("Document width: "+$(document).innerWidth());
				console.log("W: "+w);
				console.log("H: "+h);
				*/
			}
			var factor = w/h;
			if(window.console){
				console.log("Factor: "+factor);
			}
			if(factor >= 1.99){
				$(img).css("width","100%");
				$(img).css("height","auto");
			}else{
				$(img).css("height","25rem");
				$(img).css("height","25em");
				$(img).css("width","auto");
				
				var center = $(v).width()/2;
				var center1 = $(img).width()/2;
				
				var centerVal = parseInt(center,10) - parseInt(center1,10);
				centerVal = Math.round((centerVal/$(window).width())*100);
				
				//if(centerVal > 0){
					//$(img).css("margin-left",centerVal+"vw");
				$(img).css("margin-left",(centerVal)+"rem");
				$(img).css("margin-left",(centerVal)+"em");
			}
			/*
			$(img).css("width","49.5rem");
			$(img).css("width","49.5em");
			$(img).css("height","25rem");
			$(img).css("height","25em");
			*/
			
			//$(v).show();
			/*
			var center = $(v).width()/2;
			var center1 = $(img).width()/2;
			
			var centerVal = center - center1;
			centerVal = Math.round((centerVal/$(window).width())*100);
			
			$(img).css("margin-left",centerVal+"vw");
			*/
		};
	});
	
	if(imageList.length <= 1){
		//Om vi inte hittar fler än 1 graphgic-element avbryter vi funktionen och hanterar dessa som vanliga bilder
		return;
	}
	var curTemplate = c.currentPageItem.template;
	if(curTemplate == "Page_Wide" ||curTemplate == "Page_Image" || curTemplate == "Page_Double_Text" || curTemplate == "Page_Centered_Text" || curTemplate == "Chapter_Page" || curTemplate == "Quiz_Drag_Drop"){
		//we have a whole page image and should therefore center the image icons at the bottom of the page
		//$("."+elements.pageDelimiter).append("<div id='imageCarousel_icons' class='carousel_icons_full'/>");
		$("#imageHolder").append("<div id='imageCarousel_icons' class='carousel_icons_full'/>");
	} else if(curTemplate == "Start"){
		//we have a whole page image and should therefore center the image icons at the bottom of the page and move the dots down
		//$("."+elements.pageDelimiter).append("<div id='imageCarousel_icons' class='carousel_icons_start'/>");
		$("#imageHolder").append("<div id='imageCarousel_icons' class='carousel_icons_start'/>");
	} else{
		//the icons should be under the image to the right.
		//$("."+elements.pageDelimiter).append("<div id='imageCarousel_icons' class='carousel_icons'/>");
		$("#imageHolder").append("<div id='imageCarousel_icons' class='carousel_icons'/>");
	}
	
	var str = "";
	
	$(imageList).each(function(i,v){
		//Arbortext has id's with dots in them. Jquery doesn't like that. We replace the id with our own custom id.
		
		//To fix the above problem, we now use an annoying regexpression in a replaceAll extension of the string object to do some slightly more creative stuff...
		//$(this).attr("id","newid"+i);
		var imageID = $(v).attr("id");
		imageID = imageID.replaceAll('.','\\.');
		str += "<div class='carousel_icon "+$(v).attr("id")+"' id='carouselicon_"+i+"'>";
		if(i==0){
			//Set the first dot to filled
			str += "<a href='javascript:void(0)' onclick='carouselImage(\""+imageID+"\",\"carouselicon_"+i+"\",\"\");' id='carouselclick_"+i+"'><img src='images/icn_circle_filled.png' border='0'/></a>";
		}else{
			//Set all other dots to unfilled
			str += "<a href='javascript:void(0)' onclick='carouselImage(\""+imageID+"\",\"carouselicon_"+i+"\",\"\");' id='carouselclick_"+i+"'><img src='images/icn_circle_unfilled.png' border='0'/></a>";
			//Also hide these images
			$('#'+imageID).hide();
		}
		str += "</div>";
	});
	$("#imageCarousel_icons").append(str);
	
	$(".graphic").each(function(i,v){
		var startPos, endPos, restoreX;
		restoreX = $(v).position().left;
		//Kolla upp device
		if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
		/*
		 $(v).draggable({
			snap:false,
			axis: "x",
			zIndex: 500,
			opacity: 0.7
		});
		*/
		}
		
		$(v).on("touchstart",function(e){

			if(e.originalEvent.targetTouches.length == 1){
				startPos = e.originalEvent.targetTouches[0].pageX;
			}
		});
		$(v).on("touchmove",function(evt){
			if(evt.originalEvent.targetTouches.length == 1){
				
				endPos = evt.originalEvent.targetTouches[0].pageX;
			}
		});
		$(v).on("touchend",function(evt){
			var direction, imageID, dot, moveAllowed;
			moveAllowed = false;
			if((startPos - endPos) > 0){
				direction = "left";
			}else{
				direction = "right";
			}
			if(direction == "left"){
				imageID = $(v).next().attr("id");
				if($(v).next().hasClass("graphic lcObject")){
					moveAllowed = true;
				}
				dot = i+1;
			}else{
				imageID = $(v).prev().attr("id");
				if($(v).prev().hasClass("graphic lcObject")){
					moveAllowed = true;
				}
				dot = i-1;
			}

			if(moveAllowed){
				carouselImage(imageID,"carouselicon_"+dot);
			}
		});
		
		
	});
};

/*********************************************
Function: helper_overlayCarousel
Indata: template (string)

Skapar klickbara punkter under overlay-element
*********************************************/
Content.prototype.helper_overlayCarousel = function(template){
	var c = this;
	var overlays = $("."+elements.overlay).not(".hotspotdata, .cloned");
	
	if(overlays.length == 0){
		overlays = $(".overlay_fillpage").not(".hotspotdata");
	}
	
	if(overlays.length <= 1){
		//Om vi inte hittar fler än 1 overlay-element avbryter vi funktionen och hanterar dessa som vanliga bilder
		return;
	}
	if($(".hotspotdata").length > 0){
		return;
	}
	
	if(template == "Page_Image" || template == "Page_Wide"){
		if($(".overlay_fillpage").length > 0){
			$("."+elements.pageDelimiter).append("<div id='imageCarousel_icons' class='carousel_icons_fillpage_full'/>");
		}else{
			$("."+elements.pageDelimiter).append("<div id='imageCarousel_icons' class='carousel_icons_full'/>");
		}
	} else{
		if($(".overlay_fillpage").length > 0){
			$("."+elements.pageDelimiter).append("<div id='imageCarousel_icons' class='carousel_icons_fillpage'/>");
		}else{
			$("."+elements.pageDelimiter).append("<div id='imageCarousel_icons' class='carousel_icons'/>");
		}
	}
	
	var str = "";
	$(overlays).each(function(i,v){
		if($(v).attr("id") == undefined){
			$(v).attr("id",$(v).attr("e-id"));
		}
		str += "<div class='carousel_icon "+$(v).attr("id")+"' id='carouselicon_"+i+"'>";
		if(i==0){
			str += "<a href='javascript:void(0);' onclick='carousel(\""+$(v).attr("id")+"\",\"carouselicon_"+i+"\",\"\");' id='carouselclick_"+i+"'><img src='images/icn_circle_filled.png' border='0'/></a>";
		}else{
			str += "<a href='javascript:void(0);' onclick='carousel(\""+$(v).attr("id")+"\",\"carouselicon_"+i+"\",\"\");' id='carouselclick_"+i+"'><img src='images/icn_circle_unfilled.png' border='0'/></a>";
		}
		str += "</div>";
	});
	$("#imageCarousel_icons").append(str);
	
};
/*********************************************
Function: hasCarousel
Indata: none


*********************************************/
Content.prototype.hasCarousel = function(){
	var c = this;
	var overlays = $("."+elements.overlay).not(".hotspotdata");
	
	//if(c.pageTemplate == "Branch") return false;
	
	if(overlays.length == 0){
		overlays = $(".overlay_fillpage").not(".hotspotdata");
	}
	
	var videoClass = ".vPlayer";
	var videos = $(".vPlayer");
	if($(videos).length == 0){
		videos = $(".vPlayer_fillpage");
		videoClass = ".vPlayer_fillpage";
	}
	
	if(overlays.length <= 1 && videos.length <= 1){
		//Om vi inte hittar fler än 1 overlay-element avbryter vi funktionen och hanterar dessa som vanliga bilder
		return false;
	}
	if(overlays.length > 0){
		return "image";
	}
	if(videos.length > 0){
		return videoClass;
	}
}


//To be called from arbortext functions, less pretty, we have to calculate which dot to show as filled.
function showImage(imageID){
	//Create a list of images imageHolder
	//var imageList = $("."+elements.pageDelimiter).children(".graphic");
	var imageList = $("#imageHolder").children(".graphic");
	
	if(imageList.length > 0){
		//To fix problems with dots in id names... we use an annoying regular expression in a replaceAll function
		var currentid = imageID;
		currentid = currentid.replaceAll('.','\\.');
		
		$(imageList).not("#"+currentid).fadeOut('slow'); //fade out all images except ours
	
		$("#"+currentid).stop().fadeIn('slow'); //fade in our image
	
		//Set all icons to unfilled
		$(".carousel_icon").find("img").attr("src","images/icn_circle_unfilled.png");
		
		//Figure out how many figures exist before this image, show that icon as 'filled'
		var previousGraphics = $("#"+imageID).prevAll();
		var numPrevGraphics = previousGraphics.length;
		
		$("#carouselclick_"+numPrevGraphics).find("img").attr("src","images/icn_circle_filled.png");
	}else{
		//Find links
		var links = $(".object_link");
		var index = 0;
		$(links).each(function(i,v){
			if($(v).attr("onclick").indexOf(imageID) != -1){
				index = i;
				//return true;
			}
		});
		
		$("#carouselclick_"+index).click();
		
	}
}
/*********************************************
Function: carouselImage
Indata: id, caller, target

*********************************************/
function carouselImage(id,caller,target){
	//Check if we already have the image
	if($("#"+caller).find("img").attr("src") == "images/icn_circle_filled.png"){
		//We are already looking at this image, do nothing
		return;
	}
	
	//Create a list of images
	var imageList = $("#imageHolder").children(".graphic");
	
	//To fix problems with dots in id names... we use an annoying regular expression in a replaceAll function
	var currentid = id;
	currentid = currentid.replaceAll('.','\\.');
	
	$(imageList).not("#"+currentid).fadeOut('slow'); //fade out all images except ours

	$("#"+currentid).stop().fadeIn('slow'); //fade in our image

	//Set all icons to unfilled
	$(".carousel_icon").find("img").attr("src","images/icn_circle_unfilled.png");
	
	//Set the selected icon to filled
	$("#"+caller).find("img").attr("src","images/icn_circle_filled.png");
}

/*********************************************
Function: carousel
Indata: id, caller, target


*********************************************/
function carousel(id,caller,target){
	
	var overlays = $("."+elements.overlay).not(".hotspotdata, .cloned");
	
	if(overlays.length == 0){
		overlays = $(".overlay_fillpage").not(".hotspotdata");
	}
	
	$(overlays).fadeOut('slow');

	
	$("#"+id).fadeIn('slow');

	
	$(".carousel_icon").find("img").attr("src","images/icn_circle_unfilled.png");
	
	if(target != ""){
		$("."+target).find("img").attr("src","images/icn_circle_filled.png");
	}else{
		$("#"+caller).find("img").attr("src","images/icn_circle_filled.png");
	}
}

/*********************************************
Function: helper_videoCarousel
template (string)

Skapar klickbara punkter under video-element
*********************************************/
Content.prototype.helper_videoCarousel = function(){
	var c = this;
	var videos = $(".vPlayer");
	if($(videos).length == 0){
		videos = $(".vPlayer_fillpage");
	}
	
	if(videos.length <= 1){
		//Om vi inte hittar fler än 1 video-element avbryter vi funktionen och hanterar dessa som vanliga video-objekt
		return;
	}
	
	var curTemplate = c.currentPageItem.template;
	if(curTemplate == "Start"){
		//Do something?
	}else if(curTemplate == "Page_Wide" || curTemplate == "Page_Image" || curTemplate == "Page_Double_Text" || curTemplate == "Page_Centered_Text" || curTemplate == "Chapter_Page"){
		$("."+elements.pageDelimiter).append("<div id='videoCarousel_icons' class='carousel_icons_fillpage'/>");	
	}else{
		$("."+elements.pageDelimiter).append("<div id='videoCarousel_icons' class='carousel_icons'/>");
	}
	
	var str = "";
	$(videos).each(function(i,v){
		//Check if this is a jwplayer video
		var containsLink = $(this).find('.vIframe');
		if(!containsLink.length){
			$(this).attr("id","vPlayer_"+i);
			//$(v).attr("id",$(v).attr("e-id"));
			if(i>0){
				var vstop = $(v).find("div").filter(":first").attr("id").toString();
				$(v).hide();
				t = setTimeout(function(e){
					jwplayer(vstop).stop();
				},200);
			}else{
				jwplayer(vstop).play(true);
			}
		} else {
			//This is probably a youtube or vimeo link
			$(v).attr("id","vPlayer_"+i);
			//Hide any videos that aren't first.
			if(i>0){
				$(v).hide();
			} else {
				//The first video! and I've not gotten autoplay working... TODO Fix autoplay!
			}
		}
		
		
		if(i==0){
			str += "<div class='carousel_icon active_video' id='carouselicon_"+i+"'>";
			str += "<a href='javascript:void(0);' onclick='videoCarousel(\""+$(v).attr("id")+"\",\"carouselicon_"+i+"\");' id='carouselclick_"+i+"'><img src='images/icn_circle_filled.png' border='0'/></a>";
		}else{
			str += "<div class='carousel_icon' id='carouselicon_"+i+"'>";
			str += "<a href='javascript:void(0);' onclick='videoCarousel(\""+$(v).attr("id")+"\",\"carouselicon_"+i+"\");' id='carouselclick_"+i+"'><img src='images/icn_circle_unfilled.png' border='0'/></a>";
		}
		str += "</div>";
	});
	$("#videoCarousel_icons").append(str);
}
/*********************************************
Function: videoCarousel
Indata: id, caller
Stops and Starts videos as we swap.
Caller is the icon, id is the video it is connected to

*********************************************/
function videoCarousel(id,caller){
	//Do a check first that we aren't clicking on the same video that is currently selected
	if($("#"+caller).hasClass('active_video')){
		return;
	}
	
	//Stoppa uppspelningar
	var videos = $(".vPlayer");
	if($(videos).length == 0){
		videos = $(".vPlayer_fillpage");
	}
	
	//Dölj synliga videoobjekt
	$(videos).fadeOut('slow');
	//Remove the class that says it is the active video
	$('.carousel_icon').removeClass('active_video');
	//Visa valt videoobjekt
	$("#"+id).fadeIn('slow');
	
	
	//Stop all currently playing videos
	$(videos).each(function(i,v){
		//Stop jwplayers
		var isJwPlayer = $(this).find('.vIframe');
		if(!isJwPlayer.length){
			theid = $(v).find("div").filter(":first").attr("id").toString();
			jwplayer(theid).stop();
		}
		
		//Stop Vimeo & Youtube players WILL NOT WORK LOCALLY!
		var vimeoframes = $('.vIframe');
		$(vimeoframes).each(function() {
			
			try{
				this.contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
			}catch(e){
				if(window.console){
					console.log("Couldn't pause video 1");
				}
			}
		  	
			try{
				this.contentWindow.postMessage('{"method":"pause","value":""}', '*');
			}catch(e){
				if(window.console){
					console.log("Couldn't pause video 2");
				}
			}
		  
		});

	});
	
	//Check if the newly selected element is a jwplayer or not
	var isJwPlayer = $("#"+id).find('.vIframe');
	if(!isJwPlayer.length){
		//This is a jwplayer
		
		//Sätt igång uppspelning av valt videoobjekt
		vstop = $("#"+id).find("div").filter(":first").attr("id").toString();
	
		o = setTimeout(function(e){
			//jwplayer().stop();
			jwplayer(vstop).play(true);
		},100);
	} else {
		var currentFrame = $("#"+id).find('iframe:first');
		$(currentFrame).each(function() {
			
			this.contentWindow.postMessage('{"method":"play","value":""}', '*');
				
			this.contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
		});
		//Try and play the video like a vimeo video
		//Play vimeo video
		/*var currentFrame = $("#"+id);
		var currentplayer = $f(currentFrame);
		currentplayer.api('play');*/
	}
	
	//Byt bilder i knapparna under video
	$(".carousel_icon").find("img").attr("src","images/icn_circle_unfilled.png");
	$("#"+caller).find("img").attr("src","images/icn_circle_filled.png");
	
	
	//Set this icon to active video so that we can avoid reloading it if the user clicks twice
	$("#"+caller).addClass('active_video');
}

/*********************************************
Function: setPagination
Indata: currPage (int), totalPages (int)

Skriver ut aktuellt sidnummer
*********************************************/
Content.prototype.setPagination = function(currPage,totalPages){
	var c = this;
	
	c.template_setPageNumber(currPage,totalPages);	
};




Content.prototype.helper_makelinks = function(){
	var c = this;
	
	var hrefs = $("."+elements.pageDelimiter).find("a").not(".hotspotlink");
	
	//For links to pages within the same course
	var crossRefList = $("."+elements.crossRef);
	if( $(crossRefList).length){
		
	}
	
	//For links to pages within the same course
	var webRefList = $("."+elements.webRef);
	if( $(webRefList).length){
		
	}
	
	//For links to pages within the same course
	var objectRefList = $("."+elements.objectRef);
	if( $(objectRefList).length){
		
	}
	
	//For links to pages within the same course
	var dialogRefList = $("."+elements.dialogRef);
	//Check if we have any dialog references
	if( $(dialogRefList).length){
		//For each dialog reference
		$(dialogRefList).each(function(){
			//Find the href (should be set in arbortext to point to an Extra_Info section xml:id)
			var linkEndID = $(this).attr("href");

			//Create a click function to open a dialog box
			$(this).click(function(){
				$(linkEndID).dialog("open");
			});
			
			//Change the href to void to prevent oddities
			$(this).attr("href","javascript:void(0)");
		});
	}
}

function showOverlay(id){
	hideElements($(".overlay[layer='1']"));
	showElements($("#"+id));
}


//Calls a bunch of resize functions when stuff needs to be resized based on the layout
Content.prototype.helper_resizeStuff = function(){
	var c = this;
	
	c.helper_moveFigureText();
	c.helper_resizeInlineGraphics();
}

//Moves figure text based on the image height so that it is always in the exact right location.
Content.prototype.helper_moveFigureText = function(){
	//Check width of imageHolder
	var largeImageHolder = $('.imageHolderFull, .imageHolderStart');
	$(largeImageHolder).each(function(){
		var currWidth = $(this).width();
		/*This sets the height of the imageHolder to half the width. This fixes problems with not getting the image title in the right location.*/
		var currheight = Math.ceil(currWidth/2)-20;
		//$(this).height(currheight);
		$(this).height("28rem");
		$(this).height("28em");
	});
}


//inlineGraphicImg
//Resizes inline graphics down from the original size.
//(authors add in images so that they are correctly sized at 1920 screen width)
Content.prototype.helper_resizeInlineGraphics = function(){
	var c = this;
	
	//Get the current screen width
	var winW = $(window).width();
	
	//Get the ratio to be used for resizing graphics
	var resizeRatio = 1920/winW;
	
	var inlineImages = $('.inlineGraphicImg');
	$(inlineImages).each(function(){
		var currentImage = $(this);
		var i = new Image();
		i.src = $(currentImage).attr('src');
		i.onload = function() {
			//get the original width
			var originalWidth = i.width;
			
			//Create a new width
			var resizeWidth = Math.floor(originalWidth/resizeRatio);
			$(currentImage).css("width",resizeWidth);
			$(currentImage).css("height",'auto');
		}
	});
}