//  copyright © 2005-2006 www.isdntek.com
//  do not copy without permission

var quot="'"
var key=0
var pageCode=""
var galleryStyle="GalRtCol2"
//--td cell sizes
var tWd=100 
var tHt=75  
var fWd=400  
var fHt=300  
//--image sizes
var thWd=96
var thHt=72
var pWd=400
var pHt=300

var thmCnt=0
var trows=1

var fldLim=9
var imgratio = new Array(fldLim)
var photo = new Array(fldLim)
var thumb = new Array(fldLim)
var cap   = new Array(fldLim)
var cell  = new Array(fldLim)
var link  = new Array(fldLim)
var testImgFlag=false

var useCaptions=true
var useCol1=false
var useCol2=false
var LeadPhoto=0
var brdr=""
var galleryCode=""
var textColor="white"
var cellColor="black"
var borderColor="gray"
var creditColor="gray"
var preloader=""
var tstMsg='Are your image shapes distorted? Remember to click the "View Images" button in step #2. Then remake the gallery.<br>'

//---------------------------
// Color palette functions 
//---------------------------
	//--pass color up from application software or keyboard input
	//-- this function will also invoke the setDynaColor function with the palette results.
	//  	sendColor(color)


	//-- create the color table in the application
	//   set values as necessary or omit all values for default
	//-- cellWid, cellHt, vertical or empty, omit transparent button or empty to show button
	//makeColorTable("","","","") //--w,h,v,omit_trans


	//colorBrightness(color,shadeRatio) // percent brighter or darker where .5 is the actual color.
	// palettecolor will be a hex value or empty value.
	// The NO COLOR button returns a null color value.
	// The application should address empty values as an
	// attempt to remove a color and apply it accordingly.
	// HTML and CSS values for foreground elements, borders, 
	// and backgrounds must each be handled differently.
	// User inputs of improperly formatted color codes will
	// be trapped and return an alert message. 
	// The erroneous value will not pass to the application.

function setDynaColor(palettecolor){
	// This function must be in the application.
	// When the user clicks a color cell or holds down 
	// the mouse button while dragging over the palette, 
	// the colors will arrive here.  The application may 
	// use these value or the activity can be ignored by 
	// not writing any code for this function.
	setColor(palettecolor)
}


function setColor(palettecolor) { 
	// This function must be in the application.
   	// This value arrives when the user clicks the Apply button.
	if (palettecolor!=''){
		selectColor(palettecolor)
	}else{
		if (document.getElementById('selcol1').checked==true){document.getElementById('BorderColor').style.backgroundColor=""; document.getElementById('BorderColor').value=""}	 
		if (document.getElementById('selcol2').checked==true){document.getElementById('CellColor').style.backgroundColor=""; document.getElementById('CellColor').value=""}	 
		if (document.getElementById('selcol3').checked==true){document.getElementById('TextColor').style.backgroundColor=""; document.getElementById('TextColor').value=""}	 
	}

	MakeCodes()

}

function presetColors(){return //--let user choose
	document.getElementById('BorderColor').style.backgroundColor=borderColor; document.getElementById('BorderColor').value=borderColor	 
	document.getElementById('CellColor'  ).style.backgroundColor=cellColor; document.getElementById('CellColor'  ).value=cellColor	 
	document.getElementById('TextColor'  ).style.backgroundColor=textColor; document.getElementById('TextColor'  ).value=textColor	 
}

function makeCreditColor(){
	if (document.getElementById('BorderColor').value!=""){newcolor=document.getElementById('BorderColor').value}
	else {newcolor="#808080"}
	a=hex2rgb(newcolor)
	// R+B+G=440 seems to be a midpoint
	//if ( (R+B+G)>440 || (R+B+G)<256){creditColor="#808080"}else{creditColor="#FFFFFF";}
	if ( (R+B+G)>440 ){creditColor=colorBrightness(newcolor,.3)}else{creditColor=colorBrightness(newcolor,.7)}
}

function testTextColor(fntcolor){
	if (fntcolor=="" || fntcolor=="none"){
	  if(document.getElementById('BorderColor').style.backgroundColor==""){fntcolor="#000000"} else{
	    a=hex2rgb(colorcode(document.getElementById('BorderColor').style.backgroundColor))
	    if ( (R+B+G)>400){fntcolor="#000000"}else{fntcolor="#FFFFFF";}
	}}
	return colorcode(fntcolor)
}



function selectColor(nextColor){
	if (document.getElementById('selcol1').checked==true){document.getElementById('BorderColor').value=colorcode(nextColor);document.getElementById('BorderColor').style.backgroundColor=colorcode(nextColor)}	 
	if (document.getElementById('selcol2').checked==true){document.getElementById('CellColor').value=colorcode(nextColor);document.getElementById('CellColor').style.backgroundColor=colorcode(nextColor)} 	 
	if (document.getElementById('selcol3').checked==true){document.getElementById('TextColor').value=colorcode(nextColor);document.getElementById('TextColor').style.backgroundColor=colorcode(nextColor)}	
}




//====================

