/************************
*	GLOBAL VARIABLES	*
*************************/

var gImageWidth;
var gImageHeight;
var gPlaying;
var gTimer;
var gItem;
var gIndex;
var gThumbIndex;
var gNodeName;
var gSettings;
var gThumbnailLoaded;
var gLoadingThumbnail;
var gItemId;
var gVoteText;
var byline;

/************************
*	PRIMARY FUNCTIONS	*
*************************/

/*
*	initSlideshow		return void
*	Sets the global variables, runs the setupSlideshow to set the visibility of
*	the different elements and then loads the xml file.
*	
*	@id			int		The edge id of the slideshow.
*	@settings	Object	The settings. This argument is optional and if it is null 
*						the createSettings function returns default values.
*/
function initSlideshow(id, settings) {
	gImageWidth = 400;
	gImageHeight = 400;
	gPlaying = false;
	gTimer = 0;
	gIndex = 0;
	gThumbIndex = 0;
	gLoadingThumbnail = 0;
	gItem = new Array();
	gNodeName = new Object();
	gThumbnailLoaded = new Array();
	gItemId = 0;
	gVoteText = $("#vote").html();
	
	settings.id = id;
	gSettings = createSettings(settings);
	
	setupSlideShow();
	
	gIndex = gSettings.index;
	
	$.get(gSettings.slideshowXmlUrl + "?id=" + id, {}, xmlLoadCompleteHandler);
	//$.get("SlideshowXML_small.xml", {}, xmlLoadCompleteHandler);
	//$.get("SlideshowXML_large.xml", {}, xmlLoadCompleteHandler);
}

/*
*	xmlLoadCompleteHandler	return void
*	Triggers when the xml files has loaded. First checkes what kind of xml flow
*	the loaded files is with the getXmlNodeNames function. Then sets some default
*	values and listeners, calls the setImage and setups the thumbnails.
*	
*	@data		Object		The data object returned from the load of the xml file.
*/
function xmlLoadCompleteHandler(data) {
	gNodeName = getXmlNodeNames($(data).children()[0].tagName);
	gItem = $(data).find(gNodeName.parent).children();
	gImageWidth = Math.round($("#imageContainer").width());
	gImageHeight =  Math.round($("#imageContainer").height());
	
	var firstImageID = getFirstImage();
	
	if (firstImageID > 0){
		gSettings.firstImage = firstImageID;
	}
	var firstImage = findFirstImageId(data);
	
	if (firstImage != null) {
		gIndex = firstImage;
	}
	
	if (gSettings.navigation) {
		$("#playPauseButton").bind("mouseup", playClickHandler);
	}
	
	gSettings.voting = stringToBoolean($(gItem[0]).find(gNodeName.voting).text());
	
	if (gSettings.voting) {
		$("#vote").css("display", "block");
		$("#vote").bind("mouseup", voteHandler);
	} else {
		$("#vote").css("display", "none");
	}
	
	$("#largeImage2").css("display", "none");
	
	setImage(gIndex);
	
	setupThumbnails();
	setThumbnails(gThumbIndex);
}

/*
*	setImage	return void
*	Gets the node values from the xml file and creates a image object. Then loads the image resource.
*	
*	@index		int		The index (of the corresponding node in the xml file) image to load.
*/
function setImage(index) {
	if (gPlaying) {
		clearTimeout(gTimer);
	}
	
	var description = $(gItem[index]).find(gNodeName.description).text();
	byline = $(gItem[index]).find(gNodeName.byline).text();
	var src = $(gItem[index]).find(gNodeName.src).text();
	var header = gSettings.useImageHeadline == false ? $(gItem[index]).find(gNodeName.header).text() : $(gItem[index]).find(gNodeName.headline).text();
	var id = src.substring(src.lastIndexOf("/") + 1, src.length - 4);
	var url = gSettings.imageHandlerUrl + "?id=" + id + "&width=" + gImageWidth + "&height=" + gImageHeight;
	
	gItemId = id;
	
	var img = new Image();
	$(img).load(imageLoadCompleteHandler);
	img.alt = description;
	img.title = header;
	img.src = url;
	img.byline = byline;
	
}

