/**
 * Global variables / cache initialization for Photo Studio Widget
 */
var photoStudioGenre = new Array("Friends", "Family", "Others", "Sharing");
var currentPhotoStudioGenre = 0;
var prevPhotoStudioGenre = 0;
var photoXpandIndex = 0;

var curPhotoIndex = new Array();
var photoIdCache = new Array();
var photoTagCache = new Array();
var photoTitleCache = new Array();
var curImageIndex = new Array();
var photoShareCustomer = new Array();
var customerPicId = new Array();

var photoStudioPanel = 0;

var photoRowIndex = 0;
var photoColumnIndex = 0;
var photoTitleTotal = 0;
var photoTitleMax = 1;

var photoGenreIndex = 0;
var photoGenreTotal = 0;
var curPhotoAssestIndex = 0;

var photoCursorIndex = 0;
var photoGenreCursor = 0;
var startPhotoIndex = 0;
var sharedPhotoIndex = 0;
var photoShowStatus = false;
/**
 * This method resets all the global photo panel variables, for controlling the cache.
 */
function resetAllPhotoIndex() { 
	currentPhotoStudioGenre = 0;
	prevPhotoStudioGenre = 0;
	photoXpandIndex = 0;
	
	curPhotoIndex = new Array();
	photoIdCache = new Array();
	photoTagCache = new Array();
	photoTitleCache = new Array();
	curImageIndex = new Array();
	photoShareCustomer = new Array();
	customerPicId = new Array();
	
	photoStudioPanel = 0;
	
	photoRowIndex = 0;
	photoColumnIndex = 0;
	photoTitleTotal = 0;
	photoTitleMax = 1;
	
	photoGenreIndex = 0;
	photoGenreTotal = 0;
	curPhotoAssestIndex = 0;
	
	photoCursorIndex = 0;
	photoGenreCursor = 0;
	startPhotoIndex = 0;
	sharedPhotoIndex = 0;
	photoShowStatus = false;
}
/**
 * This method is used to get the Photo Studio widget data.
 */
function getPhotoInfo() {
	photoStudioActive = true; 
	var params = "method=getPhotoInfo" + "&serial=" + serial;
	createAjaxRequest();
	if(ajaxRequest == null) {
		return;
	}
	ajaxRequest.onreadystatechange = function() { 
		if (ajaxRequest.readyState == 4) {
	    	if(ajaxRequest.status == 200) {
	    		if(ajaxRequest.responseText == "recall") {
	    			getPhotoInfo();
	    		} else {
	    			var response = ajaxRequest.responseText;
	    			if(response.length > 0) {
	    				try {
		    				var responseData = response.split("-*$-");
		    				var data = responseData[0].split("-?#-");
		    				if((data[0]).length > 0) 
    							photoIdCache = data[0].split("-@#-");
    						
	    					photoTagCache = data[1].split("-@#-");
	    					photoTitleCache = data[2].split("-@#-");
		    				curImageIndex  = returnPhotoTagIndex(0);
		    				var dataCustomer = responseData[1].split("-?#-");
							photoShareCustomer = dataCustomer[1].split("-@#-");
							var photoShareCustId = dataCustomer[0].split("-$#-");
							for(var i =0; i <photoShareCustomer.length; i++) {
								customerPicId[i] = photoShareCustId[i].split("-@#-");
							}
							
//		    				updatePhotoStudioPanel();
//							updatePhotoStudioSelector();
//							updatePhotoStudioTitlePanel();
	    				} catch (x) {
//	    					alert(" exception = " + x);
	    				}
    				}
    				photoStudioPanel = 0;
    				updatePhotoStudioPanel();
	    		}
			} else if(ajaxRequest.status == 500) { 
				failureInfo();
			}
		} 
	 };
	ajaxRequest.open("POST", '/MobiHandler', true);
	ajaxRequest.setRequestHeader("Content-Type" , "application/x-www-form-urlencoded");
	ajaxRequest.send(params);
	return false;
}
/**
 * It returns the current Photo Genre indexs for the selected titles
 */
function returnPhotoTagIndex(index) {
	var curPhotoTagIndex = new Array();
	var count = -1; 
	for(var i = 0; i < photoIdCache.length; i++) {
		if(photoTagCache[i] == index) {
			++count;
			curPhotoTagIndex[count] = i;
		}
	}
	return curPhotoTagIndex;
}
/**
 * This method is used to launch the photo studio widget
 */
