var g_displaycontent = false;
var g_currentsection = "none";
var g_nextimage;
var g_curimage = "none";
var g_nextimage_width;
var g_fadein = false;
var g_currentcollection = "none";
var g_currentcommission = "none";
var g_useragent;
var g_opendesc = true;

var collections_loaded = false;
var commissions_loaded = false;

function hoverMenuButton(button)
{
	if(g_currentsection == button) return;
	setButtonImage(button, "hover");
}

function hoverCollectionsButton(button)
{
	if(g_currentcollection == button) return;
	setButtonImage(button, "hover");
}

function resetCollectionsButton(button)
{
	if(g_currentcollection == button)
	{
		setButtonImage(button, "selected");
	}
	else
	{
		setButtonImage(button, "default");
	}
}

function resetMenuButton(button)
{
	if(g_currentsection == button)
	{
		setButtonImage(button, "selected");
	}
	else
	{
		setButtonImage(button, "default");
	}
}

function setButtonImage(name, state)
{
	document.getElementById(name + "_button").style.backgroundImage = "url(assets/decor/" + name + "_button_" + state + ".png)";
}
	
function closeLargeView()
{
	large_view_container.style.display = "none";
}

function displayLargeView()
{	
	large_view.style.backgroundImage = selected_view.style.backgroundImage.replace("main", "large");
	large_view.style.width = g_nextimage_width * 2 + "px";;
	large_view_container.style.display = "block";
}
	
window.onload = function()
{
	if(navigator.userAgent.indexOf('Opera') != -1)
	{
		g_useragent = 0;
	}
	else if(navigator.userAgent.indexOf('MSIE') != -1)
	{
		g_useragent = 2;
		document.body.style.backgroundColor = "#323232";
	}
	else
	{
		g_useragent = 1;
		
		selected_view = document.getElementById("selected_view");
		large_view = document.getElementById("large_view");
		large_view_container = document.getElementById("large_view_container");
	}
	preloadMenuItems();
}

function displaySelectedImageW(imagename, imagewidth)
{
	if(g_curimage == imagename) return;
	selected_view.style.display = "block";
	g_nextimage = "url(assets/image/collections/main/" + imagename + ".jpg)";
	g_nextimage_width = imagewidth;
	g_curimage = imagename;
	fadeInImage();
}

function displaySelectedImage(imagename)
{
	if(g_curimage == imagename) return;
	selected_view.style.display = "block";
	g_nextimage = "url(assets/image/collections/main/" + imagename + ".jpg)";
	g_nextimage_width = 450;
	g_curimage = imagename;
	fadeInImage();
}

function displayCollection(collection)
{
	if(collection != g_currentcollection)
	{
		selected_view.style.display = "none";
		selected_view.style.opacity = 0;
		selected_view.style.filter = "alpha(opacity=0)";
	}
	if(g_currentcollection != "none") document.getElementById(g_currentcollection).style.display = "none";
	document.getElementById(collection).style.display = "block";
	temp = g_currentcollection;
	g_currentcollection = collection;
	resetCollectionsButton(collection);
	if(temp != "none") resetCollectionsButton(temp);
}

function fadeInImage()
{
	opacity = Number(selected_view.style.opacity);
	d = 0.1;
	check = 1;
	
	if(g_useragent == 2)
	{
		d = 10;
		check = 100;
	}
	
	if(!g_fadein && opacity <= 0)
	{
		g_fadein = true;
		selected_view.style.border = "1px solid black";
		selected_view.style.width = g_nextimage_width + "px";
		selected_view.style.backgroundImage = g_nextimage;		
	}
	
	if(!g_fadein)
	{
		opacity -= d;
	}
	else
	{
		opacity += d;
	}
	
	selected_view.style.opacity = opacity;
	selected_view.style.filter = "alpha(opacity=" + opacity + ")";
	
	if(g_fadein && opacity == check)
	{
		g_fadein = false;
	}
	else
	{
		setTimeout("fadeInImage();", 30);
	}		
}

