/*
this array is used for the alt/title attributes on the dual-image select imagery.
*/

var dynImageAlts = new Array();

dynImageAlts['animals'] = "Designs with animals, pets, birds, bugs, wildlife, fantasy and sea creatures.";
dynImageAlts['art_music'] = "Designs with art periods, musical instruments and abstract patterns.";

dynImageAlts['food_nature'] = "Designs with flowers, food, drinks, desserts, fruit, trees, leaves, planets.";

dynImageAlts['hobbies_lifestyles'] = "Designs with hobbies, interests, crafts, lifestyles, clothing and collectibles.";
dynImageAlts['letters'] = "Designs with monogram letters, initials and Greek alphabet characters.";
dynImageAlts['numbers'] = "Designs with numbers for anniversary, birthday or milestone event.";
dynImageAlts['occupations'] = "Designs for gifts with occupations, professional careers and work themes.";
dynImageAlts['religions_beliefs'] = "Designs for gifts featuring religious and belief based themes.";
dynImageAlts['signs_symbols'] = "Designs with popular symbols, horoscope signs, Egyptian and Chinese characters.";
dynImageAlts['sports_games'] = "Designs for gifts featuring sports, games and recreational themes.";
dynImageAlts['universal_themes'] = "Designs with popular universal themes, traditional patterns, anatomy, landmarks.";






function noValidation()	{
//	alert('got here');
	return true
	}




/*
counts the number of elements inside the specified ID(CID = id of some container element, such as a div)
ETYPE = Element Type
used in the handleTabs function as skewedvalidation
*/

function countElements(CID,ETYPE){
	var e = document.getElementById(CID);
	var i=0, c =0;
	while(e.getElementsByTagName(ETYPE)[i++]) c++;
	return c;
	}
	
	
	


/*
used in the json option superclass IMAGESELECT_QTYBOXGRID_WNONFIXED_TABS
pretty basic tab functionality.  sets all the classes to normal, then change the 'focusTab' to 'active'
and does the same thing for the tab content divs.
*/
function handleTabs(focusTab)	{
	liCount = countElements('tabset_tabs_container','li');
	for(i = 1; i <= liCount; i++)	{
		if($('tab'+i))	{
			$('tab'+i).className = ''; //turn off the active tab class from all tabs.
			$('tabContent'+i).style.display = 'none'; //hide all tab contents
			}
		}
	
	$('tab'+focusTab).className =  "active"; //set the class to active on focus tab
	$('tabContent'+focusTab).style.display = 'block'; //show focus tab content
	}


//certain option types have quantity boxes built in for individual selection.
//in these cases, hide the 'global' quantity input.

function hideQtyBox()	{
//turn off the validation because the form input for the sogid isn't set.
//	$('addToCartFrm').setAttribute('onsubmit','quantityOnlyValidation()');  //IE7 didn't like this.
	$('addToCartFrm').onsubmit = quantityOnlyValidation; //lowercase s on sumbit for ie friendlyness
	var qtyContainer = document.getElementById('addToCartQtyContainer')
	qtyContainer.style.display = 'none';
	
//removeChild - http://javascript.about.com/library/bldom09.htm	
	var qtyInput = document.getElementById('addToCartQtyInput');
	qtyContainer.removeChild(qtyInput); 	
	}





function getFolderID(pogid)	{
	//rather than have a bunch folders with nearly the exact same images, there are master folders and some pogs point to folders of a different pog id.	
	if(pogid == 'A5' || pogid == 'CY' || pogid == 'GF')
		folderid = 'bc';
	else if(pogid == 'A4' || pogid == 'G6' || pogid == 'F7' || pogid == 'CZ' || pogid == 'EV' || pogid == 'EW' || pogid == 'EY' || pogid == 'EX' || pogid == 'D0' || pogid == 'HS' || pogid == 'HV')
		folderid = 'tm';
	else if(pogid == 'OE'  || pogid == 'FI' || pogid == 'FJ' || pogid == 'AS')
		folderid = 'rp';
	else if(pogid == 'A2' || pogid == 'F8' || pogid == 'F0' || pogid == 'CX' || pogid == 'EZ')
		folderid = 'mc';
	else if(pogid == 'A3')
		folderid = 'jb';
	else if(pogid == 'DV')
		folderid = 'cr';
	else
		folderid = pogid;
	return folderid;
	}



	