/*
*	setThumbnails	return void
*	This function showes the thumbnails in the current interval. The interval is set by 
*	argument startIndex + gSettings.thumbnails. If the thumbnail has'nt been loaded the function
*	loads it and puts it in the corresponding img-tag. The result is that the thumbnails only load
*	once, and when the user input requests them.
*	
*	@startIndex		int		The starting index of the thumbnail.
*/
function setThumbnails(startIndex) {
	if (startIndex > gThumbnailLoaded.length - gSettings.thumbnails) {
		gThumbIndex = gThumbnailLoaded.length - gSettings.thumbnails;
	} else if (startIndex < 0) {
		gThumbIndex = 0;
	}
	
	gLoadingThumbnail = gSettings.thumbnails;
	
	for (var i = gThumbIndex; i < gThumbIndex + gSettings.thumbnails; i++) {	
	
		if (gThumbnailLoaded[i] == false) {
			var src = $(gItem[i]).find(gNodeName.src).text();
			var id = src.substring(src.lastIndexOf("/") + 1, src.length - 4);
			var url = gSettings.imageHandlerUrl + "?id=" + id + "&width=" + gSettings.thumbnailWidth + "&height=" + gSettings.thumbnailHeight;
			
			$("#thumbnails").append("<img id='thumbnail" + i + "' src='' title='' alt='' />");
			$("#thumbnail" + i).bind("load", thumbnailLoadCompleteHandler);
			$("#thumbnail" + i).attr("src", url);
			$("#thumbnail" + i).bind("mouseup", thumbnailClickHandler);
			
			gThumbnailLoaded[i] = true;
		} else {
			thumbnailLoadCompleteHandler($("#thumbnail" + i));
		}
	}
}

