this.OptionsPerRow = 5;
this.FormNum = 0;
this.CartAction = '/app/site/backend/additemtocart.nl';
this.AccountNum = '665937';
this.GenArea = document.getElementById("genarea");
this.GroupList = new Array();
this.OutputHtml = '';
this.SelectOptionName = 'custcol5';
this.SelectOptionId = 'custcol5';
this.SpacerImage = 'http://shopping.netsuite.com/c.665937/site/images/spacer.gif';
window.ItemCount = 0;
this.GroupList['allitems']=new Array();


function RenderMatrix() {
	initData();
	createGroups();
	WriteHtml();
}

function AddHtml(html) {
	this.OutputHtml += html;
}

function WriteHtml() {
	this.GenArea.style.display="none";
	this.GenArea = replaceHtml(this.GenArea, this.OutputHtml);
	this.GenArea.style.display="";
}

function initData(){
	var gc = -1;
	var ic = 0;
	var i;
	
	//first collect lookup into array
	this.OptionIdLookup = new Array();
	var selLookup = document.getElementById(this.SelectOptionId);
	if( (selLookup == null) || (selLookup == 'undefined') ) {
		alert('lookupOptionByItemId: could not find lookup selector; itemId=' + itemId);
		return;
	}
	if( (selLookup.options == null) || (selLookup.options == "undefined") ) {
		alert("lookupOptionByItemId: lookup selector has no options; itemId=" + itemId);
		return;
	}
	var j = 0;
	for( i = 0; i < selLookup.options.length; i++ ) {
		if( selLookup.options[i].text.length == 0 ) { continue; }
		this.OptionIdLookup[j] = new Array();
		this.OptionIdLookup[j]['text'] = selLookup.options[i].text;
		this.OptionIdLookup[j]['value'] = selLookup.options[i].value;
		j++;
	}
	
	for (i=0;i<40;i++) { 
		//go through each of 40 (60) allowable products or divisions
		if (myGroup[i]=="Yes" || gc==-1) {
			//create a group
			gc++;
			this.GroupList[gc] = new Array();
			this.GroupList[gc]['name'] = myD[i];
			this.GroupList[gc]['items'] = new Array();
			ic = 0;
			if (myGroup[i]=="No"){//total hack here
				var tmp=document.getElementById("shades");
				//tmp = replaceHtml(tmp," ");
				//tmp.style.visibility="hidden";
				this.GroupList[gc]['name'] = "";
				i--;
			}
			if (myKit[i]=="Yes"){
				
				this.GroupList[gc]['groupitemname']=myItems[i];
				this.GroupList[gc]['iskit']="Yes";
			}
		} else if( myD[i] != "" ) {
			//create an item
			var item = new Array();
			item['id']=myItems[i];
			item['name']=myD[i];
			item['color']=myColors[i];
			item['image']=mySwatch[i];
			item['promo']=mySpecial[i];
			var tmpImg= new Image();
			tmpImg.src='http://shopping.netsuite.com/'+mySwatch[i];
			item['imgObject']=tmpImg;
			item['swatch']=myHover[i];
			tmpImg= new Image();
			tmpImg.src=myHover[i];
			item['swatchObject']=tmpImg;
			this.GroupList['allitems'][lookupOptionIdByItemId(myItems[i])] = item;
			this.GroupList[gc]['items'][ic] = item;
			
			window.ItemCount++;
			ic++;
		}
	}
}

/*
item['id']='LIP ENHANCING GLOSS : 56103 AFTERGLOW'
item['name']='AFTERGLOW'
item['color']='Peachy pink'
item['image']='/core/media/media.nl?id=3549&c=665937&h=4f563f70958b74552a4a'
item['swatch']='/core/media/media.nl?id=3547&c=665937&h=71acc4a699c8cd57e12b'
*/

function createGroups() {
	//class="vProductsDetailOptionsInfoContainer"
	AddHtml('<div class="vProductsDetailOptionsInfoContainer">');
	//createInfoHeader();
	
	var i;
	for( i = 0; i < this.GroupList.length; i++ ) {
		createItemGroup(i);
	}
	AddHtml('</div>');
}

function createInfoHeader() {
	//class="vProductsDetailOptionsInfoHeaderContainer"
}

function createItemGroup(groupNum) {
  //class="vProductsDetailOptionsInfoGroupContainer firstGroup"
  AddHtml('<div class="vProductsDetailOptionsInfoGroupContainer');
  if( groupNum == 0 ) {
	AddHtml(' firstGroup');
  }
  AddHtml('">');
  
  var group = this.GroupList[groupNum];
  
  createInfoGroupHeader(group['name']); //
  
  createSwatch(group['items'][0]['swatch'] , group['items'][0]['color'], groupNum);
  if (group['iskit']=="Yes"){
  createMultioptions(group['groupitemname'],group['items'], groupNum);
  }
  else{
  createOptions(group['items'], groupNum);
  }
  
  AddHtml('</div>');
}

