//$Id: story.js 4828 2011-05-27 23:05:43Z ssundheim $

function displayStory(storyType, contentID, storyItemID) {
	if (contentID == false) {
		return false;
	}

	var storyList = document.getElementById('story_list'+storyType+contentID);
	if (storyList != null ) {
		for (ii = 0; ii<=storyList.childNodes.length; ii++) {
			var storyItem = document.getElementById('story_info'+storyType+contentID+ii);
			if (storyItem != null) {
				if (ii == storyItemID) {
					storyItem.style.display = '';
				} else {
					storyItem.style.display = 'none';
				}
			}
		}
	}

	var userImageList = document.getElementById('story_item_list'+storyType+contentID);
	if (userImageList != null) {
		for (ii = 0; ii<= userImageList.childNodes.length; ii++) {
			var userImage = document.getElementById('story_user_image'+storyType+contentID+ii);
			if (userImage != null) {
				if (ii == storyItemID) {
					userImage.className = 'story_image_on';
				} else {
					userImage.className = 'story_image';
				}
			}
		}
	}
}

function fetchStory(storyType, contentID, page, numItems) {
	var storyList = document.getElementById('story_list'+storyType+contentID);
	var storyItemList = document.getElementById('story_item_list'+storyType+contentID);

	// Remove anything that may be listed
	if (storyList != null) {
		if (storyList.hasChildNodes()) {
			while (storyList.childNodes.length >= 1) {
				storyList.removeChild(storyList.firstChild);
			}
		}
	}

	if (storyItemList != null) {
		if (storyItemList.hasChildNodes()) {
			while (storyItemList.childNodes.length >= 1) {
				storyItemList.removeChild(storyItemList.firstChild);
			}
		}
	}

	// Hide our side bubble
	$('.story_bubble_corner').hide();

	// Show the loading div
	var loadingDiv = document.createElement('div');
	loadingDiv.id = 'storyLoadingDiv';
	var loadingImage = document.createElement('img');
	loadingImage.src = "/images/progress.gif";
	loadingDiv.appendChild(loadingImage);

	storyList.appendChild(loadingDiv);

	if (storyList.style.display = 'none') {
		storyList.style.display = '';
	}

	var postString = 'storytype='+storyType+'&contentid='+contentID+'&numitems='+numItems;
	if (page != null) {
		postString += '&page='+page;
	}

	var postURI = '/ajaxserver/loadstory.php5';
	loadXMLDocPost(postURI, postString);
}

