var black=0;
var white=1;

var backgroundsdir="gallery/granite";
var backgroundid = "displaybg";
var imageid = "displayimg";

var backgrounds= new Array(
  new Array("bAmericanBlack.jpg",white,"American Black"),
  new Array("bAutumnRose.jpg",black,"Autumn Rose"),
//  new Array("bCherryHillBlack.jpg",white,"Cherry Hill Black"),
  new Array("bDustyRose.jpg",black,"Dusty Rose"),
//  new Array("bFoxHillBlack.jpg",white,"Fox Hill Black"),
  new Array("bHedquistPink.jpg",black,"Hedquist Pink"),
  new Array("bJetBlack.jpg",white,"Jet Black"),
  new Array("bMissouriRed.jpg",black,"Missouri Red"),
  new Array("bRoyalEmerald.jpg",white,"Royal Emerald"),
  new Array("bRubyRose.jpg",black,"Ruby Rose"),
  new Array("bSalisburyPink.jpg",black,"Salisbury Pink"),
  new Array("bSelectServiceDarkBlue.jpg",white,"Select Service Dark Blue"),
  new Array("bServiceSilverBlue.jpg",black,"Service Silver Blue"),
  new Array("bSilverCloud.jpg",black,"Silver Cloud"),
  new Array("bStAlbansPink.jpg",black,"St. Alban's Pink"),
  new Array("bAcademyBlack.jpg",white,"Academy Black"),
  new Array("bAutumnBrown.jpg",white,"Autumn Brown"),
  new Array("bCarnelian.jpg",white,"Carnelian"),
  new Array("bColonialRose.jpg",white,"Colonial Rose"),
//  new Array("bDiamondGray.jpg",black,"Diamond Gray"),
  new Array("bDiamondPink.jpg",white,"Diamond Pink"),
  new Array("bLakePlacidBlue.jpg",black,"Lake Placid Blue"),
  new Array("bMountainRed.jpg",white,"Mountain Red"),
  new Array("bRainbow.jpg",white,"Rainbow"),
//  new Array("bRockville.jpg",black,"Rockville"),
  new Array("bRoyalBlack.jpg",white,"Royal Black"),
  new Array("bRoyalImpala.jpg",white,"Royal Impala"),
  new Array("bRoyalMist.jpg",white,"Royal Mist"),
  new Array("bSierraWhite.jpg",black,"Sierra White"),
  new Array("bStarbrightBlack.jpg",white,"Starbright Black"),
  new Array("bStCloudGray.jpg",white,"St. Cloud Gray"),
  new Array("bSunsetRed.jpg",black,"Sunset Red"),
  new Array("bWausau.jpg",white,"Wausau"),
  new Array("bTunasGreen.jpg",white,"Tunas Green")
);
var curidx = 0;

var bgcoll = null;
var imgcoll = null;

var isIE=false;
var isNS=false;
var isDOM=false;

function browserSniffer () {
  if (document.getElementById)
    isDOM=true;
  else if (document.layers)
    isNS=true;
  else if (document.all)
    isIE=true;
}

function setBgColor (id, color) {
  if (isDOM)
    document.getElementById(id).style.backgroundColor = color;
  else if (isIE)
    document.all[id].style.backgroundColor = color;
}

function setImageColor (imageobj, color) {
  var path = imageobj.src;
  
  if(color == white) {
    path = path.replace("/black/","/white/");
  } else if(color == black) {
    path = path.replace("/white/","/black/");
  }
  imageobj.src=path;
}

function setBackgroundImage (obj, imageURL) {
	if (isDOM || isIE)
		obj.style.backgroundImage = imageURL == 'none' ? 'none' : 'url(' + imageURL + ')';
}

function getImageArray() {
	if(isDOM) {
		var tmp,i;
		bgcoll=new Array(0);    
    	tmp=document.getElementsByTagName("TD");
    
		for(i=0;i<tmp.length;i++) {
			if(tmp[i].name==backgroundid) {
				bgcoll[bgcoll.length]=tmp[i];
			}
		}    		
		imgcoll=document.getElementsByName(imageid);
	} else if(isIE) {
		bgcoll=document.all[backgroundid];
		imgcoll=document.all[imageid];
	}
}


function setAllBackgrounds (idx) {
	if(isDOM || isIE) {
		if(idx==null || idx < 0 || idx > backgrounds.length)
			idx=0;	
		
		curidx=idx;
		
		var bg=backgroundsdir + "/" + backgrounds[idx][0];
		var col=backgrounds[idx][1];
	
		if(!imgcoll || !bgcoll)
			getImageArray();
	  
		if(bgcoll) {
			for(var i=0;i<bgcoll.length;i++) {
				setBackgroundImage(bgcoll[i],bg);
			}
		}
		
		if(imgcoll) {
			for(var i=0;i<imgcoll.length;i++) {
				setImageColor(imgcoll[i],col);
			}
		}
	}
}

function setAllBackgroundsZero () {
	setAllBackgrounds(0);
}

function createDynBlastFrame () {
  document.write('<table border="0" align="center" cellspacing="0" cellpadding="0" width="500">');
  document.write('<tr><td colspan="2" class="dynblast" align="right"><font color="#3333cc">NEW!!</font> Click on granite color button and see how the designs will look on real stone!<br>&nbsp;</td></tr>');
  document.write('<tr><td class="dynblast" align="right">');
  document.write('<b>Select background:</b>&nbsp;'); 
  document.write('</td>');
  document.write('<td class="dynblast">');   
  document.write('<table bordercolor="#000000" border="1" align="center" cellspacing="0" cellpadding="0">');
  document.write('<tr>');
  for(var i=0; i<backgrounds.length; i++) {
    if((i>0) && ((i%15)==0)) {
      document.write('</tr><tr>');
    }
    document.write('<td class="dynblast2" width="18" height="18" background="');
    document.write(backgroundsdir + "/" + backgrounds[i][0]);
    document.write('" onClick="javascript:setAllBackgrounds(\'' + i + '\');">');
    document.write('<img width="18" height="18" border="0" src="../images/null.gif" alt="');
    document.write(backgrounds[i][2] + '"></td>');
  }
  document.write('</tr>');
  document.write('</table>');
  document.write('</td></tr>');
  document.write('</table>');
}

browserSniffer();
if(isDOM||isIE) {
	createDynBlastFrame();
	window.onload=setAllBackgroundsZero;
}