function launchPhotoStudioPanel() {
	var widgetTitle = wrecords.wRecords[currImage].title;
	var widgetId = wrecords.wRecords[currImage].id;
	var useGraphic = wrecords.wRecords[currImage].useGraphic;
	useGraphic = useGraphic.substring(1, useGraphic.length);		
	document.getElementById("vodGenrePanel").innerHTML = "&nbsp;loading...";
	document.getElementById("vodTitlePanel").innerHTML = "<span style='color:white;'>loading...</span>";
	document.getElementById("titleContent").innerHTML = "&nbsp;";
	document.getElementById("yearTagPanel").innerHTML = "&nbsp;";
	document.getElementById("ratingPanel").innerHTML = "&nbsp;";
	 
	document.getElementById("vodTag").innerHTML = widgetTitle;
	document.getElementById("htmlHeaderImg").innerHTML = '<img  alt="" height="36px" width="36px" src=' + (useGraphic == 1 ? "/ImageHandlerMobi?value=" + wrecords.wRecords[currImage].id + "&icon=2&imageType=2" : "/view/tv/images/widgets/wImages/widgetNA.png") + ' style="padding:1px;" border="0" align="middle">';
	fadeAll();
 	showVodPanel();
	getPhotoInfo();
	//alert("launchControlPanel");
}
/**
 * This method is used to reset the all the Photo title variable.
 */
function resetPhotoTitleIndex() {
	photoRowIndex = 0;
	photoColumnIndex = 0;
	photoTitleTotal = 0;
	photoTitleMax = 1;
	startPhotoIndex = 0;
	photoXpandIndex = 0;
	sharedPhotoIndex = 0;
	photoCursorIndex = 0;
}
/**
 * This method is used to reset the all genre variables.
 */
function resetPhotoGenreIndex() {
	photoStudioPanel = 0;
	photoGenreIndex = 0;
	photoGenreTotal = 0;
	curPhotoAssestIndex = 0;
	currentPhotoStudioGenre = 0;
	prevPhotoStudioGenre = 0;
	photoXpandIndex = 0;
}
/**
 * This method is used to select the one of the genre by mouse
 */
function selPhotoGenre(index) {
	photoStudioPanel = 0;
	document.getElementById("photoGenreId" + currentPhotoStudioGenre).style.backgroundImage = 'none';
	prevPhotoStudioGenre = currentPhotoStudioGenre;
	currentPhotoStudioGenre = index;
	document.getElementById("photoGenreId" + index).style.backgroundImage = 'url("./view/mobi/images/rowGenre.png")';   
	document.getElementById("photoGenreId" + index).style.backgroundRepeat = 'no-repeat';  
	curImageIndex = new Array();
	if(currentPhotoStudioGenre == 3) {
		redesignPhotoPanel();
	} else {
		curImageIndex  = returnPhotoTagIndex(currentPhotoStudioGenre);
		updatePhotoStudioTitlePanel();
		try {
			document.getElementById("picHolderName").innerHTML = "";
			document.getElementById("picCountPanel").innerHTML = "";
		} catch(x) {
			
		}
	}
}
/**
 * This method is used to update the Photo studio genre panel
 */
function updatePhotoStudioPanel() {
	resetPhotoGenreIndex();
	lockedAdultPanelOpen = true;
	var genreHTML = "";
	for(var i = 0; i < 4; i++) {
		genreHTML += '<tr><td width="100%" height="16%" valign="middle" style="height:16%;width:100%;vertical-align:middle;" id="photoGenreId' + i + '"  onmouseover="selPhotoGenre(' + i + ');" >'+ "&nbsp;"+photoStudioGenre[i] +'</td></tr>';
	}
	document.getElementById("vodGenrePanel").innerHTML = ''
			+ '<table class="genreMenu" width="100%" height="100%" align="left" border="0px" style="margin-left:0%;margin-top:0px;" cellspacing="0" cellpadding="1.5px">' 
			+ genreHTML				
			+ '</table>';
//	genreHTML = "";
//	var genreCount = 0;
//	for(i = 0; i <= 3; ++i) {
//		document.getElementById("photoGenreId" + genreCount).innerHTML = "&nbsp;"+photoStudioGenre[i];
//		++genreCount;
//	}
	updatePhotoStudioSelector();			
	updatePhotoStudioTitlePanel();
}

/**
 * This method is used to select the current selected 
 */
function updatePhotoStudioSelector() {
	if(document.getElementsByTagName) {  
		var table = document.getElementById("vodGenrePanel");   
		var rows = table.getElementsByTagName("td");
		rows[prevPhotoStudioGenre].style.backgroundImage = 'none';
		rows[currentPhotoStudioGenre].style.backgroundRepeat = 'no-repeat';
	   	rows[currentPhotoStudioGenre].style.backgroundImage = 'url("./view/mobi/images/rowGenre.png")';   
	}
	try {
		document.getElementById("picHolderName").innerHTML = "";
		document.getElementById("picCountPanel").innerHTML = "";
	} catch(x) {
		
	}
}
/**
 * This method is used to return the current photo index.
 */
