random_loaded = false;

function showDelete(i)
{
	if (document.getElementById('dd-pick-' + i).src.indexOf("drop_here.gif") == -1)
	{
		// only show if user has dropped a website here
		element = document.getElementById('delete-' + i);
		element.style.visibility = "visible";
	}
}

function hideDelete(i)
{
	element = document.getElementById('delete-' + i);
	element.style.visibility = "hidden";
}

function moveToTrash(i)
{
	element = document.getElementById('delete-' + i);
	element.style.visibility = "hidden";

	element = document.getElementById('dd-pick-' + i);
	element.src = "images/drop_here.gif";
	index = element.id.substring(8);
	isdbPick[index] = 0;

	element = document.getElementById('dd-pick-' + i + '-link');
	element.href = "#";
	element.target = "";

	element = document.getElementById('dd-pick-' + i + '-link2');
	element.href = "#";
	element.target = "";
	element.innerHTML = "Drop website here";

	if (isdbPick[0] > 0 || isdbPick[1] > 0 || isdbPick[2] > 0 || isdbPick[3] > 0)
	{
		refresh(0);
	} else
	{
		// no 'favorites' left, so reset suggestion-layer/results
		emptySuggestions();

		// switch to 'random' tab
		showTab('random');
	}

	updateURL();
}

function emptySuggestions()
{
	var suggestions = document.getElementById("websiteSuggestions");
	suggestions.innerHTML = '<div style="font-size: 18px; color: white; padding-top: 70px;">Please drag some websites to the top squares to see some suggestions.</h2>';
}

function getOpacity(element)
{
	if (agentIe)
	{
		return element.filters.alpha.opacity / 100.0;
	}
	else if(agentMozilla)
	{
		return element.style.MozOpacity;
	}
	else if(agentSafari)
	{
		return element.style.KhtmlOpacity;
	}
}

function setOpacity(element, alpha)
{
	if (agentIe)
	{
		if (element.filters.alpha.opacity != alpha * 100.0)
			element.filters.alpha.opacity = alpha * 100.0;
	}
	else if(agentMozilla)
	{
		if (alpha > 0.99) alpha = 0.99;
		if (element.style.MozOpacity != alpha)
			element.style.MozOpacity = alpha;
	}
	else if(agentSafari)
	{
		element.style.KhtmlOpacity = alpha;
	}
}

function fadeIn(elementName)
{
	var targetOpacity = 0.9;
	var element = document.getElementById(elementName);
	if (element.getAttribute("fadeState") == "out")
		return;
	var opacity = 0.0;
	opacity += 1.0 * getOpacity(element) + 0.3;
	if (opacity < targetOpacity)
	{
		setTimeout("fadeIn('" + elementName + "')", 20);
		setOpacity(element, opacity);
		/*
		var z = 75 * opacity;
		element.width = z;
		element.height = z;
		*/
	} 
	else
	{
		setOpacity(element, targetOpacity);
		/*
		element.width = 75;
		element.height = 75;
		*/
	}
	if (element.style.visibility == "hidden")
		element.style.visibility = "visible";
}

function fadeOut(elementName)
{
	stateFadeOut = true;
	var targetOpacity = 0.0;
	var element = document.getElementById(elementName);
	element.setAttribute("fadeState", "out");
	var opacity = 0.0;
	opacity += 1.0 * getOpacity(element) - 0.2;
	if (opacity > targetOpacity)
	{
		setTimeout("fadeOut('" + elementName + "')", 20);
		setOpacity(element, opacity);
	} 
	else
	{
		setOpacity(element, targetOpacity);
		stateFadeOut = false;
		element.setAttribute("fadeState", "none");
		element.style.visibility = "hidden";
	}
}

function toggleLayer(layerName)
{
	var element = document.getElementById(layerName);
	var oldState = element.getAttribute("animState");

	if (oldState == "hidden")
	{
		element.setAttribute("animState", "animToVisible");
		animLayer(layerName);
	}
	else if (oldState == "visible")
	{
		element.setAttribute("animState", "animToHidden");
		animLayer(layerName);
	}
	else if (oldState == "animToVisible")
	{
		element.setAttribute("animState", "animToHidden");
	}
	else if (oldState == "animToHidden")
	{
		element.setAttribute("animState", "animToVisible");
	}
}

