window.onload = init;
var d=document;
function init() {
	so_checkCanCreate();
}
document.write('<style>#nojavascript { display: none; }</style>');

function so_checkCanCreate() {
	// make sure the browser has images turned on. If they are, so_createCustomCheckBoxes will
	// fire when this small test image loads. otherwise, the user will get the hard-coded checkboxes
	testImage = d.body.appendChild(d.createElement("img"));

	// MSIE will cache the test image, causing it to not fire the onload event the next time the
	// page is hit. The parameter on the end will prevent this.
	testImage.src = "images/blank.gif?" + new Date().valueOf();
	testImage.id = "so_testImage";
	testImage.onload = so_createCustomCheckBoxes;
}

function so_createCustomCheckBoxes() {
	// bail out is this is an older browser
	if(!d.getElementById)return;
	// remove our test image from the DOM
	d.body.removeChild(d.getElementById("so_testImage"));
	// an array of applicable events that we'll need to carry over to our custom checkbox
	events = new Array("onfocus", "onblur", "onselect", "onchange", "onclick", "ondblclick", "onmousedown", "onmouseup", "onmouseover", "onmousemove", "onmouseout", "onkeypress", "onkeydown", "onkeyup");
	// a reference var to all the forms in the document

	frm = d.getElementsByTagName("form");
	// loop over the length of the forms in the document
	for(i=0;i<frm.length;i++) {
		// reference to the elements of the form
		c = frm[i].elements;
		// loop over the length of those elements
		for(j=0;j<c.length;j++) {
			// if this element is a checkbox, do our thing

			if(c[j].getAttribute("type") == "checkbox") {
				// hide the original checkbox
				c[j].style.position = "absolute";
				c[j].style.left = "-9000px";
				
				// create the replacement image
				n = d.createElement("img");
				n.setAttribute("class","chk");
				// check if the corresponding checkbox is checked or not. set the
				// status of the image accordingly
				if(c[j].checked == false) {
					n.setAttribute("src","images/browse-uncheck.gif");
					n.setAttribute("height","20");
					n.setAttribute("width","25");
					n.setAttribute("title","click here to select this option.");
					n.setAttribute("alt","click here to select this option.");
				} else {
					n.setAttribute("src","images/browse-check.gif");
					n.setAttribute("height","20");
					n.setAttribute("width","25");
					n.setAttribute("title","click here to deselect this option.");
					n.setAttribute("alt","click here to deselect this option.");
				}
				// there are several pieces of data we'll need to know later.
				// assign them as attributes of the image we've created
				// first - the name of the corresponding checkbox
				n.xid = c[j].getAttribute("name");
				// next, the index of the FORM element so we'll know which form object to access later

				n.frmIndex = i;
				// assign the onclick event to the image
				n.onclick = function() { so_toggleCheckBox(this,0);return false; }
				// insert the image into the DOM
				c[j].parentNode.insertBefore(n,c[j].nextSibling)
				// this attribute is a bit of a hack - we need to know in the event of a label click (for browsers that support it)
				// which image we need turn on or off. So, we set the image as an attribute!
				c[j].objRef = n;
				// assign the checkbox objects event handlers to its replacement image
				for(e=0;e<events.length;e++) if(eval('c[j].' +events[e])) eval('n.' + events[e] + '= c[j].' + events[e]);
				// append our onchange event handler to any existing ones.
				fn = c[j].onchange;
				if(typeof(fn) == "function") {
					c[j].onchange = function() { fn(); so_toggleCheckBox(this.objRef,1); return false; }
				} else {
					c[j].onchange = function () { so_toggleCheckBox(this.objRef,1); return false; }
				}
			}
		}
	}
}

