function addIDList(listName, newText, newID, hiddenField, curField, clearDIV) //adds any type of info into an LI, separating its ID and Name
{
	var exists = 0;
	
	listObj = $(listName);
	//check if current item exists
	curList = $(listName).getElementsByTagName('li');

	for(i=0;i<curList.length;i++)
	{
		memberIDs = $(hiddenField).value.split("|");
		for(m=0;m<memberIDs.length;m++)
		{
			if (memberIDs[m] == newID) exists = 1;
		}
	}
	
	if (exists != 1)
	{
		
		if ( $(hiddenField).value == "")
			 $(hiddenField).value = newID; //add new valueto hidden field
		else 
			 $(hiddenField).value += "|"+newID; //add new valueto hidden field

		addLI=document.createElement('li'); //add LI to UL

			if (newText.match("\\|\\|")) { //is not just one value
				newTextDivided = newText.split("||");
				newText = newTextDivided[0]+" "+newTextDivided[1];
			}
			

			if (listObj.clientWidth)
				var listWidth = listObj.clientWidth;
			else {
				var listWidth = "150";
			}
			listWidth = listWidth - 8;
			addLI.innerHTML = '<div style="width: '+listWidth+'px;"> <div style="float: left; width: '+(listWidth-20)+'px;" id="textID'+newText+'">'+newText+'</div> <div style="width: 14px; float: right; padding-right: 5px; cursor: pointer; ">X</div> <div class="clearDIV" style="width: '+listWidth+'px;"></div> </div>';
			

		$(listName).appendChild(addLI); 
				
		addLI.style.cursor = 'pointer';
		addLI.className = 'listItem';
		if (newID == newText) {
			addLI.style.color = "#4c4c4c";
			addLI.style.backgroundColor = "#F0F0F0";
		}
		addLI.onclick = function () { 
			this.parentNode.removeChild(this); 
			
			var thisHiddenField = $(hiddenField);
			var thisHiddenVal = thisHiddenField.value;
			if (thisHiddenVal.match(newID+"\\|")) {
				thisHiddenField.value = thisHiddenVal.replace(newID+"|", '');
			}
			else if (thisHiddenVal.match("\\|"+newID)) {
				thisHiddenField.value = thisHiddenVal.replace("|"+newID, '');
			}
			else thisHiddenField.value = thisHiddenVal.replace(newID, '');

		};
		if ($(curField)) {
			$(curField).value='';
			$(curField).focus();
			$(clearDIV).innerHTML = '';
		}
		
	}
}