function makeInputFields() {
	var halfList=Math.floor(fldLim/2)
	InFields="<table><tr><td align=right valign=top><small>"
	for (var i=1; i<=fldLim; i++){
	  if (i==1 ){InFields=InFields+'<center><input type=button value="Clear &darr;" onclick="ClearGallery(1,'+halfList+');"></center><br>'}
	  if (i==halfList+1){InFields=InFields+'<center><input type=button value="Clear &darr;" onclick="ClearGallery('+(halfList+1)+','+fldLim+');"></center><br>'}

	  InFields=InFields+'<nobr>Photo '+i+' <input id=photo'+i+' type=text size=45 value="http://" onmousedown="clearHttp(this.id)"></nobr><br>'
	  InFields=InFields+'<nobr>Thumb '+i+' <input id=thumb'+i+' type=text size=45 value="http://" onmousedown="clearHttp(this.id)"></nobr><br>'
	  InFields=InFields+'<nobr>Caption '+i+' <input id=cap'+i+' type=text size=45 value="" ></nobr><br>'
	  InFields=InFields+'<nobr style="display:none"><font color=gray>Link '+i+'</font>   <input id=link'+i+' type=text size=45 value="http://" onmousedown="clearHttp(this.id)" disabled></nobr><br>'
	  InFields=InFields+'<br>'
	  if (i==halfList){InFields=InFields+'</small></td><td>&nbsp;</td><td align=right valign=top><small>'}
	}
	InFields=InFields+'</small></td></tr></table>'
	document.getElementById('inputFields').innerHTML=InFields
   	
}


function clearHttp(item) {
	if (document.getElementById(item).value=="http://"){document.getElementById(item).value=""}
}

function ClearGallery(a,b) {
	for (var i=a; i<=b; i++){
	document.getElementById('photo'+i).value=""
	document.getElementById('thumb'+i).value=""
	document.getElementById('cap'+i).value=""
	document.getElementById('link'+i).value=""
	}
}