function animLayer(layerName)
{
	var element = document.getElementById(layerName);
	var state = element.getAttribute("animState");
	var currentTop = parseInt(element.style.top.replace("px", ""));
	var targetTop = parseInt(currentTop);
	if (state == "animToHidden")
	{
		targetTop = element.getAttribute("animHiddenTop");
	}
		else if (state == "animToVisible")
	{
		targetTop = element.getAttribute("animVisibleTop");
	}

	if (currentTop < targetTop)
	{
		var diff = targetTop - currentTop + 1;
		currentTop += diff * 0.2 + 1;
		element.style.top = currentTop + "px";
		setTimeout("animLayer('" + layerName + "')", 20);
	}
	else if (currentTop > targetTop)
	{
		var diff = targetTop - currentTop - 1;
		currentTop += diff * 0.2 - 1;
		element.style.top = currentTop + "px";
		setTimeout("animLayer('" + layerName + "')", 20);
	}
	else
	{
		if (state == "animToHidden")
		{
			element.setAttribute("animState", "hidden");
		} else if (state == "animToVisible")
		{
			element.setAttribute("animState", "visible");
		}
	}
}

function resetElm(e, id)
{
}

function onDrop(e, id)
{
    var oDD; 
    
	if ("string" == typeof id) { 
		oDD = YAHOO.util.DDM.getDDById(id); 
	} else { 
		oDD = YAHOO.util.DDM.getBestMatch(id); 
	}
	if (oDD.getEl().id.indexOf("pick")!=-1)
	{
		// thumbshot
		oDD.getEl().src = this.getEl().src;

		// link/url
		index = this.getEl().id.substring(8);
		var url = document.getElementById(this.getEl().id.substr(0, 7) + "-url-" + index);
		if (agentIe == true)
		{
			this.getEl().href.value = url.href;
		} else
		{
			this.getEl().href = url.href;
		}
		this.getEl().target = "_blank";

		var link = document.getElementById(oDD.getEl().id + "-link");
		link.href = url.href;
		link.target = "_blank";

		var link2 = document.getElementById(oDD.getEl().id + "-link2");
		link2.innerHTML = this.getEl().getAttribute('isdbtitle');
		link2.href = url.href;
		link2.target = "_blank";

		var isdbId = this.getEl().getAttribute("isdb");
		oDD.getEl().setAttribute("isdb", isdbId);

		index = oDD.getEl().id.substring(8);
		isdbPick[index] = isdbId;

		showDelete(index);

		inUse = 0;
		for(x=0;x<dropsActive;x++)
		{
			if (isdbPick[x] > 0)
			{
				inUse++;
			}
		}

		if (dropsActive < 6 && (inUse > (dropsActive - 2) || inUse == dropsActive))
		{
			// add new 'drop here' box
			addDropBox();
		}

		updateURL();

		refresh(0);
	}
	else if (oDD.getEl().id.indexOf("trash")!=-1)
	{
		if (this.getEl().id.indexOf("pick")!=-1)
		{
			this.getEl().src = "http://www.insuggest.com/images/clearpixel.gif";
			index = this.getEl().id.substring(8);
			isdbPick[index] = 0;
			refresh(0);
		}
	}
}

function updateURL()
{
	arr = window.location.href.split('#');
	url = arr[0] + "#";
	found = false;
	add = "";
	for(x=0;x<dropsActive;x++)
	{
		if (isdbPick[x] > 0)
		{
			add += isdbPick[x].toString();
			found = true;
		}
		add += ",";
	}
	if (found == true)
	{
		url += add;
		url = url.substring(0, url.length-1);
	}

	window.location.href = url;
}


