screenshot = 1;
numScreenshots = 5;

function getStyle(elem, name) {
	// J/S Pro Techniques p136
	if (elem.style[name]) {
		return elem.style[name];
	} else if (elem.currentStyle) {
		return elem.currentStyle[name];
	}
	else if (document.defaultView && document.defaultView.getComputedStyle) {
		name = name.replace(/([A-Z])/g, "-$1");
		name = name.toLowerCase();
		s = document.defaultView.getComputedStyle(elem, "");
		return s && s.getPropertyValue(name);
	} else {
		return null;
	}
}

function getFirstChildOfType(element, nodeName)
{
	for (i=0; i < element.childNodes.length; ++i) {
		if (element.childNodes[i].nodeName == nodeName)
			return element.childNodes[i];
	}
	return null;
}

function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
	var obj = document.getElementById(szDivID);
	if (obj == null)
		alert("No object named " + szDivID);
	obj.style.display = iState ? "table" : "none";
}

function setContent(src) {
	toggleBox("buy_spots", 0);
	document.getElementById('content').innerHTML = "<iframe id=content src='" + src + "'></iframe>";
}

function home() {
	toggleBox("buy_spots", 0);
	setContent("spots.html");
}

function support() {
	toggleBox("buy_spots", 0);
	setContent("_support.html");
}

function buy() {
	toggleBox("buy_spots", 1);
}

function showVideo() {
	controller = false;
	document.getElementById('iphone_display').innerHTML = '<object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="228" height="327" codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0" id="video_qt"><param name="align" value="middle" /><param name="src" value="images/spots-demo.mov" /><param name="loop" value="false" /><param name="controller" value="' + controller + '" /><embed name="video" enablejavascript="true" type="video/quicktime" width="228" height="328" src="images/spots-demo.mov" controller="' + controller + '" loop="false" align="middle"></embed></object>';
}

function showScreen(name) {
	element = document.getElementById('iphone_display');
	inner = getFirstChildOfType(element, 'A');
	if (inner != null)
		element = inner;
	element.innerHTML = '<img src="' + name + '" />';
}

var tabs = new Array();
tabs[0] = "info";
tabs[1] = "support";
tabs[2] = "submit_hotspot";

function resetVideo()
{
	document.getElementById('iphone_display').innerHTML = '<a href="javascript:showVideo();" alt="show video" onmouseover="javascript:highlight(this.parentNode);" onmouseout="javascript:unhighlight(this.parentNode);"><img class="unhighlight" src="images/video_play.png" /><img class="highlight" src="images/video_play_roll.png" style="display: none;" /></a>';
}

function switchToTab(tab) {
	for(i=0; i < tabs.length; ++i) {
		if (tab == tabs[i]) {
			toggleBox(tabs[i], 1);
			toggleBox("tab_item_" + tabs[i] + "_active", 1);
			toggleBox("tab_item_" + tabs[i] + "_inactive", 0);
		} else {
			toggleBox(tabs[i], 0);
			toggleBox("tab_item_" + tabs[i] + "_active", 0);
			toggleBox("tab_item_" + tabs[i] + "_inactive", 1);
		}
	}
	toggleBox("buy_spots", (tab == "info"));

	toggleBox("spots_thanks_layer", 0);
	toggleBox("spots_support_layer", 1);

	resetVideo();

	/* maybe prevent Safari redraw bug */
	document.getElementById("spots").style.backgroundColor = "rgb(94, 108, 137)";
	document.getElementById("spots").style.backgroundColor = "rgb(94, 108, 138)";
}

function changeToRoll(obj)
{
	imageURL = getStyle(obj, "backgroundImage");
	obj.style.backgroundImage = imageURL.replace("_inactive", "_roll");
}

function changeToInactive(obj)
{
	imageURL = getStyle(obj, "backgroundImage");
	obj.style.backgroundImage = imageURL.replace("_roll", "_inactive");
}

function getClasses(obj)
{
	if (obj.nodeType == obj.TEXT_NODE)
		return null;
	
	if (obj.className == null)
		return null;

	return obj.className.split(' ');
}