/*
used in conjunction with quantityGrid formats to make sure users set a quantity on at least one input.
yes, apparently this is a problem. added 8/1/2011
*/
function quantityOnlyValidation()	{
	zStdErr('got into quantity only validation');
	$('JSONpogErrors').innerHTML = "";
	var elem = document.getElementById('addToCartFrm').elements;
	for(var i = 0; i < elem.length; i++)	{
//if at least 1 of the quantity inputs has a value > 1, end the loop and submit.
//		zStdErr(' -> type = '+elem[i].type+' and value = '+elem[i].value+' and indexOf = '+elem[i].name.indexOf('quantity:'));
		if(elem[i].type == 'text' && elem[i].name.indexOf('quantity:') == 0 && elem[i].value > 0)	{
			zStdErr(' -> got a success');
			return true; //only one quantity is required to pass validation, so end here.
			}
		}
	$('JSONpogErrors').innerHTML = "Please enter quantity selections, then click Add to Cart again.";
	return false;
	}



function makeQuantityInputDiv(pogid,pog,cssClass)	{
	
	var optiondiv = document.createElement("div");
	with(optiondiv)	{
		setAttribute("id", pogid+"_qtybox_"+pog.v);
		className =  cssClass;
		}

//image and prompt		
	optiondiv.innerHTML = "<div align='center'><a href='"+zoovyImageUrl(pog.img,'','','FFFFFF')+"' class='MagicThumb'><img src='"+zoovyImageUrl(pog.img,75,75,'FFFFFF')+"' alt='' border='0' height='75' width='75' rel='click-to-initialize: true' /></a></div><div style='padding:2px 0 4px 0;'>"+pog['prompt']+"</div>";
	if(pog.p)
		optiondiv.innerHTML += "<div style=' font-weight:bold; font-size:12px; padding-bottom:4px;'>"+handlePogPrice(pog.p,'')+" </div>";
	optiondiv.innerHTML += "qty: ";
	
	var optiontextbox = document.createElement("input");
	with(optiontextbox) {
		setAttribute("id", "quantity:"+SKU+":"+pogid+pog.v);
		setAttribute("value", "0"); 
		setAttribute("size", 3);  
		setAttribute("name", "quantity:"+SKU+":"+pogid+pog.v);
		className = "zform_textbox";
		setAttribute("maxlength", 3);  // this doesn't work in IE. The onkeyup and down below are the workaround.
		setAttribute("type", "text");
		}
	optiondiv.appendChild(optiontextbox);
	
	var hiddenoption = document.createElement("input");
	with(hiddenoption) {
		setAttribute("id", "product_id:"+SKU+":"+pogid+pog.v);
		setAttribute("value", "1"); 
		setAttribute("name", "product_id:"+SKU+":"+pogid+pog.v);
		setAttribute("type", "hidden");
		}			
	optiondiv.appendChild(hiddenoption);
		
	return optiondiv;
	}	




function loadQuantityInputDivs(pogid,focusTabIndex)	{
	zStdErr('BEGIN loadQuantityInputDivs');
	zStdErr(' -> focusTabIndex '+focusTabIndex);
	var activeTab = 'tabContent'+focusTabIndex;
	var numChildren
	if(numChildren = $(activeTab).getElementsByTagName('div').length > 0)	{
//tab content has already been generated. handleTabs takes care of bringing it into focus. do nothing.	
		zStdErr(' -> '+activeTab+' already has '+numChildren+' children');
		}
	else	{
		zStdErr(' -> zero children present for '+activeTab);
//add the content.
		var pog = pogs.getOptionByID(pogid);
		var inc = 0; //used for iterating through options
		var len = pog.options.length; //# of options
		zStdErr(' -> # options = '+len);
		var tabi = 0;
		var optiondiv;
		while (inc < len) {
//increment tabi for each 'tab' (starts with ...). the first option will be a tab so tabi will get set to 1 right away.
//don't generate an input for these either.
			if(pog['options'][inc]['prompt'].substring(0,3) == '...')	{
				tabi++;
//				zStdErr(' -> tabi = '+tabi);
				}
			else if(tabi == focusTabIndex)	{
				optiondiv = makeQuantityInputDiv(pogid,pog['options'][inc],"zform_qtybox");
				$(activeTab).appendChild(optiondiv);
				}
			else	{
//not a 'tab'. not part of the 'focus' tab's content
				}
			inc++;  // keep inc outside that if statement or you'll blow everything to shiat.
			}
		}
	MagicZoomPlus.refresh();
	}