var curPop = false;
var myPopup = Class.create();
myPopup.prototype = {
	_pOptions : null,
	initialize : function(callback, popOptions, configOptions) {
		if (curPop) curPop.clearClay();
		var callback = (callback) ? callback : null;
		this._pOptions = (popOptions) ? popOptions : null;
		this._cOptions = (configOptions) ? configOptions : null;
		if (!$('outerDIV')) {
			
			var surroundDIV =  document.createElement('div'); //create DIV
			surroundDIV.style.position = "absolute";
			surroundDIV.id = 'surroundDIV';
			surroundDIV.name = 'surroundDIV';
			document.body.appendChild(surroundDIV);
			
			
			var ClayCreation = document.createElement('div');
			ClayCreation.id = "outerDIV";
			ClayCreation.name = "outerDIV";
			ClayCreation.style.position = "absolute";
			$('surroundDIV').appendChild(ClayCreation);
	
			var innerDIV =  document.createElement('div'); //create DIV
			innerDIV.style.position = "absolute";
			innerDIV.id = 'innerDIV';
			innerDIV.name = 'innerDIV';
			$('surroundDIV').appendChild(innerDIV); 
			
			 

			$('outerDIV').className = 'outerDIV';
			$('innerDIV').className = 'innerDIV';
			$('innerDIV').update('Loading...');

			this.posPopup(popOptions);
		
			callback(popOptions);
		} else { this.clearClay(); }
	},
	loadShadows : function(class_root) {
		if (conf_browser == 'ie' && conf_bversion < 7) return false;
		$('outerDIV').removeClassName('outerDIV');
		var newTable = '';
		newTable += '<table class="'+class_root+'" cellspacing="0" cellpadding="0" >';
		newTable += '<tr class="'+class_root+'_t"><td class="l">&nbsp;</td><td class="c">&nbsp;</td><td class="r">&nbsp;</td></tr>';
		newTable += '<tr class="'+class_root+'_cu"><td class="l">&nbsp;</td><td class="c">&nbsp;</td><td class="r">&nbsp;</td></tr>';
		newTable += '<tr class="'+class_root+'_c"><td class="l">&nbsp;</td><td class="c">&nbsp;</td><td class="r">&nbsp;</td></tr>';
		newTable += '<tr class="'+class_root+'_b"><td class="l">&nbsp;</td><td class="c">&nbsp;</td><td class="r">&nbsp;</td></tr>';
		newTable += '</table>';
		$('outerDIV').update(newTable);
		
	},
	replaceInnerClass : function(myClass) {
		$('innerDIV').removeClassName('innerDIV');
		$('innerDIV').addClassName(myClass);
	},
	posPopup : function() {
		var popOptions = this._pOptions;
		var cOptions = this._cOptions;
		var VBuffer = (cOptions != null && cOptions.get('VBuffer')) ? cOptions.get('VBuffer') : 9;
		var HBuffer = (cOptions != null && cOptions.get('HBuffer')) ? cOptions.get('HBuffer') : 9;
		
		var innerHeight = $('innerDIV').getHeight();
		var innerWidth = $('innerDIV').getWidth();
		var outerHeight = (innerHeight+VBuffer);
		var outerWidth = (innerWidth+HBuffer);
		$('outerDIV').style.display='none';
		$('innerDIV').style.display='none';
		$('outerDIV').style.height = outerHeight+'px';
		$('outerDIV').style.width = outerWidth+'px';
		
		$('surroundDIV').style.height = outerHeight+'px';
		$('surroundDIV').style.width = outerWidth+'px';
		
		if (!popOptions || (popOptions && !popOptions.get('center')) || (popOptions && popOptions.get('center') == 'viewport')) {
		
			var viewWidth = document.viewport.getWidth();
			var viewHeight = document.viewport.getHeight();
			
			var scrollPos = document.viewport.getScrollOffsets();
			var scrollPosX = scrollPos[0];
			var scrollPosY = scrollPos[1];	
	
			
			//place innerDIV horizontally centered
			ScrollWin = scrollPosX + (viewWidth/2);
			newInnerLeft = (ScrollWin) - (innerWidth/2);
			$('innerDIV').style.left = newInnerLeft+"px";
			
			//place innerDIV vertically centered
			ScrollWin = scrollPosY + (viewHeight/2);
			newInnerTop = (ScrollWin) - (innerHeight/2);
			$('innerDIV').style.top = Math.round((VBuffer/2))+"px";
			
			//place outerDIV horizontally centered
			ScrollWin = scrollPosX + (viewWidth/2);
			newouterLeft = (ScrollWin) - (outerWidth/2);
			$('outerDIV').style.left = newouterLeft+"px";
			$('outerDIV').style.left = newouterLeft+"px";
			
			//place outerDIV vertically centered
			ScrollWin = scrollPosY + (viewHeight/2);
			newouterTop = (ScrollWin) - (outerHeight/2);
			$('surroundDIV').style.top = newouterTop+"px";
			$('surroundDIV').style.top = newouterTop+"px";
		
		} else {
			
			if (popOptions.get('center') == 'element') {
				if (popOptions.get('elementName')) {
					 var eleName = popOptions.get('elementName');
					 var eleObj = $(eleName);
					 var eleHeight = eleObj.getHeight();
					 var eleWidth = eleObj.getWidth();
					 var offTop = (eleHeight/2)-($('outerDIV').getHeight()/2);
					 var offLeft = (eleWidth/2)-($('outerDIV').getWidth()/2);
					 $('outerDIV').clonePosition(eleObj, { 'setWidth' : false, 'setHeight' : false, 'offsetTop' : offTop, 'offsetLeft' : offLeft});
				} else alert('Uknown elementName');
			} else alert('Unknown center type');
			
		}
		if (this._cOptions != null && this._cOptions.get('shadowClass')) {
			this.loadShadows(this._cOptions.get('shadowClass'));
		}
		if (this._cOptions != null && this._cOptions.get('innerClass')) {
			this.replaceInnerClass(this._cOptions.get('innerClass'));
		}
		$('outerDIV').style.display='block';
		$('innerDIV').style.display='block';
		
	},
	clearClay : function() {
		$('outerDIV').remove();
		$('innerDIV').remove();
		$('surroundDIV').remove();
		curPop = false;
	},
	updateInnerDiv : function(updateTxt) {
		$('outerDIV').style.visibility = 'hidden';
		$('innerDIV').update(updateTxt);
		curPop.posPopup();
		$('outerDIV').style.visibility = 'visible';	
	}
}