/*
*	showLargeImage	return void
*	Shows and hides the two image tags used to display the large image. Sets the current showing img 
*	tags values to those of the argument image object. Because of the fade animation of the text, which
*	requires the div to be absolute positioned the thumbnails position themselfs under the description.
*	To combat this the thumbnails (if any) moves down or up according to the height of the description.
*	Then centers the large image both vertical and horisontal. And if the slideshow is on autoplay
*	(isPlaying == true) the timeout for next image is set.
*	
*	@img	Image	The image object to display.
*/
function showLargeImage(img) {
	var imgContainer = "";
	var imgDescription = "";

	//IE
	if (jQuery.browser.msie && jQuery.browser.version < 8) {
            /*
		if ((document.getElementById("largeImage2")).style.visible != "hidden") {
			imgContainer = "#largeImage1";
			imgDescription = "#description1";
			(document.getElementById("largeImage2")).style.visible = "hidden";
			(document.getElementById("description2")).style.visible = "hidden";
			(document.getElementById("largeImage2")).style.visible = "visible";
		} else {
			imgContainer = "#largeImage2";
			imgDescription = "#description2";
			(document.getElementById("largeImage1")).style.visible = "hidden";
			(document.getElementById("description1")).style.visible = "hidden";
			(document.getElementById("largeImage1")).style.visible = "visible";
		}
                */
		imgContainer = "#largeImage1";
		imgDescription = "#description1";
		$(imgContainer).attr("src", img.src);
		$(imgContainer).attr("alt", img.alt);
		$(imgContainer).attr("title", img.title);
		$(imgContainer).css("display", "block");
		
		//(document.getElementById("description2")).style.visible = "hidden";
		fadeInImageCompleteHandler();
	}
        else { //ALL OTHER
		if ($("#largeImage2").css("display") != "none") {
			imgContainer = "#largeImage1";
			imgDescription = "#description1";
			$("#largeImage2").fadeOut(gSettings.fadeTime, fadeOutImageCompleteHandler);
			$("#description2").fadeOut(gSettings.fadeTime, fadeOutDescriptionCompleteHandler);
		} else {
			imgContainer = "#largeImage2";
			imgDescription = "#description2";
			$("#largeImage1").fadeOut(gSettings.fadeTime, fadeOutImageCompleteHandler);
			$("#description1").fadeOut(gSettings.fadeTime, fadeOutDescriptionCompleteHandler);
		}
		
		$(imgContainer).attr("src", img.src);
		$(imgContainer).attr("alt", img.alt);
		$(imgContainer).attr("title", img.title);
		
		$(imgContainer).fadeIn(gSettings.fadeTime, fadeInImageCompleteHandler);
	}
	
	$("#vote").html(gVoteText);
	
	centerImage(imgContainer, img);
	
	var showTitle = "";
	var showByline = "";
	if (gSettings.showTitle == true) {
		showTitle = "<div id=\"slideshowTitle\">" + img.title + "</div>";

		if (img.byline != ""){
			showByline = "<div id=\"byline\">Foto: " + byline + "</div>";
		}
	}
	$(imgDescription).html(showTitle + showByline + "<div id=\"pictureDescription\">" + img.alt + "</div>");	
	$(imgDescription).fadeIn(gSettings.fadeTime, fadeInDescriptionCompleteHandler);
	
	if (gSettings.thumbnails > 0) {
		$("#imageThumbnails").animate({
			'margin-top': $(imgDescription).height() + 10
		}, gSettings.fadeTime * 0.5);
		$("#slideshowContainer").animate({
			'margin-bottom': $(imgDescription).height() + 30 + gSettings.thumbnailHeight
		}, gSettings.fadeTime * 0.5);
	}
	
	setCurrentImage();
	
	if (gPlaying) {
		gTimer = setTimeout("stepImage(1)", gSettings.playTime);
	} 
}


/************************
*	EVENT HANDLERS		*
*************************/

function imageLoadCompleteHandler(event) {
	showLargeImage(this);
}

function previousClickHandler() {
	statisticsHandler();
	
	enableNavigation(false);
	stepImage(-1);
}

function nextClickHandler() {

	statisticsHandler();
	
	enableNavigation(false);
	stepImage(1);
}

function fadeOutImageCompleteHandler(event) {

}

function fadeInImageCompleteHandler() {
	enableNavigation(true);
	$("#amountLabel").html("Bild " + (gIndex + 1) + " av " + gItem.length);
}

function fadeOutDescriptionCompleteHandler() {

}

function fadeInDescriptionCompleteHandler() {

}

function playClickHandler() {
	$("#playPauseButton").unbind("mouseup", playClickHandler);
	$("#playPauseButton").bind("mouseup", pauseClickHandler);
	$("#playPauseButton").text("Stoppa bildspelet");
	gPlaying = true;
	gTimer = setTimeout("stepImage(1)", gSettings.playTime);
	if (jQuery.browser.msie && jQuery.browser.version < 8) {
		setImage(gIndex);
	}
}

function pauseClickHandler() {
	$("#playPauseButton").unbind("mouseup", pauseClickHandler);
	$("#playPauseButton").bind("mouseup", playClickHandler);
	$("#playPauseButton").text("Starta bildspelet");
	gPlaying = false;
	clearTimeout(gTimer);
	if (jQuery.browser.msie && jQuery.browser.version < 8) {
		setImage(gIndex);
	}
}

function thumbnailClickHandler(event) {
	enableNavigation(false);
	gIndex = parseInt(event.target.id.substr(9, event.target.id.length));
	setImage(gIndex);
	
	statisticsHandler();
}

function nextThumbnailHandler() {
	//gThumbIndex++;
	gThumbIndex += gSettings.thumbnails;
	setThumbnails(gThumbIndex);
}

