random_loaded = false;

function showDelete(i)
{
	if (document.getElementById('dd-pick-' + i).src.indexOf("drop_here.gif") == -1)
	{
		// only show if user has dropped an image 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 = "drop_here.gif";
	index = element.id.substring(8);
	isdbPick[index] = 0;

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

	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("imageSuggestions");
	suggestions.innerHTML = '<div style="font-size: 18px; color: white; padding-top: 70px;">Please drag some images 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)
	{
		if (this.getEl().src.indexOf("_s.jpg") != -1)
		{
			oDD.getEl().src = this.getEl().src;
		} else
		{
			oDD.getEl().src = this.getEl().getAttribute('small');
		}

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

		// BEGIN NO MEDIUM
		var link = document.getElementById(oDD.getEl().id + "-link");
		link.href = this.getEl().getAttribute("link");
		link.target = "_blank";
		// END NO MEDIUM

		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];
				href = arr2[3];

				if (arr[x] != "")
				{
					document.getElementById('dd-pick-' + index).src = url;
					document.getElementById('dd-pick-' + index).setAttribute("isdb", isdbId);

					// BEGIN NO MEDIUM
					document.getElementById('dd-pick-' + index + '-link').href = href;
					document.getElementById('dd-pick-' + index + '-link').target = "_blank";
					// END NO MEDIUM

					showDelete(index);
				}
			}
		}
	}
}

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

	y.innerHTML = '<a id="dd-pick-' + dropsActive + '-link" href="" target="_blank"><img id="dd-pick-' + dropsActive + '" src="drop_here.gif" width="75" height="75" border="0" isdb="0" /></a><div id="delete-' + dropsActive + '" style="visibility: hidden; position: relative; top: -75px; left: 33px; margin: 0; padding: 0;"><a onClick="moveToTrash(' + dropsActive + '); return true;"><img src="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("imageSuggestions");
		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-search-" + 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 images...");
			} 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 images...");
	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("imageSuggestions");
	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";

		imageSuggestions.style.zIndex = "2";
		imageSuggestions.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";

		imageSuggestions.style.zIndex = "0";
		imageSuggestions.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";

		imageSuggestions.style.zIndex = "0";
		imageSuggestions.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 images based on your own ";
	msg += "specific taste. By dragging images to the four 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 images you are most likely to enjoy.";
	msg += "</p>";
	helpa.innerHTML = msg;
}