// Create global variables for the Template Preview CSS class names (depending on the product ID).
var templatePreviewClassName = "templatePreviewImage";
var templatePreviewClassNameHighlight = "templatePreviewImageHighlight";

var templatePreviewSingleSidePreviewImageContainer = "singleSidePreviewImageContainer";
var templatePreviewSingleSidePreviewImageContainerHighlight = "singleSidePreviewImageContainerHighlight";

// Manually define which Template ID's require the user to go to the Upload Artwork page.
var templateIdsForUploadArtwork = new Array(21494, 21508, 21493, 21433, 21189, 19946, 21497, 21496, 19518, 19529, 19946, 21500, 13322, 21510);


// Override Class Names depending on Product ID.
if(productIdGlobal == 174 || productIdGlobal == 176){
	templatePreviewClassName = "templatePreviewImageWith3dBackground";
	templatePreviewClassNameHighlight = "templatePreviewImageHighlightWith3dBackground";

	templatePreviewSingleSidePreviewImageContainer = "singleSidePreviewImageContainerWith3dBackground";
	templatePreviewSingleSidePreviewImageContainerHighlight = "singleSidePreviewImageContainerHighlightWith3dBackground";
}


function getHtmlForProductChange(prodID){
	
		var retHTML = "";

		// Mailing Postcards
		if(prodID == 153 || prodID == 154 || prodID == 155 ){
			retHTML += "<input type='radio' name='changeProduct' value='153' onclick='changeProduct(this.value)' " + (prodID == 153 ? "checked='checked'" : "") + " /> 4&quot; x 6&quot; &nbsp;&nbsp;&nbsp;";
			retHTML += "<input type='radio' name='changeProduct' value='154' onclick='changeProduct(this.value)' " + (prodID == 154 ? "checked='checked'" : "") + " /> 5.5&quot; x 8.5&quot; &nbsp;&nbsp;&nbsp;";
			retHTML += "<input type='radio' name='changeProduct' value='155' onclick='changeProduct(this.value)' " + (prodID == 155 ? "checked='checked'" : "") + " /> 6&quot; x 11&quot; &nbsp;&nbsp;&nbsp;";
		}
		// Shipped Postcards
		if(prodID == 156 || prodID == 157 || prodID == 158 ){
			retHTML += "<input type='radio' name='changeProduct' value='156' onclick='changeProduct(this.value)' " + (prodID == 156 ? "checked='checked'" : "") + " /> 4&quot; x 6&quot; &nbsp;&nbsp;&nbsp;";
			retHTML += "<input type='radio' name='changeProduct' value='157' onclick='changeProduct(this.value)' " + (prodID == 157 ? "checked='checked'" : "") + " /> 5.5&quot; x 8.5&quot; &nbsp;&nbsp;&nbsp;";
			retHTML += "<input type='radio' name='changeProduct' value='158' onclick='changeProduct(this.value)' " + (prodID == 158 ? "checked='checked'" : "") + " /> 6&quot; x 11&quot; &nbsp;&nbsp;&nbsp;";
		}

		return retHTML;

	}

	function changeProduct(switchToNewProductID){
		if(ValidateSearchPhrase(false)){
			document.forms["searchDesignsForm"].productid.value = switchToNewProductID;
			document.forms["searchDesignsForm"].productIDview.value = "";
			document.forms["searchDesignsForm"].submit();
		}
	}



function ValidateSearchPhrase(filterPrefixFlag){
	
	if(!document.forms["searchDesignsForm"].keywords.value.match(/\w/)){
		alert("You forgot to enter a keyword.");
		return false;
	}
	else{

		if(document.forms["searchDesignsForm"].productIDview.value == document.forms["searchDesignsForm"].productid.value)
			document.forms["searchDesignsForm"].productIDview.disabled = true;
		if(document.forms["searchDesignsForm"].keywords_and.value == "")
			document.forms["searchDesignsForm"].keywords_and.disabled = true;
		if(document.forms["searchDesignsForm"].TemplateNumber.value == "")
			document.forms["searchDesignsForm"].TemplateNumber.disabled = true;

		var keywordSearch = $('keywordsBox').value;
		if(filterPrefixFlag && keywordSearch.match(/category:/i))
			$('keywordsBox').value = keywordSearch.replace(/category:/i, "");
		return true;
	}
}

function changeSeconarySearchTerm(secondTerm){
	seconarySearchTerm = secondTerm;
	document.forms["searchDesignsForm"].keywords_and.value = secondTerm;

	if(ValidateSearchPhrase(false)){
		document.forms["searchDesignsForm"].submit();
	}
}


function showSearchResultsDesc(){

	var totalMatchesCount = templateIDsArr.length;

	if(totalMatchesCount == 0)
		var resltDesc = "No Matches";
	else if(totalMatchesCount == 1)
		var resltDesc = "1 Match";
	else
		var resltDesc = "Total of " + totalMatchesCount + " matches";

	$('totalSearchResultsDesc').innerHTML = resltDesc;
}