function previousThumbnailHandler() {
	//gThumbIndex--;
	gThumbIndex -= gSettings.thumbnails;
	setThumbnails(gThumbIndex);
}

function thumbnailLoadCompleteHandler(event) {
	var tmp = $("#thumbnails").css("margin-left");
	var currentLeft = parseInt(tmp.substr(0, tmp.length - 2));
	
	tmp = $(event.target).width();
	if (tmp < settings.thumbnailWidth) {
		tmp = settings.thumbnailWidth - tmp;
		var mod = tmp % 2;
		if (mod > 0) {
			mod = 1;
		} else {
			mod = 0;
		}
		
		$(event.target).css("padding-left", (Math.floor(tmp/2) + 5));
		$(event.target).css("padding-right", (Math.floor(tmp/2) + mod + 5));
	}
	
	tmp = $(event.target).height();
	if (tmp < gSettings.thumbnailHeight) {
		tmp = gSettings.thumbnailHeight - tmp;
		var mod = tmp % 2;
		if (mod > 0) {
			mod = 1;
		} else {
			mod = 0;
		}
		$(event.target).css("padding-top", (Math.floor(tmp/2) + 5));
		$(event.target).css("padding-bottom", (Math.floor(tmp/2) + mod + 5));
	}
		
	gLoadingThumbnail--;
	
	if (gLoadingThumbnail == 0) {
		var moveLeft =  -(gThumbIndex * (settings.thumbnailWidth + 10));	
		if (moveLeft != currentLeft) {
			$("#thumbnails").animate({
				'margin-left': moveLeft
			}, 600);
		}
	}
}

/************************
*	SUPPORT FUNCTIONS	*
*************************/

function setupThumbnails() {
	if (gSettings.thumbnails > 0) {
		gSettings.thumbnails = (gSettings.thumbnails <= gItem.length) ? gSettings.thumbnails : gItem.length;
		gThumbnailLoaded = new Array();
		for (var i = 0; i < gItem.length; i++) {
			gThumbnailLoaded.push(false);
		}
	}
	
	$("#nextThumbnails").css("height", (settings.thumbnailHeight + 10) + "px");
	$("#previousThumbnails").css("height", (settings.thumbnailHeight + 10) + "px");
	
	$("#nextThumbnails").bind("mouseup", nextThumbnailHandler);
	$("#previousThumbnails").bind("mouseup", previousThumbnailHandler);
	
}

function centerImage(imgContainer, img) {
	var imageWidth = img.width;
	if (gImageWidth - imageWidth > 0) {
		$(imgContainer).css("margin-left", Math.round(Math.floor((gImageWidth - imageWidth)*0.5)));
	} else {
		$(imgContainer).css("margin-left", 0);
	}
	
	var imageHeight = img.height;
	if (gImageHeight - imageHeight > 0) {
		$(imgContainer).css("margin-top",  Math.round(Math.floor((gImageHeight - imageHeight)*0.5)));
	} else {
		$(imgContainer).css("margin-top", 0);
	}
}

function stepImage(incriment) {
	if (incriment > 0) {
		gIndex++;
		if (gIndex > gItem.length - 1) {
			gIndex = 0;
		}
	} else {
		gIndex--;
		if (gIndex < 0) {
			gIndex = gItem.length - 1;
		}
	}
	
	setImage(gIndex);
}

function enableNavigation(enabled) {
	if (gSettings.navigation) {
		$("#previousButton").unbind();
		$("#nextButton").unbind();
		$("#imageContainer").unbind();
	
		if (enabled) {
			$("#previousButton").bind("mouseup", previousClickHandler);
			$("#nextButton").bind("mouseup", nextClickHandler);
			$("#imageContainer").bind("mouseup", nextClickHandler);
		}
	} else {
		$("#previousImage").unbind();
		$("#nextImage").unbind();
		if (enabled) {
			$("#previousImage").bind("mouseup", previousClickHandler);
			$("#nextImage").bind("mouseup", nextClickHandler);
		}
	}
	
}

