myimages=new Array();

datas=new Array(
'ffffff',
'c0c0c0',
'808080',
'404040',
'000000',

'ffaaaa',
'ff5555',
'ff0000',
'aa0000',
'550000',

'ffd4aa',
'ffaa55',
'ff8000',
'aa5500',
'552a00',

'ffffaa',
'ffff55',
'ffff00',
'aaaa00',
'555500',

'aaffaa',
'55ff55',
'00ff00',
'00aa00',
'005500',

'eaaaff',
'd855ff',
'c000ff',
'8000aa',
'400055',

'aad4ff',
'55aaff',
'0080ff',
'0055aa',
'002a55',

'000e34',
'0e3400',
'260034',
'a98710',
'd9d9d9',
'end');

xmax=20;
ymax=2;


// functions

function changeimage(towhat){
	if (document.images){
//		$('#carimage_top').css('display', 'none').attr('src', towhat.src).attr('src2', towhat.src).fadeIn(500);

		var imgsrc = $('#carimage_top').attr('src2');
		$('#carimage_top2').attr('src', imgsrc).attr('src2', imgsrc);

		var view ='<img id="carimage_top" name="carimage_top" alt="" src="'+towhat.src+'" src2="'+towhat.src+'" />';
		$('#carimg').css('display', 'none').html(view).fadeIn(500);


	}
}

function preloadimages(){
	for (i=0;i<preloadimages.arguments.length;i++){
		myimages[i]=new Image();
		myimages[i].src=preloadimages.arguments[i];
	}
}


// create html

htmls='';

htmls+='<table border="0" cellpadding="0" cellspacing="0" bgcolor="#111" width="640">';
htmls+='<tr>';
htmls+='<td>'; 
htmls+='<table cellspacing="0" width="100%" border="0" cellpadding="0" >';

for(y=0; y<ymax; y++){
	htmls += '<tr bgcolor="white">';
	for(x=0; x<xmax; x++){
		xy = y * xmax + x;
		colorcd = datas[y * xmax + x];
		htmls+= '<td class="tdcolor" colorcd="'+colorcd+'" width="30">';
		htmls+= '<a href="javascript:void(0)" onFocus="this.blur();" onclick="changeimage(myimages[' + xy + '])"><img src="images/colorpalette/'+colorcd+'_off.png" /></a>';
		htmls+= '</td>';
	}
	htmls+= '</tr>';
}

htmls+='</table>';
htmls+='<td>'; 
htmls+='<tr>';
htmls+='</table>';

document.write(htmls);