function so_toggleCheckBox(imgObj,caller) {
	// if caller is 1, this method has been called from the onchange event of the checkbox, which means
	// the user has clicked the label element. Dont change the checked status of the checkbox in this instance
	// or we'll set it to the opposite of what the user wants. caller is 0 if coming from the onclick event of the image
	
	// reference to the form object
	formObj = d.forms[imgObj.frmIndex];
	// the name of the checkbox we're changing
	objName = imgObj.xid;
	// change the checked status of the checkbox if coming from the onclick of the image
	if(!caller)formObj.elements[objName].checked = !formObj.elements[objName].checked?true:false;
	// finally, update the image to reflect the current state of the checkbox.
	if(imgObj.src.indexOf("images/browse-check.gif")>-1) {
		imgObj.setAttribute("src","images/browse-uncheck.gif");
		imgObj.setAttribute("width","25");
		imgObj.setAttribute("height","20");
		imgObj.setAttribute("title","click here to select this option.");
		imgObj.setAttribute("alt","click here to select this option.");
	} else {
		imgObj.setAttribute("src","images/browse-check.gif");
		imgObj.setAttribute("width","25");
		imgObj.setAttribute("height","20");
		imgObj.setAttribute("title","click here to deselect this option.");
		imgObj.setAttribute("alt","click here to deselect this option.");
	}
}
function doSubmit(regionVal){
	//alert(regionVal);
	document.browseForm.region.value = regionVal;
	document.browseForm.submit();
}
function doBrowse(errorFlag){
	document.write('<form name="browseForm" action="browse.php" method="post">\n');
	document.write('<input type="hidden" name="region" value="">\n');
	document.write('<img src="images/browse-1.gif" class="pic" align="left"><p class="browse1">First select the kind of photos you want to search (check all you want) :</p>\n');
	document.write('<div class="photoTypes">\n');
	document.write('<div style="float:left;line-height:20px;border:0px solid #000;"><input type="checkbox" class="chk" name="headshots" value="1" ');
	if(errorFlag==0 || errorFlag==null){document.write('CHECKED');}
	document.write('style="float:left;"/></div>\n');
	document.write('<div style="float:left;line-height:20px;font-weight:800;">&nbsp;Headshots</div>\n');
	document.write('<div style="float:left;line-height:20px;margin-left:20px;"><input type="checkbox" class="chk" name="bodyshots" value="1"/></div>\n');
	document.write('<div style="float:left;line-height:20px;font-weight:800;">&nbsp;Bodyshots</div>\n');
	document.write('<div style="float:left;line-height:20px;margin-left:20px;"><input type="checkbox" class="chk" name="swimsuit" value="1"/></div>\n');
	document.write('<div style="float:left;line-height:20px;font-weight:800;">&nbsp;Swimsuit Shots</div>\n');
	document.write('</div>\n');
	if(errorFlag==1){document.write('<div style="clear:left;margin-left:80px;margin-top:16px;color:#990000;font-size:11px;font-weight:800;">** You must select at least one type of photo you want to see above.</div>\n');}
	document.write('<img src="images/browse-2.gif" class="pic" align="left" style="margin-top:20px;clear:both;"><p class="browse2">Now click on the US Region you wish to search below :</p>\n');
	document.write('<br><img src="images/region-map.gif" align="center" usemap="#usa" name="usmap" border=0 style="margin-bottom:20px;">');
	document.write('<map name="usa">\n');
	document.write('<area shape="POLY" href="javascript: void(0); doSubmit(\'west\');" onmouseover="document.usmap.src=region_west.src" onmouseout="document.usmap.src=region_map.src" ');
	document.write('coords="43,5,27,48,16,106,20,167,35,214,22,253,28,293,97,328,145,278,192,278,197,229,238,231,245,173,256,172,257,126,238,123,246,20,70,0,43,5">\n');
	document.write('<area shape="POLY" href="javascript: void(0); doSubmit(\'south\');" onmouseover="document.usmap.src=region_south.src" onmouseout="document.usmap.src=region_map.src" ');
	document.write('coords="192,278,197,229,238,231,245,173,256,172,338,173,339,179,367,176,387,181,393,181,395,176,398,171,399,168,404,167,410,159,428,153,443,140,469,143,485,121,487,127,540,116,566,141,565,216,531,254,540,340,511,337,466,293,326,312,310,345,192,278">\n');
	document.write('<area shape="POLY" href="javascript: void(0); doSubmit(\'midwest\');"  onmouseover="document.usmap.src=region_midwest.src" onmouseout="document.usmap.src=region_map.src" ');
	document.write('coords="256,172,338,173,339,179,367,176,387,181,393,181,393,181,395,176,398,171,399,168,404,167,410,159,428,153,443,140,469,143,485,121,480,99,441,45,330,21,246,20,238,123,257,126,256,172">\n');
	document.write('<area shape="POLY" href="javascript: void(0); doSubmit(\'northeast\');" ');
	document.write('onmouseover="document.usmap.src=region_northeast.src" onmouseout="document.usmap.src=region_map.src"');
	document.write(' coords="480,99,473,64,585,6,621,49,625,95,,566,141,540,116,487,127,480,99">\n');
	document.write('</map></form>');
}

region_map = new Image();
region_map.src = "images/region-map.gif";
region_west = new Image();
region_west.src = "images/region-west.gif";
region_midwest = new Image();
region_midwest .src = "images/region-midwest.gif";
region_south = new Image();
region_south.src = "images/region-south.gif";
region_northeast = new Image();
region_northeast.src = "images/region-northeast.gif";