//var server = "";
var server = "http://www.seaemeraldstudio.com/";
var photoFolder = server + "photographs/";
var currentView = 0;
var selectedView = -1;
var collection = null;
var item = null;
var timer;
var fadeEffect = true;
//var fadeEffect = false;

function GetCollectionLink(c)
{
	return "gallery.html?c=" + collections[c].name;
}

function GetItemLink(c,i)
{
	return "gallery.html?c=" + collections[c].name + "&i=" + (i + 1);
}

function IsAvailable(item)
{
	return (item.value != null) && (item.avail == null);
}

function GetInquireLink(item)
{
	return "<a href=\"mailto:seaemeraldstudio@yahoo.com?subject=Inquiry: " +
		item.number + "&Body=Dear%20Customer,%0D%0A%0D%0AThank%20you%20for%20your%20inquiry%20" +
		"regarding%20the%20availability%20of%20'" + item.name + "'." +
		"%20%20If%20you%20are%20interested%20in%20" +
		"purchasing%20this%20item,%20simply%20send%20this%20email%20message." +
		"%20%20I%20will%20respond%20as%20soon%20as%20possible.%0D%0A%0D%0A" + 
		"Kind%20regards,%0D%0AJason%20Rees%20Jones%0D%0ASeaEmerald%20Studio%0D%0A" + 
		"http://www.seaemeraldstudio.com\">Inquire<a>";
}

function GetImageFile(item,i)
{
	return item.imagebase + item.images[i] + ".jpg";
}

function GetPhotoFolder()
{
	return photoFolder + collection.name.toLowerCase();
}

function GetThumbImage(item)
{
	return GetPhotoFolder() + "/thumbnails/" + GetImageFile(item,0);
}

function GetLargeImage(item,i)
{
	return GetPhotoFolder() + "/large/" + GetImageFile(item,i);
}

function GetSmallImage(item,i)
{
	return GetPhotoFolder() + "/small/" + GetImageFile(item,i);
}

function GetCollectionTopImage(collection)
{
	return server + "graphics/images_" + collection.name.toLowerCase() + "/CollectionsTop.gif";
}

function GetCollectionSideImage(collection)
{
	return server + "graphics/images_" + collection.name.toLowerCase() + "/CollectionsSide.gif";
}

function SetFullSizeImage( src )
{
	if( fadeEffect && (FullSizeImage.filters != null) )
		FullSizeImage.filters.item(0).Apply();
    FullSizeImage.src = src;
	if( fadeEffect && (FullSizeImage.filters != null) )
	    FullSizeImage.filters.item(0).Play()	
}

function OnImageLoaded()
{
	SetFullSizeImage( this.src );
}

var ImageLoader = new Image();
ImageLoader.onload = "OnImageLoaded()";

function DisplayView(viewNum)
{
	//ImageLoader.src = GetLargeImage(item, viewNum);
	SetFullSizeImage( GetLargeImage(item, viewNum) )
}

function SelectThumb(viewNum)
{
	document.getElementById("Thumb" + viewNum).className = "SelectedThumb";
}

function UnselectThumb(viewNum)
{
	document.getElementById("Thumb" + viewNum).className = "UnselectedThumb";
}

function OnThumbEnter(viewNum)
{
	EndAnimation();
	if( (selectedView != viewNum) && (selectedView != -1) )
	{
		UnselectThumb(selectedView);
	}
	SelectThumb(viewNum)
	DisplayView(viewNum);
}

function OnThumbLeave(viewNum)
{
	if( selectedView != -1 )
	{
		if( selectedView != viewNum )
		{
			UnselectThumb(viewNum);
			SelectThumb(selectedView);
			DisplayView(selectedView);
		}
		return;
	}
	UnselectThumb(viewNum);
	currentView = viewNum;
	BeginAnimation();
}

function OnThumbClick(viewNum)
{
	selectedView = viewNum;
}

function AdvanceView()
{
	if( ++currentView >= item.images.length )
	{
		currentView = 0;
	}
	DisplayView(currentView);
	ContinueAnimation();
}

function EndAnimation()
{
	AnimationControl = document.getElementById("AnimationControl");
	if( AnimationControl != null )
	{
		AnimationControl.src = "play.gif";
		AnimationControl.alt = "Click to begin slide show";
	}
	clearTimeout(timer);
	timer = null;
}

function ContinueAnimation()
{
	timer = window.setTimeout("AdvanceView();", 3000);
}

