// Set behaviours
Event.observe(document, 'dom:loaded', function() {
	// Set up onclick events for zoom/collapse
	$('detail_img').observe('click', function()
	{
		$('popup_box').setStyle({display: 'block'});
		$('enlargement').setStyle({backgroundImage: 'url("/images/products/500_500/'+this.readAttribute('title')+'")'});
	});
	$('enlargement').observe('click', function()
	{
		$('popup_box').hide();
	});
	$$('.popup_trigger_close')[0].observe('click', function()
	{
		$('popup_box').hide();
	});

	// Set up rollover events for thumbnail images
	if($$('.thumbContainer').length > 0)
	{
		$$('.thumbContainer').each( function(element) {
			element.observe('mouseover', function() {
				$('detail_img').setStyle({backgroundImage: 'url("/images/products/310_310/'+this.readAttribute('title')+'")'});
				$('detail_img').writeAttribute('title', this.readAttribute('title'));
				this.addClassName('tablecellactive');
				this.removeClassName('tablecellnormal');
			});
			element.observe('mouseout', function() {
				this.addClassName('tablecellnormal');
				this.removeClassName('tablecellactive');
			});
		});
	}
		
	// Rollover events for tag trigger and panel
	$('tags', 'tags-open').each(function (element)
	{
		element.observe('mouseover', function()
		{
			if($('tags-open').getStyle('display') != 'none') {
				window.clearTimeout(delayed.tagPanelClose);
			} else {
				$('tags-open').show();
			}
		});
		element.observe('mouseout', function()
		{
			if(typeof(delayed) == 'undefined') delayed = {};
			else delayed.tagPanelClose = Element.hide.delay(1, 'tags-open');
		});
	});
		
	// 
	$$('.select-menu').each(function(element)
	{
		element.observe('mouseover', function(){this.down('a').addClassName('sfover')}.bind(element));
		element.observe('mouseout', function(){this.down('a').removeClassName('sfover')}.bind(element));
	});
	
	// Add mouse event and onClick handlers to line items
	$$('.trigger').each(function(trigger, i)
	{
		registerLineItemEvents(trigger);
	});
		
	// Register colour-trigger custom onSelect event
	if($('size-trigger')) $('colour-trigger').observe('Evt:Select', populateSizeSelect);
		
	// If the product has only one colour, auto fire the select event
	if(productOptions.length == 1) {
		$('colour-trigger').fire('Evt:Select', {nProductColour:productOptions[0].NCOLOURID});
	}

	// Add to cart trigger
	$('trigger-add-to-bag').observe('click', function()
	{
		var form = this.up('form');
		var product = $F('nProductId');
		var colour = ($('nProductColour') && $F('nProductColour'))? $F('nProductColour'): getRadioValue(form, /^nProductColour(_){0,1}[0-9]+?/);
		var size = ($('nProductSize') && $F('nProductSize'))? $F('nProductSize'): getRadioValue(form, /^nProductSize(_){0,1}[0-9]+?/);
		var qty = $F('nProductQuantity');
		
		if(!colour || !size)
		{
			dsp_err('Item cannot be added to your cart / wishlist:', 'Please select an in stock colour/size option.');
		}
		else
		{
			new Ajax.Request('/sync/manage_cart.cfm', {
				method: "post",
				parameters: {
					add:			true,
					is_json_request: true,
					product:	product,
					colour:		colour,
					size:			size,
					qty:			qty
				},
				onSuccess: function(transport)
				{
					try
					{
						var response = transport.responseJSON;
						if(response.success == true)
						{
								// Update the cart display and show popup message
								$('cart-items').update(response.data.TOTAL_QTY);
								$('cart-total').update('$'+response.data.TOTAL_COST+'.00');
								Effect.Appear('addToBagConf', {duration:0.25, queue:{scope:'cart:confirmation', position:'end', limit:1}});
								Effect.Fade.delay(4, 'addToBagConf', {duration:0.25, queue:{scope:'cart:confirmation', position:'end'}});
						}
						else { dsp_err('Item could not be added to cart at this time:', response.message); }
					}
					catch(err)
					{
						if(console) console.log(err);
						dsp_err('Item could not be added to cart at this time:', 'We are sorry, a system error has occured and staff has been notified.');
					}
				},
				onFailure: function(err)
				{
					if(console) console.log(err);
					dsp_err('Item could not be added to cart at this time:', 'We are sorry, a system error has occured and staff has been notified.');
				}
			});
		}
	});

});

