// setup arrays here
var picArray = new Array ;
var thmArray = new Array ;
var urlArray = new Array ;
var htmlArray = new Array ;
var themeArray = new Array ;

// other globals
var mainPic = "centerPic" ;
var arrayPos = 0 ;
var arrayLen,  arrayLeft, arrayRight, themeLen ;
var thumbPos, thumbLen, thumbMove ;
var fade, slidesTimer ;
var showingSlides = false ;
var preload = false ;
var preload_image = new Array() ;
var preload_thumbs = new Array() ;
var preload_themes = new Array() ;
var preloadCtr = 0 ;

document.write('<script src="Scripts/portfolioDefs.js"></script>')
//document.write('<script src="Scripts/htmlAjax.js"></script>')


// preload functions  --  preload functions  --  preload functions  --  preload functions

function preloadDelay(value, startingPic) {
//alert("delay: " + value)
	setTimeout("preload_images('" + value + "', " + startingPic + ")", 2000) ;
}

function preload_images(value, startingPic) {
preload = value || false ;
arrayPos = startingPic || 0 ;

//alert("in preload:" + preload + "::" + arrayPos) ; 

	// load the assets definition file 
	loadPortfolioDefs() ;

	// get array length just once
	// arrayLen = picArray.length - 1 ;
	
	// we always preload the mainPic and put it in [0]
	// because we're never using this array for anything else
	preload_image[arrayPos] = new Image() ;
	preload_image[arrayPos].src = picArray[arrayPos] ;
	
	// do we preload images?
	if (preload == "preload") {
		for (i = 0; i <= arrayLen ; i++) {
			// no need to load mainPic again
// 			if (i != arrayPos) {
// 				preload_image[i] = new Image() ;
// 				preload_image[i].src = picArray[i] ; 
				preload_thumbs[i] = new Image() ;
				preload_thumbs[i].src = thmArray[i] ; 
// 			}
		}
	} 
	
	for (i = 0; i <= themeLen ; i++) {
				preload_themes[i] = new Image() ;
				preload_themes[i].src = themeArray[i] ; 
		}
	
//	initPage("fade", "static") ;
// alert("leaving preload:" + preload) ; 
}



// portfolio functions  --  portfolio functions  --  portfolio functions  --  portfolio functions

function showPortfolio() {
// alert(arrayPos) ; 
	if (currentContent != "portfolio") {
		getDivHTML("divContent/portfolio.html", "bottom-content") ;
	
		loadPortfolio("fade", "static") ;
	
		currentContent = "portfolio" ;
	}
}

function showportfolio() {
	showPortfolio()
}

function loadPortfolio(canFade, canSlides) {
fade = canFade || false ;
showingSlides = canSlides || false ;
// alert(arrayPos) ; 

//alert("loadPortfolio: " + picArray[2]) ;
	// load the assets definition file 
	// if we didn't preload
	
	// check for quick-clickers
	if ((arrayPos == undefined) || (picArray[arrayPos] == undefined)) {
		loadPortfolioDefs() ;
// 			var date = new Date();
// 			var curDate = null;
// 			
// 			do { curDate = new Date(); }
// 			while(curDate-date < 2000);
			arrayPos = arrayPos || 0 ;

// 	alert("undefined :: " + arrayPos + " :: " + picArray[arrayPos]) ;
	}
	
	
// 	if (preload != "preload") {
//	alert("we didn't preload") ;
//		loadPortfolioDefs() ;
	
		// get array length just once
		// arrayLen = picArray.length - 1 ;
		
// 	}
	
	// set starting thumb position & number of thumbs
	thumbLen = 6 ;
	thumbMove = 5 ;
	thumbPos = minMax(arrayPos - thumbLen) ;
	
	// set the starting images based on arrayPos
	setImageData(arrayPos, mainPic) ;
	
	// used when preloading larger pics after page displays
	for (i = 0; i <= arrayLen ; i++) {
	// no need to load mainPic again
		if (i != arrayPos) {
			preload_image[i] = new Image() ;
			preload_image[i].src = picArray[i] ; 
//			preload_thumbs[i] = new Image() ;
//			preload_thumbs[i].src = thmArray[i] ; 
		}
	}
	
	// ifBrowser("browser", "version", "platform")
	if (ifBrowser("Explorer", "6", "")) {
		image = document.getElementById("arrowup") ;
		image.setAttribute("src","assets/up-arrow.gif") ;
		image = document.getElementById("arrowdown") ;
		image.setAttribute("src","assets/down-arrow.gif") ;
		
		}

	// this one time we don't show the main pic's thumb in the upper left
	buildThumbRows(minMax(arrayPos + 1)) ;


// alert("past 'setImageData'") ;

}