function displayCollections()
{
	preloadCollections();
	swapSections("collections");
}

function displayCommissions()
{
	preloadCommissions();
	swapSections("commissions");
}

function displayStudio()
{
	swapSections("studio");	
}

function displayContact()
{
	swapSections("contact");
}

function swapSections(new_section)
{
	document.getElementById('message').style.display = "none";
	if(g_currentsection != "none") document.getElementById(g_currentsection).style.display = "none";
	document.getElementById(new_section).style.display = "block";
	temp = g_currentsection;
	g_currentsection = new_section;
	resetMenuButton(new_section);
	if(temp != "none") resetMenuButton(temp);
}

function preloadMenuItems()
{
	decor =
	[
	// initial
	"logo.png",
	"message.jpg",
	
	// default
	"collections_button_default.png",
	"commissions_button_default.png",
	"contact_button_default.png",
	"studio_button_default.png",
	"sep.png",
	
	// hover
	"collections_button_hover.png",
	"commissions_button_hover.png",
	"contact_button_hover.png",
	"studio_button_hover.png",
	
	// selected
	"collections_button_selected.png",
	"commissions_button_selected.png",
	"contact_button_selected.png",
	"studio_button_selected.png",
	
	// background
	"collections_bg.jpg",
	"commissions_bg.jpg",
	// "studio_bg.jpg",
	"contact_bg.jpg",	
	
	// collection button default
	"amity_button_default.png",
	"argmas_button_default.png",
	"kew_button_default.png",
	"posy_button_default.png",
	
	// collection button hover
	"amity_button_hover.png",
	"argmas_button_hover.png",
	"kew_button_hover.png",
	"posy_button_hover.png",
	
	// collection button selected
	"amity_button_selected.png",
	"argmas_button_selected.png",
	"kew_button_selected.png",
	"posy_button_selected.png",
	
	// collection background
	"amity_bg.jpg",
	"argmas_bg.jpg",
	"kew_bg.jpg",
	"posy_bg.jpg",
	
	// commissions arrows
	"commissions_arrow_up.png",
	"commissions_arrow_down.png"	
	];

	for(i = 0; i < 35; i++)
	{
		im = new Image();
		im.src = "assets/decor/" + decor[i];
	}
}

function preloadCollections()
{
	if(collections_loaded) return;
	
	images =
	[
		"amity_earrings.jpg",
		"amity_neckear.jpg",
		"amity_necks.jpg",
		"argmas_bangle.jpg",
		"argmas_obangle.jpg",
		"argmas_rings.jpg",
		"kew_bangles.jpg",
		"kew_bangles_close.jpg",
		"kew_earrings.jpg",
		"kew_neck.jpg",
		"kew_rings.jpg",
		"posy_earrings.jpg",
		"posy_neck.jpg",
		"posy_rings.jpg"
	];
	
	dirs = ["thumb", "main", "large"];
	for(i = 0; i < 3; i++)
	{
		for(j = 0; j < 14; j++)
		{
			im = new Image();
			im.src = "assets/image/collections/" + dirs[i] + "/" + images[j];
		}
	}	
	
	// setup thumbnails	
	// collections (renamed to colls because IE doesn't like it for some reason!)
	colls = ["amity_thumbs", "argmas_thumbs", "kew_thumbs", "posy_thumbs"];
	for(i = 0; i < 4; i++)
	{
		if(g_useragent == 1)
		{
			thumbs = document.getElementById(colls[i]);
			for(thumb = thumbs.firstChild.nextSibling; thumb != null; thumb = thumb.nextSibling)
			{
				thumb.src = thumb.src + ".jpg";
			}
		}
		else
		{
			thumbs = document.getElementById(colls[i]).children;
			for(j = 0; j < thumbs.length; j++)
			{
				thumbs[j].src = thumbs[j].src + ".jpg";
			}
		}
	}
	
	collections_loaded = true;
}

