var Data = undefined;

var ThumbnailDescriptionClass = "thumbnail_description_class";
var ThumbnailActiveClass = "active";

var ThumbnailsDivId = "thumbnails";
var ThumbnailImageWidth = "50";
var ThumbnailImageHeight = "50";
var ThumbnailPrefix = '/thumbnails';

var ResPrefix = "/artworks";
var ViewPrefix = "/img";
var AuxImagesPrefix = "/img";

var ViewLabelClass = "description";
var CanvasItemClassFormat = "width: %dpx; margin: 0px auto;";
var CanvasDivId = "canvas";

var PrimaryNavigationDivId = "primary";
var SecondaryNavigationDivId = "secondary";

var PrimaryNavigationItemDivIdPostfix = "_menu";
var PrimaryNavigationActiveImagePostfix = "_active";
var PrimaryNavigationHoverImagePostfix = "_hover";
var PrimaryNavigationStaticImagePostfix = "_static";

var PrimaryNavigationData = new Array();

//AddPrimaryNavigationItem(PrimaryNavigationData, "home", "/");
AddPrimaryNavigationItem(PrimaryNavigationData, "illustration", "/illustration/");
AddPrimaryNavigationItem(PrimaryNavigationData, "art", "/art/");
//AddPrimaryNavigationItem(PrimaryNavigationData, "design", "/design/");
//AddPrimaryNavigationItem(PrimaryNavigationData, "animation", "/animation/");
AddPrimaryNavigationItem(PrimaryNavigationData, "about", "/about/");
AddPrimaryNavigationItem(PrimaryNavigationData, "trips", "/trips/");


var SecondaryNavigationImageWidth = "39";
var SecondaryNavigationImageHeight = "21";
var SecondaryNavigationPrevImageSrc = AuxImagesPrefix + "/secondary_nav_prev.gif";
var SecondaryNavigationNextImageSrc = AuxImagesPrefix + "/secondary_nav_next.gif";
var SecondaryNavigationPrevHoverImageSrc = AuxImagesPrefix + "/secondary_nav_prev_hover.gif";
var SecondaryNavigationNextHoverImageSrc = AuxImagesPrefix + "/secondary_nav_next_hover.gif";

var SecondaryNavigationPrevImage = CreateImageObject(SecondaryNavigationPrevImageSrc, SecondaryNavigationImageWidth, SecondaryNavigationImageHeight, "");
var SecondaryNavigationNextImage = CreateImageObject(SecondaryNavigationNextImageSrc, SecondaryNavigationImageWidth, SecondaryNavigationImageHeight, "");
var SecondaryNavigationBlankImage = CreateImageObject(AuxImagesPrefix + "/" + "trans_bg.gif", SecondaryNavigationImageWidth, SecondaryNavigationImageHeight, "");

CreateImageObject(SecondaryNavigationPrevHoverImageSrc, SecondaryNavigationImageWidth, SecondaryNavigationImageHeight, "");
CreateImageObject(SecondaryNavigationNextHoverImageSrc, SecondaryNavigationImageWidth, SecondaryNavigationImageHeight, "");

SecondaryNavigationPrevImage.onmouseover = new Function("this.src = '" + SecondaryNavigationPrevHoverImageSrc + "';");
SecondaryNavigationPrevImage.onmouseout = new Function("this.src = '" + SecondaryNavigationPrevImageSrc + "';");
SecondaryNavigationNextImage.onmouseover = new Function("this.src = '" + SecondaryNavigationNextHoverImageSrc + "';");
SecondaryNavigationNextImage.onmouseout = new Function("this.src = '" + SecondaryNavigationNextImageSrc + "';");

//SecondaryNavigationPrevImage.setAttribute(
//	"onmouseover",
//	"this.src = '" + SecondaryNavigationPrevHoverImageSrc + "';"
//);

//SecondaryNavigationPrevImage.setAttribute(
//	"onmouseout",
//	"this.src = '" + SecondaryNavigationPrevImageSrc + "';"
//);

//SecondaryNavigationNextImage.setAttribute(
//	"onmouseover",
//	"this.src = '" + SecondaryNavigationNextHoverImageSrc + "';"
//);