function displayStoryItems(input, results, success) {
	var storyItems = results[0].getElementsByTagName('storyitem');
	var thisStoryType = results[0].getElementsByTagName('storytype')[0].firstChild.data;
	var thisStoryContentId = results[0].getElementsByTagName('storycontentid')[0].firstChild.data;
	var thisStoryNumItems = results[0].getElementsByTagName('storynumitems')[0].firstChild.data;
	var storyList = document.getElementById('story_list'+thisStoryType+thisStoryContentId);
	var storyItemList = document.getElementById('story_item_list'+thisStoryType+thisStoryContentId);
	var nextPage = results[0].getElementsByTagName('storynextpage')[0].firstChild.data;
	var prevPage = results[0].getElementsByTagName('storypreviouspage')[0].firstChild.data;


	// Make sure our lists are clear
	if (storyList.hasChildNodes()) {
		while (storyList.childNodes.length >= 1) {
				storyList.removeChild(storyList.firstChild);
		}
	}
	
	if (storyItemList.hasChildNodes()) {
		while (storyItemList.childNodes.length >= 1) {
			storyItemList.removeChild(storyItemList.firstChild);
		}
	}

	// Get our sidebubble in there
	$('.story_bubble_corner').show();
	
	if (prevPage != null && prevPage >= 1) {
		var prevPageLink = document.createElement('a');
		prevPageLink.href = '#';	
		prevPageLink.className = 'story_image';
		prevPageLink.onclick = function () { fetchStory(thisStoryType, thisStoryContentId, prevPage, thisStoryNumItems); return false; }		
		var prevPageImg = document.createElement('div');
		prevPageImg.className = 'storynav_previous';
		prevPageLink.appendChild(prevPageImg);
		storyItemList.appendChild(prevPageLink);
	}

	// This function is created due to JavaScript closures. Basically, since our variable is going to be changing through 
	// each iteration through the loop, then all of our functions will only end up with the last value of the variable. By 
	// using this dummy function, we return the value of the variable at creation time instead of execution time.
	function getRef(thisStoryType, thisStoryContentId, storyItemNumber) {
		return function () { displayStory(thisStoryType, thisStoryContentId, storyItemNumber); };
	}

	for (ii=0; ii<storyItems.length; ii++) {
		// Grab our story item and get the item number (ii+1)
		var thisStoryItem = storyItems[ii];
		var storyItemNumber = ii + 1;
		
		// Elements for the user who created the story item
		var thisStoryUserLink = thisStoryItem.getAttribute('userlink');
		var thisStoryUserNickname = thisStoryItem.getAttribute('usernickname');

		// Elements for our image/image link
		var thisStoryImage = thisStoryItem.getAttribute('image');
		var thisStoryContentLink = thisStoryItem.getAttribute('contentlink');
		
		// The 1, 2, 3 or 4 parts of text that make up the story item span
		var initialText = thisStoryItem.getAttribute('initialtext');
		var secondaryText = thisStoryItem.getAttribute('secondarytext');
		var tertiaryText = thisStoryItem.getAttribute('tertiarytext');
		var quaternaryText = thisStoryItem.getAttribute('quaternarytext'); 

		// The 1, 2 or 3 links that go in the story item span		
		var thisStoryFirstLink = thisStoryItem.getAttribute('firstlink');
		var thisStoryFirstLinkText = thisStoryItem.getAttribute('firstlinktext');
		var thisStorySecondLink = thisStoryItem.getAttribute('secondlink');
		var thisStorySecondLinkText = thisStoryItem.getAttribute('secondlinktext');
		var thisStoryTertiaryLink = thisStoryItem.getAttribute('tertiarylink');
		var thisStoryTertiaryLinkText = thisStoryItem.getAttribute('tertiarylinktext');
		
		// The time the story was updated
		var thisStoryTimeUpdated = thisStoryItem.getAttribute('timeupdated');

		// Let's create our story image first
		var storyImage = document.createElement('img');
		storyImage.src = thisStoryImage;
		storyImage.alt = 'Img';
		storyImage.height = 18;
		storyImage.width = 18;

		// Here's where we use the JavaScript closure to put an onmouseover on this image
		storyImage.onmouseover = getRef(thisStoryType, thisStoryContentId, storyItemNumber);

		// Create the link and put the image in it
		var contentImageLink = document.createElement('a');
		contentImageLink.href = thisStoryContentLink;
		if (ii == 0) {
			contentImageLink.className = 'story_image_on';
		} else {
			contentImageLink.className = 'story_image';
		}
		var contentLinkIdToUse = ii + 1;
		contentImageLink.id = 'story_user_image'+thisStoryType+thisStoryContentId+contentLinkIdToUse;
		contentImageLink.appendChild(storyImage);
		

		// Now let's put together our span with the information in it. First we'll make our user link
		var storyUserLink = document.createElement('a');
		storyUserLink.href = thisStoryUserLink;
		storyUserLink.appendChild(document.createTextNode(thisStoryUserNickname));

		// Now we'll create our content links. There will always be at least one, but not all have two or three
		var firstLink = document.createElement('a');
		firstLink.href = thisStoryFirstLink;
		firstLink.className = 'feed_topictitle';
		firstLink.appendChild(document.createTextNode(thisStoryFirstLinkText));
		if (thisStorySecondLink != null) {
			var secondLink = document.createElement('a');
			secondLink.href = thisStorySecondLink;
			secondLink.className = 'feed_answertitle';
			secondLink.appendChild(document.createTextNode(thisStorySecondLinkText));
		} else {
			var secondLink = null;
		}
		if (thisStoryTertiaryLink != null) {
			var tertiaryLink = document.createElement('a');
			tertiaryLink.href = thisStoryTertiaryLink;
			tertiaryLink.className = 'feed_topictitle';
			tertiaryLink.appendChild(document.createTextNode(thisStoryTertiaryLinkText));
		} else {
			var tertiaryLink = null;
		}

		// Now we will create our span for the story text
		var storyItemSpan = document.createElement('span');
		storyItemSpan.id = 'story_info'+thisStoryType+thisStoryContentId+storyItemNumber;

		// First we append our user who did this story item
		storyItemSpan.appendChild(storyUserLink);
		storyItemSpan.appendChild(document.createTextNode(' '));

		// Now we will append the initial text and the first link
		storyItemSpan.appendChild(document.createTextNode(initialText));
		if (firstLink != null) {
			storyItemSpan.appendChild(firstLink);
		}

		// If there are additional links or text, we'll append them too
		if (secondaryText != null) {
			storyItemSpan.appendChild(document.createTextNode(secondaryText));
		}
		if (secondLink != null) {
			storyItemSpan.appendChild(secondLink);
		}
		if (tertiaryText != null) {
			storyItemSpan.appendChild(document.createTextNode(tertiaryText));
		}
		if (tertiaryLink != null) {
			storyItemSpan.appendChild(tertiaryLink);
		}
		if (quaternaryText != null) {
			storyItemSpan.appendChild(document.createTextNode(quaternaryText));
		}

		// The first story item should be displayed. All the others should be hidden
		if (ii == 0) {
			storyItemSpan.style.display = '';
		} else {
			storyItemSpan.style.display = 'none';
		}

		storyItemSpan.appendChild(document.createTextNode(' '));
		
		// Now we'll put the update time for this story item and append the span
		timeSpan = document.createElement('span');
		timeSpan.className = 'small';
		timeSpan.appendChild(document.createTextNode(' ('));		
		timeSpan.appendChild(document.createTextNode(thisStoryTimeUpdated));
		timeSpan.appendChild(document.createTextNode(') '));		
		timeSpan.className = 'story_age_container';
		storyItemSpan.appendChild(timeSpan);

		// Lastly, for this loop, we'll append the span to the div
		storyList.appendChild(storyItemSpan);

		// Then we'll append our image link
		storyItemList.appendChild(contentImageLink);

	} 

	//Create the talk bubble "end" graphic
	var TalkbubbleEndContain = document.createElement('div');
	TalkbubbleEndContain.className = 'story_bubble_end';
	if (nextPage != null && nextPage > 1) {
		var nextPageLink = document.createElement('a');
		nextPageLink.href = '#';
		nextPageLink.className = 'storynav_next';			
		nextPageLink.onclick = function () { fetchStory(thisStoryType, thisStoryContentId, nextPage, thisStoryNumItems); return false; }
		TalkbubbleEndContain.appendChild(nextPageLink);
	}	
	storyItemList.appendChild(TalkbubbleEndContain);
	
	storyItemList.style.display = '';
}

function resetStory(thisStoryContentId, feedContentType) {
	if (feedContentType == null) {
		feedContentType = 'topic';
	}
	displayStory(feedContentType, thisStoryContentId, 1);
}