function mouseOverMultiPreviewTable(templateID){
	for(var i=0; i<templatePreviewsHash.length; i++ ){
		if(templatePreviewsHash[i].TempID == templateID){
			if(templatePreviewsHash[i].TempPreviewCount > 1){
				$('mutliSideTemplateTable_' + templateID).setProperty('class', 'multiSidePreviewTableHighlight');
			}
			break;
		}
	}
}
function mouseOutMultiPreviewTable(templateID){
	for(var i=0; i<templatePreviewsHash.length; i++ ){
		if(templatePreviewsHash[i].TempID == templateID){
			if(templatePreviewsHash[i].TempPreviewCount > 1){
				$('mutliSideTemplateTable_' + templateID).setProperty('class', 'multiSidePreviewTable');
			}
			break;
		}
	}
}

function mouseOverTemplate(templateID){
	for(var i=0; i<templatePreviewsHash.length; i++ ){
		if(templatePreviewsHash[i].TempID == templateID){

			for(var j=0; j< templatePreviewsHash[i].TempPreviewCount; j++){
				$('imgPreview_'+templateID+'_'+j).setProperty('class', templatePreviewClassNameHighlight);
			}
			break;
		}
	}
}
function mouseOutTemplate(templateID){
	for(var i=0; i<templatePreviewsHash.length; i++ ){
		if(templatePreviewsHash[i].TempID == templateID){

			for(var j=0; j< templatePreviewsHash[i].TempPreviewCount; j++){

				$('imgPreview_'+templateID+'_'+j).setProperty('class',templatePreviewClassName);
			}

			break;
		}
	}
}


function mouseOverSinglePreviewSpan(templateID){
	$('singleTemplatePreviewSpan_'+templateID).setProperty('class',templatePreviewSingleSidePreviewImageContainerHighlight);
}
function mouseOutSinglePreviewSpan(templateID){
	$('singleTemplatePreviewSpan_'+templateID).setProperty('class',templatePreviewSingleSidePreviewImageContainer);
}

function changeResultsPerPage(resultCount){

	if(resultCount == "")
		return;

	document.forms["searchDesignsForm"].resultsCount.value = resultCount;

	if(ValidateSearchPhrase(false)){
		document.forms["searchDesignsForm"].submit();
	}
}


function ChangeTemplateCategory(categoryName){
	document.forms["searchDesignsForm"].keywords.value = categoryName;

	if(ValidateSearchPhrase(false)){
		document.forms["searchDesignsForm"].submit();
	}
}

function highlightTemplateCategory(categoryName){
	
	if(categoryName.match(/category:(\w+)/)){

		categoryName = categoryName.replace(/category:/i, "");

		if($("cat_" + categoryName)){
			$("cat_" + categoryName).setStyle("font-weight", "bold");
			$("cat_" + categoryName).setStyle("font-size", "14px");
		}
		else{
			//alert("Category Does Not Exist");
		}
	
	}	
}

function setResultsPerPageSelection(){
		// select results per page in drop down.
		var listMenuObj = $('resultsPerPageList');
		for(var i=0; i < listMenuObj.length; i++){
			if(listMenuObj[i].value == resultsPerPageSelection){
				listMenuObj[i].selected = true;
				break;
			}
		}	
}

function getHtmlForAspectRatioChange(productID, secondarySearchTerm){

	var returnHTML = "";
	returnHTML += "<input type='radio' name='aspectRatioSelect' value='horizontal' " + ((secondarySearchTerm == "horizontal" || secondarySearchTerm == "landscape") ? "checked='checked'" : "") + " onclick='changeSeconarySearchTerm(\"horizontal\")'> Landscape";
	returnHTML += "&nbsp;&nbsp;&nbsp;";
	returnHTML += "<input type='radio' name='aspectRatioSelect' value='vertical' " + (secondarySearchTerm == "vertical" ? "checked='checked'" : "") + " onclick='changeSeconarySearchTerm(\"vertical\")'> Portrait";

	return returnHTML;
}


