//thumbId: id of the thumnail image we are capturing
//myID: id of the beauty image we are switching a new image in
//imCaption: caption of the new beauty image
//numIds: the number of thumb ids to process. 
var numColumns = 4;

function thumbToBeauty(thumbId,myId,imgName,imCaption,numIds){

	clearThumbBorders(numIds);   // clear borders of thumbs before we add a new border to
				     // the current (chosen) thumb
	
	document.getElementById(myId).src = imgName;
	document.getElementById("beautyPictCaption").innerHTML = imCaption;

/* old code works when using door price	
	try{
	
		document.getElementById("priceID").innerHTML = "$" + doorPrice;
	}
	catch(e){
	
	}
     */
	//add border to selected thumb image
	addBorder(thumbId);
}


// add css borders to the selected thumb image depending on the position of the thumb regarding row and column
function addBorder(thumbId){

	// determine the row and column we are dealing with from the thumb ID
	idSplit = thumbId.split("_");
	var row = idSplit[1];
	var col = idSplit[2];
	
	if(row == 0){
	
		if(col == 0){
			document.getElementById(thumbId).style.borderStyle = "solid";
			document.getElementById(thumbId).style.borderRightColor = "#4C392B";
			document.getElementById(thumbId).style.borderRightWidth = "1px";
			document.getElementById(thumbId).style.borderBottomColor = "#4C392B";
			document.getElementById(thumbId).style.borderBottomWidth = "1px";
			document.getElementById(thumbId).style.fontWeight = "bold";
			document.getElementById(thumbId).style.fontStyle = "italic";
			document.getElementById(thumbId).style.fontSize = "12px";

		}
		else{
			
			document.getElementById(thumbId).style.borderStyle = "solid";
		//	document.getElementById(thumbId).style.borderRightColor = "#4C392B";
			document.getElementById(thumbId).style.borderRightWidth = "1px";
		//	document.getElementById(thumbId).style.borderBottomColor = "#4C392B";
			document.getElementById(thumbId).style.borderBottomWidth = "1px";
		//	document.getElementById(thumbId).style.borderLeftColor = "#4C392B";
			document.getElementById(thumbId).style.borderLeftWidth = "1px";
			
			document.getElementById(thumbId).style.borderColor = "#4C392B";
			document.getElementById(thumbId).style.fontWeight = "bold";
			document.getElementById(thumbId).style.fontStyle = "italic";
			document.getElementById(thumbId).style.fontSize = "12px";

		}
	
	}
	else{	// row > 0
	
		if(col == 0){
		
			document.getElementById(thumbId).style.borderStyle = "solid";
		//	document.getElementById(thumbId).style.borderRightColor = "#4C392B";
			document.getElementById(thumbId).style.borderRightWidth = "1px";
		//	document.getElementById(thumbId).style.borderBottomColor = "#4C392B";
			document.getElementById(thumbId).style.borderBottomWidth = "1px";
		//	document.getElementById(thumbId).style.borderTopColor = "#4C392B";
			document.getElementById(thumbId).style.borderTopWidth = "1px";
			document.getElementById(thumbId).style.fontWeight = "bold";
			document.getElementById(thumbId).style.fontStyle = "italic";
			document.getElementById(thumbId).style.fontSize = "12px";	
			document.getElementById(thumbId).style.borderColor = "#4C392B";
		}
		else{
			
			document.getElementById(thumbId).style.borderStyle = "solid";
			document.getElementById(thumbId).style.borderColor = "#4C392B";
			document.getElementById(thumbId).style.borderWidth = "1px";
			document.getElementById(thumbId).style.fontWeight = "bold";
			document.getElementById(thumbId).style.fontStyle = "italic";
			document.getElementById(thumbId).style.fontSize = "12px";
		}
	}

}



// clear borders of thumbs before we add a new border to
// the current (chosen) thumb
				     
function clearThumbBorders(numIds){

	var numRows = numIds/4;
	var columns = numIds%4;
		
	// only 1 row
	if(numIds <= numColumns){
	
		numRows = 1;
		columns = numIds;
	}
	else{
	// more than 1 row
		if(columns > 0){

		   numRows++;
		}	
	}

	for(var i = 0;i < numRows;i++){
	
	   endCol = 4; // default if full row
	   
	   // are we on the last line?
	   // if so make columns = remainder
	   if((i + 1) == numRows){
	   
	   	endCol = columns;
	   }
	   for(j = 0;j < endCol;j++){
	
		var thisId = "thumb_" + i + "_" + j;
		
		document.getElementById(thisId).style.borderStyle = "none";
		document.getElementById(thisId).style.borderWidth = "0px";
		document.getElementById(thisId).style.fontWeight = "normal";
	   }
	}
}