function createInfoGroupHeader(groupName) {
	//class="vProductsDetailOptionsInfoGroupHeader"
	AddHtml('<div class="vProductsDetailOptionsInfoGroupHeader">');
	AddHtml('<h2>' + groupName + '</h2>');
	AddHtml('</div>');
}

function createSwatch(imgSource, caption, groupNum) {
	//class="vProductsDetailOptionsInfoImageContainer"
	AddHtml('<div class="vProductsDetailOptionsInfoImageContainer">');
	
	AddHtml('<div>');
	AddHtml('<img id="hov' + groupNum + '"src="' + imgSource + '"/>');
	AddHtml('<div class="colorOptionDescription">' + caption + '</div>');
	AddHtml('</div>');
	
	AddHtml('</div>');
}

function createOptions(itemList, groupNum) {
	//class="vProductsDetailOptionsInfoFormFieldsContainer"
	AddHtml('<div class="vProductsDetailOptionsInfoFormFieldsContainer">');
	
	var numOptionRows = Math.ceil(itemList.length / this.OptionsPerRow);
	var i;
	for( i = 0; i < numOptionRows; i++ ) {
		createOptionsRow(itemList, (i * this.OptionsPerRow), groupNum);
	}
	
	AddHtml('</div>');
}

function createMultioptions(masteritem, itemList, groupNum) {
	//class="vProductsDetailOptionsInfoFormFieldsContainer"
	AddHtml('<div class="vProductsDetailOptionsInfoFormFieldsContainer">');
	
	createMultiOptionsRow(itemList, masteritem, groupNum);
	
	
	AddHtml('</div>');
}

function createMultiOptionsRow(itemList,masteritem, groupNum) {
	//class="vProductDetailOptionsInfoRowContainer"
	AddHtml('<div class="vProductDetailOptionsInfoRowContainer">');
		AddHtml('<div class="vProductDetailOptionsInfoOptionContainer');
		var i;
		for( i = 0; i < itemList.length; i++ ) {
			
			//createOption(itemList[i], (i==0), groupNum);
			createMultiShade(itemList[i], groupNum, i);
		}
		createOptionDetail(itemList[0]['color'], lookupOptionIdByItemId(masteritem),itemList[0]['promo']);
		AddHtml('</div>');
	AddHtml('</div>');
}

function createOptionsRow(itemList, offset, groupNum) {
	//class="vProductDetailOptionsInfoRowContainer"
	AddHtml('<div class="vProductDetailOptionsInfoRowContainer">');
	
	var i;
	for( i = 0; i < this.OptionsPerRow; i++ ) {
		if( (offset+i) >= itemList.length ) { break; }
		createOption(itemList[offset+i], (i==0), groupNum);
	}
	
	AddHtml('</div>');
}



function createOption(item, isFirst, groupNum) { //TODO we need new version of thes
	//class="vProductDetailOptionsInfoOptionContainer firstOption"
	//var tmp=lookupOptionIdByItemId(item['id']);
	AddHtml('<div class="vProductDetailOptionsInfoOptionContainer');
	if( isFirst ) {
		AddHtml(' firstOption');
	}
	AddHtml('" onmouseover="overAction(\''+item['swatch']+'\',\''+item['color']+'\','+ groupNum +', this)"');
	AddHtml('" onmouseout="outAction(this)">');
		
	createOptionImage(item['image'], item['name']);
	createOptionDetail(item['name'], lookupOptionIdByItemId(item['id']),item['promo']);
	
	AddHtml('</div>');
}

function createOptionImage(imgSource, altText) {
	//class="vProductDetailOptionsInfoOptionImageContainer"
	AddHtml('<div class="vProductDetailOptionsInfoOptionImageContainer" ' + 
			'style="width:11px; height:57px;">');
	
	if((imgSource != null) && (imgSource != '')) {
		AddHtml('<img width="11" height="57" alt="' + altText +
				'" src="' + imgSource + '"/>');
	} else {
		AddHtml('<img width="11" height="57" src="' + this.SpacerImage + '"/>');
	}
	
	AddHtml('</div>');
}

function createMultiShade(item, groupNum, itemnumberingroup)
{//class multiShadeContainer
//wraps around createOptionImage
AddHtml('<div class="multiShadeContainer');
AddHtml('" onmouseover="overActionTest(GroupList['+groupNum+'][\'items\']['+itemnumberingroup+'][\'swatchObject\'],\''+item['name']+'\','+ groupNum +', this)"');
AddHtml('" onmouseout="outAction(this)">');
	createOptionImage(item['image'], item['name']);

AddHtml('</div>');
}