function showTemplatePreviews(){

	var templatePreviewsHTML = "";

	for(var i=0; i<templatePreviewsHash.length; i++ ){
		
		// Figure out if the current Template ID in the preview Hash has an icon describing "Upload Your Own Artwork"
		var isUploadArtworkTemplate = false;
		for(var j=0; j<templateIdsForUploadArtwork.length; j++){		
			if(templatePreviewsHash[i].TempID == templateIdsForUploadArtwork[j]){
				isUploadArtworkTemplate = true;
				break;
			}
		}		

		if(isUploadArtworkTemplate)
			var templatePickURL = "product_uploadartwork.php?productid=" + productIdGlobal;
		else
			var templatePickURL = "javascript:chooseTemplate('"+templatePreviewsHash[i].TempID+"')";
		

		if(templatePreviewsHash[i].TempPreviewCount > 1 && templatePreviewsHash[i].SideNumber == 0){


			templatePreviewsHTML += '<table cellpadding="0" cellspacing="0" class="multiSidePreviewTable" id="mutliSideTemplateTable_'+templatePreviewsHash[i].TempID+'" onmouseover="mouseOverMultiPreviewTable(\''+templatePreviewsHash[i].TempID+'\')" onmouseout="mouseOutMultiPreviewTable(\''+templatePreviewsHash[i].TempID+'\')">';
			templatePreviewsHTML += "<tr>";

			var totalSideCount = parseInt(templatePreviewsHash[i].TempPreviewCount);

			for(var j=i; j< (i+totalSideCount); j++ ){
				templatePreviewsHTML += "<td align='center'>" + templatePreviewsHash[j].SideName + "</td>";
			}

			templatePreviewsHTML += "</tr>";

			templatePreviewsHTML += "<tr>";

			for(var j=i; j< (i+totalSideCount); j++ ){
				templatePreviewsHTML += "<td align='center'>";
				templatePreviewsHTML += '<a href="' + templatePickURL + '" border="0">';
				templatePreviewsHTML += '<img src="image_preview/se_' + templatePreviewsHash[j].PreviewID + '.jpg" class="'+templatePreviewClassName+'" id="imgPreview_'+templatePreviewsHash[j].TempID+'_'+templatePreviewsHash[j].SideNumber+'" onmouseover="mouseOverTemplate(\''+templatePreviewsHash[j].TempID+'\')" onmouseout="mouseOutTemplate(\''+templatePreviewsHash[j].TempID+'\')">';
				templatePreviewsHTML += '</a>';
				templatePreviewsHTML += "</td>";
			}

			templatePreviewsHTML += "</tr>";

			templatePreviewsHTML += "</table>";
		}
		else if(templatePreviewsHash[i].TempPreviewCount == 1){
			
			var maxImageWidthUntilScale = 135;
			
			var imageWidth = parseInt(templatePreviewsHash[i].ImgWidth);
			var imageHeight = parseInt(templatePreviewsHash[i].ImgHeight);
			
			if(imageWidth > maxImageWidthUntilScale){
				var widthDifference = imageWidth - maxImageWidthUntilScale;
				var shrinkRatio = widthDifference / imageWidth;
				imageWidth = Math.round(imageWidth * (1 - shrinkRatio));
				imageHeight = Math.round(imageHeight * (1 - shrinkRatio));
			}

			var spanWidth = "180px";
			templatePreviewsHTML += '<span id="singleTemplatePreviewSpan_'+templatePreviewsHash[i].TempID+'" onmouseover="mouseOverSinglePreviewSpan(\''+templatePreviewsHash[i].TempID+'\')" onmouseout="mouseOutSinglePreviewSpan(\''+templatePreviewsHash[i].TempID+'\')" class="'+templatePreviewSingleSidePreviewImageContainer+'" " style="padding:0;margin:0;display:block;float:left;position:relative;width:'+spanWidth+';">';
			templatePreviewsHTML += '<table cellpadding="0" cellspacing="0" border="0">';
			templatePreviewsHTML += '<tr><td>';
			templatePreviewsHTML += '<a href="' + templatePickURL + '">'
			templatePreviewsHTML += '<img src="image_preview/se_' + templatePreviewsHash[i].PreviewID + '.jpg" class="'+templatePreviewClassName+'" id="imgPreview_'+templatePreviewsHash[i].TempID+'_'+templatePreviewsHash[i].SideNumber+'" onmouseover="mouseOverTemplate(\''+templatePreviewsHash[i].TempID+'\')" onmouseout="mouseOutTemplate(\''+templatePreviewsHash[i].TempID+'\')"  width="'+imageWidth+'" height="'+imageHeight+'" style="position:relative; margin:0;">';
			templatePreviewsHTML += '</a>';
			templatePreviewsHTML += '</td></tr>';
			templatePreviewsHTML += '<tr><td align="center"><a href="javascript:chooseTemplate(\''+templatePreviewsHash[i].TempID+'\')"><img style="margin:0 auto" src="./images/btn-select-design3.png" border="0" style="position:relative"></a></td></tr>';
			templatePreviewsHTML += '</table>';
				templatePreviewsHTML += '</span>';
		}
	}

	$("templatePreviews").innerHTML = templatePreviewsHTML;
}


function chooseTemplate(templateID){
	document.location = "./product_loadtemplate.php?newtemplatetype="+tempalteViewGlobal+"&newtemplateid=" + templateID + "&productid="+productIdGlobal+"&productIDview="+productIdViewGlobal+"&cancelurl="+returnUrlEncoded+"&continueurl=" + continueUrlEncoded;
}

function initializePage(){
	setResultsPerPageSelection();
	showSearchResultsDesc();
	highlightTemplateCategory(primarySearchTermHtmlEncoded);
}