function getXmlNodeNames(node) {
	var nodeName = new Object();
	switch (node) {
		case "DATA":
			nodeName.parent = "ITEMS";
			nodeName.headline = "HEADLINE";
			nodeName.description = "DESCRIPTION";
			nodeName.byline = "BYLINE";
			nodeName.src = "SRC";
			nodeName.header = "HEADER";
			nodeName.voting = "VOTING";
			break;
		case "ArrayOfSlide":
			nodeName.parent = "ArrayOfSlide";
			nodeName.headline = ""; //Not sure this node exists in this XML-feed.
			nodeName.description = "Description";
			nodeName.byline = "Name";
			nodeName.src = "ImagePath";
			nodeName.header = ""; //Not sure this node exists in this XML-feed.
			nodeName.voting = ""; //Not sure this node exists in this XML-feed.
			break;
		default:
			nodeName.parent = "ERROR";
			nodeName.headline = "ERROR";
			nodeName.description = "ERROR";
			nodeName.src = "ERROR";
			nodeName.header = "ERROR";
			nodeName.voting = "ERROR";
			break;
	}
	return nodeName;
}

function createSettings(settings) {
	if (settings == null) {
		settings = new Object();
	}	

	settings.navigation = 		(settings.navigation != null) ? settings.navigation 			: false;
	settings.description = 		(settings.description != null) ? settings.description 			: false;
	settings.thumbnails = 		(settings.thumbnails != null) ? settings.thumbnails 			: 0;
	settings.thumbnailWidth = 	(settings.thumbnailWidth != null) ? settings.thumbnailWidth 	: 100;
	settings.thumbnailHeight = 	(settings.thumbnailHeight != null) ? settings.thumbnailHeight 	: settings.thumbnailWidth;
	settings.imageHandlerUrl = 	(settings.imageHandlerUrl != null) ? settings.imageHandlerUrl 	: "http://www.nt.se/inc/ImageHandler.ashx";
	settings.slideshowXmlUrl = 	(settings.slideshowXmlUrl != null) ? settings.slideshowXmlUrl 	: "http://www.nt.se/flash/SlideshowXML.ashx";
	settings.playTime = 		(settings.playTime != null) ? settings.playTime 				: 2000;
	settings.fadeTime = 		(settings.fadeTime != null) ? settings.fadeTime 				: 500;
	settings.autoPlay = 		(settings.autoPlay != null) ? settings.autoPlay 				: false;
	settings.showTitle = 		(settings.showTitle != null) ? settings.showTitle 				: true;
	settings.useImageHeadline = (settings.useImageHeadline != null) ? settings.useImageHeadline	: false;
	settings.index = 			(settings.index != null) ? settings.index						: 0;
	settings.vote =				false;
	settings.voteHandlerUrl =	(settings.voteHandlerUrl != null) ? settings.voteHandlerUrl		: "";
	settings.id =				(settings.id != null) ? settings.id								: 0;
	settings.statsHandlerUrl = 	(settings.statsHandlerUrl != null) ? settings.statsHandlerUrl	: "";
	settings.firstImage = 		(settings.firstImage != null) ? settings.firstImage				: 0;
	
	return settings;
}