//SecondaryNavigationNextImage.setAttribute(
//	"onmouseout",
//	"this.src = '" + SecondaryNavigationNextImageSrc + "';"
//);


var FirstSubsection = undefined;

var SiteManager = new Object(
{
	Initialize: function(data, sectionName, subsectionName)
	{
		//alert("Section: " + sectionName + "-" + subsectionName);
		//alert("Data: " + data);
		this.section = data;
		this.sectionName = sectionName;
		this.subsectionName = subsectionName;
	},

	Render: function()
	{
		this.RenderPrimaryNavigation();

		if (this.section != undefined && this.section.length > 0 && this.section[this.subsectionName] != undefined)
		{			
			this.RenderView();
			this.RenderThumbnails();
			this.RenderSecondaryNavigation();
		}
		//alert("Site Rendered");
	},
	
	RenderThumbnails: function()
	{
		var thumbnailsContainer = document.createElement("ul");
		
		for (var sectionItem in this.section)
		{
			var thumbnailImage = CreateImageObject(
				ResPrefix + "/" + this.sectionName + ThumbnailPrefix + '/' + this.section[sectionItem].thumbnail,
				ThumbnailImageWidth,
				ThumbnailImageHeight,
				""
			);

			var thumbnail = document.createElement("li");
			if (sectionItem == this.subsectionName)
			{
				thumbnail.setAttribute("class", ThumbnailActiveClass + " " + ThumbnailDescriptionClass);
				thumbnail.setAttribute("className", ThumbnailActiveClass + " " + ThumbnailDescriptionClass);
				thumbnail.appendChild(thumbnailImage);
			}
			else
			{
				thumbnail.setAttribute("class", "");
				thumbnail.setAttribute("className", "");
				
				var thumbnailLink = document.createElement("a");
				thumbnailLink.setAttribute("href", "/" + this.sectionName + "/" + sectionItem);
				thumbnailLink.setAttribute("class", ThumbnailDescriptionClass);
				thumbnailLink.setAttribute("className", ThumbnailDescriptionClass);
				thumbnailLink.appendChild(thumbnailImage);
				
				thumbnail.appendChild(thumbnailLink);
			}
			
			if (this.section[sectionItem].thumbnailDesc != undefined)
			{
				var thumbnailDesc = document.createElement("div");
				thumbnailDesc.setAttribute("class", ThumbnailDescriptionClass);
				thumbnailDesc.setAttribute("className", ThumbnailDescriptionClass);
				thumbnailDesc.innerHTML = this.section[sectionItem].thumbnailDesc;
				thumbnail.appendChild(thumbnailDesc);
			}
			
			thumbnailsContainer.appendChild(thumbnail);
		}
		
		var thumbnailsDiv = document.getElementById(ThumbnailsDivId);
		if (thumbnailsDiv != undefined)
			thumbnailsDiv.appendChild(thumbnailsContainer);		
	},
	
	RenderView: function()
	{
		if (this.section[this.subsectionName].view.length > 0)
		{
			var canvasDiv = document.getElementById(CanvasDivId);
			if (canvasDiv != undefined)
			{
				for (viewItemIndex in this.section[this.subsectionName].view)
				{				
					var viewItemObject;
					
					if (this.section[this.subsectionName].view[viewItemIndex].type == "img")
					{
						viewItemObject = CreateImageObject(
							ResPrefix + "/" + this.sectionName + ViewPrefix + '/' + this.section[this.subsectionName].view[viewItemIndex].img,
							this.section[this.subsectionName].view[viewItemIndex].width,
							this.section[this.subsectionName].view[viewItemIndex].height,
							""
						);
					}
					else if (this.section[this.subsectionName].view[viewItemIndex].type == "mov")
					{
						viewItemObject = document.createElement("div");
						viewItemObject .innerHTML = CreateMovieHTML(
							ResPrefix + "/" + this.sectionName + ViewPrefix + '/' + this.section[this.subsectionName].view[viewItemIndex].img,
							this.section[this.subsectionName].view[viewItemIndex].width,
							this.section[this.subsectionName].view[viewItemIndex].height
						);
					}
					
					var viewItemLabel = document.createElement("div");
					viewItemLabel.setAttribute("class", ViewLabelClass);
					viewItemLabel.setAttribute("className", ViewLabelClass);
					viewItemLabel.innerHTML = this.section[this.subsectionName].view[viewItemIndex].label;

					var viewItem = document.createElement("div");
					viewItem.style.cssText = CanvasItemClassFormat.replace("%d", this.section[this.subsectionName].view[viewItemIndex].width);
					//viewItem.setAttribute(
					//	"style",
					//	CanvasItemClassFormat.replace("%d", this.section[this.subsectionName].view[viewItemIndex].width)
					//);
										
					viewItem.appendChild(viewItemObject);
					viewItem.appendChild(viewItemLabel);
					canvasDiv.appendChild(viewItem);
				}
			}
		}
	},
	
	RenderPrimaryNavigation: function()
	{
		var primaryNavigationItemDiv;

		for (var i = 0; i < PrimaryNavigationData.length; i ++)
		{
			primaryNavigationItemDiv = document.getElementById(PrimaryNavigationData[i].section + PrimaryNavigationItemDivIdPostfix);
			if (primaryNavigationItemDiv != undefined)
			{
				if (PrimaryNavigationData[i].section == this.sectionName)
				{
					primaryNavigationItemDiv.appendChild(PrimaryNavigationData[i].activeImage);
				}
				else
				{
					var primaryNavigationItemLink = CreateHyperlinkObject(PrimaryNavigationData[i].href, "");
					primaryNavigationItemLink.appendChild(PrimaryNavigationData[i].staticImage);
					primaryNavigationItemDiv.appendChild(primaryNavigationItemLink);
				}
			}
		}
	},
	
	RenderSecondaryNavigation: function()
	{
		var secondaryNavigationDiv = document.getElementById(SecondaryNavigationDivId);
		if (secondaryNavigationDiv != undefined)
		{
			var prevListElement = document.createElement("li");
			if (this.section[this.subsectionName].prev != undefined)
			{			
				var prevListElementLink = CreateHyperlinkObject("/" + this.sectionName + "/" + this.section[this.subsectionName].prev, "");
				prevListElementLink.appendChild(SecondaryNavigationPrevImage);
				prevListElement.appendChild(prevListElementLink);
			}
			else
			{
				prevListElement.style.cssText = "visibility: hidden;";
				//prevListElement.setAttribute("style", "visibility: hidden;");
				prevListElement.appendChild(SecondaryNavigationBlankImage);
			}

			var nextListElement = document.createElement("li");
			if (this.section[this.subsectionName].next != undefined)
			{
				var nextListElementLink = CreateHyperlinkObject("/" + this.sectionName + "/" + this.section[this.subsectionName].next, "");
				nextListElementLink.appendChild(SecondaryNavigationNextImage);
				nextListElement.appendChild(nextListElementLink);
			}
			else
			{
				nextListElement.style.cssText = "visibility: hidden;";
				//nextListElement.setAttribute("style", "visibility: hidden;");
				nextListElement.appendChild(SecondaryNavigationBlankImage);
			}

			var secondaryNavigationUlElement = document.createElement("ul");
			secondaryNavigationUlElement.appendChild(prevListElement);
			secondaryNavigationUlElement.appendChild(nextListElement);
			
			secondaryNavigationDiv.appendChild(secondaryNavigationUlElement);
		}
	}
	
});