function returnPhotoIndex() {
	var titleCache = new Array();
	if(curPhotoTitleIndex[photoGenreIndex].length > 0) {
		titleCache = (curPhotoTitleIndex[photoGenreIndex]);
	}
	photoTitleTotal = titleCache.length-1;
	return titleCache;
}
/**
 * This method is used to update the Photo studio title panel
 */
function updatePhotoStudioTitlePanel() {
//	return;
	resetPhotoTitleIndex();
	document.getElementById("vodTitlePanel").innerHTML = "";
	var titleHTML = "";
	var titleDataHTML = "";
	for(var k = 0; k < 3; k++) {
		curPhotoIndex[k] = new Array(3); 
		for(var m = 0; m < 3; m++) {
			curPhotoIndex[k][m] = 0;
		}
	}
	var count = 0;
//	alert(curImageIndex.length);
	var titleDataHTML = '<tr>';		
	for(i=0; (curImageIndex.length >=6 && i<6) || (curImageIndex.length < 6 && i<curImageIndex.length); ++i) {
		++count;
		var currIndex = curImageIndex[i];
		var rowIndex = parseInt(i/3);
		var columnIndex = parseInt(i%3);
		curPhotoIndex[rowIndex][columnIndex] = 1;
		if(i%3 == 0 && i != 0) {
			titleDataHTML += '</tr><tr>';
		}
		titleDataHTML += '<td onmouseover="selPhotoTitle('+ rowIndex +','+ columnIndex+', '+ i +');" onclick="unlockPhotoTitle();" id="photoPanelId'+ rowIndex + ''+ columnIndex +'" width="30%" height="45%" align="center" valign="middle" nowrap >';
		titleDataHTML += '<img id="photoTitle'+ rowIndex + ''+ columnIndex +'" style="width:50px;height:50px;border:1px solid gray;cursor:pointer;" alt="'+ photoTitleCache[currIndex]+ '" src="/ImageHandlerMobi?value=' + photoIdCache[currIndex] + '&icon=-1&imageType=7" />'
		titleDataHTML += '</td>';
	}
	if(count > 0) {
		for(var j=0; j < (6 - count) ; ++j) { 
			var rowIndex = parseInt((j+count)/3);
			var columnIndex = parseInt((j+count)%3);
			if((count+j)%3 == 0) {
				titleDataHTML += '</tr><tr>';
			}
			titleDataHTML += '<td onmouseover="selPhotoTitle('+ rowIndex +','+ columnIndex+', '+ j +');" onclick="unlockPhotoTitle();" id="photoPanelId'+ rowIndex + ''+ columnIndex +'" width="30%" height="45%" align="center" valign="middle" nowrap >';
			titleDataHTML += '&nbsp;'
			titleDataHTML += '</td>';
		}
	}
	titleDataHTML += '</tr>';
	try {
	document.getElementById("vodTitlePanel").innerHTML = '<table width="100%" height="100%" align="center" valign="middle" border="0" cellspacing="0" cellpadding="0">'
									+ (count == 0 ? "<td height='100%' width='100%' align='center' valign='middle'>No photo available</td>" : titleDataHTML)
								+ '</table>';
	} catch (x) {
//		alert(3 + "." + x);
	}
	photoTitleTotal = 	curImageIndex.length - 1;							
}
/**
 * This method redesign the Photo title panel for the shared photos.
 */