function displayLoadedDropboxes()
{
	if (httpDropboxes.readyState == 4 || httpDropboxes.readyState == "complete")
	{
		if (httpDropboxes.responseText != '')
		{
			arr = httpDropboxes.responseText.split('\n');

			for(x=0;x<arr.length;x++)
			{
				arr2 = arr[x].split('|');
				index = arr2[0];
				isdbId = arr2[1];
				url = arr2[2];
				title = arr2[3];

				if (arr[x] != "")
				{
					document.getElementById('dd-pick-' + index).src = "http://open.thumbshots.org/image.pxf?url=" + escape(url);
					document.getElementById('dd-pick-' + index).setAttribute("isdb", isdbId);

					document.getElementById('dd-pick-' + index + '-link').href = url;
					document.getElementById('dd-pick-' + index + '-link').target = "_blank";

					document.getElementById('dd-pick-' + index + '-link2').href = url;
					document.getElementById('dd-pick-' + index + '-link2').innerHTML = title;
					document.getElementById('dd-pick-' + index + '-link2').target = "_blank";

					showDelete(index);
				}
			}
		}
	}
}

function addDropBox()
{
	var y = document.createElement('td');
	y.style.paddingLeft = '15px';
	y.align = 'center';
	y.style.width = '120px';
	y.style.height = '90px';

	y.innerHTML = '<a id="dd-pick-' + dropsActive + '-link" href="" target="_blank"><img id="dd-pick-' + dropsActive + '" src="images/drop_here.gif" width="120" height="90" border="0" isdb="0" /></a><div style="height: 6px"></div><a href="#" id="dd-pick-' + dropsActive + '-link2" style="color: #777777;">Drag website here</a><div id="delete-' + dropsActive + '" style="visibility: hidden; position: relative; top: -107px; left: 55px; margin: 0; padding: 0;"><a onClick="moveToTrash(' + dropsActive + '); return true;"><img src="images/button_close.gif" border="0" alt="Remove" title="Remove" /></a></div>';
	document.getElementById('boxes').rows[0].appendChild(y);

	dropsActive++;
}

function clear()
{
	for(i=0; i<4; i++)
	{
		var pick = document.getElementById("dd-pick-" + i);
		pick.src = "http://www.insuggest.com/images/clearpixel.gif";
		isdbPick[i] = 0;
	}
	refresh(0);		
}

function httpLoad()
{
	if (http.readyState == 4 || http.readyState == "complete")
	{
		var suggestions = document.getElementById("websiteSuggestions");
		suggestions.innerHTML = http.responseText;
		for(i=0; i<24; i++)
		{
			var suggDd = new YAHOO.util.DDProxy("dd-sugg-" + i);
			suggDd.onDragDrop = onDrop;
			suggDd.endDrag = resetElm;
		}
		showTab("suggestions");
		fadeOut("loading");
	}
}

function httpRandomLoad()
{
	if (http.readyState == 4 || http.readyState == "complete")
	{
		var randomSuggestions = document.getElementById("randomSuggestions");
		randomSuggestions.innerHTML = http.responseText;
		for(i=0; i<24; i++)
		{
			var suggDd = new YAHOO.util.DDProxy("dd-rand-" + i);
			suggDd.onDragDrop = onDrop;
			suggDd.endDrag = resetElm;
		}
		showTab("random");
		fadeOut("loading");
	}
}

function httpSearchLoad()
{
	if (httpSearch.readyState == 4 || httpSearch.readyState == "complete")
	{
		var searchResult = document.getElementById("searchResult");
		searchResult.innerHTML = httpSearch.responseText;
		for(i=0; i<24; i++)
		{
			var searchDd = new YAHOO.util.DDProxy("dd-sear-" + i);
			searchDd.onDragDrop = onDrop;
			searchDd.endDrag = resetElm;
		}
		fadeOut("loading");
	}
}

function httpViewLoad()
{
	if (httpView.readyState == 4 || httpView.readyState == "complete")
	{
		var view = document.getElementById("view");
		view.innerHTML = httpView.responseText;

		var suggDd = new YAHOO.util.DDProxy("dd-large");
		suggDd.onDragDrop = onDrop;
		suggDd.endDrag = resetElm;
	}
}

function setSearchMessage(msg)
{
	var searchMsg = document.getElementById("searchMsg");
	searchMsg.innerHTML = msg;
}


