function showProductLightbox(){

		$.blockUI({ message: $('#lightbox'),
							   centerY: 0,
							   centerX: 0,
							   
					css: { 
						position:'absolute',

						background: 'url(./images/full_process.png) no-repeat '+($(window).width()/2 -400)+"px"+' 50px',

//						backgroundColor:'#ff0000',
						width: $(window).width() + "px",
						height: $(window).height() + "px",

//						width: "830px",
//						height: "570px",


//						top: '50px',
//						left: ($(window).width()/2 -400)+"px",
						top:'0px',
						left:'0px',

				        border: 'none', 
				        padding: '0px', 
						marign: '0px',
				        opacity: '1', 
//				        color: '#000' ,
						cursor:'default'
						},
						
					overlayCSS: {
						backgroundColor: '#000000',
						opacity: '.7' }
					} ); 
}

function genProductCloseLightbox(){
	var str = "";
	str += '<div style="text-align:left; position:absolute; width:827px; height:564px; top:50px; left:'+($(window).width()/2 -400)+'px;">';
	str += '<div style="cursor:pointer; position:absolute; top:10px; right:10px; width:20px; height:20px;" onclick="$.unblockUI();"><img src="./images/close_btm.png" alt="close"/></div>';
	str += '</div>';
	$("#lightbox").html(str);
}


function showAboutusLightbox(){

		$.blockUI({ message: $('#lightbox'),
							   centerY: 0,
							   centerX: 0,
							   
					css: { 
						position:'absolute',

						background: 'url(./images/photo_white_bgd.png) no-repeat '+($(window).width()/2 -320)+"px"+' 50px',

//						backgroundColor:'#ff0000',
						width: $(window).width() + "px",
						height: $(window).height() + "px",

//						width: "640px",
//						height: "362px",

						top: '0px',
						left: "0px",

				        border: 'none', 
				        padding: '0px', 
						marign: '0px',
				        opacity: '1', 
//				        color: '#000' ,
						cursor:'default'
						},
						
					overlayCSS: {
						backgroundColor: '#000000',
						opacity: '.7' }
					} ); 
		showAboutusPhoto('photo1');
}

var aboutusPhotoArr = ['photo1','photo2',/*'photo3',*/'photo4'];


function hideAllAboutusPhoto(){
	for(i=0; i<aboutusPhotoArr.length; i++)
		document.getElementById(aboutusPhotoArr[i]).style.display='none';
}

function showAboutusPhoto(ele){
	hideAllAboutusPhoto();
	document.getElementById(ele).style.display='block';
}


function genAboutusCloseLightbox(){
	var str = "";
	str += '<div style="url(./images/photo_white_bgd.png) no-repeat '+($(window).width()/2 -320)+"px"+' 50px; width:640px; height:362px;"></div>';
	
	str += '<div id="photo1" style="text-align:left; position:absolute; width:640px; height:362px; top:50px; left:'+($(window).width()/2 -320)+'px;">';
	str += '<img style="padding:14px 10px" src="./images/photo_1.png" />';
	str += '<div style="position:absolute; font-size:12px; top:150px; right:10px; width:150px; height:200px; ">Our modern factory in China has the capacity to produce all the diaries and day planning products you might need</div>';
	str += '<div style="cursor:pointer; position:absolute; top:10px; right:10px; width:20px; height:20px;" onclick="$.unblockUI();"><img src="./images/close_btm.png" alt="close"/></div>';	
	str += '<div style="cursor:pointer; position:absolute; bottom:10px; right:10px; width:50px; height:20px;">&nbsp;<a style="margin-left:18px" href="javascript:showAboutusPhoto(\'photo2\')"><img style="border:none;" src="./images/next_btm.png" alt="next"/></a></div>';	
	str += '</div>';
	
	str += '<div id="photo2" style="text-align:left; position:absolute; width:640px; height:362px; top:50px; left:'+($(window).width()/2 -320)+'px;">';
	str += '<img style="padding:14px 10px" src="./images/photo_2.png"/>';
	str += '<div style="position:absolute; font-size:12px; top:150px; right:10px; width:150px; height:200px;" >Our diaries are manufactured in bright airy surroundings using the latest technology</div>';
	str += '<div style="cursor:pointer; position:absolute; top:10px; right:10px; width:20px; height:20px;" onclick="$.unblockUI();"><img src="./images/close_btm.png" alt="close"/></div>';	
	str += '<div style="cursor:pointer; position:absolute; bottom:10px; right:10px; width:50px; height:20px;"><a href="javascript:showAboutusPhoto(\'photo1\')"><img style="border:none;" src="./images/previous_btm.png" alt="previous"/></a>&nbsp;<a href="javascript:showAboutusPhoto(\'photo4\')"><img style="border:none;" src="./images/next_btm.png" alt="next"/></a></div>';	
	str += '</div>';
/*
	str += '<div id="photo3" style="text-align:left; position:absolute; width:640px; height:362px; top:50px; left:'+($(window).width()/2 -320)+'px;">';
	str += '<img style="padding:14px 10px" src="./images/photo_3.png"/>';
	str += '<div style="position:absolute; font-size:12px; top:150px; right:10px; width:150px; height:200px;">Printing machine</div>';
	str += '<div style="cursor:pointer; position:absolute; top:10px; right:10px; width:20px; height:20px;" onclick="$.unblockUI();"><img src="./images/close_btm.png" alt="close"/></div>';	
	str += '<div style="cursor:pointer; position:absolute; bottom:10px; right:10px; width:50px; height:20px;"><a href="javascript:showAboutusPhoto(\'photo2\')"><img style="border:none;" src="./images/previous_btm.png" alt="previous"/></a>&nbsp;<a href="javascript:showAboutusPhoto(\'photo4\')"><img style="border:none;" src="./images/next_btm.png" alt="next"/></a></div>';	
	str += '</div>';
*/	
	str += '<div id="photo4" style="text-align:left; position:absolute; width:640px; height:362px; top:50px; left:'+($(window).width()/2 -320)+'px;">';
	str += '<img style="padding:14px 10px" src="./images/photo_4.png"/>';
	str += '<div style="position:absolute; font-size:12px; top:150px; right:10px; width:150px; height:200px;">Another consignment of quality diaries leaves our factory on schedule</div>';
	str += '<div style="cursor:pointer; position:absolute; top:10px; right:10px; width:20px; height:20px;" onclick="$.unblockUI();"><img src="./images/close_btm.png" alt="close"/></div>';	
	str += '<div style="cursor:pointer; position:absolute; bottom:10px; right:10px; width:50px; height:20px;"><a href="javascript:showAboutusPhoto(\'photo2\')"><img style="border:none;" src="./images/previous_btm.png" alt="previous"/></a></div>';	
	str += '</div>';	
	
	$("#lightbox").html(str);
}