function minMax(value) {
	// check if we're within our boundries
	if (value < 0) {
		value += (arrayLen + 1) ;
	} else {
		if (value > arrayLen) 
			value -= (arrayLen + 1) ;
	}

	return value ;
}



// image functions  --  image functions  --  image functions  --  image functions

function setMainPic(index) { 
	arrayPos = index ;
	setImages(0) ;
}

function setImages(increment) {
	// change arrayPos value
	arrayPos = minMax(arrayPos += increment) ;
	
	// show main pic
	setImageData(arrayPos, mainPic) ;
	
	// update our thumbs based on the selected pic
	// use this method when you don't want the selected pic's thumb to show
//	buildThumbRows(minMax(arrayPos - thumbLen)) ;  
	// use this one to show the main pic's thumb in the upper left
	buildThumbRows(arrayPos) ;

}

function setImageData(index, domID) {
var picHTML ;
var fadeSpeed ;

	image = document.getElementById(domID); 

	if (fade == false) {
		image.setAttribute("src", picArray[index]) ;
	} else {
		if (fade == "fade") {
			fadeSpeed = 500 ;
		} else {
			fadeSpeed = 750 ;
		}
		fadeImage(domID, picArray[index], fadeSpeed) ;

	}
		
	// we can use this if we want to replace the entire 'center' div
// 	picHTML = '<a href="' + urlArray[index] + '" target="_blank" id="' + mainPic + 
//		'_a"><img src="' + 	picArray[index] + '" onclick="" id="' + mainPic + ' vlign="top" /></a>';	
// 		document.getElementById("center").innerHTML = picHTML ;
		
		// set the URL for the mainPic and display the caption
		anchor = document.getElementById(domID + "_a"); 
		anchor.setAttribute("href", urlArray[index]) ;
// 		document.getElementById("caption").innerHTML = capArray[index] ;
// alert("before 'getDivHTML:" + index + "'") ;		
		getDivHTML(htmlArray[index], 'top-content') ;
// alert("past 'getDivHTML'") ;		
		
		// update our thumbs based on the selected pic
		// use this method when you don't want the selected pic's thumb to show
//		buildThumbRows(minMax(arrayPos - thumbLen)) ;  
//		buildThumbRows(minMax(arrayPos)) ;
//		document.getElementById('main-pic').style.backgroundImage = ''; 
		if (fade == "morph") 
			setTimeout("document.getElementById('main-pic').style.backgroundImage = ''", 375) ;
		

}

function fadeImage(imageid, imageURL, millisec) {
    var speed = Math.round(millisec / 100);
    var timer = 0;

	if (fade == "morph") 
		document.getElementById("main-pic").style.backgroundImage = "url(" + document.getElementById(imageid).src + ")"; 

	changeOpac(0, imageid) ;
//alert("image is background, front opacity=0") ;
    //make new image
    document.getElementById(imageid).src = imageURL ;
//alert("newimage assigned, front opacity=0") ;

    //fade in image
    for(i = 0; i <= 100; i++) {
        setTimeout("changeOpac(" + i + ",'" + imageid + "')",(timer * speed));
        timer++;
    }
//alert("front opacity=100") ;

}

function changeOpac(opacity, id) {
	var object = document.getElementById(id).style;
	object.opacity = (opacity / 100);
	object.MozOpacity = (opacity / 100);
	object.KhtmlOpacity = (opacity / 100);
	object.filter = "alpha(opacity=" + opacity + ")";
}