function redesignPhotoPanel() {
	resetPhotoTitleIndex();
	for(var k = 0; k < 3; k++) {
		curPhotoIndex[k] = new Array(3); 
		for(var m = 0; m < 3; m++) {
			curPhotoIndex[k][m] = 0;
		}
	}
	document.getElementById("vodTitlePanel").innerHTML = "";
	var htmlContent = "";
	var curCount = 0;
	for(var i = 0; i < 2; i++) {
		htmlContent += "<tr>";
		for(var j = 0; j < 3; j++) {
			htmlContent += '<td onmouseover="selPhotoTitle('+ i +','+ j+', '+ curCount +');" onclick="unlockPhotoTitle();" id="photoPanelId'+ i + ''+ j +'" width="30%" height="45%" align="center" valign="middle" nowrap >';
			htmlContent += '&nbsp;'
			htmlContent += '</td>';
			++curCount;
		}
		htmlContent += "</tr>";
	}
	
	document.getElementById("vodTitlePanel").innerHTML = '<table width="100%" height="100%" align="center" valign="middle" border="0" cellspacing="0" cellpadding="0">'
						+ htmlContent
					+ '</table>';
	
	var count = 0;
//	for(var i = 0; i < 2; i++) {
//		for(var j = 0; j < 3; j++) {
//			document.getElementById("photoPanelId" + i + "" + j).innerHTML = "&nbsp;";
//		}
//	}
	for(var i=0; (photoShareCustomer.length >=6 && i<6) || (photoShareCustomer.length < 6 && i<photoShareCustomer.length); ++i) {
		var rowIndex = parseInt(i/3);
		var columnIndex = parseInt(i%3);
		curPhotoIndex[rowIndex][columnIndex] = 1;
//		var titleDataHTML = '<table id="photoTitle'+ rowIndex + ''+ columnIndex +'" style="background:darkslategray;border:1px solid gray;cursor:pointer;"><tr>';
//		var curCount = 0;
//		for(var j=0; (customerPicId[i].length >=4 && j<4) || (customerPicId[i].length < 4 && j<customerPicId[i].length); ++j) {
//			if(j%2 == 0 && j != 0) {
//				titleDataHTML += '</tr><tr>';
//			}
//			titleDataHTML += '<td width="50px" height="50px" align="center" valign="middle" nowrap >';
//			titleDataHTML += '<img style="width:50px;height:50px;border:1px solid transparent;background:darkolivegreen;" alt="" src="/ImageHandlerMobi?value=' + customerPicId[i][j] + '&icon=-1&imageType=7" />'
//			titleDataHTML += '</td>';
//			++curCount;
//		}
//		if(curCount > 0) {
//			for(var j=0; j < (4 - curCount) ; ++j) { 
//				if((curCount+j)%2== 0) {
//					titleDataHTML += '</tr><tr>';
//				}
//				titleDataHTML += '<td width="50px" height="50px" align="center" valign="middle" nowrap >';
//				titleDataHTML += '&nbsp;'
//				titleDataHTML += '</td>';
//			}
//		}
//		titleDataHTML += '</tr></table>';
		var titleDataHTML = '<img id="photoTitle'+ rowIndex + ''+ columnIndex +'" style="cursor:pointer;width:50px;height:50px;border:1px solid transparent;background:darkolivegreen;" alt="" src="/ImageHandlerMobi?value=' + customerPicId[i][0] + '&icon=-1&imageType=7" />'
		document.getElementById("photoPanelId" + rowIndex + "" + columnIndex).innerHTML = titleDataHTML;//'<img id="photoTitle'+ rowIndex + ''+ columnIndex +'" style="background:darkslategray;width:120px;height:120px;border:1px solid gray;" alt="" src="/ImageHandlerMobi?value=' + customerPicId[i][0] + '&icon=-1&imageType=7" />'
		++count;
	}
	photoTitleTotal = photoShareCustomer.length -1;
//	updatePhotoDesc(0);
}
/**
 * This is used to scroll the shared photo titles
 */
