/* reference of product class
PProductClass ::  
	this.productrange //food processor, health car porduct......
	this.category //rice cooker, ......
	this.codename //model code
	this.image[0] //smallest thumbnail
	this.image[1] //small thumbnail
	
	this.spec[1, ...., 20] //spec 1 - 20, if "#" means break

	this.status //IsDiscon
	this.keyword //keywords
*/

/*
if ( PRODUCT_CLASS!=null ){
	var theProduct = PRODUCT_CLASS;
}else{
	alert('please allocate missing database !');
}*/

var productItemList = new handleSelectedItem( selectedItem(selectCategory) );

var theProduct = productItemList.itemclass; 

var imageRoot = 'images/pproducts/';
var largeRoot = imageRoot + 'plarge/';
var thumbRoot = imageRoot + 'pthumb/';

var plt_cat_img1 = "images/pproducts/plt-epb-prc11.png";
var plt_cat_img2 = "images/pproducts/plt-epb-prc12.png";

/////////////////////////pplist() -> id=PpList
function pplist() {
	var theHtm = '';
	
	var layoutHtm = '';

	layoutHtm += "<table width=180 border=0 cellpadding=0 cellspacing=0>";
	layoutHtm += "<tr>";
	layoutHtm += "<td colspan=5><img src=\""  +plt_cat_img1+  "\" width=180 height=22></td>";
	layoutHtm += "</tr>";
	layoutHtm += "<tr><td colspan=5 height=10></td></tr>";
	
	//The images + text arrangement in n rows//
	var thePpListImg = '';
	var thePpListCod = '';
	var d_totalpp = theProduct.length - 1;
	var step = 3;
	var d_totalrow = Math.floor(d_totalpp/step) + (d_totalpp%step);
	var spec = '';
	
	//loop level 1 : cc 
	for ( rr=1; rr<d_totalrow+1; rr++ ){
		for ( cc=0; cc<step; cc++ ){
			n = step*(rr-1) + cc + 1;
			//      n = (rr+cc) + 2 (rr-1)
			//  	n = (rr+cc) + (step-1)*(rr-1)  
			//	so, n = step(rr-1) + cc + 1 
			
			if( theProduct[n]!=null ) {
				if ( cc==0 ){ thePpListImg += "<tr><td width=21></td>" }
				thePpListImg += "<td width=46><img src=\"" +    thumbRoot + theProduct[n].image[0]    + "\" ";
				thePpListImg += "width=46 height=46 alt=\"" +    theProduct[n].codename    + "\"></td>";
				if ( cc >= step-1 ){ thePpListImg += "<td width=21></td></tr>" }
				
				if ( n>0 ){ 
					if ( n==1 ) { thePpListCod += "<p class=\"white-bo-11\">"; }
					thePpListCod += "<font class=\"darkgrey-bo-11\">" + n + ". </font>" + theProduct[n].codename + " " + spec;
					thePpListCod += "<br>";
					if ( n>=theProduct.length-1 ) { thePpListCod += "</p>"; }
				}
			} 
		}
	}
	//end the images + text arrangement in n rows//
	
	layoutHtm += thePpListImg;
	
	layoutHtm += "<tr><td colspan=5 height=10></td></tr>";
	layoutHtm += "<tr>";
	layoutHtm += "<td></td>";
	layoutHtm += "<td colspan=3>";

	layoutHtm += thePpListCod;

	layoutHtm += "</td>";
	layoutHtm += "<td></td>";
	layoutHtm += "</tr>";
	layoutHtm += "<tr><td colspan=5 height=20></td></tr>";
	layoutHtm += "</table>";
	
	theHtm = layoutHtm;
	
	return theHtm;
}
//

