//this script pre-loads each set of pictures and displays the initial set

var pgLoaded = false;
var wndo = new Array();	// "window(s)" for scrollable content

var categories = 3;
var imgArray = new Array(categories); //array to hold src of all large images
var imgThumbsArray =  new Array(categories); //array to hold src of all thumbnails
var thumbSuf = "_thumbs"; //thumbnail suffix for image filename
var galleryObjId = "t1"; //layer that will contain thumbnails
var currentCat = ""; //the current category selected

function LoadImages(id,srcPath,srcPathThumbs,num,ext,preloadMode) {	//id of the category, paths of large images and thumbnails, number of pics for this cateory and extension of file
	//load the images in arrays and pre-load them
	//each array starts an element named after the id (category name)
	imgArray[id] = new Array(num);
	imgThumbsArray[id] = new Array(num);	
	var elem = document.getElementById(galleryObjId); //get the container reference
	var filename = "";
	for (i=0; i<num; i++) { 
		filename = id + eval(i+1); //create the filename
		//save the filename with the path in each array element for the current id (category)
		imgArray[id][i] = srcPath + filename + ext; 
		imgThumbsArray[id][i] = srcPathThumbs + filename + thumbSuf + ext;	
		switch (preloadMode) {
			case 1: //only large pics
				MM_preloadImages(imgArray[id][i]); //preload the images
				break;
			case 3: //thumbs and large pics
				MM_preloadImages(imgArray[id][i],imgThumbsArray[id][i]); //preload the images
				break;
			case 2: //only thumbs
				MM_preloadImages(imgThumbsArray[id][i]); //preload the images
				break;
		}	
	}
}
function FillGallery(imgCat) { 
	if (currentCat!=imgCat) { //prevent loading for a category already selected
		if (imgArray[imgCat] == null) {			
			switch (imgCat) {
				case "templatedesign":
					LoadImages("templatedesign",imgDir+"templatedesign/",imgDir+"templatedesign/thumbs/", 26,".jpg",2);
					break;
				case "ecommercedesign":
					LoadImages("ecommercedesign",imgDir+"ecommercedesign/",imgDir+"ecommercedesign/thumbs/", 26,".jpg",2);
					break;
				default:
					LoadImages("customdesign",imgDir+"customdesign/",imgDir+"customdesign/thumbs/", 26,".jpg",2);
			}
		}
			
		var galleryHeight = 0; //height of the div changes depending on number of pictures
		var imgHeight = 54;
		var imgWidth = 54;
		var marginBottom = 4;
		var imgCSS = "style='margin-bottom:"+marginBottom+"px;'"; //css for each thumbnail
		//Fills the thumbnail area with the thumgnails for the specified category declared in 'imgCat'
		var elem = document.getElementById(galleryObjId);		
		
		var sIn = "";	
		for (i=0; i<imgArray[imgCat].length; i++){// iterate through the array for this category and write the html to display the thumbnail
			sIn += "<a href=\"javascript:ShowImage('"+imgArray[imgCat][i]+"','id"+i+"');\" onclick=\"window.status=''; return true;\" onmouseover=\"ShowImage('"+imgArray[imgCat][i]+"','id"+i+"'); window.status=''; return true;\" onmouseout=\" window.status=''; return true;\" >" +
			"<img "+imgCSS+" src='"+ imgThumbsArray[imgCat][i] +"' height='54' width='54' border='0' name='id"+i+"' /></a><br/>";		
			galleryHeight += (imgHeight + marginBottom);
		}
		elem.innerHTML = sIn;
		elem.style.height=galleryHeight+"px";
		wndo.load('lyr1', 't1'); //reset the position of the scroller
		ShowImage(imgArray[imgCat][0]); //show the large image of the first thumbnail
		currentCat = imgCat;
	}
}
function ShowImage(imgSrc,objId) { //changes the image src to whatever imgSrc is set to
	imgObj = document.getElementById("largepic");
	imgObj.src = imgSrc;		
	/*if (objId) { 
		obj=document.getElementById(objId);
		obj.style.border = "1px solid red";
		alert(obj);
	}*/
}