// thumbnail functions  --  thumbnail functions  --  thumbnail functions  --  thumbnail functions

function setThumbs(increment) {
	thumbPos = minMax(thumbPos += increment) ;
	buildThumbRows(thumbPos) ;
}

function setThumb(domID, index) {
	thumbDiv = document.getElementById(domID); 
	image.setAttribute("src", thmArray[index]) ;
	image.setAttribute("onclick", "setMainPic(" + index + ")") ;

}

function buildAthumb(index) {
var onClickStr = "" ;

	return index +'>' + '<img src="' + thmArray[index] + '" onclick="setMainPic(' + index + ')" ' +
				'class="thumb" id="thumb"' + index + '" />' ;

	if(index != arrayPos) 
		onClickStr = "setMainPic(" + index + ")" ;

	return '<img src="' + thmArray[index] + '" onclick="' + onClickStr + '" ' +
				'style="margin: 0 10px 0 10px; width: 112px;" id="thumb"' + index + '" /><br />' ;
}

function buildDivThumb(index) {
var onClickStr = "" ;
var aThumb ;
	if(index != arrayPos) 
		onClickStr = "setMainPic(" + index + ")" ;

	aThumb = '<img src="' + thmArray[index] + '" onclick="' + onClickStr + '" ' +
				'alt="thumbnail' + index + '" id="thumbImg' + index + '" />' ;
// 	alert(aThumb) ;
	return aThumb ;
}


function buildThumbRows(start) {
var leftStart, rightStart ;

	if (showingSlides == "slides") {
		leftStart = minMax(arrayPos + 1) ;
		rightStart = minMax(arrayPos + thumbLen + 1) ;
		document.getElementById("thumbs_left").innerHTML=buildThumbRowBlockSlides(leftStart, len) ;
		document.getElementById("thumbs_right").innerHTML=buildThumbRowBlockSlides(rightStart, len);
	} else {
		thumbPos = start; 
		buildThumbRowBlock(start) ;
	}

	// reset the switch
	inBetween = 0 ;
}

function buildThumbRowBlock(start) {
var thumbLeft = "" ;
var thumbRight = "" ;
var leftSkip = 0 ;
var rightSkip = 0 ;
var i, upValue, downValue ;
var totalThumbs = thumbLen * 2 ;

currentThumb = start ;
	// left thumb strip
	i = 0 ;
	while (i < totalThumbs) {
//		thumbLeft += buildAthumb(currentThumb) ;
		document.getElementById("thumb" + i).innerHTML=buildDivThumb(currentThumb) ;
		currentThumb = minMax(currentThumb + 1) ;
		i++ ;
	}

	// right thumb strip
// 	i = 0 ;
// 	while (i < thumbLen) {
// 		thumbRight += buildAthumb(currentThumb) ;
// 		currentThumb = minMax(currentThumb + 1) ;
// 		i++ ;
// 	}

	// build our arrows
	if (thumbLen < arrayLen) {
		
// 		upValue = thumbMove + leftSkip ;
// 		downValue = 0 - thumbMove - rightSkip ;

// 		upValue = thumbMove  ;
// 		downValue = 0 - thumbMove ;
// 		
// 		arrow = document.getElementById("arrowup"); 
// 		arrow.setAttribute("onclick", "setThumbs(" + upValue + "); return false;") ;
// 		arrow = document.getElementById("arrowdown"); 
// 		arrow.setAttribute("onclick", "setThumbs(" + downValue + "); return false;") ;
	
		
	
// 		thumbLeft = '<a href="" onclick="setThumbs(' + upValue + '); return false;">UP ' + 
// 			 '</a><br />' +thumbLeft +'<br /><a href="" onclick="setThumbs(' +
// 			downValue + '); return false;">Down ' + '</a>' ;
// 				
// 		thumbRight = '<a href="" onclick="setThumbs(' + upValue + '); return false;">UP '+ 
// 			'</a><br />' +thumbRight +'<br /><a href="" onclick="setThumbs(' +
// 			downValue + '); return false;">Down ' + '</a>' ;
// 			
	}

	// hello thumbs, here's your HTML (K)
// 	document.getElementById("thumbs_left").innerHTML = thumbLeft ;
// 	document.getElementById("thumbs_right").innerHTML = thumbRight ;
}