function setupSlideShow() {
	if (gSettings.navigation == false) {
		$("#imageNavigation").css("display", "none");
		$("#overImage").css("display", "block");
	}
	if (gSettings.description == false) {
		$("#imageDescription").css("display", "none");
	}
	if (gSettings.thumbnails == 0) {
		$("#imageThumbnails").css("display", "none");
}
//    var imageContHeight = $("#imageContainer").height();
//    $("#overImage").css("margin-top", "-" + imageContHeight + "px");
//    $("#overImage").height(imageContHeight);
//    $("#overImageRight").height(imageContHeight);
//    $("#overImageLeft").height(imageContHeight);
//    $("#overImage").width($("#imageContainer").width());

    var topHeight = Math.round(($("#imageContainer").height() - $("#nextImage").height()) / 2);
    $("#nextImage").css("top", topHeight);
    $("#previousImage").css("top", topHeight);


    $("#overImageLeft ").hover(function () {
        $("#previousImage").addClass('overImageHover');
        $("#previousImage").toggle();
    }, function () {
        $("#previousImage").removeClass('overImageHover');
        $("#previousImage").toggle();
    });

    $("#overImageRight ").hover(function () {
        $("#nextImage").addClass('overImageHover');
        $("#nextImage").toggle();
    }, function () {
        $("#nextImage").removeClass('overImageHover');
        $("#nextImage").toggle();
    });

	if (gSettings.autoPlay == true) {
	    playClickHandler();
	    $("#overImage").toggle();
	}

}

function findFirstImageId(data) {
	var firstImageIndex = -1;
	var index = null;
	
	$(data).children().children().children().each(function() {
		firstImageIndex++;
		var src = $(this).find(gNodeName.src).text();
		var id = src.substring(src.lastIndexOf("/") + 1, src.length - 4);
		
		if (id == gSettings.firstImage) {
			index = firstImageIndex;
		}
	});
	
	return index;
}

function voteHandler() {
	//alert("vote: " + settings.voteHandlerUrl + "/Vote?slideshowid=" + gSettings.id + "&imageid=" +  gItemId);
	$.ajax({
		url: settings.voteHandlerUrl + "/Vote?slideshowid=" + gSettings.id + "&imageid=" +  gItemId,
		success: function(data) {
			if (jQuery.browser.msie && jQuery.browser.version < 8) {
				alert($(data).find("Value1").text());
			} else {
				$("#vote").html("<p class=\"info\">" + $(data).find("Value1").text() + "</p>");
			}
		}
	});
}

function statisticsHandler() {
	$.ajax({
		url: settings.statsHandlerUrl + "?slideshowID=" + settings.id,
		success: function(data) {
			//alert("success!");
		}
	});
}

function stringToBoolean(str) {
	if (str.toLowerCase() == "true") {
		return true;
	} else {
		return false;
	}
}

function getParameter(name) {
	name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
	var regexS = "[\\#&?]"+name+"=([^&#]*)";
	var regex = new RegExp(regexS);
	var results = regex.exec(window.location.href);
	
	if(results == null)
		return 0;
	else
		return results[1];
}

function setParameter(param) {
	window.location.hash = param;
} 

function getFirstImage(){
	var firstImage = getParameter('firstImageID');
	if (firstImage == 0) {
		return;
	}
	
	var queryString = window.location.search;
	var indexOfFirstImageID = queryString.toLowerCase().indexOf('firstimageid=');
	
	if (indexOfFirstImageID > 0) {
		window.location.replace(moveFirstImageID(firstImage));
	}
	else {
		return firstImage;
	}
}

function moveFirstImageID(newImageID){
	var queryString = window.location.search;
	
	var queryArray = queryString.substring(1).split('&');
	var newQueryString = '';
	for (i in queryArray) {
		if (queryArray[i].toLowerCase().indexOf('firstimageid=') < 0) {
			if (newQueryString.length == 0) {
				newQueryString = '?' + queryArray[i];
			}
			else {
				newQueryString = newQueryString + '&' + queryArray[i];
			}
		}
		
	}
	
	var newHash = '#firstImageID=' + newImageID;
	var gotoAddress = 'http://' + window.location.host + window.location.pathname + newQueryString + newHash;
	return (gotoAddress)
}

function setCurrentImage(){
	var currentHash = window.location.hash;
	if (currentHash.toLowerCase().indexOf('firstimageid=') < 0){
		return;
	}
	window.location.hash = 'firstImageID=' + gItemId;
	
}