// JavaScript Document
function loadGuideItems() {
	AjaxRequest("guide.xml?ran=" + Math.floor(Math.random() * 100001), function(req) {
		var xmlDoc = req.responseXML;
		var steps = xmlDoc.getElementsByTagName("step");
		if (steps.length > 0) {
			for (i=0;i<steps.length;i++) {
				var step = steps[i];
				var stepID = step.attributes.getNamedItem("id").value;
				var stepTitle = step.attributes.getNamedItem("title").value;
				var stepThumb = step.attributes.getNamedItem("thumb").value;
				var stepDesc = step.firstChild.nodeValue;
				var myTemplate = new Template(
					'<div id="#{myID}" style="display: none">' +
						'<span style="font-size: 18px; display: block; border-bottom: 1px solid #cccccc; padding: 3px;" class="bluesubhead">#{myTitle}</span>' +
						'#{myDesc}' +
					'</div>' 
				);
				var myNavTemplate = new Template(
					'<a id="btn_#{myID}" href="javascript:void(0);" class="page" title="#{myTitle}" onclick="showGuideSection($(\'#{myID}\'));" style="padding: 3px; margin-right: 5px">' + 
						(i + 1) + 
					'</a>');
				var myIconTemplate = new Template(
					'<a id="icon_#{myID}" href="javascript:void(0);" class="icon" title="#{myTitle}" onclick="showGuideSection($(\'#{myID}\'));" style="padding: 3px; margin-right: 5px"><img src="images/#{myThumb}" style="border:none" /><br /><span style="font-weight: bold; font-size: 10px;">#{myTitle}</span></a>');
				var myButtonTemplate = new Template(
					'<div style="text-align: right; padding: 7px; border-top: 1px solid #cccccc; clear: both">' +
						'<input type="image" src="images/next.png" onclick="goToNext();" value="Continue" style="margin-bottom: 10px;" onmouseover="this.src=\'images/next_on.png\'"  onmouseout="this.src=\'images/next.png\'" />' +
				    '</div>');
				var params = {myID: stepID, myTitle: stepTitle, myDesc: stepDesc, myThumb: stepThumb};
				Element.insert($('guide_container'), myTemplate.evaluate(params));
				Element.insert($('guide_pages'),myNavTemplate.evaluate(params));
				Element.insert($('guide_icons'),myIconTemplate.evaluate(params));
				Element.insert($(stepID), myButtonTemplate.evaluate(params));
			}
		}				
		// set initial styles
		$('guide_pages').firstDescendant().removeClassName('page');
		$('guide_pages').firstDescendant().addClassName('pageSelected');
		$('guide_icons').firstDescendant().removeClassName('icon');
		$('guide_icons').firstDescendant().addClassName('iconSelected');
		$('guide_container').firstDescendant().addClassName('selected');
		$('guide_container').firstDescendant().show();
	});
}

function goToNext() {  
	var guideElements = $$('div.selected');
	var guideElement = guideElements[0];
	var nextElement = guideElement.next();
	if (nextElement == null) {nextElement = $('guide_container').firstDescendant();}
	showNewSection(guideElement, nextElement);
}

function goToPrevious() {
	var guideElements = $$('div.selected');
	var guideElement = guideElements[0];
	var previousElement = guideElement.previous();
	if (previousElement == null) {
		var allGuideElements = $('guide_container').immediateDescendants();
		previousElement = allGuideElements[allGuideElements.length -1];
	}
	showNewSection(guideElement, previousElement);
}

function showNewSection(currentElement, newElement) {
	currentElement.hide();
	currentElement.removeClassName('selected');
	$('btn_' + currentElement.identify()).addClassName('page');
	$('btn_' + currentElement.identify()).removeClassName('pageSelected');
	$('icon_' + currentElement.identify()).addClassName('icon');
	$('icon_' + currentElement.identify()).removeClassName('iconSelected');
	newElement.setOpacity(0);
	new Effect.Opacity(newElement.identify(), { from: 0.0, to: 1.0, duration: 2.0 });
	newElement.show();
	newElement.addClassName('selected');
	$('btn_' + newElement.identify()).addClassName('pageSelected');
	$('btn_' + newElement.identify()).removeClassName('page');
	$('icon_' + newElement.identify()).addClassName('iconSelected');
	$('icon_' + newElement.identify()).removeClassName('icon');
}

function showGuideSection(newElement) {
	var guideElements = $$('div.selected');
	var currentElement = guideElements[0];
	showNewSection(currentElement, newElement);
}