/////////////////////////ppthumbspec() -> id=PpThumbSpec
function ppthumbspec(){
	var theHtm = '';
	var theTDHtm = '';
	
	var thumbnailBox = new Array();
	thumbnailBox[0] = '';
	
	var d_totalpp = theProduct.length - 1; //total product in the list of proudct
	var step = 2; //how many columns 
	var d_totalrow = Math.floor(d_totalpp/step) + (d_totalpp%step); //total row tobe created
	var productThumbSpec = new Array(); //store the thumb and spec separately
	var qq=-1;
	var a= new Array();
	
	//Arranging the thumb and spec separately
	for ( mm=1; mm<d_totalpp+1; mm++ ){ 
		
		productThumbSpec[mm] = new Array(); //two level of array : 0 to handle the thumbnails; 1 to handle the specs
		for ( oo=0; oo<2; oo++ ){
			if ( oo==0 ){ //thumb table
			productThumbSpec[mm][oo] = '';
			productThumbSpec[mm][oo] += "<table width=100 border=0 cellpadding=0 cellspacing=0>";
			productThumbSpec[mm][oo] += "<tr>";
			
			productThumbSpec[mm][oo] += "<td colspan=5 height=100 valign=top><img src=\""+   thumbRoot+theProduct[mm].image[1]  +"\" ";
			
			productThumbSpec[mm][oo] += " width=100 height=100 alt=\""  +theProduct[mm].productrange+  "\"></td>";
			productThumbSpec[mm][oo] += "</tr>";
			productThumbSpec[mm][oo] += "<tr>";
			productThumbSpec[mm][oo] += "<td width=32 height=18 background=\"images/pproducts/plt-epb-21.png\" valign=middle align=center>";
			
			productThumbSpec[mm][oo] += "<font class=\"white-bo-12\">" +    mm    + "</font>";
			
			productThumbSpec[mm][oo] += "</td>";
			productThumbSpec[mm][oo] += "<td width=2></td>";
			productThumbSpec[mm][oo] += "<td width=32 valign=top><img src=\"images/pproducts/plt-epb-22a.png\" ";
			productThumbSpec[mm][oo] += " width=32 height=20></td>";
			productThumbSpec[mm][oo] += "<td width=2></td>";
			productThumbSpec[mm][oo] += "<td width=32 valign=top><img src=\"images/pproducts/plt-epb-23a.png\" ";
			productThumbSpec[mm][oo] += " width=32 height=20></td>";
			productThumbSpec[mm][oo] += "</tr>";
			productThumbSpec[mm][oo] += "</table>";
			}
			
			if ( oo==1 ){ //spec paragraph
			productThumbSpec[mm][oo] = '';
			productThumbSpec[mm][oo] += "<p class=\"grey666-normal-11\">";
			
			productThumbSpec[mm][oo] += "<b>"   +theProduct[mm].category+    "</b>";
			productThumbSpec[mm][oo] += "<font class=\"gold-bo-11\">";
			productThumbSpec[mm][oo] += "<br>( "   +theProduct[mm].codename+   " )</font>";
			
			productThumbSpec[mm][oo] += "<br><br>";
				for ( pp=0; pp<theProduct[mm].spec.length+1; pp++ ){
					if ( theProduct[mm].spec[pp] != '#' ){
						if ( theProduct[mm].spec[pp] != '--'){
							productThumbSpec[mm][oo] += "+ "   +theProduct[mm].spec[pp]+   "<br>";
						}
					}
					else if ( theProduct[mm].spec[pp] == '#' ){
						break;
					}
				}
			productThumbSpec[mm][oo] += "</p>";
			}
		}
	}
	
	var productCOLHtm = new Array(); //store the thumb and spec into one independent object
	productCOLHtm[0] = '';
	for ( mmm=1; mmm<d_totalpp+1; mmm++ ){ 
		productCOLHtm[mmm] = '';
		productCOLHtm[mmm] += "<table width=262 border=0 cellpadding=0 cellspacing=0 ";
		productCOLHtm[mmm] += " style=\"margin: 6px 6px 6px 6px\">";
		productCOLHtm[mmm] += "<tr>";
		productCOLHtm[mmm] += "<td width=100 valign=top>";

		productCOLHtm[mmm] += productThumbSpec[mmm][0];
		
		productCOLHtm[mmm] += "</td>";
		productCOLHtm[mmm] += "<td width=14 valign=top></td>";
		productCOLHtm[mmm] += "<td width=148 valign=top>";
		
		productCOLHtm[mmm] += productThumbSpec[mmm][1];
		
		productCOLHtm[mmm] += "</td>";
		productCOLHtm[mmm] += "</tr>";
		productCOLHtm[mmm] += "</table>";
//		alert( d_totalpp );
	}
	
	var a = "<tr><td width=274 height=20 bgcolor=#ffffff></td>";
	a+=		"<td width=2 bgcolor=#dadada></td>";
	a+=		"<td width=6></td>";
	a+=		"<td width=274 bgcolor=#ffffff></td>";
	a+=		"<td width=2 bgcolor=#dadada></td>";
	a+=		"</tr>";
			
	a+=		"<tr>";
	a+=		"<td colspan=2 width=274 height=2 bgcolor=#dadada></td>";
	a+=		"<td width=6></td>";
	a+=		"<td colspan=2 width=274 height=2 bgcolor=#dadada></td>";
	a+=		"</tr>";
			
	a+=		"<tr><td colspan=5 height=8></td></tr>";
	
	//To the Output ~ 
	for ( bb=1; bb<d_totalrow+1; bb++ ){ //how many rows to be created, by products

		if ( bb==1 ){
			theTDHtm += "<table width=558 border=0 cellpadding=0 cellspacing=0>";
			theTDHtm += "<tr>";
			theTDHtm += "<td colspan=5><img src=\""   +plt_cat_img2+   "\"></td>";
			theTDHtm += "</tr>";
			theTDHtm += "<tr><td colspan=5 height=6></td></tr>";
		}
		for ( cc=0; cc<step; cc++ ){ //how many columns to be created, by products
			if ( cc==0 ){ theTDHtm += "<tr>"; }
			n = step*(bb-1) + cc + 1;
			
			theTDHtm += "<td width=274 bgcolor=#ffffff valign=top>";
			
			if ( productCOLHtm[n]==null ){ productCOLHtm[n]=''; }
			
			theTDHtm += productCOLHtm[n];
			theTDHtm += "</td>";
			theTDHtm += "<td width=2 bgcolor=#dadada></td>";
			
			if ( cc==0 || cc%2 == 0 ){
				theTDHtm += "<td width=6></td>"
			}
			if ( cc >= step-1 ){ theTDHtm += "</tr>" + a; }
		}
		
		if ( bb >= d_totalrow ){ theTDHtm += "</table>";}
	}
	
	theHtm = theTDHtm;
	return theHtm;
}