function scrollPhotoPanel(start, end) {
	var titleCount = 0;
	document.getElementById("vodTitlePanel").innerHTML = "";
	var titleDataHTML = '<tr>';			
	for(var i=start; i <= end; ++i) {
		var rowIndex = parseInt(i/3);
		var columnIndex = parseInt(i%3);
		if(i%3 == 0 && i != 0 && titleCount != 0) {
			titleDataHTML += '</tr><tr>';
		}
		curPhotoIndex[parseInt(titleCount/3)][parseInt(titleCount%3)] = 1;
		var currentIndex = 3*rowIndex + columnIndex;
		var currIndex = curImageIndex[currentIndex];
		var curCount = 0;
		titleDataHTML += '<td onmouseover="selPhotoTitle('+ rowIndex +','+ columnIndex+', '+ titleCount +');" onclick="unlockPhotoTitle();" id="photoPanelId'+ rowIndex + ''+ columnIndex +'" width="30%" height="45%" align="center" valign="middle" nowrap >';
		titleDataHTML += '<img id="photoTitle'+ rowIndex + ''+ columnIndex +'" style="cursor:pointer;width:50px;height:50px;border:1px solid transparent;background:darkolivegreen;" alt="" src="/ImageHandlerMobi?value=' + customerPicId[i][0] + '&icon=-1&imageType=7" />'
//		titleDataHTML += '<table id="photoTitle'+ rowIndex + ''+ columnIndex +'" style="background:darkslategray;border:1px solid gray;cursor:pointer;"><tr>';
//		titleDataHTML += '<tr>';
//		for(var j=0; (customerPicId[i].length >=4 && j<4) || (customerPicId[i].length < 4 && j<customerPicId[i].length); ++j) {
//			if(j%2 == 0 && j != 0) {
//				titleDataHTML += '</tr><tr>';
//			}
//			titleDataHTML += '<td width="50px" height="50px" align="center" valign="middle" nowrap >';
//			titleDataHTML += '<img style="width:50px;height:50px;border:1px solid transparent;background:darkolivegreen;" alt="" src="/ImageHandlerMobi?value=' + customerPicId[i][j] + '&icon=-1&imageType=7" />'
//			titleDataHTML += '</td>';
//			++curCount;
//		}
//		if(curCount > 0) {
//			for(var j=0; j < (4 - curCount) ; ++j) { 
//				if((curCount+j)%2== 0) {
//					titleDataHTML += '</tr><tr>';
//				}
//				titleDataHTML += '<td width="50px" height="50px" align="center" valign="middle" nowrap >';
//				titleDataHTML += '&nbsp;'
//				titleDataHTML += '</td>';
//			}
//		}
//		titleDataHTML += '</tr></table>';
		
		titleDataHTML += '</td>';
		titleCount++;
	}
	if(titleCount > 0) {
		for(var j=0; j < (6 - titleCount) ; ++j) { 
			var rowIndex = parseInt((j+titleCount)/3);
			var columnIndex = parseInt((j+titleCount)%3);
			if((titleCount+j)%3 == 0) {
				titleDataHTML += '</tr><tr>';
			}
			titleDataHTML += '<td id="photoPanelId'+ rowIndex + ''+ columnIndex +'" width="30%" height="45%" align="center" valign="middle" nowrap >';
			titleDataHTML += '&nbsp;'
			titleDataHTML += '</td>';
		}
	}
	titleDataHTML += '</tr>';
	document.getElementById("vodTitlePanel").innerHTML = '<table width="100%" height="100%" align="center" valign="middle" border="0" cellspacing="0" cellpadding="0">'
									+ titleDataHTML
								+ '</table>';
	selPhotoTitlePanel(photoRowIndex, photoColumnIndex);
}
/**
 * This method is used to update the photo title description
 */
function updatePhotoDesc(index) {
	try {
//		document.getElementById("titleContent").innerHTML = '<span style="position:absolute;left:0px;margin-top:-8px;"><table nowrap><tr><td id="picHolderName"></td><td id="picCountPanel"></td></tr></table></span>';
//		document.getElementById("picHolderName").innerHTML = "";// photoShareCustomer[index];
//		document.getElementById("picCountPanel").innerHTML = " " + customerPicId[index].length + " photos " + (customerPicId[index].length <2 ? "is" : "are")+" shared by "+photoShareCustomer[index] +".";
		document.getElementById("picHolderName").innerHTML = photoShareCustomer[index] + " has shared " + customerPicId[index].length + "" + (customerPicId[index].length <2 ? " photo " : " photos") + " in this album.";
	} catch(x) {
//		alert(x);
	}
}
function scrollPhotoTitle(start, end) {
	for(var k = 0; k < 3; k++) {
		curPhotoIndex[k] = new Array(3); 
		for(var m = 0; m < 3; m++) {
			curPhotoIndex[k][m] = 0;
		}
	}
	var titleCount = 0;
	document.getElementById("vodTitlePanel").innerHTML = "";
	if(currentPhotoStudioGenre == 3) {
		scrollPhotoPanel(start, end);
		return;
	}
	var titleDataHTML = '<tr>';			
	for(i=start; i <= end; ++i) {
		var rowIndex = parseInt(i/3);
		var columnIndex = parseInt(i%3);
		if(i%3 == 0 && i != 0 && titleCount != 0) {
			titleDataHTML += '</tr><tr>';
		}
		curPhotoIndex[parseInt(titleCount/3)][parseInt(titleCount%3)] = 1;
		var currentIndex = 3*rowIndex + columnIndex;
		var currIndex = curImageIndex[currentIndex];
		titleDataHTML += '<td onmouseover="selPhotoTitle('+ rowIndex +','+ columnIndex+', '+ titleCount +');" onclick="unlockPhotoTitle();" id="photoPanelId'+ rowIndex + ''+ columnIndex +'" width="30%" height="45%" align="center" valign="middle" nowrap >';
		titleDataHTML += '<img id="photoTitle'+ rowIndex + ''+ columnIndex +'" style="width:50px;height:50px;border:1px solid transparent;cursor:pointer;" alt="'+ photoTitleCache[currIndex]+ '" src="/ImageHandlerMobi?value=' + photoIdCache[currIndex] + '&icon=-1&imageType=7" />'
		titleDataHTML += '</td>';
		titleCount++;
	}
	if(titleCount > 0) {
		for(var j=0; j < (6 - count) ; ++j) { 
			var rowIndex = parseInt((j+count)/3);
			var columnIndex = parseInt((j+count)%3);
			if((count+j)%3 == 0) {
				titleDataHTML += '</tr><tr>';
			}
			titleDataHTML += '<td id="photoPanelId'+ rowIndex + ''+ columnIndex +'" width="30%" height="45%" align="center" valign="middle" nowrap >';
			titleDataHTML += '&nbsp;'
			titleDataHTML += '</td>';
		}
	}
	titleDataHTML += '</tr>';
	document.getElementById("vodTitlePanel").innerHTML = '<table width="100%" height="100%" align="center" valign="middle" border="0" cellspacing="0" cellpadding="0">'
									+ titleDataHTML
								+ '</table>';
	selPhotoTitlePanel(photoRowIndex, photoColumnIndex);
}
/**
 * This method is used to select the current photo title
 */