function slide(skip)
{
}

function refresh(skip, slide)
{	
	if (slide > 0)
	{
		var elm = document.getElementById("slidesugg");
		var current = parseInt(elm.style.left.replace("px", ""));
		if (current > -680)
		{
			current -= -current/5+50;
			elm.style.left = current + "px";
			setTimeout("refresh(" + skip + ", 1)", 20);
			return;
		}
	}
	else if (slide < 0)
	{
		var elm = document.getElementById("slidesugg");
		var current = parseInt(elm.style.left.replace("px", ""));
		if (current < 680)
		{
			current += current/5+50;
			elm.style.left = current + "px";
			setTimeout("refresh(" + skip + ", -1)", 20);
			return;
		}
	}
	else
	{
		if (isdbPick[0] == 0 && isdbPick[1] == 0 && isdbPick[2] == 0 && isdbPick[3] == 0 && isdbPick[4] == 0 && isdbPick[5] == 0)
		{
			var randomLayer = document.getElementById("randomTab");

			if (randomLayer.style.visibility == "visible")
			{
				setSearchMessage("Loading popular websites...");
			} else
			{
				setSearchMessage("What?");
			}
		}
		else
		{
			setSearchMessage("People who liked this also liked...");
		}
		fadeIn("loading");
	}
	http.open("GET", "suggestions.php?id0=" + isdbPick[0] + "&id1=" + isdbPick[1] + "&id2=" + isdbPick[2] + "&id3=" + isdbPick[3] + "&id4=" + isdbPick[4] + "&id5=" + isdbPick[5] + "&skip=" + skip + "&rnd=" + Math.random(), true);
	http.onreadystatechange = httpLoad;
	http.send(null);
}

function refreshRandom(skip)
{
	random_loaded = true;
	setSearchMessage("Loading random websites...");
	fadeIn("loading");
	http.open("GET", "suggestions.php?mode=random&skip=" + skip + "&rnd=" + Math.random(), true);
	http.onreadystatechange = httpRandomLoad;
	http.send(null);
}

function doSearch(skip, slide)
{
	if (slide > 0)
	{
		var elm = document.getElementById("slidesearch");
		var current = parseInt(elm.style.left.replace("px", ""));
		if (current > -330)
		{
			current -= -current/5+50;
			elm.style.left = current + "px";
			setTimeout("doSearch(" + skip + ", 1)", 20);
			return;
		}
	}
	else if (slide < 0)
	{
		var elm = document.getElementById("slidesearch");
		var current = parseInt(elm.style.left.replace("px", ""));
		if (current < 330)
		{
			current += current/5+50;
			elm.style.left = current + "px";
			setTimeout("doSearch(" + skip + ", -1)", 20);
			return;
		}
	}
	else
	{
		setSearchMessage("Searching...");
		fadeIn("loading");
	}
	var search = document.getElementById("search");
	httpSearch.open("GET", "suggestions.php?mode=search&search=" + search.value + "&skip=" + skip + "&rnd=" + Math.random(), true);
	httpSearch.onreadystatechange = httpSearchLoad;
	httpSearch.send(null);
}