function preloadCommissions()
{
	if(commissions_loaded) return;
	
	images = 
	[
		"brooch.jpg",
		"flower.jpg",
		"money_clip.jpg",
		"m_brooch.jpg",
		"ring.jpg",
		"rings.jpg",
		"rose_tulip_brooch.jpg"
	];
	
	for(i = 0; i < 7; i++)
	{
		im = new Image();
		im.src = "assets/image/commissions/thumb/" + images[i];
	}	
}

var rollup = false;
var rolldown = false;

function rollCommissionsMenuUp(start)
{
	if(start)
	{
		rollup = true;
	}
	else
	{
		rollup = false;
	}
	if(!rollup) return;
	rollCommissionsMenu(true);
}

function rollCommissionsMenuDown(start)
{
	if(start)
	{
		rolldown = true;
	}
	else
	{
		rolldown = false;
	}
	if(!rolldown) return;
	rollCommissionsMenu(false);
}

function rollCommissionsMenu(up)
{
	offset = -5;
	if(!up)
	{
		offset = 5;
	}
	
	offtop = document.getElementById("commissions_menu").offsetTop + offset;
	
	if(offtop <= 0 && offtop >= -200)
	{
		document.getElementById("commissions_menu").style.top = offtop + "px";
		if(rollup)
		{
			showCommissionsArrowUp();
			setTimeout("rollCommissionsMenu(true);", 10);
		}
		else if(rolldown)
		{
			showCommissionsArrowDown();
			setTimeout("rollCommissionsMenu(false);", 10);
		}
	}
	else
	{
		if(offtop > 0)
		{
			document.getElementById("commissions_menu").style.top = 0 + "px";
			hideCommissionsArrowUp();
		}
		else 
		{
			document.getElementById("commissions_menu").style.top = -200 + "px";
			hideCommissionsArrowDown();
		}
	}
}

function showCommissionsArrowUp()
{
	document.getElementById("commissions_arrow_up").style.opacity = "1.0";
	document.getElementById("commissions_arrow_up").style.cursor = "pointer";
}

function hideCommissionsArrowUp()
{
	document.getElementById("commissions_arrow_up").style.opacity = "0.25";
	document.getElementById("commissions_arrow_up").style.cursor = "default";
}

function showCommissionsArrowDown()
{
	document.getElementById("commissions_arrow_down").style.opacity = "1.0";
	document.getElementById("commissions_arrow_down").style.cursor = "pointer";
}

function hideCommissionsArrowDown()
{
	document.getElementById("commissions_arrow_down").style.opacity = "0.25";
	document.getElementById("commissions_arrow_down").style.cursor = "default";
}

function displayCommission(commission, ix, iy, iw, ih, title, tx, ty, tw, th, shortdesc, sx, sy, sw, sh, desc, dx, dy, dw, dh)
{
	if(g_currentcommission != "none") resetCommission(g_currentcommission);
	
	element = document.getElementById("commissions_image");
	element.style.backgroundImage = "url(assets/image/commissions/main/" + commission + ".jpg)";
	setElementParams(element, ix, iy, iw, ih);
	
	element = document.getElementById("commissions_title");
	element.text = title;
	setElementParams(element, tx, ty, tw, th);
	
	element = document.getElementById("commissions_short");
	element.text = shortdesc;
	setElementParams(element, sx, sy, sw, sh);
	
	element = document.getElementById("commissions_desc");
	element.text = desc;
	setElementParams(element, dx, dy, dw, dh);
	
	document.getElementById("commissions_page").style.display = "block";
	g_currentcommission = commission;
	fadeCommissionsImage();
}

function setElementParams(element, x, y, width, height)
{
	if(x != 0) { element.style.left = x + "px"; }
	if(y != 0) { element.style.top = y + "px";; }
	if(width != 0) { element.style.width = width + "px"; }
	if(height != 0) { element.style.height = height + "px"; }
}	