function selPhotoTitlePanel(rowIndex, columnIndex) {
	photoStudioPanel = 1;
//	alert("rowIndex = " + rowIndex + " : columnIndex= " + columnIndex);
	try {
		if(currentPhotoStudioGenre == 3) {
			var curIndex = 3*rowIndex + columnIndex;
			updatePhotoDesc(curIndex);
		} else {
			try {
				document.getElementById("picHolderName").innerHTML = "";
				document.getElementById("picCountPanel").innerHTML = "";
			} catch(x) {
				
			}
		}
	} catch (x) {
//		alert(5 + "." + x);
	}
	try {
		document.getElementById("photoTitle" + rowIndex + "" + columnIndex).style.border = "1px solid skyblue";
	} catch(x) {
//		alert("loop= " + rowIndex + " : " + columnIndex);
		photoRowIndex -= 1;
		photoCursorIndex -=1;
		selPhotoTitlePanel(photoRowIndex, photoColumnIndex);
	}
}
/**
 * This is used to un select the photo title panel
 */
function unSelPhotoTitlePanel(rowIndex, columnIndex) {
	try {
		document.getElementById("photoTitle" + rowIndex + "" + columnIndex).style.border = "1px solid gray";
	} catch(x) {
//		alert(6 + " : " + x);
	}
}

/**
 * This method is used to select the photo title panel on mouse over action
 */

function selPhotoTitle(rowIndex, columnIndex, cursorIndex) {
	try {
//		alert(rowIndex + " : " + columnIndex + " : " + cursorIndex)
		if(curPhotoIndex[rowIndex][columnIndex] == 0 ) {
			return;
		}
		unSelPhotoTitlePanel(photoRowIndex, photoColumnIndex);
		photoRowIndex = rowIndex; 
		photoColumnIndex = columnIndex;
		photoCursorIndex = parseInt(cursorIndex/3);
		selPhotoTitlePanel(rowIndex, columnIndex);
	} catch(x) {
//		alert(1 + "." + x);
	}
}
/**
 * This method is used to open the selected image
 */
function unlockPhotoTitle() {
	try {
//		alert(curPhotoIndex[photoRowIndex][photoColumnIndex]);
		if(curPhotoIndex[photoRowIndex][photoColumnIndex] == 0 ) {
			return;
		}
		photoStudioKeyHandler(rcOK);
	} catch(x) {
//		alert(2 + "." + x);
	}
}
/**
 * This is photo panel key handler
 */