function BeginAnimation()
{
	AnimationControl = document.getElementById("AnimationControl");
	if( AnimationControl != null )
	{
		AnimationControl.src = "pause.gif";
		AnimationControl.alt = "Click to pause slide show";
	}
	AdvanceView();
}

function ToggleAnimation()
{
	if( timer == null )
	{
		if( selectedView != -1 )
		{
			UnselectThumb( selectedView );
			selectedView = -1;
		}
		BeginAnimation();
	}
	else
	{
		EndAnimation();
	}
}

function LoadCollectionLinks()
{
    var markup = "";

    for(var i = 0; i < collections.length; i++ )
    {
		var collection = collections[i].name;
		markup += "<A href='javascript:LoadCollection(" + i + ");'>" + 
			collection + "</A>&nbsp;&nbsp;&nbsp;&nbsp;";
    }
    
	document.getElementById("CollectionLinks").innerHTML = markup;
}

function LoadCollection(c)
{
	EndAnimation();

    collection = collections[c];

    // Load collection images and tooltips
	document.getElementById("CollectionTop").src = GetCollectionTopImage(collection);
	document.getElementById("CollectionTop").alt = collection.name;
	document.getElementById("CollectionSide").src = GetCollectionSideImage(collection);
	
	// Set window title
	document.title = "SeaEmerald Studio - " + collection.name;

	// Load collection items
	var markup = "<table width='600' border='0' align='center' cellspacing='10'>";
    for( var i = 0; i < collection.items.length; i++ )
    {
		var item = collection.items[i];
		if( (i % 3) == 0 )
		{
			markup += "<tr>";
		}
		markup += "<td width='200' height='160' valign='top'>" +
			"<a href='javascript:LoadItem(" + i + ");'>" + 
			"<img style='cursor:hand' src='" + GetThumbImage(item) + 
			"' alt='" + item.name + "' " +
			"width='200' height='150' border='0'/></a></td>";
		if( (i % 3) == 2 )
		{
			markup += "</tr>";
		}
	}
    markup += "</table>";
    
	document.getElementById("ContentElement").innerHTML = markup;
}

function LoadItem(i)
{
    item = collection.items[i];

	var dimensions = item.dimensions;
	if( dimensions == null )
	{
		dimensions =
			"H: " + item.height + "\"<BR>" +
			"W: " + item.width + "\"";
	}

	var inquire = "";
	if( IsAvailable(item) )
	{
		inquire = "Value: $" + item.value + "<br>" + GetInquireLink(item);
	}

    // Write out descriptive text
    var markup = 
      "<TABLE cellSpacing=10 width=711 align=center border=0><TR>" +
		"<TD vAlign=top width=135>" + collection.name + "<BR>" +
		item.name + "<BR><BR>" +
		"No.: " + item.number + "<BR>" +
		dimensions + "<BR>" +
		item.glaze + " (Cone " + item.cone + ")<BR><BR>" + 
		item.desc + "<BR><BR>" + inquire + "</TD>";
    
    // Write full size image markup
	markup +=
		"<TD vAlign=top><div style='background-color:black'><IMG id='FullSizeImage' height=323 " +
		"alt='SeaEmerald Studio fine hand-carved porcelain pottery in shades of " + item.glaze + " glaze by Jason Rees Jones.' " +
		"src='" + GetLargeImage(item, 0) + "' width=431></div><BR><table width='100%'><tr><td>" + item.name +
		"</td><td align='right'><a href='javascript:ToggleAnimation();'>" +
		"<img border='2' style='padding:2;border-color:#CCCCCC' src='pause.gif' " +
		"alt='Click to pause slide show' id='AnimationControl'></a></td></tr>" +
		//"<tr><td><br><br><br>Interested in purchasing this item?  Inquire</td></tr>" +
		"</table></TD><TD vAlign=top width=125 height=75>";
		
    // Write thumbnail image markup
	for( var i = 0; i < item.images.length; i++ )
	{
		markup += 
			"<span id='Thumb" + i + "' class='UnselectedThumb'>" +
			"<a href='javascript:OnThumbClick(" + i + ");'>" + 
			"<img border=0 height=90 width=120 src='" + GetSmallImage(item, i) + "'" +
			"onmouseover='OnThumbEnter(" + i + ");' onmouseout='OnThumbLeave(" + i + ");'></a></span><p>";
	}
	
	markup += "</TD></TR></TABLE>";
	
	document.getElementById("ContentElement").innerHTML = markup;
	
	currentView = 0;
	ContinueAnimation();	
}