function showOnClick(value) {
alert("onclick: " + value) ;
}

function buildThumbRowBlockSlides(start, len) {
var thumbHTML = "" ;
var forSpan = start + len - 1 ; 
var forStart ;

	// if we check if we'll need to go back to the start of the 
	// array or if we just need to grab a piece out of the middle 
	if (forSpan <= arrayLen) {
		forStart = forSpan ;
	} else {
		// We need to grab a piece from the start of the array
		forStart = minMax(forSpan) ;
		
		// loop down through the array for the start of the array
		for (i = forStart; i >= 0; i--)
		{
			thumbHTML += buildAthumb(i) ;
		}
		
		// set the to the end of the array
		forStart = arrayLen ;
	}

	// loop through the array for data
	for (i = forStart ; i >= start; i--)
	{
		thumbHTML += buildAthumb(i) ;
	}

	// hello thumbs, here's your HTML (K)
	return thumbHTML ;
}



// slide functions  --  slide functions  --  slide functions  --  slide functions

function startSlides()
{
	slidesTimer = setTimeout("showSlide() ; startSlides() ;",5000); // 

}

function stopSlides()
{
	clearTimeout(slidesTimer);
	showingSlides = false ;

}

function showSlide() {
	setImages(1); 
//	preload_image.src = picArray[minMax(arrayPos + 1)] ;
	setThumbs(1) ;
	showingSlides = "slides" ;
	
}


// home functions 
// 
// function showHome() {
// 	setTopDiv('home-top') ;
// 	
// 	if (!(document.getElementById('left-content'))) 
// 		setBottomDiv('bottom-content') ;
// 	
// 	setLeftDiv('home-left') ;
// 	setRightDiv('home-right') ; 
// }
// 
// function showhome() {
// 	showHome() ;
// }
// 
// services functions 
// 
// function showServices() {
// 	setTopDiv('services-top') ;
// 	
// 	if (!(document.getElementById('left-content'))) 
// 		setBottomDiv('bottom-content') ;
// 	
// 	setLeftDiv('services-left') ;
// 	setRightDiv('services-right') ; 
// }
// 
// function showservices() {
// 	showServices()
// }
// 
// 
// contact functions 
// 
// function showContact() {
// 	setTopDiv('contact-top') ;
// 	setBottomDiv('contact-bottom') ;
// }
// 
// function showcontact() {
// 	 showContact() 
// }

String.prototype.trim = function() {
	a = this.replace(/^\s+/, '');
	return a.replace(/\s+$/, '');
};


function verifyContact() {
var missingFields = "" ;
var matchingEmails = "" ;
var formName = document.getElementById('Name').value ;
var formEmail = document.getElementById('EmailFrom').value ;
var formEmail2 = document.getElementById('EmailFrom2').value ;
var formTele = document.getElementById('Telephone').value ;
var emailsMatch ;

	// check if the e-mail fields match
	if (formEmail == formEmail2) {
		emailsMatch = true ;
	} else {
		matchingEmails = "Both e-mail addresses must be the same.\n" ;
		emailsMatch = false ;
	}

	// check if the name is blank
	if (formName == "") 
		missingFields = "Name is a required field.\n" ;
		
	// check if the e-mail AND the telephone is blank
	// since only one is required
	if ((formEmail == "") && (formTele == "")) 
		missingFields += "E-mail or Telephone is required.\n" ;
		
	if ((missingFields + matchingEmails) != "") {
		alert("There was a problem with your Contact request:\n\n" + missingFields + matchingEmails + "\nPlease check your entries and click 'Submit' again.")
		
		return false ;
	} else {
		alert("Thank you for contacting Main Street Faces.\nYou will hear from us soon.") ;
		
		return true ;
	}	

}