function photoStudioKeyHandler(keyCodeNum) {
	switch(keyCodeNum) {
		case rcUP:
			if(photoShowStatus) {
				return;
			}
			if(photoStudioPanel == 1) {
				if(photoRowIndex == 0)
					return;
				unSelPhotoTitlePanel(photoRowIndex, photoColumnIndex);
				photoRowIndex--;
				if(photoCursorIndex != 0) { // if the cursor is moving up, no scroll is needed
					photoCursorIndex--;
					selPhotoTitlePanel(photoRowIndex, photoColumnIndex);
				} else { // scroll	
					photoCursorIndex = 0;
					var start = 0;
					start = (startPhotoIndex < 3 ? 0 : startPhotoIndex -3);
					startPhotoIndex = start;
					var end = ((photoTitleTotal - start) > 5 ? (start + 5) : photoTitleTotal);	
					scrollPhotoTitle(start, end);
				}		
				return;
			}
			if(currentPhotoStudioGenre > 0 && currentPhotoStudioGenre < photoStudioGenre.length) {
				prevPhotoStudioGenre = currentPhotoStudioGenre;
				currentPhotoStudioGenre--;
				updatePhotoStudioSelector();
				curImageIndex = new Array();
				if(currentPhotoStudioGenre != 3) {
					try {
					document.getElementById("picHolderName").innerHTML = "";
					document.getElementById("picCountPanel").innerHTML = "";
					} catch(x) {
						
					}
				}
				curImageIndex  = returnPhotoTagIndex(currentPhotoStudioGenre);
				updatePhotoStudioTitlePanel();
				//updateAdultLockedPanel();
			} else {
				return;
			}
		break;
		
		case rcDOWN:
			if(photoShowStatus) {
				return;
			}
			if(photoStudioPanel == 1) {
				var rowIndex = photoCursorIndex + 1;
				var columnIndex = photoColumnIndex;
				if(rowIndex < 2) {
					if(curPhotoIndex[rowIndex][columnIndex] == 0) {
						return;
					}
				}
				var photoCount = (photoTitleTotal/3);
	 			if(photoRowIndex == parseInt(photoCount)) {
					return;
	 			}
				unSelPhotoTitlePanel(photoRowIndex, photoColumnIndex);
				photoRowIndex++;
				if(photoCursorIndex < photoTitleMax) { // if the cursor is moving down, no scroll is needed
					photoCursorIndex++;
					selPhotoTitlePanel(photoRowIndex, photoColumnIndex);
				} else { 
					var start = 0;
					if(photoRowIndex < 2) {
						start = photoRowIndex;  
						startPhotoIndex = start;
					} else {
						start = startPhotoIndex + 3;
						startPhotoIndex = start;
					}
					photoCursorIndex = 1;
					var end = ((photoTitleTotal - start) > 5 ? (start + 5) : photoTitleTotal);
					scrollPhotoTitle(start, end);
				}	
				return;
			}
			if(currentPhotoStudioGenre >= 0 && currentPhotoStudioGenre < (photoStudioGenre.length-1)) {
				prevPhotoStudioGenre = currentPhotoStudioGenre;
				currentPhotoStudioGenre++;
				updatePhotoStudioSelector();
				if(currentPhotoStudioGenre == 3) {
					curImageIndex = new Array();
					redesignPhotoPanel();
				} else {
					curImageIndex = new Array();
					curImageIndex  = returnPhotoTagIndex(currentPhotoStudioGenre);
					updatePhotoStudioTitlePanel();
					try {
					document.getElementById("picHolderName").innerHTML = "";
					document.getElementById("picCountPanel").innerHTML = "";
					} catch(x) {
						
					}
				}
			} else {
				return;
			}
		break;
		case rcLEFT:
			if(photoShowStatus) {
				if(currentPhotoStudioGenre == 3) {
					--sharedPhotoIndex;
					var curIndex = photoRowIndex*3 + photoColumnIndex;
					sharedPhotoIndex = (sharedPhotoIndex < 0 ?  customerPicId[curIndex].length -1 : sharedPhotoIndex);
					showExpandImage(sharedPhotoIndex);
				} else {
					--photoXpandIndex;
					photoXpandIndex = (photoXpandIndex <= 0 ? curImageIndex.length : photoXpandIndex);
					showExpandImage(photoXpandIndex);
				}
				return;
			}
			if(photoColumnIndex == 0) {
				photoStudioPanel = 0;
				unSelPhotoTitlePanel(photoRowIndex, photoColumnIndex);
 				return;
 			}
 			if(photoStudioPanel == 0) {
 				return;
 			}
 			if(photoColumnIndex >= 0) {
				unSelPhotoTitlePanel(photoRowIndex, photoColumnIndex);
				--photoColumnIndex;
				selPhotoTitlePanel(photoRowIndex, photoColumnIndex);
				return;
			}
			
		break;
		case rcRIGHT:
			if(photoShowStatus) {
				if(currentPhotoStudioGenre == 3) {
					++sharedPhotoIndex;
					var curIndex = photoRowIndex*3 + photoColumnIndex;
					sharedPhotoIndex = (sharedPhotoIndex >= customerPicId[curIndex].length ?  0 : sharedPhotoIndex);
					showExpandImage(sharedPhotoIndex);
				} else {
					++photoXpandIndex;
					photoXpandIndex = (photoXpandIndex > curImageIndex.length ?  1 : photoXpandIndex);
					showExpandImage(photoXpandIndex);
				}
				return;
			}
			if(photoStudioPanel == 0) {
				if(currentPhotoStudioGenre != 3) {
					if(curImageIndex.length == 0) {
						return;
					}
				}
 				selPhotoTitlePanel(photoRowIndex, photoColumnIndex);
 				photoStudioPanel = 1;
 				return;
 			}
			var curIndex = photoRowIndex*3 + photoColumnIndex;
			if(curIndex == photoTitleTotal || photoColumnIndex == 2) {
 				return;
 			}
			if(photoColumnIndex >= 0) {
				unSelPhotoTitlePanel(photoRowIndex, photoColumnIndex);
				++photoColumnIndex;
				selPhotoTitlePanel(photoRowIndex, photoColumnIndex);
				return;
			}
		break;
		case rcMENU:
			if(photoShowStatus) {
				photoShowStatus = false;
				/*
				document.getElementById("homePanelImage").style.marginTop = "25px";
				document.getElementById("homePanelImage").style.marginTop = "72px";
				if(document.getElementById("homePanelImage") != null)
					document.getElementById("homePanelImage").style.visibility = "hidden";
				*/
				
				if(document.getElementById("movePhotoPanel") != null)		
					document.getElementById("movePhotoPanel").style.visibility = "hidden";					
				document.getElementById("openChartId").innerHTML = "";
			} else {
				document.getElementById("picHolderName").innerHTML = "";
				document.getElementById("picCountPanel").innerHTML = "";
				resetAllPhotoIndex();
				photoStudioActive = false;
				showGuidePanel();
			}
		break;
		case rcOK:
			if(photoStudioPanel == 0) {
				return;
			}
			if(photoShowStatus) {
				
			} else {
				photoShowStatus = true;
				var image = 3*photoRowIndex + photoColumnIndex + 1;
				photoXpandIndex = image;
				if(currentPhotoStudioGenre == 3) {
					sharedPhotoIndex = 0;
					showExpandImage(0);
				} else {
					showExpandImage(photoXpandIndex);
				}
				
			}
		break;
	}
}
/**
 * This is used to enlarge the selected photo title
 */