function createOptionDetail(itemName, optionId, promo) {
	//class="vProductDetailOptionsInfoOptionQtyContainer"
	AddHtml('<div class="vProductDetailOptionsInfoOptionQtyContainer">');
	
	var formNum = getNextFormNum();
	if (!isOutofStock(optionId)){
	AddHtml('<form id="form' + formNum + '" action="' + this.CartAction + '" ' +
			'target="cartFrame" method="post">');
	AddHtml('<input id="btnSubmit' + formNum + '" type="submit" value="Add" style="display:none;"/>');
	AddHtml('<input type="hidden" name="c" value="' + this.AccountNum + '"/>');
	AddHtml('<input type="hidden" name="buyid" id="itemid' + formNum + '" ' +
			'value="' + this.ParentItemNsKey + '"/>');
	
	AddHtml('<input type="hidden" name="' + this.SelectOptionName + '" ' +
			'value="' + optionId + '"/>');
	}
	AddHtml('<div class="optionName">' + itemName + '</div>');
	if (isOutofStock(optionId)){
	AddHtml('<span class="oos">out of stock</span>')
	}
	if (!isOutofStock(optionId)){
	AddHtml('<label>qty: </label>');
	AddHtml('<input id="quantity' + formNum + '" class="quantity" autocomplete="off" '+ 
			'type="text" maxlength="2" size="2" name="qty" onkeypress="return filterKeysQuantity(event)" />');
	AddHtml('<span class="vProductsDetailOptionsInfoPromotionalText" >&nbsp;'+ promo +'</span>');
	AddHtml('</form>');
	}
	
	//AddHtml('<span class="vProductsDetailOptionsInfoPromotionalText" style="color:#333333;text-align:left;font-family:verdana,arial;font-size:80%;">new!</span>');
	AddHtml('</div>');
}

function getNextFormNum() {
	return ++this.FormNum;
}

function lookupOptionIdByItemId(itemId) {
	var i;
	for( i = 0; i < this.OptionIdLookup.length; i++ ) {
		if( itemId.indexOf(this.OptionIdLookup[i]['text']) > 0 ) {
			return this.OptionIdLookup[i]['value'];
		}
	}
	//alert("lookupOptionByItemId: did not find an option for itemId=" + itemId);
	return 0;
}

function overAction(swatchSource, colorName, groupNum, itemDiv){
	var swatchImage = document.getElementById("hov"+groupNum);
	var atomic=swatchImage.parentNode.cloneNode(true);
	if((swatchSource == null) || (swatchSource == "")) {
		swatchSource = this.SpacerImage;
	}
	//swatchImage.setAttribute("src", swatchSource);
	atomic.firstChild.src=swatchSource;
	var tmp=atomic.childNodes[1];
	tmp = replaceHtml(tmp, colorName);
	var tmp2=swatchImage.parentNode;
	tmp2.parentNode.replaceChild(atomic, tmp2);
	itemDiv.style.backgroundColor = "#EEEEEE";	
}

function overActionTest(swatchObject, colorName, groupNum, itemDiv){
	var swatchImage = document.getElementById("hov"+groupNum);
	if((swatchObject == null) || (swatchObject.src == "")) {
		swatchObject = this.SpacerImage;
	}
	//alert(swatchObject.src);
	swatchImage.src = swatchObject.src;
	var tmp =swatchImage.nextSibling;
	tmp = replaceHtml(tmp, colorName);
	
	itemDiv.style.backgroundColor = "#EEEEEE";	
}

function outAction(itemDiv) {
	itemDiv.style.backgroundColor = "#FFFFFF";
}

function filterKeysQuantity(e) {
	var key;
	if( window.event ) {
		key = window.event.keyCode; //IE
	} else {
		key = e.which; //firefox
	}
	
	if( key == 13 ) {	//enter key
		MultiSubmit();
		return false;
	}
	
	if( (key == 0) || (key == 8) ) { //backspace or unknown
		return true;
	}
	
	if( (key < 48 ) || (key > 57) ) { //0-9
		return false;
	}
	
	return true;
}
	

function replaceHtml(el, html) {
	var oldEl = typeof el === "string" ? document.getElementById(el) : el;
	/*@cc_on // Pure innerHTML is slightly faster in IE
		oldEl.innerHTML = html;
		return oldEl;
	@*/
	var newEl = oldEl.cloneNode(false);
	newEl.innerHTML = html;
	oldEl.parentNode.replaceChild(newEl, oldEl);
	/* Since we just removed the old element from the DOM, return a reference
	to the new element, which can be used to restore variable references. */
	return newEl;
};

function isOutofStock(optionID){

	if ( myItemavail[optionID] == 'undefined' || myItemavail[optionID] == null || myItemavail[optionID] == "") {
		return false;
	}
	return true;
}