var KylePOGs = Class.create(ZoovyPOGs, {
// redefine the speak method
	renderOptionTEXT: function($super, pog) {
		$super(pog)
	},


	renderOptionIMAGESELECT_QTYBOXGRID_WNONFIXED_TABS:function($super, pog) {
	zStdErr('got into renderOptionIMAGESELECT_QTYBOXGRID_WNONFIXED_TABS');
	zStdErr(' -> using 20111103');
/*
displays options in a tabbed format.	
each tab prompt is loaded from specific options in the list that start with ...
*/

	var pogid = pog.id;
	hideQtyBox();


//remove hidden input product_id value so no error appears in cart.
	var e = $('product_id');
	e.value = '';	
	
	var hiddenoption = document.createElement("input");
	with(hiddenoption) {
		setAttribute("id", "pog_"+pogid);
		setAttribute("value", ""); 
		setAttribute("name", "pog_"+pogid);
		setAttribute("type", "hidden");
		}			
	$("div_"+pogid).appendChild(hiddenoption);
	
//also set in the while loop, but here for a 'default', so any options before the first 'marker' get dropped into the first tab content.
	var activeTab = 'tabset_content_container';
    var i = 0;
	var tabi = 1;  //increments the tabs
    var len = pog.options.length;
	var tabText;
	var optionValue = ''; //set a var so a lookup doesn't have to occur every time. used in the while loop below.

	$('prodPrice').innerHTML = "<span style='font-weight:normal;'>Starting at <\/span>$"+base_price;

//all the tabs except tab1 have the style set to display:none.  The display is enabled later ONLY if the prompt is turned on in the sog.
//this allows this single sog to be used and to only have certain tabs show up. nice.
	$('prodAddInstructions').innerHTML =  "<div style='color:#3a3a3c;'><span style='color:#818284;'>Step 1:</span> Enter quantities in one or more categories below.</div><div style='color:#3a3a3c;'><span style='color:#818284;'>Step 2:</span> When finished, click Add to Cart once.</div>";

	$("div_"+pogid).innerHTML = "<div id='tabs1' class='tabset'><table cellpadding='0' cellspacing='0'><tr><td valign='top' width='100' style='font-size:11px;'><h2>Categories:</h2><ul class='tabset_tabs' id='tabset_tabs_container'><!-- tabs get loaded into here --></ul></td><td valign='top' class='ztxt' style='border: 2px solid #6600cc;'><div class='tabset_content_container' id='tabset_content_container'><!-- tab content divs get loaded into here --></div></td></tr></table></div>";


	
	
	
	while (i < len) {

		optionValue = pog['options'][i]['v'];  

//there are 'markers' in the options, which she used for headers in the select list. These are used to denote the tab into which the options should be placed.	Each marker starts with '...'.  spot 0 is always a marker too.

		if(pog['options'][i]['prompt'].substring(0,3) == '...'){
//active tab is set at the beginning.  tabi is incremented at the end.
			activeTab = 'tabContent'+tabi;
			var listitem = document.createElement("li");
			with(listitem) {
				setAttribute("id", "tab"+tabi);
				}
			if(tabi == 1)
				listitem.className = 'active';

//use the content of the html field to populate the actual tab, if it is set.
//this is because she needs the ... toggle section ... formatting for product that aren't using this layout
			
			if(pog['options'][i]['html'])
				tabText = pog['options'][i]['html'].replace('%20',' '); //!!! would entity decode work here? test.
			else
				tabText = pog['options'][i]['prompt'].replace('...','');
				
			listitem.innerHTML = "<a href='javascript:handleTabs("+tabi+"); loadQuantityInputDivs(\""+pogid+"\","+tabi+"); '>"+tabText+"</a>";
			
			$("tabset_tabs_container").appendChild(listitem);

//create the tab content area.

			var tabContentDiv = document.createElement("div");
			tabContentDiv.id = "tabContent"+tabi;
			tabContentDiv.className = "tabset_content";
//hide all tabs after the first
			if(tabi > 1)	{
				tabContentDiv.style.display = 'none';
				}
			$("tabset_content_container").appendChild(tabContentDiv);
			tabi++;
			}
//The options isn't a header (tab), so create an input for it.
		else	{
//tabi will = 2 on the first set of product options. tabi is incremented after the tab is added, the first option is a tab, so tabi is set to 
// 2 just after the first iteration through the option. not ideal. old code.
// only the first tabs data is generated onload. the rest are generated once the tab is clicked. this is for page load performance.
			if(tabi == 2)	{
				optiondiv = makeQuantityInputDiv(pogid,pog['options'][i],"zform_qtybox");
				$(activeTab).appendChild(optiondiv);
				}
			}
		i++;
		}
	},

//used for switchplate covers.  displays options in a grid style with each option having a quantity box.

	renderOptionIMAGESELECT_QTYBOXGRID:function($super, pog) {
	

	
	var pogid = pog.id;
//hides quantity box. if this box is hidden, the validation action on the form is also changed (in this function)
	hideQtyBox(); 

//remove hidden input product_id value so no error appears in cart.
	var e = $('product_id');
	e.value = '';	

    var i = 0;
    var len = pog.options.length;
	var optionValue = ''; //set a var so a lookup doesn't have to occur every time. used in the while loop below.

	$('prodPrice').innerHTML = "<span style='font-weight:normal;'>Starting at <\/span>$"+base_price;

	$('prodAddInstructions').innerHTML =  "<div style='color:#3a3a3c;'><span style='color:#818284;'>Step 1:</span> Enter quantities in one or more categories below.</div><div style='color:#3a3a3c;'><span style='color:#818284;'>Step 2:</span> Click ADD TO CART when finished.</div>";

//need to clear the floats below the prompt for alignment.  IE doesn't like a innerHTML, so a div needs to be created.
		breakdiv = document.createElement("div");
		with(breakdiv)	{
			setAttribute("id", pogid+"_qtybox_"+optionValue);
			style.clear = 'both';
			}
		
		$('div_'+pogid).appendChild(breakdiv);

		if(pogid == 'GR' || pogid == 'GQ' || pogid == 'HI' || pogid == 'HJ')
			cssClass = 'zform_qtybox';
		else
			cssClass =  "zform_qtybox_narrow";

	while (i < len) {
		optiondiv = makeQuantityInputDiv(pogid,pog['options'][i],cssClass);
		$('div_'+pogid).appendChild(optiondiv);
		i++;
		}
//need to clear the floats below the prompt for alignment.  IE doesn't like a innerHTML, so a div needs to be created.
	breakdiv = document.createElement("div");
	with(breakdiv)	{
		setAttribute("id", pogid+"_qtybox_"+optionValue);
		style.clear = 'both';
		}
	$('div_'+pogid).appendChild(breakdiv);

	},




	renderOptionBIGLIST_IMAGESELECT:function($super, pog) {
		
//	hasExtraImages = true;
	var pogid = pog.id;
	var folderid = getFolderID(pogid);
	
	parentDiv = $("div_"+pogid);

// this is the select list that will contain the 'first' set of choices. It is the one that is not needed on POST.
//attempting to use a 'createElement' on this select list causes the dual-leveling to break.

	selectListSkip = "<select id='pog_"+pogid+"skip' name='pog_"+pogid+"skip' class='zform_select zform_biglist zform_biglist1' style='margin-right:5px;'><option value=''>please select category</option></select>";
	
	
//this is the second select list, the one that is actually added to the dom and posted to the cart.
	var selectList = document.createElement("select");
	with(selectList) {
		setAttribute("id", "pog_"+pogid);
		setAttribute("name", "pog_"+pogid);
		setAttribute("value", "set me to pog value");
		className = "zform_select";
/*
because the biglist pog values change as options are added/removed, we can't reliably use them for the image name.
because she changes the option text regularly, we can't use just the name.
So instead, we use the first seven characters of the second dropdown, after stripping all whitespace and special characters.
*/
		onchange= function(){
			updateThumb(pogid,'75','75','pog'+folderid+'/'+this.options[selectedIndex].text.replace(/[^a-zA-Z0-9]+/g,'').substring(0,7))};  
		}





// before pog_A5ship_text, the following line was used. here in case it is needed later...
//document.addToCartFrm.pog_A5skip.options[selectedIndex].text.replace(/[^a-zA-Z0-9]+/g,'').substring(0,6)

/*
the two select lists get added to the dom prior to the options getting inserted into them because:
as we loop through the array, the options are added each time.  
An id is assigned to the options in the first/skip select list.  
The Id's are used to see if the option already exists so that the same option isn't created twice.
 note - moving the appendChilds to the bottom doesn't fix the IE issue.
*/

	
	parentDiv.innerHTML += selectListSkip;
	parentDiv.appendChild(selectList);

//output ? with hint in hidden div IF ghint is set
	if(pog['ghint'])
		gHintQmark(pogid,pog['ghint']);

// 'i' was blowing chunks, so inc is used to increment through the loop.
    var inc = 0;
    var len = pog.options.length;



//  !!!!!!!!!   this is part of the dual-level function. don't know it well. 
// originally (default) pog_biglist was pog_AQ (where AQ = SOG id) but since we're in a class, no need to make the var pog specific... right???
var pog_biglist = new DynamicOptionList();
pog_biglist.addDependentFields("pog_"+pogid+"skip","pog_"+pogid);
//pog_biglist[pogid].selectFirstOption = false;

/*
defaultList is used to build the displayed 'second' list when the options initially load.
That list is based upon all the items in the array where selValue0 (or first prompt) is equal to defaultList, which is set to the first selValue0 of the array.
A variable was created for this instead of doing an indexOf or another split because it seemed like it would be faster.

this is done outside the loop to avoid having an 'if' inside the loop that slows the loop down.
*/

selValues = pog['options'][0]['prompt'].split('|');
defaultList = selValues[0];

//adds options to the select list. the prompt is stored as "list1prompt|list2prompt". selValues 0 and 1 equate to list1prompt and list2prompt, respectively.
    while (inc < len) {
		selValues = pog['options'][inc]['prompt'].split('|');


//builds the 'first' list of options. id is used to see if focus option has already been created so that each first option (first|second) is only added once
		if(!$('biglist_'+pogid+selValues[0]))	{
			selOption = document.createElement("option");
			selOption.setAttribute("value", selValues[0]);
			selOption.setAttribute("id", 'biglist_'+pogid+selValues[0]);
			selOption.innerHTML = selValues[0];
			$('pog_'+pogid+'skip').appendChild(selOption);
//this creates a blank option for the first option in the second list.
			pog_biglist.forValue(selValues[0]).addOptionsTextValue('Click to choose design','');

//The select list option was just added, so now add the image that contains all the symbols to the 'extra images' div. 
//part of michaelp's designs around 2010-09-14
// id of master image (montags of all symbols) that sits in the /masters/ folder of the pog image folder (pogbc/masters/)
// if mastersAdded != 0, no need to execute this, as 1 set of masters has already been added.

//commented out on 11/28/2011. masters are now handled differently.
	
//			if(mastersAdded == 0)	{
//				masterImageId = selValues[0].replace('.','').toLowerCase();
//				masterImageId = masterImageId.replace(/[^a-zA-Z0-9]+/g,'_');



//the master images (a montage of all designs) gets displayed in the lower half of the page.
	//			$('dualLevelSelectCatImages').innerHTML += "<div style='float:left; margin:0 3px 3px 0;'><a href='"+zoovyImageUrl('pog'+folderid+'/masters/'+masterImageId,'','','FFFFFE')+"' class='MagicThumb' title='"+dynImageAlts[masterImageId]+"'><img src='"+zoovyImageUrl('pog'+folderid+'/masters/'+masterImageId,'75','76','FFFFFF')+"' width='75' height='76' border='0' alt='"+dynImageAlts[masterImageId]+"' rel='click-to-initialize: true' /></a>";
//				}
			}

//adds options for dropdowns in 'second' select list.
		pog_biglist.forValue(selValues[0]).addOptionsTextValue(selValues[1],pog['options'][inc]['v']);
		
		inc++;  // keep inc outside that if statement or you'll blow everything to shiat.
		}




	imageDiv = document.createElement('div');
	with(imageDiv)	{
		id = "imgSelect_"+pogid+"_img";
		className = 'imageselect_image';
		innerHTML += "<img src='"+zoovyImageUrl('pog'+folderid+'/default','75','75','FFFFFF')+"' alt='' border='0' height='75' width='75' name='selectImg_"+pogid+"' id='selectImg_"+pogid+"'>";
		}
	
	hrefDiv = document.createElement('a');
	with(hrefDiv)	{
		href = "javascript:openWindow(\"/popup.cgi?fl=~kyledesign_pop_sogthumbview_20110912&wrapper=~pop_kyledesign_kyledesigncom_20100816&focusSog="+pogid+"&product="+SKU+"\",800,600); ";
		innerHTML = "<b>View All Designs<\/b>";
		}
	zStdErr(' -> href added to imagediv. should solve href surrounding this image.');
//would be better to only update DOM once here. fix during jquery upgrade.
	$(parentDiv).appendChild(hrefDiv);
	$(parentDiv).appendChild(imageDiv);	


// this initializes the dynamic select menu
	initDynamicOptionLists();



//	mastersAdded = 1;
  },
	xinit : function($super) {
		this.addHandler("pogid","A5","renderOptionBIGLIST_IMAGESELECT");
		this.addHandler("pogid","CY","renderOptionBIGLIST_IMAGESELECT");
		this.addHandler("pogid","DV","renderOptionBIGLIST_IMAGESELECT");
		this.addHandler("pogid","FI","renderOptionBIGLIST_IMAGESELECT");
		this.addHandler("pogid","GF","renderOptionBIGLIST_IMAGESELECT");
		this.addHandler("pogid","A4","renderOptionBIGLIST_IMAGESELECT");
		this.addHandler("pogid","F7","renderOptionBIGLIST_IMAGESELECT");
		this.addHandler("pogid","CZ","renderOptionBIGLIST_IMAGESELECT");
		this.addHandler("pogid","D0","renderOptionBIGLIST_IMAGESELECT");
		this.addHandler("pogid","EV","renderOptionBIGLIST_IMAGESELECT");
		this.addHandler("pogid","EW","renderOptionBIGLIST_IMAGESELECT");
		this.addHandler("pogid","EX","renderOptionBIGLIST_IMAGESELECT");
		this.addHandler("pogid","EY","renderOptionBIGLIST_IMAGESELECT");
		this.addHandler("pogid","G6","renderOptionBIGLIST_IMAGESELECT");
		this.addHandler("pogid","A2","renderOptionBIGLIST_IMAGESELECT");
		this.addHandler("pogid","F8","renderOptionBIGLIST_IMAGESELECT");
		this.addHandler("pogid","CX","renderOptionBIGLIST_IMAGESELECT");
		this.addHandler("pogid","EZ","renderOptionBIGLIST_IMAGESELECT");
		this.addHandler("pogid","F0","renderOptionBIGLIST_IMAGESELECT");
		this.addHandler("pogid","AS","renderOptionBIGLIST_IMAGESELECT");
		this.addHandler("pogid","A3","renderOptionBIGLIST_IMAGESELECT");
		this.addHandler("pogid","FJ","renderOptionBIGLIST_IMAGESELECT");
		this.addHandler("pogid","HS","renderOptionBIGLIST_IMAGESELECT");
		this.addHandler("pogid","HV","renderOptionBIGLIST_IMAGESELECT");
		
		//switchplate covers
		this.addHandler("pogid","15","renderOptionIMAGESELECT_QTYBOXGRID_WNONFIXED_TABS");
		this.addHandler("pogid","16","renderOptionIMAGESELECT_QTYBOXGRID_WNONFIXED_TABS");
		this.addHandler("pogid","17","renderOptionIMAGESELECT_QTYBOXGRID_WNONFIXED_TABS");
		this.addHandler("pogid","18","renderOptionIMAGESELECT_QTYBOXGRID_WNONFIXED_TABS");
		this.addHandler("pogid","FC","renderOptionIMAGESELECT_QTYBOXGRID_WNONFIXED_TABS");
		this.addHandler("pogid","FK","renderOptionIMAGESELECT_QTYBOXGRID_WNONFIXED_TABS");
		this.addHandler("pogid","FM","renderOptionIMAGESELECT_QTYBOXGRID_WNONFIXED_TABS");
		this.addHandler("pogid","03","renderOptionIMAGESELECT_QTYBOXGRID_WNONFIXED_TABS");
		this.addHandler("pogid","GX","renderOptionIMAGESELECT_QTYBOXGRID_WNONFIXED_TABS");
		this.addHandler("pogid","GQ","renderOptionIMAGESELECT_QTYBOXGRID_WNONFIXED_TABS");
		this.addHandler("pogid","GR","renderOptionIMAGESELECT_QTYBOXGRID_WNONFIXED_TABS");
		
		this.addHandler("pogid","1E","renderOptionIMAGESELECT_QTYBOXGRID");
		this.addHandler("pogid","HI","renderOptionIMAGESELECT_QTYBOXGRID");
		this.addHandler("pogid","HJ","renderOptionIMAGESELECT_QTYBOXGRID");
		}
	});
	