function showExpandImage(image) {
//	aert(image);
	/*
	document.getElementById("homePanelImage").style.marginTop = "5px";
	document.getElementById("homePanelImage").style.marginLeft = "20px";
	if(document.getElementById("homePanelImage") != null)
		document.getElementById("homePanelImage").style.visibility = "visible";
	*/
	if(document.getElementById("movePhotoPanel") != null)		
		document.getElementById("movePhotoPanel").style.visibility = "visible";
//	image = '<img width="624" height="410" alt="" src="/view/tv/images/photoStudio/'+ image +'.png" valign="middle" style="border:1px solid Transparent;">';
	if(currentPhotoStudioGenre == 3) {
		var currIndex = 3*photoRowIndex + photoColumnIndex; 
//		alert(customerPicId.length + " :image " + image + ",currIndex= " + currIndex)
		var titleDataHTML = '<img style="width:322px;height:242px;" alt="" src="/ImageHandlerMobi?value=' + customerPicId[currIndex][image] + '&icon=-1&imageType=7" />'
		document.getElementById("openChartId").innerHTML = titleDataHTML;			
	} else {
		image = (image == 0 ? image : image -1);
		var currIndex = curImageIndex[image];
		var titleDataHTML = '<img style="width:322px;height:242px;" alt="'+ photoTitleCache[currIndex]+ '" src="/ImageHandlerMobi?value=' + photoIdCache[currIndex] + '&icon=-1&imageType=7" />'
		document.getElementById("openChartId").innerHTML = titleDataHTML;
	}
}
function showHomePhotoStudio(index) {
	var selHomeColor = "";
	selHomeColor = (index == 1 ? "#fcf3b8" : "none");
	document.getElementById("photoStudioHome").style.background = selHomeColor;
}

function escapePhotoStudio() {
	keyActionHandler(rcMENU);
}

function disabledPhotoStudio() {
	showStatusPanel();
	document.getElementById("statusMessagePanel").innerHTML = '';
	document.getElementById("statusMessagePanel").innerHTML = records.key374;
}
function changePhoto(index) {
	(index == 0 ? photoStudioKeyHandler(rcLEFT) : photoStudioKeyHandler(rcRIGHT));
}
function selPhotoArrs(pageIndex, actionIndex) {
	var backColor = actionIndex == 0 ? "Cyan" : "white";
	document.getElementById("photoArr" + pageIndex).style.background = backColor;   
}


function highLightPhotoPanel(index) {
	var selHomeColor = "#fcf3b8";
	document.getElementById("photoPanel" + index).style.background = selHomeColor;
}	

function hidePhotoPanel(index) {
	var selHomeColor = "none";
	document.getElementById("photoPanel" + index).style.background = selHomeColor;
}

function photoPanelHome(index) {
	var selHomeColor = "";
	selHomeColor = (index == 1 ? "#fcf3b8" : "none");
	document.getElementById("photoPanelHomeBtn").style.background = selHomeColor;
	
}
function escapePhotoPanel() {
	photoStudioKeyHandler(rcMENU);
}	

function movePhotoPanel(index) {
	switch(index) {
		case 1:
			photoStudioKeyHandler(rcUP);
		break;
		case 2:
			photoStudioKeyHandler(rcDOWN);
		break;
	}
}