function isInlineElement(obj)
{
	nodeName = obj.nodeName;
	return (nodeName == "SPAN" || nodeName == "#text" || nodeName == "IMG");
}

function unhighlight(obj)
{
	var children = new Array();
	for(i=0; i < obj.childNodes.length; ++i) {
		var o = obj.childNodes[i];
		var classes = getClasses(o);
		if (classes == null)
			continue;
		for(c=0; c < classes.length; ++c) {
			className = classes[c];
			if (className == "highlight") {
				o.style.display = "none";
			} else
			if (className == "unhighlight") {
				if (isInlineElement(o))
					o.style.display = "inline";
				else
					o.style.display = "block";
			}
			if (className != "highlight" && o.childNodes.length != 0)
				children.push(o);
		}
	}
	for(i=0; i < children.length; ++i)
		unhighlight(children[i]);
}

function highlight(obj)
{
	var children = new Array();
	for(i=0; i < obj.childNodes.length; ++i) {
		var o = obj.childNodes[i];
		var classes = getClasses(o);
		if (classes == null)
			continue;
		for(c=0; c < classes.length; ++c) {
			className = classes[c];
			if (className == "highlight") {
				if (isInlineElement(o))
					o.style.display = "inline";
				else
					o.style.display = "block";
			} else
			if (className == "unhighlight") {
				o.style.display = "none";
			}
			if (className != "unhighlight" && o.childNodes.length != 0)
				children.push(o);
		}
	}

	for(i=0; i < children.length; ++i)
		highlight(children[i]);
}

function activateState(obj, state)
{
	prefix = "state_";
	if (state.indexOf(prefix) != 0)
		state = prefix + state;
	var children = new Array();
	for(i=0; i < obj.childNodes.length; ++i) {
		var o = obj.childNodes[i];
		var classes = getClasses(o);
		if (classes == null)
			continue;
		for(c=0; c < classes.length; ++c) {
			var className = classes[c];
			if (className == state) {
				if (isInlineElement(o))
					o.style.display = "inline";
				else
					o.style.display = "block";
			} else
			if (className.indexOf(prefix) == 0) {
				o.style.display = "none";
			}
		}
		if (o.childNodes.length != 0)
			if (o.className.indexOf(prefix) == 0 ||
				o.className.indexOf(" " + prefix) != -1) {

				/* there is a class starting with prefix */

				if (o.className.indexOf(state) == 0 ||
					o.className.indexOf(" " + state) == 0) {

					children.push(o);
				}
			} else {
				children.push(o);
			}
	}

	for(i=0; i < children.length; ++i)
		activateState(children[i], state);
}

function makeTab(name, images)
{
	var originalDiv = document.getElementById(name);
	var newDiv = document.createElement("div");
	var leftImg = new Image(); leftImg.src = images[0];
	var middleImg = images[1];
	var rightImg = new Image(); rightImg.src = images[2];

	var image = new Image(); image.src = middleImg;

	while (originalDiv.childNodes.length > 0) {
		newDiv.appendChild(originalDiv.firstChild);
	}

	newDiv.style.backgroundImage = "url(" + middleImg + ")";
	newDiv.style.height = image.height;

	leftImg.style.cssFloat = "left";
	newDiv.style.cssFloat = "left";
	newDiv.style.backgroundRepeat = "repeat-x";
	rightImg.style.cssFloat = "left";

	originalDiv.appendChild(leftImg);
	originalDiv.appendChild(newDiv);
	originalDiv.appendChild(rightImg);
}

function spotsInit()
{
	search = document.location.search.replace("?", "");
	if (search == "submit_hotspot") {
		switchToTab("submit_hotspot");
	} else
	if (search == "support" || search == "faq" || search == "thanks") {
		switchToTab("support");
	}

	toggleBox("spots_thanks_layer", search == "thanks");
	toggleBox("spots_support_layer", search != "thanks");
	
	init_hotspot_form_values();
}

function thanksInit()
{
	switchToTab('support');
	toggleBox("spots_thanks_layer", 1);
	toggleBox("spots_support_layer", 0);
}