window.onload = function()
{
	var subsectionName = GetSubsectionName();
	if (subsectionName == undefined && FirstSubsection != undefined)
		subsectionName = FirstSubsection;
	
	SiteManager.Initialize(Data, GetSectionName(), subsectionName);
	SiteManager.Render();
}



// Data Management //

function InitializeData(data)
{
	data.length = 0;
}

function AddSubsection(data, subsectionName, subsection)
{
	if (subsectionName && subsectionName != "" && subsection != undefined)
	{
		try
		{
			data[AddSubsection.lastSubsectionName].next = subsectionName;
			subsection.prev = AddSubsection.lastSubsectionName;
		}
		catch(e)
		{
			FirstSubsection = subsectionName;
		}
		
		data[subsectionName] = subsection;
		data.length ++;
		AddSubsection.lastSubsectionName = subsectionName;
	}
}

function AddPrimaryNavigationItem(navigationArray, sectionName, navigationHref)
{
	var primaryNavigationStaticImage = CreateImageObject(AuxImagesPrefix + "/" + sectionName + PrimaryNavigationStaticImagePostfix + ".png");

	primaryNavigationStaticImage.onmouseover = new Function("this.src = '" + AuxImagesPrefix + "/" + sectionName + PrimaryNavigationHoverImagePostfix + ".png" + "';");
	primaryNavigationStaticImage.onmouseout = new Function("this.src = '" + AuxImagesPrefix + "/" + sectionName + PrimaryNavigationStaticImagePostfix + ".png" + "';");
	primaryNavigationStaticImage.onclick = new Function("this.src = '" + AuxImagesPrefix + "/" + sectionName + PrimaryNavigationStaticImagePostfix + ".png" + "';");

	//primaryNavigationStaticImage.setAttribute(
	//	"onmouseover",
	//	"this.src = '" + AuxImagesPrefix + "/" + sectionName + PrimaryNavigationHoverImagePostfix + ".png" + "';"
	//);
	//primaryNavigationStaticImage.setAttribute(
	//	"onmouseout",
	//	"this.src = '" + AuxImagesPrefix + "/" + sectionName + PrimaryNavigationStaticImagePostfix + ".png" + "';"
	//);
	//primaryNavigationStaticImage.setAttribute(
	//	"onclick",
	//	"this.src = '" + AuxImagesPrefix + "/" + sectionName + PrimaryNavigationStaticImagePostfix + ".png" + "';"
	//);

	navigationArray.push(
		{
			section: sectionName,
			href: navigationHref,
			activeImage: CreateImageObject(AuxImagesPrefix + "/" + sectionName + PrimaryNavigationActiveImagePostfix + ".png"),
			hoverImage: CreateImageObject(AuxImagesPrefix + "/" + sectionName + PrimaryNavigationHoverImagePostfix + ".png"),
			staticImage: primaryNavigationStaticImage
		}
	);
}