function insertAfter(parent, node, referenceNode) {
  parent.insertBefore(node, referenceNode.nextSibling);
}

function updateVariations(obj, prod_id) {
    var curVal = obj.value;
    if (curVal != '') {
		var parentTable = $(obj).up('.dropTable');
		var parentTableID = parentTable.id;
		var params = $H({});
		params.set('prod_id',prod_id);
		params.set('selectedType', obj.id);
		
		$$('#'+parentTableID+' select').each(function(el) {
			if (el.className == 'size_id') {
				sizeIDObj = el;
				params.set('size_id', el.value);
			}
			if (el.className == 'color_id') {
				colorIDObj = el;
				params.set('color_id',el.value);
			}
			if (el.className == 'model_id') {
				modelIDObj = el;
				params.set('model_id',el.value);
			}
		});
		var paramStr = params.toQueryString();

		// -- d:b
		//disable submits while processing Ajax call
		var addCartBut = document.getElementById("addCartBut");
		addCartBut.src = "images/add-to-cart-disabled.gif";
		addCartBut.disabled = true;
		// -- d:e
	
		new Ajax.Request('/ajax/getVariations.php', {
			method : 'post',
			parameters : paramStr,
			onComplete : function(transport) {
				
				var myJSON = transport.responseText.evalJSON(true);
				var origHTML = '';
				
				// -- d:b
				if (myJSON.qty != undefined) {
					var addCartBut = document.getElementById("addCartBut");
					var inStockImg = document.getElementById("inStockImg");
					
					if(parseInt(myJSON.qty) <= 0)
					{
						addCartBut.src = "images/add-to-cart-disabled.gif";
						addCartBut.disabled = true;
						inStockImg.src = "images/out_of_stock.gif";
					}
					else
					{
						if(parseInt(myJSON.nr_variations) == 1)
						{
							addCartBut.src = "images/add_to_cart.gif";
							addCartBut.disabled = false;
							inStockImg.src = "images/in_stock.gif";
						}
						else
						{
							addCartBut.src = "images/add-to-cart-disabled.gif";
							addCartBut.disabled = true;
							inStockImg.src = "images/in_stock.gif";
						}
					}
				}
				// -- d:e
				
				if (myJSON.size_id != undefined) {
					origHTML = $(sizeIDObj).innerHTML;
					origHTML = origHTML.replace(/ selected="selected"/gi,'');
					if (origHTML != myJSON.size_id) $(sizeIDObj).update(myJSON.size_id);
				}
				
				if (myJSON.color_id != undefined) {
					origHTML = $(colorIDObj).innerHTML;
					origHTML = origHTML.replace(/ selected="selected"/gi,'');
					if (origHTML != myJSON.color_id) $(colorIDObj).update(myJSON.color_id);
				}
				
				if (myJSON.model_id != undefined) {
					origHTML = $(modelIDObj).innerHTML;
					origHTML = origHTML.replace(/ selected="selected"/gi,'');
					if (origHTML != myJSON.model_id) $(modelIDObj).update(myJSON.model_id);
				}
			}
		});
    }
    
}