function importInputs(){
	//--clear the arrays first
	for (var i=1; i<=fldLim; i++){thumb[i]=""; photo[i]=""; link[i]=""; cap[i]=""; imgratio[i]=1;}	

	useCaptions=false; useCol1=false; useCol2=false; LeadPhoto=0; thmCnt=0
	for (var i=1; i<=fldLim; i++){ cell[i]=1; 
	    if (document.getElementById('photo'+i).value=="http://" || document.getElementById('photo'+i).value=="")
		{photo[i]=""; cell[i]=0} else {photo[i]=document.getElementById('photo'+i).value; if (i<5){useCol1=true}else{useCol2=true }}
	    if (document.getElementById('thumb'+i).value=="http://" || document.getElementById('thumb'+i).value=="")
		{if (cell[i]==0) {thumb[i]=""} else {thumb[i]=photo[i]} } else {thumb[i]=document.getElementById('thumb'+i).value; }  
	    if (document.getElementById('cap'+i).value!=""){ cap[i]=document.getElementById('cap'+i).value.replace(/"/g,'&quot;'); useCaptions=true} else {cap[i]=""}
	    if (LeadPhoto==0 && cell[i]==1){LeadPhoto=i}; 
	    thmCnt=thmCnt+cell[i]
	    if (document.getElementById('link'+i).value=="http://" || document.getElementById('link'+i).value=="")
		{link[i]=""; } else {link[i]=document.getElementById('link'+i).value; }
	}
}


function replaceQuote(testWord){var pos=-1; var newWord="";
	for (i=0; i<testWord.length; i++){
	switch (testWord.substr(i,1)){
		case '"':newWord=newWord+'&amp#34;';   break
		case quot:newWord=newWord+'&amp#39;';  break
		default:newWord=newWord+testWord.substr(i,1)
	}}
	return newWord;
}

function LoadTestFields(){
	document.getElementById('photo1').value="http://www.isdntek.com/tagbot/misc/bambi.jpg"
	document.getElementById('thumb1').value="http://www.isdntek.com/tagbot/misc/bambi_100.jpg"
	document.getElementById('cap1').value="First test photo in the series."


	document.getElementById('photo2').value="http://www.isdntek.com/tagbot/misc/dustyroses.jpg"
	document.getElementById('thumb2').value=""
	document.getElementById('cap2').value="Second test photo in the series."

	document.getElementById('photo3').value="http://www.isdntek.com/tagbot/misc/toyplanenose.jpg"
	document.getElementById('thumb3').value=""
	document.getElementById('cap3').value="Third test photo in the series."

	document.getElementById('photo4').value="http://www.isdntek.com/tagbot/misc/florals1.jpg"
	document.getElementById('thumb4').value="http://"
	document.getElementById('cap4').value="Fourth test photo in the series."

	document.getElementById('photo5').value="http://www.isdntek.com/tagbot/misc/zuni.jpg"
	document.getElementById('thumb5').value="http://"
	document.getElementById('cap5').value="Fifth test photo in the series."

	document.getElementById('photo6').value="http://www.isdntek.com/tagbot/misc/ducks.jpg"
	document.getElementById('thumb6').value="http://www.isdntek.com/tagbot/misc/ducks_100.jpg"
	document.getElementById('cap6').value="Sixth test photo in the series."

	document.getElementById('photo7').value="http://www.isdntek.com/tagbot/misc/toyplanetop.jpg"
	document.getElementById('thumb7').value=""
	document.getElementById('cap7').value="Seventh test photo in the series."


	document.getElementById('photo8').value="http://www.isdntek.com/tagbot/misc/wreathside.jpg"
	document.getElementById('thumb8').value="http://"
	document.getElementById('cap8').value="Eighth test photo in the series."

	document.getElementById('photo9').value="http://www.isdntek.com/tagbot/misc/bolts1.jpg"
	document.getElementById('thumb9').value=""
	document.getElementById('cap9').value="Ninth test photo in the series."


}


function selectGallery(){
	document.getElementById('GalLtCol1' ).style.backgroundColor="white"
	document.getElementById('GalLtCol2' ).style.backgroundColor="white"
	document.getElementById('GalCtrCol0').style.backgroundColor="white"
	document.getElementById('GalRtCol1' ).style.backgroundColor="white"
	document.getElementById('GalRtCol2' ).style.backgroundColor="white"
	document.getElementById('GalTpRow2' ).style.backgroundColor="white"
	document.getElementById('GalCtrRow0').style.backgroundColor="white"
	document.getElementById('GalBtRow2' ).style.backgroundColor="white"
	document.getElementById('GalLtSl1'  ).style.backgroundColor="white"
	document.getElementById('GalRtSl1'  ).style.backgroundColor="white"
	document.getElementById('GalTpSl1'  ).style.backgroundColor="white"
	document.getElementById('GalBtSl1'  ).style.backgroundColor="white"
	document.getElementById('GalGrid4'  ).style.backgroundColor="white"
	document.getElementById('GalGrid9'  ).style.backgroundColor="white"
	document.getElementById(galleryStyle).style.backgroundColor="goldenrod"
	MakeCodes()
}

function imgPreloader() { 
	importInputs()
	var sampler=document.getElementById('showsampleimages')
	sampler.innerHTML="<br>"
    	for (var i=1; i<=photo.length; i++){if (photo[i]){
	sampler.innerHTML=sampler.innerHTML+' <img id="preview'+i+'" src="'+photo[i]+'" alt="[ missing photo '+i+' ]" title="photo '+i+'" style="background-color:red">'
    	}}
	testImgFlag=true
}

function readDim(){ 
	//we'll assign a ratio of w/h so that landscape photos are greater than one and portraits are less than one.
	//imgratio[i]

	maxThRatio=0; sameRatio=true; var tempRatio=0;
	for (var i=1; i<=fldLim; i++){
	if (document.getElementById('preview'+i)){
	    //--preview number matches photo number
	    imgratio[i]=(Math.round(1000*document.getElementById('preview'+i).offsetWidth/document.getElementById('preview'+i).offsetHeight))/1000
	    if (imgratio[i]>maxThRatio){maxThRatio=imgratio[i]} // the widest image ratio, for determining container shape based on height.
	    //-- use this flag to determine if images are all the same size // do we need this?
	    if (tempRatio==0) {tempRatio=imgratio[i]} else {if (imgratio[i]!=tempRatio){sameRatio=false} } 
	}}
}


function MakeCodes() {
	key=Math.round(1000*Math.random())
	makeCreditColor()
	importInputs()
	if (document.getElementById('BorderColor').value) {borderColor=colorcode(document.getElementById('BorderColor').style.backgroundColor)}else{borderColor="none"}
	if (document.getElementById('CellColor').value)   {  cellColor=colorcode(document.getElementById('CellColor').style.backgroundColor)}  else{  cellColor="none"}
	textColor=testTextColor(document.getElementById('TextColor').style.backgroundColor)

	readDim() // get the photo dimensions and decide what to build

	fWd=Math.ceil(document.getElementById("InputWid").value)
	fHt=Math.ceil(document.getElementById("InputHt").value)
	tWd=Math.ceil(fWd*.24)
	tHt=Math.ceil(fHt*.24)
	// we'll need to determine the number of photos and layout of the grid.
	// that will then determine the size of the cells.
	// each image will need to be resized proportionally to its original size to fit into the grid.
	// so it looks like fWd and tWid will refer to the cells and then we'll need an array to deal with the images.
	if (document.getElementById('Use3D').checked==true){brdr="1"}else{brdr="0"}
	if (galleryStyle=="GalTpSl1" || galleryStyle=="GalBtSl1" ||galleryStyle=="GalLtSl1" || galleryStyle=="GalRtSl1") {
		MakeScrollGallery()} 
	else if (galleryStyle=="GalGrid4" ||galleryStyle=="GalGrid9" ){MakeGrid()} 
	else {MakeGallery()}

}



function MakeGallery() {
	galleryCode=""; preloader=""
	MakeHeader()
	if (borderColor!="none" && borderColor!=""){bcolor='bgcolor="'+colorcode(borderColor)+'"'}else {bcolor=""}
	if (cellColor!="none"){ccolor='bgcolor="'+colorcode(cellColor)+'"'}else {ccolor=""}

	if (galleryStyle=="GalCtrCol0" || galleryStyle=="GalLtCol2"|| galleryStyle=="GalRtCol2"){rows=4; 
		if(useCol1==false || useCol2==false){cols=5; }else{cols=6; }; 
		if(useCol1==false && useCol2==false){cols=4; }}
	if (galleryStyle=="GalLtCol1"|| galleryStyle=="GalRtCol1"){if(useCol1==false){rows=1; cols=4; }else{rows=4; cols=5; }; }
	if (galleryStyle=="GalTpRow2"|| galleryStyle=="GalBtRow2" || galleryStyle=="GalCtrRow0"){cols=4; rows=1; }

	var csp=0
	if(fWd>fHt) {csp=Math.ceil(fWd*.01)+2-(brdr*2)} else {csp=Math.ceil(fHt*.01)+2-(brdr*2)}
	var bigWd = 4*(tWd+(brdr*2))+(3)*csp;  if (bigWd<fWd){bigWd=fWd}
	var bigHt = 4*(tHt+(brdr*2))+(3)*csp;  if (bigHt<fHt){bigHt=fHt}
	var tableWd = (cols*(tWd+csp+(brdr*2))+(csp+brdr*2))

	galleryCode=galleryCode+
	'\n<table name="ClicPicOnline" align="center" cellspacing="0" cellpadding="8" border="0" '+bcolor+'><tr><td align="center"> '+
	'\n<table align="center" cellspacing="'+csp+'" cellpadding="0" border="'+brdr+'" width="'+tableWd+'" '+
	'\n  oncontextmenu="return false" ondrag="return false" onmousedown="return false" >'


	//-- make top spacer row
	galleryCode=galleryCode+'\n <tr height="0">'
	for (i=1; i<=cols; i++){galleryCode=galleryCode+'<td width="'+tWd+'"></td>'}
	galleryCode=galleryCode+'</tr>'

	//-- make big pic
	resizeThumb(LeadPhoto)
	BigPicCode='\n<td width="'+bigWd+'" height="'+bigHt+'" clicpic="v2web" colspan="4" rowspan="'+rows+'" '+ccolor+' align="center" valign="middle">'
	BigPicCode=BigPicCode+'\n <img src="'+photo[LeadPhoto]+'" name="clicpicLg'+key+'" width="'+pWd+'" height="'+pHt+'" border="0"></td>'

	//--make columns
	if (galleryStyle=="GalCtrCol0" || galleryStyle=="GalLtCol2"|| galleryStyle=="GalRtCol2"){
    	for (i=1; i<=8/2; i++){
	  galleryCode=galleryCode+'\n<tr height="'+tHt+'" valign="middle">'

	  if (i==1 && (galleryStyle=="GalRtCol1"||galleryStyle=="GalRtCol2")){galleryCode=galleryCode+BigPicCode}
	  if (cell[i]==1 && useCol1==true){
		MakeCell(i)
		}else{if(useCol1==true){MakeBlank(i)}}

	  if (i==1 && (galleryStyle=="GalCtrCol0")){galleryCode=galleryCode+BigPicCode}

	  if (cell[i+8/2]==1 && useCol2==true){
		//if (galleryStyle=="GalRtCol2"||galleryStyle=="GalLtCol2"||galleryStyle=="GalCtrCol0"){
		MakeCell(i+8/2)
		}else{if(useCol2==true){MakeBlank(i+8/2)}}

	  if (i==1 && (galleryStyle=="GalLtCol1"||galleryStyle=="GalLtCol2")){galleryCode=galleryCode+BigPicCode}
	  galleryCode=galleryCode+'\n</tr>'
    	}}
	//--make rows
	if (galleryStyle=="GalCtrRow0" || galleryStyle=="GalTpRow2"|| galleryStyle=="GalBtRow2"){
	  if (galleryStyle=="GalBtRow2"){galleryCode=galleryCode+'\n<tr height="'+fHt+'">'+BigPicCode+'</tr>'};
	  if (useCol1==true){
	   	galleryCode=galleryCode+'\n<tr height="'+tHt+'"  valign="middle">'
    	  	for (i=1; i<=4; i++){if (cell[i]==1 ){MakeCell(i)}else{MakeBlank(i)}}
	  	galleryCode=galleryCode+'\n</tr>'
	  }
	  if (galleryStyle=="GalCtrRow0"){galleryCode=galleryCode+'\n<tr height="'+fHt+'">'+BigPicCode+'</tr>'};

	  if (useCol2==true){
	  	galleryCode=galleryCode+'\n<tr height="'+tHt+'" valign="middle">'
    	  	for (i=5; i<=8; i++){if (cell[i]==1 ){MakeCell(i)}else{MakeBlank(i)}}
	  	galleryCode=galleryCode+'\n</tr>'
	  }
	  if (galleryStyle=="GalTpRow2"){galleryCode=galleryCode+'\n<tr height="'+fHt+'">'+BigPicCode+'</tr>'};
    	}
	//--make splits
	if (galleryStyle=="GalLtCol1"|| galleryStyle=="GalRtCol1"){
	  if(useCol1==true){
   	      for (i=1; i<=4; i++){
	        galleryCode=galleryCode+'\n<tr height="'+tHt+'" align="center" valign="middle">'
	    	if (i==1 && galleryStyle=="GalRtCol1"){galleryCode=galleryCode+BigPicCode}
                if (cell[i]==1){
		  MakeCell(i)
		  }else{MakeBlank(i)}
	        if (i==1 && galleryStyle=="GalLtCol1"){galleryCode=galleryCode+BigPicCode}
  	        galleryCode=galleryCode+'</tr>'
	      }
	  }else{
	        galleryCode=galleryCode+'\n<tr height="'+tHt+'" >'
		galleryCode=galleryCode+BigPicCode+'</tr>'
	  }

	  if (useCol2==true){
	  	galleryCode=galleryCode+'\n<tr height="'+tHt+'" valign="middle">'
    	  	for (var i=5; i<=8; i++){
	  	  if (i==5 && galleryStyle=="GalLtCol1" && useCol1==true) {if (thmCnt==9 && cell[9]==1) {MakeCell(9)} else {MakeBlank(i)} }
		  if (cell[i]==1 ){MakeCell(i)}else{MakeBlank(i)}
		}
	  	if (i==9 && galleryStyle=="GalRtCol1" && useCol1==true) { ; if (thmCnt==9 && cell[9]==1) {MakeCell(9)} else {MakeBlank(9)} }
	  	galleryCode=galleryCode+'\n</tr>'
	  }
	}

	//--make captions
	fontSize=document.getElementById('FontSize').value
	if (document.getElementById('Bold').checked==true){fontwt="font-weight:bold;"}else{fontwt=""}
	galleryCode=galleryCode+'\n<tr><td colspan="'+cols+'" align="center" id=caption'+key+
				' style="border:0px; background-color:transparent; font-family:'+document.getElementById('FontFace').value+'; '+
				'font-size:'+fontSize+'; '+fontwt+' padding-bottom:5px; color:'+textColor+';">Click small picture to enlarge</td></tr></table>'
	//galleryCode=galleryCode+'\n<tr><td colspan="'+cols+'" align="center" '+ccolor+'><div id=caption'+key+' style="font-family:'+document.getElementById('FontFace').value+'; '+
	//			'font-size:'+fontSize+'; '+fontwt+' padding:3; color:'+textColor+'">Click small picture to enlarge </div></td></tr></table>'
	//galleryCode=galleryCode+'\n</table><div id=caption'+key+' style="font-family:'+document.getElementById('FontFace').value+'; '+
	//			'font-size:'+fontSize+'; '+fontwt+' padding:3; color:'+textColor+'">Click small picture to enlarge </div>'
	MakeCreditLine()
	galleryCode=galleryCode+'\n</td></tr></table>'

	//--footer
	MakePreloader()
	MakeFooter()
	if (testImgFlag==true){tMsg=""}else {tMsg=tstMsg}
	document.getElementById('galleryView').innerHTML=tMsg+galleryCode
	document.getElementById('HtmlCode').value=galleryCode
}


function MakeGrid() {

	if (thmCnt<=4){
		tWd=Math.ceil(fWd/2)-4
		tHt=Math.ceil(fHt/2)-4
		trows=2
		}
	else if (thmCnt<=9){
		tWd=Math.ceil(fWd/3)-4
		tHt=Math.ceil(fHt/3)-4
		trows=3
		}
	else if (thmCnt<=16){
		tWd=Math.ceil(fWd/4)-4
		tHt=Math.ceil(fHt/4)-4
		trows=4
		}
	else if (thmCnt<=25){
		tWd=Math.ceil(fWd/5)-4
		tHt=Math.ceil(fHt/5)-4
		trows=5
		}
		tHt=Math.ceil(tWd/(fWd/fHt))  

	galleryCode=""; preloader=""
	MakeHeader()
	if (borderColor!="none" && borderColor!=""){bcolor='bgcolor="'+colorcode(borderColor)+'"'}else {bcolor=""}
	if (cellColor!="none"){ccolor='bgcolor="'+colorcode(cellColor)+'"'}else {ccolor=""}

	fontFace=document.getElementById('FontFace').value
	fontSize=document.getElementById('FontSize').value
	if (document.getElementById('Bold').checked==true){fontwt="font-weight:bold;"}else{fontwt=""}

	cols=trows
	picGap=Math.ceil(fWd/100)
	var frame=2+Math.ceil(fWd/100) 
	var tableWd=( (tWd+2)*trows + (trows+1)*picGap  + frame*2 +brdr*2 +3)
	var tableHt=( (tHt+2)*trows + (trows+1)*picGap  + frame*2 +brdr*2 +3)
	galWid=tableWd+10+brdr*2
	//if (document.getElementById('UseWrap').checked==true){galWid=' width="'+(tableWd+10+brdr*2)+'"'}else{galWid=""}

	galleryCode=galleryCode+
	'\n<table name="ClicPicGrid" align="center" width="'+galWid+'" cellspacing="0" cellpadding="5" border="0" '+bcolor+'><tr>'+
	'\n  <td align="center" style="font-family:'+fontFace+',arial; font-size:'+fontSize+'px; '+fontwt+'color:'+textColor+';"> '+
	'\n  Click to enlarge ... <span onclick="document.getElementById('+quot+'ClicPic'+key+quot+').style.display='+quot+'none'+quot+'; '+
  	'\n  document.getElementById('+quot+'thumbgroup'+key+quot+').style.display='+quot+'block'+quot+';"> Click again to return</span>'+

	'\n<table align="center" cellspacing="'+frame+'" cellpadding="0" border="'+brdr+'" width="'+tableWd+'" height="'+tableHt+'" >'+      
	'\n  <tr ><td align="center" valign="middle" '+ccolor+
	'\n  oncontextmenu="return false" ondrag="return false" onmousedown="return false" >'+
	'\n<div id=thumbgroup'+key+''+ 
  	'\n  onclick="document.getElementById('+quot+'thumbgroup'+key+quot+').style.display='+quot+'none'+quot+' ; '+
  	'\n  document.getElementById('+quot+'ClicPic'+key+quot+').style.display='+quot+'block'+quot+'; ">'

	//-- make grid
	galleryCode=galleryCode+'\n<table border=0 cellpadding=0 cellspacing='+picGap+' >'
	frontloader=""
	endloader=""
	startImg=""
	var a=0
	for (i=1; i<=cell.length; i++){ if (cell[i]>0 ){a++
	    if (a%trows==1){galleryCode=galleryCode+'<tr>'}

		if (imgratio[i] >= tWd/tHt) {thWd=tWd; pWd=fWd; thHt=Math.round(thWd/imgratio[i]); pHt=Math.round(pWd/imgratio[i]); }else
		{thHt=tHt; pHt=fHt; thWd=Math.round(thHt*imgratio[i]); pWd=Math.round(pHt*imgratio[i]);}
		var title=cap[i]; if (cap[i]=="") {title=a}
	    	if (a==1){startImg='src="'+photo[i]+'" width="'+pWd+'" height="'+pHt+'"' }

		galleryCode=galleryCode+
		'\n<td width="'+(tWd+2)+'" height="'+(tHt+2)+'" align="center" valign="middle">'+
		'\n <a href="'+photo[i]+'" '+ 
		'\n  title="'+title+'" '+ 
		'\n  onclick="bigPic=document.getElementById('+quot+'ClicPic'+key+quot+');  '+ 
		'\n  document.getElementById('+quot+'picCaption'+key+quot+').innerHTML=this.title; '+
		'\n  bigPic.src=this.href; bigPic.width='+pWd+'; bigPic.height='+pHt+'; '+
		'\n  return false;"> '+ 
		'\n <img src="'+thumb[i]+'"  '+ 
		'\n  border=0 width='+(thWd)+' height='+(thHt)+'></a></td>' 
	    if (a%trows==0){galleryCode=galleryCode+'</tr>'}
	    if (photo[i]!=thumb[i]) {
		  frontloader=frontloader+'\n  <img src="'+photo[i]+'">'
		  endloader=endloader+'\n  <div style="background-image:url('+photo[i]+')"></div>'
	    }
	}}
	if (a%trows!=0){galleryCode=galleryCode+'</tr>'} //add the closer for odd remainders
	galleryCode=galleryCode+'\n</table></div>'



	//-- make big pic
	galleryCode=galleryCode+'\n<img id=ClicPic'+key+' name="clicpicLg'+key+'" title="click to return" \n  '+startImg+
  	'\n  style="display:none; border:0px solid black;" galleryimg="no" clicpic="v2web" '+
  	'\n  onclick="this.style.display='+quot+'none'+quot+'; document.getElementById('+quot+'thumbgroup'+key+quot+').style.display='+quot+'block'+quot+';'+
  	'\n  document.getElementById('+quot+'picCaption'+key+quot+').innerHTML='+quot+'Click to Enlarge'+quot+';">'+
	'\n</td></tr></table>'

	//--make captions
	galleryCode=galleryCode+'\n<div id=picCaption'+key+' style="margin-bottom:5px; width:'+tableWd+'px;">Click to Enlarge</div>'
	//galleryCode=galleryCode+'\n<tr><td colspan="'+cols+'" align="center" id=picCaption'+key+
	//			' style="border:0px; background-color:transparent; font-family:'+document.getElementById('FontFace').value+'; '+
	//			'font-size:'+fontSize+'; '+fontwt+' padding-bottom:5px; color:'+textColor+';">Click to Enlarge</td></tr></table>'
	MakeCreditLine()
	galleryCode=galleryCode+'\n</td></tr></table>'
	
	//--mouseover styles
	galleryCode=galleryCode+
	'\n<style> '+
	'\n  div#thumbgroup'+key+' a {display:block} '+
	'\n  div#thumbgroup'+key+' a:link,div#thumbgroup'+key+' a:visited {border:1px solid '+cellColor+'} '+
	'\n  div#thumbgroup'+key+' a:hover,div#thumbgroup'+key+' a:active {border:1px solid '+borderColor+'} '+
	'\n</style>'

	//--preloader and styles
	//preloader=frontloader
	preloader=endloader 
	MakePreloader()
	//--footer
	MakeFooter()


	if (testImgFlag==true){tMsg=""}else {tMsg=tstMsg}
	document.getElementById('galleryView').innerHTML=tMsg+galleryCode
	document.getElementById('HtmlCode').value=galleryCode
}

function MakePreloader(){
	galleryCode=galleryCode+
	'\n<!-- large image preloader, backgrounds often load after other page content -->\n'+
	//'\n<!-- large image preloader, images load when this code is encountered -->\n'+
	'<div style="display:none">'+preloader+'\n</div>'+
	'\n<!-- end preloader -->'
}

function MakeHeader(){
	galleryCode=galleryCode+
	'\n<!--  ========= Clic*Pic Thumbnail Gallery  ========== -->'+
	'\n<!--   HTML generated at Clic*Pic(tm) Online v.2.web   -->'+
	'\n<!--           copyright 2003-2006 © ISDN*tek          -->'+
	'\n<!--                   www.isdntek.com                 -->'+
	'\n<!--  ================================================ -->'

}

function MakeFooter(){
	galleryCode=galleryCode+
	'\n<!--  ================================================ -->'+
	'\n<!--       HTML generated at Clic*Pic(tm) Online       -->'+
	'\n<!--           copyright 2003-2006 © ISDN*tek          -->'+
	'\n<!--                    www.isdntek.com                -->'+
	'\n<!--  =========== End of Clic*Pic Gallery ============ -->'+
	'\n'
}

function resizeThumb(i){
	//--define thWd, pWd, thHt, pHt
	if (imgratio[i] >= tWd/tHt) {thWd=tWd; pWd=fWd; thHt=Math.round(thWd/imgratio[i]); pHt=Math.round(pWd/imgratio[i]); }else
	{thHt=tHt; pHt=fHt; thWd=Math.round(thHt*imgratio[i]); pWd=Math.round(pHt*imgratio[i]);}
}

function MakeCell(i){
	resizeThumb(i)
	galleryCode=galleryCode+'\n<td align="center"width="'+tWd+'" height="'+tHt+'" '+ccolor+'>'
	galleryCode=galleryCode+'\n <a href="'+photo[i]+'"'
	galleryCode=galleryCode+'\n onclick="bigPic=document.clicpicLg'+key+'; bigPic.src='+quot+photo[i]+quot+';'+
				'\n bigPic.width='+pWd+'; bigPic.height='+pHt+';'
	//if (useCaptions==true){
	if (cap[i]=="") {caption='Click small picture to enlarge'}else {caption=cap[i]}
	galleryCode=galleryCode+'\n document.getElementById('+quot+'caption'+key+quot+').innerHTML='+quot+caption+quot+';'
	//}
	galleryCode=galleryCode+' return false;">'
	galleryCode=galleryCode+'\n <img src="'+thumb[i]+'" width='+thWd+' height='+thHt+' border="0"></a></td>'
	if (photo[i]!=thumb[i]) {
		frontloader='\n  <img src="'+photo[i]+'">'
		endloader='\n  <div style="background-image:url('+photo[i]+')"></div>'
		preloader=preloader+endloader 
	}

}
function MakeBlank(i){
	galleryCode=galleryCode+'\n<td width="'+tWd+'" height="'+tHt+'" ></td>'
}


function MakeScrollGallery() {
	if (borderColor!="none"){bcolor='bgcolor="'+colorcode(borderColor)+'"'}else {bcolor=""}
	if (cellColor!="none"){ccolor='bgcolor="'+colorcode(cellColor)+'"'}else {ccolor=""}

	galleryCode=""; preloader=""
	MakeHeader()
	galleryCode=galleryCode+'\n<table name=SlideshowOuterTable  align="center" border="'+brdr+
		'" cellspacing="4" cellpadding="5" style="background-color:'+borderColor+'; "><tr><td align="center" '+
		' oncontextmenu="return false" ondrag="return false" onmousedown="return false" >'

	//--main photo, add border thickness to large cell size
	if (borderColor=="none" || borderColor=="") {outline="white"}else{outline=borderColor}
	resizeThumb(LeadPhoto)
	var lgCell='\n<td align="center" width="'+(fWd+(4*brdr*2))+'" height="'+(fHt+(4*brdr*2))+'">'  +
	'\n <img src="'+photo[LeadPhoto]+'" id="clicpicLg'+key+'" clicpic="v2web" width="'+pWd+'" height="'+pHt+'"'  +
	'\n  alt="Click to Enlarge" style="border:'+(4*brdr)+'px ridge '+outline+'" ></td>'


	switch (galleryStyle){
	    case  "GalTpSl1" : { //top scroller
	  	galleryCode=galleryCode+'\n<table width="'+(fWd+8*brdr+5*2)+'"  border="0" cellspacing="5" cellpadding="0" ><tr>';
		MakeScrollSlider();
		galleryCode=galleryCode+'\n </tr><tr><td>';
		MakeScrollCaption();
		galleryCode=galleryCode+'</td></tr><tr valign="top">'+lgCell+'</tr><tr><td align=center>';
				};break; 		
	    case  "GalBtSl1" : { //bottom scroller
		galleryCode=galleryCode+'\n<table width="'+(fWd+8*brdr+5*2)+'"  border="0" cellspacing="5" cellpadding="0" >';
		galleryCode=galleryCode+'<tr valign="bottom">'+lgCell+'</tr><tr><td>';
		MakeScrollCaption();
		galleryCode=galleryCode+'\n </td></tr><tr>';
		MakeScrollSlider();
		galleryCode=galleryCode+'</tr><tr><td align=center>';
	    			}; break;  			
	    case  "GalLtSl1" : { //left scroller
	  	galleryCode=galleryCode+'\n<table width="'+(fWd+8*brdr+ tWd+22+4*brdr +5*3)+'"  border="0" cellspacing="5" cellpadding="0" ><tr>';
		MakeScrollSlider();
		galleryCode=galleryCode+lgCell+'</tr><tr><td colspan=2>';
		MakeScrollCaption();
		galleryCode=galleryCode+'</td></tr><tr><td colspan=2 align=center>';
				};  break; 	
	    case  "GalRtSl1" : { //right scroller
	  	galleryCode=galleryCode+'\n<table width="'+(fWd+8*brdr+ tWd+22+4*brdr+ 5*3)+'"  border="0" cellspacing="5" cellpadding="0" ><tr>';
		galleryCode=galleryCode+lgCell;
		MakeScrollSlider();
		galleryCode=galleryCode+'</tr><tr><td colspan=2>';
		MakeScrollCaption();
		galleryCode=galleryCode+'</td></tr><tr><td colspan=2 align=center>';
				}; break; 
	}



	//--credits
	MakeCreditLine()

	galleryCode=galleryCode+'\n</td></tr></table></td></tr></table>'
	MakePreloader()
	MakeFooter()
	if (testImgFlag==true){tMsg=""}else {tMsg=tstMsg}
	document.getElementById('galleryView').innerHTML=tMsg+galleryCode
	document.getElementById('HtmlCode').value=galleryCode
}

function MakeScrollSlider() {	//--slider
	frontloader=""
	endloader=""

	//if (galleryStyle=="GalTpSl1" || galleryStyle=="GalBtSl1"){
	//  galleryCode=galleryCode+'<td align=center width="'+fWd+'" height="'+(tHt+22+4*brdr+2)+'">'}
	//else{ galleryCode=galleryCode+'<td align=center width="'+(tWd+22+4*brdr)+'" height="'+fHt+'">'}
	galleryCode=galleryCode+'<td align=center>'
	if (galleryStyle=="GalTpSl1" || galleryStyle=="GalBtSl1")
		{nobr="nobr";   spacer="hspace"; dim="width:"+(fWd+8*brdr)+"px; height:"+(tHt+22+4*brdr+2)+"px;"; }
	    else{nobr="vslide"; spacer="vspace"; dim="width:"+(tWd+22+4*brdr)+"px; height:"+(fHt+8*brdr)+"px;";   }
	galleryCode=galleryCode+'\n <div id="theSlider" style="overflow:auto; '+dim+' scrollbar-base-color:'+borderColor+'; ">'+
	'\n <'+nobr+'>'
	if (borderColor=="none" || borderColor=="") {outline="white"}else{outline=borderColor}

        for (var i=1; i<=9; i++){ if (cell[i]){
	  resizeThumb(i)
	  if (cap[i]=="") {caption='Click to enlarge'}else {caption=cap[i]}
	  galleryCode=galleryCode+'\n<a href="'+photo[i]+'"\n  onclick="bigPic=document.getElementById('+quot+'clicpicLg'+key+quot+'); '+
	  '\n  bigPic.src='+quot+photo[i]+quot+'; bigPic.width='+pWd+'; bigPic.height='+pHt+'; '+
	  '\n  document.getElementById('+quot+'caption'+key+quot+').innerHTML='+quot+caption+quot+'; '+
	  '\n  return false;"><img src="'+thumb[i]+'" width="'+thWd+'" height="'+thHt+'" '+spacer+'="2" border="0" style="border:'+(2*brdr)+'px ridge '+outline+'" '+
	  '\n  src="'+thumb[i]+'"  '+
	  '></a>'
	  if (photo[i]!=thumb[i]) {
		  frontloader=frontloader+'\n  <img src="'+photo[i]+'">'
		  endloader=endloader+'\n  <div style="background-image:url('+photo[i]+')"></div>'
	  }
        }}
	galleryCode=galleryCode+'\n</'+nobr+'></div></td>'
	preloader=endloader
}


function MakeScrollCaption(){
	fontSize=document.getElementById('FontSize').value
	if (document.getElementById('Bold').checked==true){fontwt="font-weight:bold;"}else{fontwt=""}
	galleryCode=galleryCode+'\n <p style="width:100%;  font-family:'+document.getElementById('FontFace').value +'; '+
	'font-size:'+fontSize+'; '+fontwt+
	'\n  background-color:transparent; color:'+textColor+'; text-align:center" id="caption'+key+'" >Click to Enlarge </p> \n'
}

function MakeCreditLine(){
	galleryCode=galleryCode+'\n<div style="font-family:arial,helvetica,sans-serif; font-size:10px; color:'+creditColor+';">'+
	'<span style="font-size:1pt; display:none;">ClicPicO</span> '+
	'\nClick small picture to enlarge. '+
	'\n<nobr>&nbsp;<a href="http://www.isdntek.com/tagbot/gallery.htm" target="_blank" title="free Clic*Pic Gallery from www.isdntek.com">'+
	'<font color="'+creditColor+'">ClicPic</font></A> Gallery Software.</nobr></div>'
}


function buttonMouseDown(element){
	document.getElementById(element).style.borderLeftColor='gray'
	document.getElementById(element).style.borderTopColor='gray'
	document.getElementById(element).style.borderRightColor='white'
	document.getElementById(element).style.borderBottomColor='white'
}
function buttonMouseUp(element){
	document.getElementById(element).style.borderLeftColor='white'
	document.getElementById(element).style.borderTopColor='white'
	document.getElementById(element).style.borderRightColor='gray'
	document.getElementById(element).style.borderBottomColor='gray'
}

function ButtonEvents() {
}
//--end