function showTab(tab)
{
	var suggestLayer = document.getElementById("suggestionsTab");
	var searchLayer = document.getElementById("searchTab");
	var randomLayer = document.getElementById("randomTab");

	var suggestResult = document.getElementById("websiteSuggestions");
	var searchResult = document.getElementById("searchSuggestions");
	var randomReuslt = document.getElementById("randomSuggestions");
	if (tab == "suggestions")
	{
		suggestLayer.style.zIndex = "2";
		suggestLayer.style.visibility = "visible";
		searchLayer.style.zIndex = "0";
		searchLayer.style.visibility = "hidden";
		randomLayer.style.zIndex = "0";
		randomLayer.style.visibility = "hidden";

		websiteSuggestions.style.zIndex = "2";
		websiteSuggestions.style.visibility = "visible";
		searchSuggestions.style.zIndex = "0";
		searchSuggestions.style.visibility = "hidden";
		randomSuggestions.style.zIndex = "0";
		randomSuggestions.style.visibility = "hidden";
	}
	else if (tab == "random")
	{
		suggestLayer.style.zIndex = "0";
		suggestLayer.style.visibility = "hidden";
		searchLayer.style.zIndex = "0";
		searchLayer.style.visibility = "hidden";
		randomLayer.style.zIndex = "2";
		randomLayer.style.visibility = "visible";

		websiteSuggestions.style.zIndex = "0";
		websiteSuggestions.style.visibility = "hidden";
		searchSuggestions.style.zIndex = "0";
		searchSuggestions.style.visibility = "hidden";
		randomSuggestions.style.zIndex = "2";
		randomSuggestions.style.visibility = "visible";
		if (random_loaded == false)
		{
			refreshRandom(0);
		}
	}
	else
	{
		suggestLayer.style.zIndex = "0";
		suggestLayer.style.visibility = "hidden";
		searchLayer.style.zIndex = "2";
		searchLayer.style.visibility = "visible";
		randomLayer.style.zIndex = "0";
		randomLayer.style.visibility = "hidden";

		websiteSuggestions.style.zIndex = "0";
		websiteSuggestions.style.visibility = "hidden";
		searchSuggestions.style.zIndex = "2";
		searchSuggestions.style.visibility = "visible";
		randomSuggestions.style.zIndex = "0";
		randomSuggestions.style.visibility = "hidden";

		var search = document.getElementById("search");
		search.focus();
	}
}

function help()
{
	var helpa = document.getElementById("help");
	var msg = "<p style='width: 400px;'>inSuggest helps you explore websites based on your own ";
	msg += "specific taste. By dragging websites to the three squares at the top you ";
	msg += "tell the system what you like. inSuggest will then compare your taste to thousands ";
	msg += "of other people and present the websites you are most likely to enjoy.";
	msg += "</p>";
	helpa.innerHTML = msg;
}

function whatDoYouLike()
{
	// where do we put this website?
	index = -1;
	for(i=0; i<6; i++)
	{
		if (isdbPick[i] == 0)
		{
			index = i;
			break;
		}
	}

	// restart
	if (index == -1)
	{
		okDialog('All 6 squares are used. Please clear one before clicking the add-button.');
	} else
	{
		q = document.getElementById('q').value;
		if (q != 'http://')
		{
			// setSearchMessage("Loading random websites...");
			// fadeIn("whatLoading");
			httpLike.open("GET", "whatdoyoulike.php?url=" + escape(q) + "&rnd=" + Math.random(), true);
			httpLike.onreadystatechange = handleWhatDoYouLike;
			httpLike.send(null);
		}
	}
}

function handleWhatDoYouLike()
{
	if (httpLike.readyState == 4 || httpLike.readyState == "complete")
	{
		// fadeOut("whatLoading");
		var suggestions = document.getElementById("websiteSuggestions");
		data = httpLike.responseText;
		var arr = data.split('\n');
		isdbId = arr[0];
		url = arr[1];
		title = arr[2];
		if (isdbId > 0)
		{
			// where do we put this website?
			index = -1;
			for(i=0; i<6; i++)
			{
				if (isdbPick[i] == 0)
				{
					index = i;
					break;
				}
			}

			if (index != -1)
			{
				document.getElementById('dd-pick-' + index).src = 'http://open.thumbshots.org/image.pxf?url=' + escape(url);
				document.getElementById('dd-pick-' + index + '-link').href = url;
				document.getElementById('dd-pick-' + index + '-link').target = "_blank";

				document.getElementById('dd-pick-' + index + '-link2').href = url;
				document.getElementById('dd-pick-' + index + '-link2').innerHTML = title;
				document.getElementById('dd-pick-' + index + '-link2').target = "_blank";

				isdbPick[index] = isdbId;
				showDelete(index);
				refresh(0);
				updateURL();

				inUse = 0;
				for(x=0;x<dropsActive;x++)
				{
					if (isdbPick[x] > 0)
					{
						inUse++;
					}
				}

				if (dropsActive < 6 && (inUse > (dropsActive - 2) || inUse == dropsActive))
				{
					// add new 'drop here' box
					addDropBox();
				}

				document.getElementById('q').value = 'http://';
			} else
			{
				okDialog('All 6 squares are used. Please clear one before clicking the add-button.');
			}
		} else
		{
			okDialog('We currently have no suggestions for ' + url);
		}
	}
}

