///////////////////////////
// Gallery Class
///////////////////////////

function CurrentSelection() {
	this.ItemIndex;
	this.SubItemIndex;
}

function SubItem(imgSrc) {
	this.imgSrc = imgSrc;
}

function AddSubItem(imgSrc) {
		this.SubItems[this.SubItems.length] = new SubItem(imgSrc);
}

function Item(client, projectTitle, projectDescription1,url) {
	this.Client = client;
	this.ProjectTitle = projectTitle;
	this.ProjectDescription1 = projectDescription1;
	this.Url = url;
	this.SubItems= new Array();
	this.AddSubItem = AddSubItem;
}

function AddItem(client, projectTitle, projectDescription1, url) {
		var item = new Item(client, projectTitle, projectDescription1,url);
		this.Items[this.Items.length] = item;
		this.ItemCount = this.Items.length;
	return item;
}

function FindItemPosition(imgName) {
	var item;
	var position = 0;
	for (item in this.Items) {
		if (this.Items[item].SubItems[0].imgSrc == imgName)
			return position;
			
		position++;
	}
	
	return 0;
}

function GotoItem(galleryId) {
    var imgPosition = 0;
    imgPosition = this.FindItemPosition(galleryId);
    this.CurrentSelection.ItemIndex = imgPosition;
    this.CurrentSelection.SubItemIndex = 0;
}

function Gallery() {
    this.Items = new Array();
	this.ItemCount = 0; 
	this.AddItem = AddItem;
	this.CurrentSelection = new CurrentSelection;
	this.FindItemPosition = FindItemPosition;
	this.GotoItem = GotoItem;
	this.CurrentSelection.ItemIndex = 0;
	this.CurrentSelection.SubItemIndex = 0;
}



//////////////////////////
// End Gallery Class
//////////////////////////
	
	
////////////////////////////////////
//  page events	
////////////////////////////////////

function onLoad()
{
    menu = new Menu;
    LoadMenuData(menu);

	portfolio = new Gallery;
	loadPortfolioData(portfolio);	
	InitializePortfolio(portfolio);
	
	// initialize portfolio menu
	var initialMenuNodeId = "TSLC";
	var initialGalleryNodeId = "TSLC_1.jpg";
	onMenuClick(initialGalleryNodeId, initialMenuNodeId);
}

function InitializePortfolio(tmpPortfolio)
{
	UpdateSelectedPortfolioItem(tmpPortfolio);
}



function onMenuClick(galleryId, menuId) {
    var newMenuNode = menu.MenuSelect(menuId);

    if (newMenuNode != null)
    {
        if(newMenuNode.type == 1) {
            portfolio.GotoItem(newMenuNode.galleryId);
	        UpdateSelectedPortfolioItem(portfolio);
        }
    }
}

function onSubNavOver(subItemNumber)
{
    if (portfolio.CurrentSelection.SubItemIndex != subItemNumber) {
        var imageNumber = subItemNumber+1;
		var elementId = "subItem" + subItemNumber;
		var imgNode = document.getElementById(elementId);
		imgNode.src = "images/boxover_" + imageNumber + ".gif";
	}
	
}

function onSubNavOut(subItemNumber)
{
    if (portfolio.CurrentSelection.SubItemIndex != subItemNumber) {
        var imageNumber = subItemNumber+1;
		var elementId = "subItem" + subItemNumber;
		var imgNode = document.getElementById(elementId);
		imgNode.src = "images/box_" + imageNumber + ".gif";
	}
	
}


function onSubItemClick(subItemIndex) {
	portfolio.CurrentSelection.SubItemIndex = subItemIndex;
	var item = portfolio.Items[portfolio.CurrentSelection.ItemIndex];
	var mainImageElementId = "portfolioImage";
	var mainImageNode = document.getElementById(mainImageElementId);
	mainImageNode.src = portfolioPath + item.SubItems[subItemIndex].imgSrc;
	
	UpdateSubItemNav(portfolio);
}


///////////////////////////////////
// page update code
///////////////////////////////////


function UpdateSubItemNav(tmpPortfolio) {
		
	var subItemCount = tmpPortfolio.Items[tmpPortfolio.CurrentSelection.ItemIndex].SubItems.length;
	if(subItemCount>1) {
		for (var i=0; i< subItemCount; i++) {
		    var imageNumber = i+1;
			var elementId = "subItem" + i;
			var imgNode = document.getElementById(elementId);
		
			if(i!=tmpPortfolio.CurrentSelection.SubItemIndex) 
				imgNode.src = "images/box_" + imageNumber + ".gif";
			else
				imgNode.src = "images/boxover_" + imageNumber + ".gif"
		}
	}
}



function UpdateSelectedPortfolioItem(tmpPortfolio) {
	var item = tmpPortfolio.Items[tmpPortfolio.CurrentSelection.ItemIndex];
	var imageSource = portfolioPath + item.SubItems[tmpPortfolio.CurrentSelection.SubItemIndex].imgSrc;
	
	var mainImagePlaceholderId = "portfolioPlaceholder";
	var mainImageElementId = "portfolioImage";
		
	var mainImagePlaceHolderNode = document.getElementById(mainImagePlaceholderId);
	var innerHtml;
	var imageNodeText = "<img border=\"0\" id='" + mainImageElementId + "' src='" + imageSource + "' alt='Portfolio Image' />";
	
	if (item.Url == null)
	    innerHtml = imageNodeText;
    else
        {
            innerHtml = "<a href='" + item.Url + "' target=\"blank\" >" + imageNodeText + "</a>";    
        }
	
	mainImagePlaceHolderNode.innerHTML = innerHtml;
	
	UpdateSelectedItemText(item);
	RenderSubItemNav(tmpPortfolio);
	UpdateSubItemNav(tmpPortfolio);
}





function UpdateSelectedItemText(item) {
	var node = null;
	
	node = document.getElementById("client");
	if(node != null) {
		node.innerHTML = item.Client; 			
	}
	
	node = document.getElementById("projectTitle");
	if(node != null) {
		node.innerHTML = item.ProjectTitle; 			
	}
	
	node = document.getElementById("projectDescription");
	if(node != null) {
		node.innerHTML = item.ProjectDescription1; 			
	}
}


function RenderSubItemNav(tmpPortfolio) {
	var item = tmpPortfolio.Items[tmpPortfolio.CurrentSelection.ItemIndex];
	var imageNumber = 0;
	var subItemText ="";
	
	if(item.SubItems.length > 1) {
		
		for(var i=0; i< item.SubItems.length; i++) {
			subItemText += "<a href='javascript:onSubItemClick(" + i + ")'>";
			imageNumber = i+1;
			subItemText += "<img id='subItem" + i + "' src='images/Boxover_" + imageNumber 
			            + ".gif' alt='button' class='SubItemButton' border='0' " 
			            + "onmouseover='javascript:onSubNavOver(" + i + ");' onmouseout='javascript:onSubNavOut(" + i + ");' /></a>";
		}
	}
	
	var subItemNode = document.getElementById("PortfolioSubNav"); 
	subItemNode.innerHTML = subItemText;
	UpdateSubItemNav(tmpPortfolio);
}








//////////////////////////////////
// utility code
//////////////////////////////////

function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}