/*******************************************************************************

FILE: mud_Scripts.js
REQUIRES: prototype.js
AUTHOR: Takashi Okamoto mud(tm) - http://www.mudcorp.com/
VERSION: 2.1 - update to make it work more like MudFadeGallery
DATE: 04/07/2006

--------------------------------------------------------------------------------

This file is part of MudShiftContent.

	MudShiftContent is free for anyone to use, but this header MUST be
	included, and may not be modified.

*******************************************************************************/

////////////////////////////////////////////////////////////////////////////////
// GLOBAL VARS

var imgs;
var imgsGallery = new Array();
var aPortFolioImages = new Array();

////////////////////////////////////////////////////////////////////////////////
// MOUSE EVENTS

function setOnMouseClick() {
	var elements = document.getElementsByTagName("a");
	for (var i = 0; i < elements.length; i++) {
		switch(elements[i].className) {
			case "next":
				elements[i].onclick = function() {
					 imgs.move('next');
					 return false;
				}
				break;
			case "prev":
				elements[i].onclick = function() {
					 imgs.move('prev');
					 return false;
				}
				break;
		}
	}
}


////////////////////////////////////////////////////////////////////////////////
// INIT

function init()
{
	setOnMouseClick();
	
	loadXML('portfolio.xml', 'portfolio', 'category');
}

function loadPortfolioCategory(iCategoryIndex)
{
	loadXML('portfolio.xml', 'portfolio', 'category', iCategoryIndex);
	document.getElementById('portfolio-image').innerHTML = '';
}

function loadXML(sXMLFile, sRootNode, sChildNode, iCategoryIndex)
{
	// Create a new images gallery
	var imgsGallery = new Array();
	var oPortFolioImage = document.getElementById('portfolio-image');

	var AJAX = new CAJAX();
	AJAX.executeRequest('GET', sXMLFile +'?i='+ AJAX.getRandomNumber(), null, 'userfiles/file/xml/');
	
	AJAX.request.onreadystatechange = function ()
	{
		if (AJAX.getReadyState() == 'OK')
		{
			// Get XML
			var oRootNode = AJAX.request.responseXML.getElementsByTagName(sRootNode);
			var oChildNode = oRootNode.item(0).getElementsByTagName(sChildNode);
			var sPortFolioCategoryLinks = '';
			
			var iActiveCategoryIndex = 0;
			if (iCategoryIndex) iActiveCategoryIndex = iCategoryIndex;

			AJAX.removeTableRows('thumbnailImages', 0);
			var oImageTable = document.getElementById('thumbnailImages');
			
			var oNewRow = oImageTable.insertRow(0);
			
			for (iCounter = 0; iCounter < oChildNode.length; iCounter++)
			{
				var sCategoryName = oChildNode[iCounter].getAttribute('name');
				var sCategoryLinkStyle = '';
				
				var iCellCounter = 0;

				for (iChildCounter = 0; iChildCounter < oChildNode[iCounter].childNodes.length; iChildCounter++)
				{
					if (oChildNode[iCounter].childNodes[iChildCounter].nodeType == 1)
					{
						var sNodeName = oChildNode[iCounter].childNodes[iChildCounter].nodeName;
						var sNodeValue = oChildNode[iCounter].childNodes[iChildCounter].getAttribute('name');
						var sCaption = oChildNode[iCounter].childNodes[iChildCounter].getAttribute('caption');
						
						var oNewCell = oNewRow.insertCell(iCellCounter);
						
						var sCellContent = '<img class="portFolioThumbnail" ';
						sCellContent += 'onmouseover="this.className = \'portFolioThumbnail_alt\'" ';
						sCellContent += 'onmouseout="this.className = \'portFolioThumbnail\'" ';
						sCellContent += 'onclick="loadImage(\''+ sNodeValue +'\', \''+ sCaption +'\');" ';
						sCellContent += 'src="userfiles/file/portfolio/thumbnails/'+ sNodeValue +'" ';
						sCellContent += 'alt="'+ sCaption +'" />';

						if (iActiveCategoryIndex == iCounter)
						{
							sCategoryLinkStyle = ' class="menuItemActive"';
							
							// images gallery
							imgsGallery[iCellCounter] = new Object();
							imgsGallery[iCellCounter].image = new Image();
							imgsGallery[iCellCounter].image.src = 'userfiles/file/portfolio/thumbnails/'+ sNodeValue +'';
							//imgsGallery[iCellCounter].title = "image_0.jpg";
							imgsGallery[iCellCounter].caption = sCaption;
							
							oNewCell.innerHTML = sCellContent;

							// load first image
							if (iCellCounter == 0)
							{
								// pre load large images images gallery
								aPortFolioImages[iCellCounter] = new Image();
								aPortFolioImages[iCellCounter].src = 'userfiles/file/portfolio/'+ sNodeValue +'';

								var sImageTag = '<img ';
								sImageTag += 'src="userfiles/file/portfolio/'+ sNodeValue +'" ';
								sImageTag += 'alt="'+ sCaption +'" />';
								
								oPortFolioImage.innerHTML = sImageTag;
							}
						}

						iCellCounter++;
					}
				}
				
				sPortFolioCategoryLinks += '<a '+ sCategoryLinkStyle +'href="javascript:loadPortfolioCategory('+ iCounter +')">'+ sCategoryName +'</a><br />';
				
			}
			
			// MudShiftContent(id, unitX, unitTotal)
			imgs = new MudShiftContent('imgs', imgsGallery);
			imgs.moveTo(0);

			// initialise the values
			//if ($('imgs_title')) $('imgs_title').innerHTML = imgsGallery[0].title; 
			if ($('imgs_caption')) $('imgs_caption').innerHTML = (imgsGallery[0].caption != 'null'?imgsGallery[0].caption:'');

			// load the categories
			document.getElementById('portfolio-categories').innerHTML = sPortFolioCategoryLinks;
		}
	}
	AJAX.request.send(null);
}

function loadImage(sImageName, sImageCaption)
{
	

	//document.getElementById('portfolio-image').innerHTML = '<div id="loadingBar"><img src="images/ajax-loader.gif" /></div>';


	var sImageTag = '<img ';
	sImageTag += 'src="userfiles/file/portfolio/'+ sImageName +'" ';
	sImageTag += 'alt="'+ sImageCaption +'" />';
	document.getElementById('portfolio-image').innerHTML = sImageTag;
	document.getElementById('imgs_caption').innerHTML = (sImageCaption != 'null'?sImageCaption:'');

	
}

////////////////////////////////////////////////////////////////////////////////
// EVENTS

Event.observe(window, 'load', init, false);