var currentBlock="";  
var divcount=4;
var activeBoxNumber=-1;
var selectedColor=new Array(divcount);
var clickXButton= true;

var ButterFly = {
	flyButterfly:function(title){
		document.write("<table border=0 width=600px><tr><td align=right>")
		for(var i=0;i<butterflyBlock.leftBlock.length;i++){
			if(butterflyBlock.leftBlock[i] && eval("block."+butterflyBlock.leftBlock[i])){
				document.write("<div>")
					this.buildLeaf(butterflyBlock.leftBlock[i],12,"small",title);
				document.write("</div>");
			}
		}
		document.write("</td><td width=265px>")
		for(i=0;i<butterflyBlock.rightBlock.length;i++){
			if(butterflyBlock.rightBlock[i] && eval("block."+butterflyBlock.rightBlock[i])){
				document.write("<div>")
					this.buildLeaf(butterflyBlock.rightBlock[i],12,"small",title);
				document.write("</div>");
			}
		}
		document.write("</td></tr></table>")
	},

	buildLeaf:function(blockName,chipwidth,type,title){
	var blockObj=eval("block."+blockName);
		var img=0;
		if(blockObj){
		if(type=="small"){
		if(title=='completeColor'){
		 	document.write("<div class='block' id='leaf' onMouseOver=\"this.className='blockhighlight'; mouseOver=1;\" onMouseOut=\"this.className='block'\" onClick=\"colorPallatePopup('"+contextPath+"/jsps/views/mcCompleteColorBlockZoomView.jsp?vgnextoid="+document.getElementById('channelId').value+"&bcStr="+bcStr+"', 'ColorPopUp',1010, 630,'"+blockName+"')\">")
		 } else if(title=='crossColor'){
		 	document.write("<div class='block' id='leaf' onMouseOver=\"this.className='blockhighlight'; mouseOver=1;\" onMouseOut=\"this.className='block'\" onClick=\"crossColorPopup('"+contextPath+"/jsps/views/mcCorssReferenceZoomview.jsp?vgnextoid="+document.getElementById('channelId').value+"', 'ColorPopUp',1010, 550,'"+blockName+"')\">")
		 }
		 for(var i=0;i<blockObj.length;i++){
			 document.write("<div class='row'>") 
			 for(var j=0;j<blockObj[i].length;j++){
					chip = eval("butterfly."+blockObj[i][j])
					if(chip && chip.type=='color'){
					document.write("<div class='chip' id='"+blockObj[i][j]+"' title='"+blockObj[i][j]+" "+ chip.colorname+"' style='border-left:12px solid "+chip.colorcode+";left:"+(j+img)*chipwidth+"'></div>");
					}
					else{
						if(chip && chip.type=='image'){
						document.write("<div class='image' id='"+blockObj[i][j]+"' style='left:"+(j+img)*chipwidth+"'><img src='"+chip.imagename+"' height='100%' width='100%'/></div>");
							img+=5;
						}
					}
				}
				document.write("</div>");
		 }
		 }
		 else{
			 document.write("<div class='block'  id='leaf'>")
			for(var i=0;i<blockObj.length;i++){
			 document.write("<div class='row'>") 
			 for(var j=0;j<blockObj[i].length;j++){
					chip = eval("butterfly."+blockObj[i][j])
					if(chip && chip.type=='color'){
						   document.write("<div class='chip' id='"+blockObj[i][j]+"' title='"+blockObj[i][j]+" "+ chip.colorname+"' style='background-color:"+chip.colorcode+"; left:"+(j+img)*chipwidth+"' onclick=\"selectColor('"+blockObj[i][j]+"')\" onMouseOver=\"selectColorChip('"+blockName+"','"+blockObj[i][j]+"')\">");
						   document.write("<div style='width:0px;height:100px;border-left:39px solid "+chip.colorcode+"'></div>");	
						   document.write("</div>");
						}
					else{
						if(chip && chip.type=='image'){
						var image=new String(chip.imagename);
						var imageName=image.replace('small_','big_');
						document.write("<div class='imageBig' id='"+blockObj[i][j]+"' style='left:"+(j+img)*chipwidth+"'><img id='kilzImage' src='"+imageName+"' height='100%' onMouseOver=\"selectColorChip('"+blockName+"','"+blockObj[i][j]+"')\" width='100%'/></div>");
							img+=5;
						}
					}
				}
				document.write("</div>")
			}
			document.write("</div>")
		}
	}
	
}
}

 function colorPallatePopup(pageURL, title,w,h,blockName) {
		currentBlock=blockName;		
		var left = ((screen.width - w)/2)-4;
		var top = (screen.height - h)/4;
		window.open(pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width='+w+', height='+ h + ", top=" + top + ", left=" + left);
			 
} 
	
function selectColorChip(blockname,chipname)
{ 
  deSelectColorChip(blockname);
  var div=document.getElementById(chipname);
  if(div.className=='imageBig'){  	
  	div.className='imageLarge';
  	var img = document.getElementById("kilzImage");
  	if(img){
  		img.src=imagePath+"large_kcc_logo.jpg";
  	}  	  	
  }
  else{  
  	div.className='chiphighlight';
  }
  
}

function moveout(evt,blockName)
{

	var mouseX=evt.clientX;
	var mouseY=evt.clientY;
	var div=document.getElementById("leaf");
	if(div){
		var top=div.offsetTop;
		var left=div.offsetLeft;
		var height=div.scrollHeight;
		var width=div.scrollWidth;
		
		if( mouseY<top || mouseY >(top+height))	{
		     deSelectColorChip(blockName);
		}
		else if( mouseX<left || mouseX >(left+width)){
			 deSelectColorChip(blockName);
		}
	}
}

function fillChildColorBox(title)
{   
    var selectedColorparent=GetColorsFromCookie("color");
    selectedColor=selectedColorparent;
    for (var  i=0;i<divcount;i++){
    	var tblObj=document.getElementById("captureTable" + i);
		var td1=tblObj.rows[0].cells[0];
	    var td2=tblObj.rows[1].cells[0];
	    var td3=tblObj.rows[2].cells[0];
	    if(selectedColorparent[i]!==null && selectedColorparent[i] !==""){
	    	var chip = eval("butterfly."+selectedColorparent[i])
	    	if(chip){
			td1.innerHTML=selectedColorparent[i];
		    td2.style.backgroundImage = '';
		    var colorCode=new String(chip.colorcode);
		    colorCode=colorCode.substring(1,colorCode.length);
		    td2.innerHTML="<div style='border-left: 186px solid #"+colorCode+"; width: 0px; height: 98px;'/>";
		    /*if(title=='print'){
		   		document.getElementById("image"+i).src=contextPath+"/jsps/views/common/imageCreator.jsp?colorcode="+colorCode+"";
		   	}
		   	else{
		   		td2.style.backgroundColor=chip.colorcode;
		   	}*/
		    td3.innerHTML=chip.colorname;
		    }
		    /*else if(title=='print'){
		    	document.getElementById("image"+i).src=contextPath+"/jsps/views/common/imageCreator.jsp?colorcode=ffffff";
		   }*/
		}
		/*else if(title=='print'){
			document.getElementById("image"+i).src=contextPath+"/jsps/views/common/imageCreator.jsp?colorcode=ffffff";
		}*/
	}
	ActiveBoxTOFill();	
 }
 var dcsExtColors = "";
 function fillParentColorBox(selectedColorchild,bredcrumb)
{
	var colorSelected=false;
	var confirmSubmit=true;
	for(var j=0;j<divcount;j++){
		if(selectedColorchild[j] && selectedColorchild[i]!=""){
			colorSelected=true;
		}
	}
	if(!colorSelected){
		confirmSubmit=confirm('You have selected nothing, which will get saved to your color selection');
		if(confirmSubmit){
			if(bredcrumb)//'${param['bcStr']}/Saved Colors'
				dcsMultiTrack('DCS.dcsuri',bredcrumb, 'WT.dl','12','DCSext.colorname',dcsExtColors);
			closeColorPopup();
		}
	}
	if(confirmSubmit){
		clickXButton=false;
		for (var  i=0;i<divcount;i++){
	            var tblObjParent=window.opener.document.getElementById("selectedColor"+i);
	            var tblObjCode=window.opener.document.getElementById("colorcode"+i);
	            var tblObjColor=window.opener.document.getElementById("color"+i);
	            var tblObjName=window.opener.document.getElementById("colorname"+i);
	                     
	          if(selectedColorchild[i] && selectedColorchild[i]!="")
	          {
	          		 tblObjParent.style.backgroundImage='';
		             var chip = eval("butterfly."+selectedColorchild[i]);
		             tblObjParent.title=selectedColorchild[i]+' '+chip.colorname;
		             tblObjCode.innerHTML=selectedColorchild[i];
		           	 tblObjColor.style.borderLeft="115px solid "+chip.colorcode;
		          	 tblObjName.innerHTML=chip.colorname;
		          	 dcsExtColors = dcsExtColors+selectedColorchild[i]+"-"+chip.colorname+";";
	        }else{
		            tblObjParent.style.backgroundImage='url('+imagePath+'kilzBrand_small.jpg)';
		            tblObjCode.innerHTML="";
		            tblObjColor.style.borderLeft="";
		            tblObjName.innerHTML="";  
	          }
	  }  			
	  		 dcsExtColors = dcsExtColors.substring(0,dcsExtColors.length-1);
	  		 window.opener.selectedColor=selectedColor;
	         SaveColorsTOCookie('color',selectedColor,7);
	        var flag=false;
			for(var i=0;i<divcount;i++){
				var bgImage=window.opener.document.getElementById('selectedColor'+i+'').style.backgroundImage;
				if(!bgImage || bgImage==''){
					flag=true;
				}
			}
			if(flag){
				window.opener.document.getElementById('print').disabled=false;
				window.opener.document.getElementById('clear').disabled=false;
			}
			else{
				window.opener.document.getElementById('print').disabled=true;
				window.opener.document.getElementById('clear').disabled=true;
			}		
			if(bredcrumb)//'${param['bcStr']}/Saved Colors'
			dcsMultiTrack('DCS.dcsuri',bredcrumb, 'WT.dl','12','DCSext.colorname',dcsExtColors);			
		}
 }
 
 function closeColorPopup(){
 	window.opener.focus();
	window.close();
 }
 
 function selectColor(chipName){
        if( activeBoxNumber>-1){
            var matchBlockNo=isValidateColor(chipName);
            if(matchBlockNo < 0 ){
		        selectedColor[activeBoxNumber]=chipName;
		        var tblObj=document.getElementById("captureTable" + activeBoxNumber);
				var td1=tblObj.rows[0].cells[0];
			    var td2=tblObj.rows[1].cells[0];
			    var td3=tblObj.rows[2].cells[0];
			   	var chip = eval("butterfly."+selectedColor[activeBoxNumber]);
				td1.innerHTML=selectedColor[activeBoxNumber];
				td2.style.backgroundImage = '';
				td2.innerHTML='<div style="border-left:186px solid '+chip.colorcode+'; width:0px; height:98px;"></div>';
				td3.innerHTML=chip.colorname;
			}
			else{
				alert("You have already selected this color at Block " + (matchBlockNo+1) ); 
			}
		}
		else{
		    alert("Select Block To change the Color" ); 
		}
  }
  
 function isValidateColor(chipName){
  var matchBlockNo=-1;
	  for(var i=0; i<divcount ;i++){
	  	if(selectedColor[i]==chipName){
	  		matchBlockNo=i;
	  		break;
	  	}
  }
  return matchBlockNo;
  }
  
 function ActiveBoxTOFill(){
   var activeBox=false;
   for (var  i=0;i<divcount;i++){
        var tblObj=document.getElementById("captureTable" + i);
		var td1=tblObj.rows[0].cells[0];
	  		if(td1.innerHTML==""){
	  		tblObj.className="activeBox";
	  		activeBoxNumber=i;
	  		activeBox=true;
	  		break;
	  	}
	}
	if(activeBox==false){
		var tblObj=document.getElementById("captureTable" + 0);
		tblObj.className="activeBox";
		activeBoxNumber=0;
	}
 }

function ActiveBox(number){
  for (var  i=0;i<divcount;i++){
       var tblObj=document.getElementById("captureTable" + i);
		if(number==i){
		         if(tblObj.className=="activeBox"){
		         	tblObj.className="deactiveBox";
		         	activeBoxNumber=-1;
		         }
		         else{
		         tblObj.className="activeBox";
		         activeBoxNumber=number;
		        }
		 } 
		 else{      
		  tblObj.className="deactiveBox"; 	  		
	  	}
	}
}

function deSelectColorChip(blockname){
	var blockObj=eval("block."+blockname);
	if(blockObj){
	for(var i=0;i<blockObj.length;i++){
	 for(var j=0;j <blockObj[i].length;j++){
        var div=document.getElementById(blockObj[i][j]);
        if(div.className=='imageLarge'){
        	document.getElementById("kilzImage").src=imagePath+"big_kcc_logo.jpg";
        	div.className='imageBig';        		   			   		
	   	}
	   	else if(div.className=='chiphighlight')	   		
	   		div.className='chip';	   	
	   }
    }
    }
 }
 
function removeColor(boxNumber){
	if(boxNumber>-1){
		var tblobj=document.getElementById("captureTable" + boxNumber);
		if(tblobj.rows[0].cells[0].innerHTML!=""){
			tblobj.rows[0].cells[0].innerHTML="";
			tblobj.rows[1].cells[0].innerHTML="";
			tblobj.rows[1].cells[0].style.backgroundImage='url('+imagePath+'kilzBrand.jpg)';
			tblobj.rows[2].cells[0].innerHTML="";
			selectedColor[boxNumber]="";			
		}		
	}
	else{
	 alert("Select Block To remove Color" ); 
	}
}
function resetColor(){		
	for(var i=0;i<divcount;i++){
		removeColor(i);		
	}
	if(activeBoxNumber!=0){
		ActiveBox(0);
	}
}
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+ date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca[i];
		while (c.charAt(0)==' ') {c = c.substring(1,c.length);}
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function eraseCookie(name) {
	createCookie(name,"",-1);
}

function GetColorsFromCookie(name){
	var value=readCookie(name);
	var color=new Array();
	if(value!=null && value !="")
	{ 
		color=value.split("^");		
    }
    return color;
}

function SaveColorsTOCookie(name,selectedColor,days){
	var value="";
	var str = "";
		for (var i=0; i<selectedColor.length;i++){
			if(selectedColor[i]){
				value=value+selectedColor[i]+"^";			
			}				
			else{
				value=value+"^";
			}
		}
		if(value!="")
		{
		   value=value.substring(0,value.length-1);
		}
	createCookie(name,value,days);
}

function FillColorFromCookie(){
    selectedColor=GetColorsFromCookie("color");
    fillParentColorBoxfromCookies(selectedColor);
}

function fillParentColorBoxfromCookies(selectedcookieColor)
{
    for (var  i=0;i<divcount;i++){
            var tblObjParent=document.getElementById("selectedColor"+i);
            var tblObjCode=document.getElementById("colorcode"+i);
            var tblObjColor=document.getElementById("color"+i);
            var tblObjName=document.getElementById("colorname"+i);
                     
          if(selectedcookieColor[i]!=null && selectedcookieColor[i]!="")
          {
	             tblObjParent.style.backgroundImage='';
	             var chip = eval("butterfly."+selectedcookieColor[i]);
	             tblObjParent.title=selectedcookieColor[i]+' '+chip.colorname;
	             tblObjCode.innerHTML=selectedcookieColor[i];
	           	 tblObjColor.style.borderLeft="115px solid "+chip.colorcode;
	          	 tblObjName.innerHTML=chip.colorname;      
        }else{
	            tblObjParent.style.backgroundImage='url('+imagePath+'kilzBrand_small.jpg)';
	            tblObjCode.innerHTML="";
	            tblObjColor.style.borderLeft="";
	            tblObjName.innerHTML="";  
          }
   }
 }
 
 
 
 //Methods and variables used for corss old colors
 var divId=1;
 var divWidth=0;
 var chipsCount=0;
 var maxColSize=21;
var crossOldColor = {
	buildLeaf:function(blockName,chipwidth){
	var blockObj=eval("block."+blockName)
		var img=0;
		if(blockObj){
			var colorIdList=blockObj;
			var newColorsTabContent = "";
			var colorID;
			var colorCode;
			var newColorName;
			var oldCode;
			var oldColorName;
			var count=0;
			for(var i=0;i<colorIdList.length;i++){	
				for(var j=0;j<colorIdList[i].length;j++)
					{
					colorID=colorIdList[i][j];
					if(eval("butterfly."+colorID).type=='image'){
						continue;
					}
					colorCode=eval("butterfly."+colorID).colorcode;
					newColorName=eval("butterfly."+colorID).colorname;
					oldCode=eval("butterfly."+colorID).oldcode;
					if(oldCode=='' || oldCode=='0'){
						oldCode='N/A'
					}
					oldColorName=eval("butterfly."+colorID).oldname;
					if(oldColorName=='' || oldColorName=='0'){
						oldColorName='N/A'
					}
					if(count%2==0){
						newColorsTabContent = newColorsTabContent + "<tr class='even'>"+"<td><div style='border-left:135px solid "+colorCode+";height:20px;width:0px;'></div></td>";
					}else{
						newColorsTabContent = newColorsTabContent + "<tr class='odd'>"+"<td><div style='border-left:135px solid "+colorCode+";height:20px;width:0px;'></div></td>"
					}
				newColorsTabContent = newColorsTabContent + "<td class='description' style='text-transform:uppercase;text-align: center;width:76px'>"+oldCode+"</td><td class='description' style='text-transform:uppercase;padding-left:30px'>"+oldColorName+"</td>"+"<td class='description' style='text-transform:uppercase;text-align: center'>"+colorID+"</td><td class='description' style='text-transform:uppercase;padding-left:30px'>"+newColorName+"</td></tr>";
				count++;
				}
			} 
			newColorsTabContent+="</table>";
			document.write(newColorsTabContent);
			}
		 }
}

 function crossColorPopup(pageURL, title,w,h,blockname) {
		currentBlock=blockname;
		var left = ((screen.width-w)/2)-4;
		var top = (screen.height-h)/2;
		var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
	} 
	
 //new colors
 var rowCount=0;
 function newcolorsTable(){
	var newColorsTabContent = "";
	var firstTR="<table id='newColorsTable' width='200' align='center' border='0' cellspacing='0' cellpadding='0' class='colortable'>"+
			"<tr>"+"<td  rowspan='2' align='center' ><div style='z-index:998;position:relative;width:122px;height:50px;background-color:gray;text-align:center;vertical-align:middle'><div style='z-index:999;width:122px;height:50px;line-height:50px;position:absolute;left:0px;top:0px;text-align:center;vertical-align:middle'><strong>Color Chip</strong> </div><div style='z-index:0;width:0px;height:50px;border-left:122px solid #CFD0D0;position:absolute;left:0px;top:0px'></div></td>"+
			"<td colspan='2'  align='center'><div style='z-index:998;position:relative;width:300px;height:25px;background-color:gray;text-align:center;vertical-align:middle'><div style='z-index:999;width:300px;height:25px;line-height:25px;position:absolute;left:0px;top:0px;text-align:center;vertical-align:middle'><strong>New Reference</strong></div><div style='z-index:0;width:0px;height:25px;border-left:300px solid #CFD0D0;position:absolute;left:0px;top:0px'></div></td></tr>";
	var secondTR=                 
			"<tr>"+"<td align='center'><div style='z-index:998;position:relative;width:70px;height:22px;background-color:gray;text-align:center;vertical-align:middle'><div style='z-index:999;width:70px;height:22px;line-height:22px;position:absolute;left:0px;top:0px;text-align:center;vertical-align:middle'><strong>ID</strong></div><div style='z-index:0;width:0px;height:22px;border-left:70px solid gray;position:absolute;left:0px;top:0px'></div></td>"+
			"<td style='padding-left:1px'><div style='z-index:998;position:relative;width:230px;height:22px;background-color:gray;text-align:center;vertical-align:middle'><div style='z-index:999;width:230px;height:22px;line-height:22px;position:absolute;left:0px;top:0px;text-align:center;vertical-align:middle'><strong>Name</strong></div><div style='z-index:0;width:0px;height:22px;border-left:230px solid gray;position:absolute;left:0px;top:0px'></div></tr>";
 	newColorsTabContent= firstTR + secondTR ;
 	var rows="";
 	for(var i=0;i<butterflyBlock.leftBlock.length;i++){
		if(butterflyBlock.leftBlock[i] && eval("block."+butterflyBlock.leftBlock[i])){
		newColorsTabContent+=createRows(butterflyBlock.leftBlock[i], rows);
		}
	}
	for(var i=0;i<butterflyBlock.rightBlock.length;i++){
		if(butterflyBlock.rightBlock[i] && eval("block."+butterflyBlock.rightBlock[i])){
		newColorsTabContent+=createRows(butterflyBlock.rightBlock[i], rows);
		}
	}
	newColorsTabContent+=rows+"</table>";
	document.getElementById("newColorsTab").innerHTML= newColorsTabContent;
}

//function defined for creating rows for new colors table
function createRows(blockName, rows){
	var objName=eval("block."+blockName);
	if(objName){
	var colorIdList=objName;
	var colorID;
	var colorCode;
	var colorName;
	for(var j=0;j<colorIdList.length;j++){	
		for(var k=0;k<colorIdList[j].length;k++){
			colorID=colorIdList[j][k];
			if(eval("butterfly."+colorID).oldcode =='' && eval("butterfly."+colorID).oldname =='' && eval("butterfly."+colorID).type=='color' ){
			colorCode=eval("butterfly."+colorID).colorcode;
			colorName=eval("butterfly."+colorID).colorname;
				if(rowCount%2==0){
					rows = rows + "<tr class='even'>"+"<td><div style='border-left:122px solid "+colorCode+";height:20px;width:0px;'></div></td>";
				}else{
					rows = rows + "<tr class='odd'>"+"<td><div style='border-left:122px solid "+colorCode+";height:20px;width:0px;'></div></td>"
				}
				rows = rows + "<td class='description' style='text-align:center'>"+colorID+"</td><td class='description' style='padding-left:30px'>"+colorName+"</td></tr>";
				rowCount++;
				}
			} 
		}
	}
	return rows;
}

//
var tempPageNumber=0;
function pagination(tableName,itemsPerPage) {
	this.tableName = tableName;
	this.itemsPerPage = itemsPerPage;
	this.currentPage= 1;
	this.pages =0;
	this.inited= false;
	this.init = function() {
					var rows = document.getElementById(this.tableName).rows.length;
					var records=(rows - 2);
					var noOfPages = records % this.itemsPerPage!=0?(records/this.itemsPerPage)+1:records/this.itemsPerPage; //Math.ceil(records /this.itemsPerPage);  
					this.pages= parseInt(noOfPages);
					this.inited= true;
				}
	
	this.showPageNav=function (pagerName, positionIdUp,positionIdDown,currPage) {
						if (! this.inited) {
							alert("not inited");
						return;
						}
					this.currentPage=currPage;	
					var pageNumbers=dottedPagination(this.pages,this.currentPage);
						
					var paginationUp=document.getElementById(positionIdUp);
					if(this.currentPage==1){
					var paginationHtml='<table id="paginationTab" cellpadding=2 cellspacing=0 border=0 ><tr><td><img class="leftarrow" alt="Previous Page" title="" border="0" src="'+imagePath+'left_whitearrow.gif" ></td>';
					}
					else{
					var paginationHtml='<table id="paginationTab" cellpadding=2 cellspacing=0 border=0 ><tr><td><a href="javascript:void(0);" onclick="' + pagerName + 'prev();"><img class="leftarrow" border="0" src="'+imagePath+'left_whitearrow.gif" title="'+prevButtnToolTip+'" alt="Previous Page"></a></td>';
					}
						for (var page= 0; page < pageNumbers.length; page++) {
							paginationHtml += '<td>';
							if(currPage == pageNumbers[ page ]){
								paginationHtml += '<b>'+pageNumbers[ page ]+'</b>'
							}else{
								if(pageNumbers[page] != '...'){
									paginationHtml += '<span  title="'+pageNumberToopTip+' '+pageNumbers[page]+'"  class= "pg-normal" onclick="'+pagerName+'.showPage('+pageNumbers[page]+');">'+pageNumbers[page]+ '</span>';
								}
								else{
									paginationHtml += '<span onclick="">'+pageNumbers[page]+ '</span>';
								}
							}
							paginationHtml += ' </td> ';
						}
					if(this.currentPage==this.pages){
					paginationHtml += '<td><img class="rightarrow" src="'+imagePath+'right_whitearrow.gif" border="0" title="" alt="Next Page"></td></tr></table>';
					}
					else{
					paginationHtml += '<td><a href="javascript:void(0);" onclick ="'+pagerName+'next();"> <img class="rightarrow" src="'+imagePath+'right_whitearrow.gif" border="0" title="'+nextButtnToolTip+'" alt="Next Page"></a></td></tr></table>';
					} 
					paginationUp.innerHTML=paginationHtml;
					
					var paginationDown=document.getElementById(positionIdDown);
					paginationDown.innerHTML=paginationHtml;
					
				}
	this.showPage = function(pageNumber) {
			if(pageNumber!='...'){
					if(tempPageNumber!=pageNumber){
						if (! this.inited) {
							alert("not inited");
						return;
						}
						this.showPageNav('pagination' , 'pageNavPosition','pageNavPosition1',pageNumber);
						var from= (pageNumber - 1) * this.itemsPerPage + 2;
						var to = from +this.itemsPerPage - 1;
						showRecords(from,to,this.tableName);
					}
					tempPageNumber=pageNumber;
				}			
			}
	}
	
function showRecords(from,to,tableName){
	var rows= document.getElementById(tableName).rows;
	for (var i=2; i < rows.length; i++) {
		if (i < from || i > to){ 
			rows[i].style.display = 'none';
		}else{
			rows[i].style.display = '';
		}
	}
}
function paginationprev(){
	if(pagination.currentPage>1){
		pagination.showPage(pagination.currentPage-1);
	}
}
function paginationnext(){
	if (pagination.currentPage < pagination.pages) {
		pagination.showPage(pagination.currentPage + 1);
	}
}

var pagination= new pagination('newColorsTable',20);
function showPagination(){
	pagination.init();
	pagination.showPageNav('pagination' , 'pageNavPosition','pageNavPosition1',1);
	pagination.showPage(1);
	
}
//
function dottedPagination(totalpage,currentpage){
	var pageNumbers ;
	if (totalpage > 0) {
            pageNumbers  = new Array();
			for (var i = 0; i < totalpage; i++) {
                pageNumbers[i]=parseInt(i) + 1;
            }
        }
	pageNumbers =((pageNumbers != null) && (pageNumbers.length > 1)) ? formatPageNumbers(pageNumbers,currentpage): pageNumbers;
	
	return pageNumbers;
}
function formatPageNumbers(pageNumbers,currentpage){
		var pageList = new Array();
        var formattedList = null;
		var flag1=false;
		var flag2=false;
		var pageNo=parseInt(currentpage);
		pagination.currentPage = currentpage;
        pageList[0]=pageNumbers[0];
        pageList[pageNumbers.length - 1]=pageNumbers[pageNumbers.length - 1];
		
		if (pageNumbers.length > 2) {
			formattedList = new Array();
                if (pageNo == pageNumbers[0] ) {
                    for (var i = 1; i <= (pageNo + 1); i++) {
                        pageList[i]=pageNumbers[i];
                    }
                }else if (pageNo ==pageNumbers[pageNumbers.length - 1]) {
						for (var i = pageNo - 3; i < (pageNumbers.length - 1); i++) {
						 pageList[i]=pageNumbers[i];
						}
				}else{
					for(var i=0;i<pageList.length;i++){
						if(pageList[i]==pageNumbers[pageNo - 2]){
							flag1=true;
						}
						if(pageList[i]==pageNumbers[pageNo]){
							flag2=true;
						}
					}
					if(!flag1){
						 pageList[pageNo - 2]=pageNumbers[pageNo - 2];
					}
					pageList[pageNo - 1]=pageNumbers[pageNo - 1];
					if(!flag2){
						pageList[pageNo]=pageNumbers[pageNo];
					}
				}
		
				var flag = true;
				for(i=0;i<pageList.length;i++){
					if(pageList[i]){
						flag = false;
						formattedList[formattedList.length] = pageList[i];
					}
					else if(!flag){
							formattedList[formattedList.length] = "...";
							flag = true;						
					}
				}
		} else {
            formattedList = pageList;
        }
return formattedList;

}

//function defined for displaying / hiding the print button in complete color
function showHidePrint()
{
	var flag=false;
	for(var i=0;i<divcount;i++){
		var bgImage=document.getElementById('selectedColor'+i+'').style.backgroundImage;
		if(bgImage==''){
			flag=true;
		}
	}
	if(flag){
		if(document.getElementById('print')){
			document.getElementById('print').disabled=false;
			document.getElementById('clear').disabled=false;
		}
	}
}

//function defined for action to be performed on the clicking of X Button of the browser
function checkCloseButton()
{
	if (clickXButton==true){
		window.opener.selectedColor=GetColorsFromCookie("color");
	}
}
function zoomImage(imgObj, path, count) {
	//var topspace = document.documentElement.scrollTop;
	var topspace = document.body.scrollTop;
	document.getElementById("zoomArea").innerHTML = "";
	//var description = document.getElementById("text" + count).innerHTML;
	var img = document.createElement("img");
	img.src = path;
	img.alt = imgObj.alt;
	img.title = imgObj.title;
	//var h = 208;//img.height;
	//var w = 360;//img.width;
	document.getElementById("container").style.display = "";
	//document.getElementById("container").style.visibility = "visible";
	document.getElementById("container").style.top = topspace + 60 + "px";
	var tr2 = document.getElementById("zoomArea");
	//tr2.style.height = h + 10 + "px";
	//tr2.style.width = w + 40 + "px";
	tr2.appendChild(img);
	//document.getElementById("detail").innerHTML = description;
}
function close_window() {
	document.getElementById("zoomArea").innerHTML = "";
	document.getElementById("container").style.display = "none";
	//document.getElementById("container").style.visibility = "hidden";
}
//