$(document).ready(function() {

	// Transition speed (milliseconds)
	var FADE_SPEED = 350;
	var ROLL_DELAY = 20000;
	// Pages parameters
	var PAGES_LOCATION = "Site/CMS/Templates/Modellomraden/StartPage/Anim/Pages/";
	var PAGES_FILETYPE = ".htm";

	/*
	* Function for changing anim image and highlighted text link
	* 
	* param	dataLink
	*/
	function changeContent(dataLink) {
	    // Fade out content div
	    $("#content").fadeOut(FADE_SPEED, function () {
	        // Load new page into content div
	        $("#content").load(PAGES_LOCATION + dataLink + PAGES_FILETYPE + " #content p", function () {
	            // Remove red text from all links
	            $("#animLinks ul li div").removeClass("redText");
	            // Set red text for clicked link
	            $("#animLinks ul li[data-link='" + dataLink + "'] div").addClass("redText");
	            // Fade in content div
	            $("#content").fadeIn(FADE_SPEED);
	        });
	    });

	    // Fade out all images
	    $(".animcontent:visible").fadeOut(FADE_SPEED, function () {
	        // Fade in selected image
	        $(".animcontent[data-link='" + dataLink + "']").fadeIn(FADE_SPEED);
	    });
	}

	/*
	* Function for automatically rolling trough the pages
	* 
	* param	dataLink
	*/
	function startTimer(dataLink) {
	    // Get the currently selected link
	    var currentLink = $("#animLinks ul li[data-link = '" + dataLink + "']");
	    // Initialize variable for holding next element
	    var nextLink;

	    // Check if link has sibling
	    if (currentLink.next().length != 0) {
	        // If it does, get it
	        nextLink = currentLink.next();
	    } else {
	        // If not, get the first child
	        nextLink = $("#animLinks ul li[data-link = '" + initialDataLink + "']");
	    }

	    // Get data link of next element
	    var nextDataLink = nextLink.data("link");

	    // Set timer and load new page
	    timer = setTimeout(function () {
	        changeContent(nextDataLink);
	        startTimer(nextDataLink);
	    }, ROLL_DELAY);
	}

	// Initialize timer variable to be able to stop auto roll
	var timer;
	// Get name of first link
	var initialDataLink = $("#anim .animcontent:first-child").data("link");

	// Load initial page and start timer
	$("#content").load(PAGES_LOCATION + initialDataLink + PAGES_FILETYPE + " #content p", function () {
	    // Set red text for initial text link
	    $("#animLinks ul li[data-link = '" + initialDataLink + "'] div").addClass("redText");
	    // Start timer for auto roll
	    startTimer(initialDataLink);
	});

	// Bind click event to all links
	$("#animLinks ul li").click(function () {
	    // Get clicked data link
	    var dataLink = $(this).data("link");
	    // Stop timer
	    clearTimeout(timer);
	    // Change anim image and text content
	    changeContent(dataLink);
	    // Start timer for auto roll
	    startTimer(dataLink);
	});
});