// Color data sample
// { 
// 	"0":{
// 		"id":"203",
// 		"name":"Apricot",
// 		"rgb":"fab788",
// 		"url":"http://www.lillap.com/site/swatch/"
// 		},
// 	"1":{ ... },
// 	"length":2
// }
var NONE_SELECTED = 'None Selected';

$(document).ready(function(){
	// Main Nav workaround for NS issue
	$('#left_menu_contents .portletHandle tr:first-child').hide();
	$('#left_menu_contents a[href=/Home]').attr('href','/Welcome');	
	
	$(".jqzoom").jqzoom({zoomWidth:300, zoomHeight:300, title:false, xOffset:94, yOffset:-55});  // add zoom behaviour
	
	if ($('#drilldownTable').length > 0) setupOptionsChooser();
});

// ************  Options Chooser Behaviour **********

function setupOptionsChooser () {
	
	var w = window;
	w.lillap = {};
	
	var aAvailableSizeIds = getSelectValueArray(document.getElementById('custcol_size')).slice(1);
	var aAvailableColorIds = getSelectValueArray(document.getElementById('custcol_coloroption')).slice(1);
	var nItemId = document.getElementById('buyid').value;
	var aOutOfStock = eval('Item'+nItemId+'_avail');
	w.lillap.aOutOfStock = aOutOfStock;  // for use in availability checks
	w.lillap.aAvailableSizeIds = aAvailableSizeIds;
	w.lillap.aAvailableColorIds = aAvailableColorIds;
	
	// inject containers for option boxes as a new row with divs 
	var oOptionContext = $('#nsOptions');
	oOptionContext.before('<tr><td><div class="ddOptions"><p>Size:<span id="curSize">None Selected</span></p><div id="sizeContainer"></div><p>Color:<span id="curColor">None Selected</span></p><div id="swatchContainer"></div><div id="swatchPopup"><div id="swatchImg"></div><div id="swatchInfo"><p/></div></div></div></td></tr>');

	var sSizeHTML = "";
	for (var i=0; i < aAvailableSizeIds.length; i++) {
		sSizeHTML += buildSizeHtml( aAvailableSizeIds[i] );
	};
	$('#sizeContainer').append(sSizeHTML);
	$('.sizeButton').each(function(idx, el){
		$(el).data('size', $(el).attr('id').split('-')[1]);
	});
	$('.sizeBox').click( ddSizeSelected );
	var sColorHTML = "";
	var nOutCount = 0;
	for (var i=0; i < aAvailableColorIds.length; i++) {
		nOutCount = 0;
		for (var j=0; j < aAvailableSizeIds.length; j++) {
			if(aOutOfStock[aAvailableSizeIds[j]+':'+aAvailableColorIds[i]]) nOutCount++;
		};
		if(nOutCount < aAvailableSizeIds.length) sColorHTML += buildColorHtml( aAvailableColorIds[i] );
	};
	$('#swatchContainer').append(sColorHTML).mouseleave( ddHideSwatch );

	var uColorSuitelet = 'https://forms.netsuite.com/app/site/hosting/scriptlet.nl?script=51&deploy=1&compid=631629&h=de489ff621bbf7823308';
	uColorSuitelet += '&callback=?';
	// changed from this to improve cache hits
	// $.getJSON( uColorSuitelet, { colors:aAvailableColorIds.join() }, function(data, textStatus) {
	$.ajax({
		url: uColorSuitelet,
		dataType: 'json',
		data: { colors:aAvailableColorIds.join() },
		success: function(data, textStatus) {
			w.lillap.colorData = data;
			for (var i=0; i < data.length; i++) {
				var colorbox = $('#colorbox-'+data[i].id);
				colorbox.data(data[i]);   
				var rgb = data[i].rgb ? data[i].rgb : 'FFF';
				var sName = data[i].name ? data[i].name : 'Color Name Missing';
				colorbox.css('background-color','#'+rgb);
				colorbox.attr('title', sName);
				colorbox.parent()
				.mouseenter( ddShowSwatch )
				.click( ddSwatchSelected );
				if (data[i].url){
					colorbox.html('<img src="'+data[i].url+'" >' );
				}

			};
		},
		jsonpCallback: "jsonp"+$('.itemsku').html()
	});

}
function buildColorHtml (nColorId) {
	var html = "<div class='swatchBox'><a href='javascript: void {};' class='swatchLink'><div class='swatchColor' id='colorbox-"+
		nColorId+"'>&nbsp;</div></a></div>";
	return html;
};

function buildSizeHtml (nSizeId) {
	var aSizeLbl = ['Error','XS','S','M','L','XL','OS','PS','ML'];
	var html = "<div class='sizeBox'><a href='javascript: void {};' class='sizeLink'><div class='sizeButton' id='size-"+nSizeId+"'>"+
		aSizeLbl[nSizeId]+"</div></a></div>";
	return html;
};

function ddShowSwatch ( oEvt ) {
	var rgb = $(oEvt.target).data('rgb') ? $(oEvt.target).data('rgb') : 'FFF';
	var swatchimg = $('#swatchImg');
	var tgt = $(oEvt.target);
	swatchimg.css('background-color', '#'+rgb);
	// TODO there must be a better way to do this with bubbling...
	if (oEvt.target.nodeName == 'IMG') tgt = tgt.parents('.swatchColor');
	if (tgt.data('url')){
		swatchimg.html('<img src="'+tgt.data('url')+'" >' );
	}
	else {
		swatchimg.html('');
	}
	$('#swatchInfo p').html(tgt.data('name'));
	$('#swatchPopup').show();
};