function okDialog(text)
{
	alert(text);
	return;

	mySimpleDialog = new YAHOO.widget.SimpleDialog("dlg", { 
		width: "300px",
		height: "125px",
		effect:{effect:YAHOO.widget.ContainerEffect.FADE,
		        duration:0.25}, 
		fixedcenter:true,
		modal:true,
	    visible:false,
		zIndex: 10,
		underlay: "shadow",
		draggable:false });
	mySimpleDialog.setHeader('Web inSuggest');
	mySimpleDialog.setBody(text);
	mySimpleDialog.cfg.setProperty("icon",YAHOO.widget.SimpleDialog.ICON_INFO);

	var handleOkay = function()
	{
		this.hide();
	}

	var myButtons = [ { text:"Okay", 
						handler:handleOkay,
						isDefault:true } ];
	mySimpleDialog.cfg.queueProperty("buttons", myButtons);
	mySimpleDialog.render(document.body); 
	mySimpleDialog.show();
}

function addToSelection(from)
{
	// where do we put this website?
	index = -1;
	for(i=0; i<6; i++)
	{
		if (isdbPick[i] == 0)
		{
			index = i;
			break;
		}
	}

	// restart
	if (index == -1)
	{
		okDialog('All 6 squares are used. Please clear one before clicking the plus-button.');
	} else
	{
		var isdbId = document.getElementById(from).getAttribute("isdb");

		// thumbshot
		document.getElementById('dd-pick-' + index).src = document.getElementById(from).src;

		// link/url
		var url = document.getElementById(from.substr(0, 7) + "-url-" + index);
		if (agentIe == true)
		{
			document.getElementById('dd-pick-' + index).href.value = url.href;
		} else
		{
			document.getElementById('dd-pick-' + index).href = url.href;
		}
		document.getElementById('dd-pick-' + index).target = "_blank";

		var link = document.getElementById('dd-pick-' + index + '-link');
		link.href = url.href;
		link.target = "_blank";

		var link2 = document.getElementById('dd-pick-' + index + '-link2');
		link2.innerHTML = document.getElementById(from).getAttribute('isdbtitle');
		link2.href = url.href;
		link2.target = "_blank";

		var isdbId = document.getElementById(from).getAttribute("isdb");
		document.getElementById('dd-pick-' + index).setAttribute("isdb", isdbId);

		isdbPick[index] = isdbId;

		showDelete(index);

		inUse = 0;
		for(x=0;x<dropsActive;x++)
		{
			if (isdbPick[x] > 0)
			{
				inUse++;
			}
		}

		if (dropsActive < 6 && (inUse > (dropsActive - 2) || inUse == dropsActive))
		{
			// add new 'drop here' box
			addDropBox();
		}

		updateURL();

		refresh(0);

		// if (document.getElementById(from).id.indexOf("-url-") != -1)
		// {
		// 	// title dragged
		// 	document.getElementById('dd-pick-' + index).src = 'http://open.thumbshots.org/image.pxf?url=' + escape(document.getElementById(from).href);
		// } else
		// {
		// 	// thumbshot dragged
		// 	document.getElementById('dd-pick-' + index).src = document.getElementById(from).src;
		// }
		// 
		// 
		// document.getElementById('title' + index).innerHTML = document.getElementById(from).getAttribute('isdbtitle');
		// document.getElementById('url1-' + index).href = document.getElementById(from).href;
		// document.getElementById('url1-' + index).target = "_blank";
		// document.getElementById('url2-' + index).href = document.getElementById(from).href;
		// document.getElementById('url2-' + index).target = "_blank";
		// 
		// isdbPick[index] = isdbId;
		// refresh(0);
		// updateLink();
	}
}