// Required functions
function registerLineItemEvents(trigger)
{
	trigger.select('li').each(function(li, i)
	{
		li.observe('mouseover', function() {
			// Update title
			this.up('.trigger').down('.title').update(this.title);
		});
		li.observe('mouseout', function() {
			// Reset title
			if(this.down('.title').hasClassName('colour-title')) {
				this.down('.title').update('Select a colour');
			} else {
				this.down('.title').update('Select a size');
			}
		}.bind(trigger));
		li.observe('click', function(event) {
			if(!event.target.hasAttribute('type'))
			{
				Event.stop(event);
			}
			if(!this.down('input').disabled) {
				// Fire custom event
				this.up('.trigger').fire('Evt:Select', {nProductColour:this.down('input').value});
				// Hide span
				this.up('.trigger').down('span').setStyle({display:'none'});
				Element.setStyle.delay(0.1, this.up('.trigger').down('span'), {display:''});
				// Update label
				this.up('.trigger').down('.label').update(this.title);
				// Check inputs
				this.down('input').checked = true;
			}
		});
	});
}

function populateSizeSelect(event)
{
	// Loop through the product options to find the data relating to the selected row
	productOptions.each(function(option, i)
	{
		if(option.NCOLOURID == this.nProductColour)
		{
			try
			{
				// Alias and clear the size option container
				var container = $('size-trigger').down('span').update();

				// Create ancillary structure
				container.insert(new Element('div').addClassName('title size-title'));
				container.down('.title').update('Select a size');
				container.insert(new Element('div').addClassName('list'));
				container.down('.list').insert(new Element('ul'));
				container.insert(new Element('div').addClassName('bottom'));
				
				// Alias the available sizes
				var sizes = option.QLISTSIZEAVAILABILITY.DATA;
				
				for(var i = 0; i < option.QLISTSIZEAVAILABILITY.ROWCOUNT; i++)
				{
					var line_item = new Element('li', {'title':sizes.SSIZETITLE?sizes.SSIZETITLE[i]:sizes.sSizeTitle[i]}).addClassName('option');
					line_item.insert(new Element('input', {'type':'radio', 'id':'nProductSize_'+(sizes.NSIZEID?sizes.NSIZEID[i]:sizes.nSizeId[i]), 'name':'nProductSize', 'value':sizes.NSIZEID?sizes.NSIZEID[i]:sizes.nSizeId[i]}));
					// line_item.down('input').writeAttribute('type','radio');
					line_item.insert(new Element('label', {'for':'nProductSize_'+(sizes.NSIZEID?sizes.NSIZEID[i]:sizes.nSizeId[i])}).update(sizes.SSIZETITLE?sizes.SSIZETITLE[i]:sizes.sSizeTitle[i]));
					
					container.down('ul').insert(line_item);
				}
				
				container.select('li').each(function(line_item, i)
				{
					// Register line item events
					registerLineItemEvents(this);
					// Set container class
					this.down('span').addClassName('display');
					this.removeClassName('disabled');
					this.down('.label').update('Select a size');
					this.down('img').writeAttribute('src','/images/nav/menu-select-colour-off.gif');
				}.bind(container.up('.trigger')));
				
				if(container.select('li').length == 1)
				{
					container.removeClassName('display');
					container.up('.trigger').addClassName('disabled');
					container.up('.trigger').down('.label').update(container.down('li').getAttribute('title'));
					container.up('.trigger').down('img').writeAttribute('src','/images/nav/menu-select-colour-disabled.gif');
					container.down('input').checked = true;
				}
			}
			catch(err)
			{
				if(console) console.log(err);
			}
		}
	}.bind(event.memo));
}

function getRadioValue(parent, regexp)
{
	var value = null;
	parent.select('input').each(function(element) {
		if(element.getAttribute('type') == 'radio' && element.getAttribute('id').match(regexp) && element.checked == true) value = $F(element);
	});
	return value;
}

function dsp_err(err, msg)
{
	// Set validation text
	$('jsValidation').select('span')[0].update(err);
	$('jsValidation').select('p')[0].update(msg);
	
	// Set validation icon
	$('icon').src = '/images/bg-shop-cross.gif';
	$('icon').alt = 'Error';
	
	// Run effects
	if($('jsValidation').getStyle('display') == 'block') $('jsValidation').slideUp({duration:0.25, queue:{scope:'validation', position:'start'}});
	$('jsValidation').slideDown({duration:0.5, queue:{scope:'validation', position:'end'}});
	setTimeout('if($(\'jsValidation\').getStyle(\'display\') == \'block\') $(\'jsValidation\').slideUp({duration:0.5, queue:{scope:\'validation\', position:\'end\'}})', 5000);
}

function dsp_msg(err, msg)
{
	// Set validation text
	$('jsValidation').select('span')[0].update(err);
	$('jsValidation').select('p')[0].update(msg);
	
	// Set validation icon
	$('icon').src = '/images/bg-shop-tick.gif';
	$('icon').alt = 'Success';
	
	// Run effects
	if($('jsValidation').getStyle('display') == 'block') $('jsValidation').slideUp({duration:0.25, queue:{scope:'validation', position:'start'}});
	$('jsValidation').slideDown({duration:0.5, queue:{scope:'validation', position:'end'}});
	setTimeout('if($(\'jsValidation\').getStyle(\'display\') == \'block\') $(\'jsValidation\').slideUp({duration:0.5, queue:{scope:\'validation\', position:\'end\'}})', 5000);
}