// Auxiliary //

function GetSectionName()
{
	return document.getElementsByTagName("body").item(0).id;
}

function GetSubsectionName()
{
	var splittedUrl = document.URL.split("/");
	if (splittedUrl && splittedUrl.length > 4 && splittedUrl[4] != "" && splittedUrl[4].indexOf(".htm") == -1)
		return splittedUrl[4];
	else
		return undefined;
}

function CreateMovieHTML(src, width, height)
{
	var movieCode = "<object width=\"" + width + "\" height=\"" + height + "\" classid=\"clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B\" codebase=\"http://www.apple.com/qtactivex/qtplugin.cab\">";
	movieCode += "<param name=\"src\" value=\"" + src + "\">";
	movieCode += "<param name=\"autoplay\" value=\"true\">";
	movieCode += "<param name=\"controller\" value=\"true\">";
	movieCode += "<param name=\"loop\" value=\"true\">";
	movieCode += "<embed src=\"" + src + "\" width=\"" + width + "\" height=\"" + height + "\" autoplay=\"true\" controller=\"true\" loop=\"true\" pluginspage=\"http://www.apple.com/quicktime/download/\"></embed>";
	movieCode += "</object>";

	return movieCode;
}

function CreateImageObject(src, width, height, alt)
{
	var imgElement = document.createElement("img");
	
	imgElement.setAttribute("src", src);
	if (width != undefined)
		imgElement.setAttribute("width", width);
	if (height != undefined)
		imgElement.setAttribute("height", height);
	if (alt != undefined)
		imgElement.setAttribute("alt", alt);
	
	return imgElement;
}

function CreateHyperlinkObject(address, className)
{
	var hyperlinkElement = document.createElement("a");
	hyperlinkElement.setAttribute("href", address);
	if (className != undefined && className != "")
	{
		hyperlinkElement.setAttribute("class", className);
		hyperlinkElement.setAttribute("className", className);
	}

	return hyperlinkElement;
}