function ddHideSwatch ( oEvt ) {
	$('#swatchPopup').hide();
};

function deselectSwatch () {
	var selected = $('#swatchContainer').data('selected');
	var colorSelElem = document.getElementById('custcol_coloroption');
	if (selected) selected.css('border-color','transparent');
	$('#swatchContainer')
		.data('selected',null)
		.data('color',null);
	$('#swatchContainer .swatchIndicator').css('background-color','transparent');
	$('#curColor').html(NONE_SELECTED);
	setSelectValue(colorSelElem, ''); 
};

function ddSwatchSelected ( oEvt ) {
	var jElem = $(oEvt.target),
		nNestLimit = 3,
		sColor = '',
		sName = '';
	// deal with img click target inside swatchbox
	do
	{
		sColor = jElem.attr('id').split('-')[1];
		sName = jElem.data('name');		
		jElem = jElem.parent();
	}
	while( !sColor && nNestLimit-- > 0)
	
	if ( ! ddIsColorAvailable(sColor) ) {
		deselectSize();
		ddSetColorAffordances ();
	}
	var colorSelElem = document.getElementById('custcol_coloroption');
	var selected = $(oEvt.target).parents('div.swatchBox:first');
	var cur_selection = $('#swatchContainer').data('selected');
	if (selected && selected.length > 0 && cur_selection && cur_selection.length > 0 && selected[0] === cur_selection[0] ) {
		deselectSwatch();
		$('#swatchContainer')
			.data('selected', null)
			.data('color', null);  
		$('#curColor').html(NONE_SELECTED);
		selected.css('border-color','transparent');
		setSelectValue(colorSelElem, ''); 
	} 
	else // new selection
	{
		deselectSwatch();
		$('#swatchContainer')
			.data('selected', selected)
			.data('color', sColor);  
		$('#curColor').html(sName);
		selected.css('border-color','black');
		setSelectValue(colorSelElem, sColor); 
	}
	ddSetSizeAffordances ();
};

function ddSetSizeAffordances () {
	$('#sizeContainer .sizeButton').each(function(){
		if (ddIsSizeAvailable($(this).data('size'))) {
			$(this)
				.attr('title', '')
				.css('background-color','white')
				.css('color','rgb(72, 67, 63)')
				.css('border-style','solid')
				.css('cursor','pointer');
		} 
		else {
			$(this)
				.attr('title', 'Unavailable')
				.css('background-color','#EEE')
				.css('color','#999')
				.css('border-style','dashed')
				.css('cursor','default');
		}
	});
};

function deselectSize () {
	var selected = $('#sizeContainer').data('selected');
	var sizeSelElem = document.getElementById('custcol_size');
	if (selected) selected.css('border-color','transparent');
	$('#sizeContainer')
		.data('selected',null)
		.data('size',null);
	$('#curSize').html(NONE_SELECTED);
	setSelectValue(sizeSelElem, ''); 
};
function ddSizeSelected ( oEvt ) {
	if ( ! ddIsSizeAvailable($(oEvt.target).attr('id').split('-')[1]) ) {
		deselectSwatch();
		ddSetSizeAffordances ();
	}
	var selected = $(oEvt.target).parents('div.sizeBox:first');
	var cur_selection = $('#sizeContainer').data('selected');
	var sizeSelElem = document.getElementById('custcol_size');
	if (selected && selected.length > 0 && cur_selection && cur_selection.length > 0 && selected[0] === cur_selection[0] ) {
		deselectSize();
		$('#sizeContainer')
			.data('selected', null)
			.data('color', null);  
		$('#curSize').html(NONE_SELECTED);
		setSelectValue(sizeSelElem, ''); 
		selected.css('border-color','transparent');
	} 
	else // new selection
	{
		deselectSize();
		var nSize = $(oEvt.target).data('size');
		$('#sizeContainer')
			.data('selected', selected)
			.data('size', nSize);
		$('#curSize').html(getSelectTextForValue(sizeSelElem, nSize));
		setSelectValue(sizeSelElem, nSize); 
		selected.css('border-color','black');
	}
	ddSetColorAffordances();
};

function ddSetColorAffordances () {
	$('#swatchContainer .swatchColor').each(function(){
		if (ddIsColorAvailable($(this).data('id'))) {
			$(this)
				.attr('title', $(this).data('name'))
				.css('cursor','pointer')
				.css('border-width', '1px')
				.css('border-style', 'solid')
				.css('background-color', $(this).data('rgb') ? '#'+$(this).data('rgb') : '#FFF');
			$('img', this)
				.show();
		} 
		else {
			$(this)
				.attr('title', 'Unavailable')
				.css('cursor','default')
				.css('border-width', '1px')
				.css('border-style', 'dashed')
				.css('background-color','transparent');
			$('img', this)
				.hide();
		}
	});
};

function ddIsColorAvailable (sColor, sizeSelected) {
	if (typeof(sizeSelected) === 'undefined') sizeSelected = $('#sizeContainer').data('size');
	if(sizeSelected && typeof(window.lillap.aOutOfStock[sizeSelected+':'+sColor]) !== 'undefined') return false;
	return true;
};

function ddIsSizeAvailable (sSize, colorSelected) {
	if (typeof(colorSelected) === 'undefined') colorSelected = $('#swatchContainer').data('color');
	if(colorSelected && typeof(window.lillap.aOutOfStock[sSize+':'+colorSelected]) !== 'undefined') return false;
	return true;
};