function openWindow(url,width,height) {
	adviceWin = window.open(url,'advice','status=no,width='+width+',height='+height+',menubar=no,scrollbars=yes');
	adviceWin.focus(true);
	}


MagicZoomPlus.options = {
  'background-color':'#000000',
  'background-opacity':'50',
  'opacity-reverse':'true',
  'selectors-mouseover-delay':'0'
 }

MagicThumb.options = {'click-to-initialize':'true','buttons-display':'close','buttons-position':'top right'}

var hasExtraImages = false;



/*
#### NOTES
skewed validate doesn't work yet.  This is for having a quantity box input for sogs (switchplate products) AND other options.

validate, but need to ignore the quantity box sog (POGID)
after validated, append all the other sogs to each quantity box input. ouch.  This is what isn't working. not ordering right maybe?

*/


function skewedValidateAlterForm(POGID)	{
	valid = false;
	sogString = '';
	totalQuantity = 0;

	pogs.getOptionByID(POGID)['optional'] = 1;    //set the POGID optional option setting to true. quantity grids must be optional so they aren't validated.

	if(ids.length > 1)	{
		validateSogs = validate_pogs(); //validates the sogs to make sure selections are made. 
		if(validateSogs == true)	{

			//generate a string for each of the extra pog:pogvalue's to be appended to the text input name.
			for(i = 0; i < MYADD2CART_pogs.length; i++)	{
				thisPogid = MYADD2CART_pogs[i]['id'];
				if(thisPogid == POGID)	{}  //this is the quantity grid option and should be ignored 
				else	{
					if(MYADD2CART_pogs[i]['type'] == 'radio' || MYADD2CART_pogs[i]['type'] == 'imggrid')	{
						sogString += thisPogid;
						sogString += $$('input:checked[type="radio"][name="pog_"+thisPogid]').pluck('value')+"/";  //prototype method for getting radio button value
						}
					else	{
						sogString += thisPogid
						sogString += (document.addToCartFrm['pog_'+thisPogid].value == "") ?  "" : document.addToCartFrm['pog_'+thisPogid].value+"/";
						}
					}
				}
	
//SANITY  -  pogs.getOptionByID(POGID)['options'].length does not accurately reflect the number of textboxes in the quantity grid because the markers/tabs are options too
	
			for(i=0; i < pogs.getOptionByID(POGID)['options'].length; i++)	{
	
				if(pogs.getOptionByID(POGID)['options'][i]['prompt'].substring(0,3) == '...'){}  //do nothing for markers (tabs).
				else	{
					document.addToCartFrm['quantity:"+SKU+":'+POGID+pogs.getOptionByID(POGID)['options'][i]['v']].name = 'quantity:"+SKU+":'+sogString+POGID+pogs.getOptionByID(POGID)['options'][i]['v'];
					document.addToCartFrm['product_id:"+SKU+":'+POGID+pogs.getOptionByID(POGID)['options'][i]['v']].name = 'product_id:"+SKU+":'+sogString+POGID+pogs.getOptionByID(POGID)['options'][i]['v'];
					return true;
					}
				}
			
			}
		}
	return valid; 
	}