/////////////////////////ppvisual() -> id=PpVisual_id
function ppvisual(){
	var theHtm = '';
	
	theHtm += "<table border=0 width=540 cellpadding=0 cellspacing=0>";
	theHtm += "<tr>";
	
	var pltcf1501_img = new Array();
	var pdc_shortname = theProduct[1].keyword[1][0];
	var image_format = new Array();

	if (theProduct[1].keyword[1][2]=='png'){
		image_format[0] = theProduct[1].keyword[1][2];
		image_format[1] = 'jpg';
	}
	else if (theProduct[1].keyword[1][2]=='jpg'){
		image_format[0] = theProduct[1].keyword[1][2];
		image_format[1] = 'png';
	}
	
	pltcf1501_img[0] = new Image();
	pltcf1501_img[0].src = 'http://www.pensonic.com/'+ imageRoot + 'plt-cf1501-' + pdc_shortname + '-01' + '.' + image_format[0];
//	alert(pltcf1501_img[0].src);
	pltcf1501_img[1] = new Image();
	pltcf1501_img[1].src = 'http://www.pensonic.com/'+ imageRoot + 'plt-cf1501-' + pdc_shortname + '-02' + '.' + image_format[1];
//	alert(pltcf1501_img[1].src);
	theHtm += "<td><img src=\""  +pltcf1501_img[0].src+  "\" height=175></td>";
	theHtm += "<td><img src=\""  +pltcf1501_img[1].src+  "\" height=175></td>";
	
	theHtm += "</tr></table>";
	
	return theHtm;
}


document.getElementById("PpVisual_id").innerHTML = ppvisual();
document.getElementById("PpList").innerHTML = pplist();

//theCategory show area condition
if ( selectedItem(selectCategory) == 'air con' ){
	//document.getElementById("PpThumbSpec").innerHTML = ppthumbspec_ac();
}else{
	document.getElementById("PpThumbSpec").innerHTML = ppthumbspec();
}