function resetCommission(commission)
{
	document.getElementById("commissions_image").style.opacity = 0.0;
	document.getElementById("commissions_title").style.opacity = 0.0;
	document.getElementById("commissions_short").style.opacity = 0.0;
	document.getElementById("commissions_desc").style.opacity = 0.0;
	document.getElementById("opendesc").style.opacity = 0.0;
	document.getElementById("closedesc").style.opacity = 0.0;
	document.getElementById("opendesc").style.cursor = "default";
	document.getElementById("closedesc").style.cursor = "default";
	g_opendesc = true;
}

function fadeCommissionsImage()
{
	fadeinElement("commissions_image", 0.02, 10, "fadeCommissionsTitle();");
}

function fadeCommissionsTitle()
{
	fadeinElement("commissions_title", 0.10, 10, "fadeCommissionsShort();");
}

function fadeCommissionsShort()
{
	fadeinElement("commissions_short", 0.10, 10, "showOpenDescButton();");
}

function showCommissionDesc()
{
	if(!g_opendesc) return;
	fadeinElement("commissions_desc", 0.10, 50, "showCloseDescButton();");
	disableOpenDescButton();
}

function hideCommissionDesc()
{
	if(g_opendesc) return;
	fadeoutElement("commissions_desc", 0.10, 10, "showOpenDescButton();");
	disableCloseDescButton();
}

function showOpenDescButton()
{
	fadeinElement("opendesc", 0.10, 5);
	document.getElementById("opendesc").style.cursor = "pointer";
}

function disableOpenDescButton()
{
	g_opendesc = false;
	document.getElementById("opendesc").style.cursor = "default";
	fadeoutElement("opendesc", 0.10, 50);
}

function showCloseDescButton()
{
	setElementParams(document.getElementById("closedesc"), 0, document.getElementById("commissions_desc").clientHeight + 160, 0, 0);
	fadeinElement("closedesc", 0.10, 2);
	document.getElementById("closedesc").style.cursor = "pointer";
}

function disableCloseDescButton()
{
	g_opendesc = true;
	document.getElementById("closedesc").style.cursor = "default";
	fadeoutElement("closedesc", 0.10, 10);
}	

function fadeoutElement(element, amount, speed)
{
	op = Number(document.getElementById(element).style.opacity) - amount;
	if(op < 0.0) op = 0.0;
	document.getElementById(element).style.opacity = op;
	if(op != 0.0)
	{
		setTimeout('fadeoutElement("' + element + '",' + amount + ', ' + speed +');', speed);
	}
}

function fadeoutElement(element, amount, speed, func)
{
	op = Number(document.getElementById(element).style.opacity) - amount;
	if(op < 0.0) op = 0.0;
	document.getElementById(element).style.opacity = op;
	if(op != 0.0)
	{
		setTimeout('fadeoutElement("' + element + '",' + amount + ', ' + speed + ', "' + func + '");', speed);
	}
	else
	{
		setTimeout(func, 10);
	}		
}

function fadeinElement(element, amount, speed)
{
	op = Number(document.getElementById(element).style.opacity) + amount;
	if(op > 1.0) op = 1.0;
	document.getElementById(element).style.opacity = op;
	if(op != 1.0)
	{
		setTimeout('fadeinElement("' + element + '",' + amount + ', ' + speed +');', speed);
	}
}

function fadeinElement(element, amount, speed, func)
{
	op = Number(document.getElementById(element).style.opacity) + amount;
	if(op > 1.0) op = 1.0;
	document.getElementById(element).style.opacity = op;
	if(op != 1.0)
	{
		setTimeout('fadeinElement("' + element + '",' + amount + ', ' + speed + ', "' + func + '");', speed);
	}
	else
	{
		setTimeout(func, 10);
	}
}