var Config = {
	'edit_abaya_link_class'	:'edit_abaya_link',
	'edit_abaya_link_id'	:'edit_abaya_link',
	'edit_abaya_box_id'		:'edit_abaya',
	'edit_abaya_save_button_id'	:'abaya_button',
	'edit_abaya_clear_button_id':'abaya_clear_button',
	'edit_abaya_link_message_add':'Click here to add your Abaya measurements',
	'edit_abaya_link_message_edit':'Edit your Abaya measurements',
	'order_submit_button_id':'submit-order',
	getAbayaViewBox:function() { return $(Config.edit_abaya_link_id).getParent('.view_box'); },
	getAbayaEditBox:function() { return $('edit_abaya'); }
};

function onSubmitHandler()
{
	var cnt = $$('#ShailaNumberBox input').length;
	
	if(cnt < 1 || isAbayaFormFilled())
		return true;
	
	var shaila = (cnt > 1)?'shailas':'shaila';
	var c = confirm("Do you want to order a matching Abaya for your "+shaila+" ? \nClick \"Ok\" to add your abaya measurements, or \"Cancel\" to continue with checkout"); 
	
	if(c)
	{
		showEditAbaya();
		return false;
	}
}

function showEditLink( save_button )
{
	$(save_button.parentNode.parentNode.parentNode).getElement('a.edit').style.display = 'inline'; 
}

function removeProduct(a)
{
	var parent 			= a.parentNode.parentNode;
	var grand_parent	= parent.parentNode;
	var id 				= $(parent).getElement('.id_for_js').value;
	
	grand_parent.removeChild(parent);
	$('remove_ids').value += id+',';
}

function swapBoxes(box, view_box)
{
	if(box.style.display == '' || box.style.display == 'none')
	{
		box.style.display = 'block';
		view_box.style.display = 'none';
	}
	else if(box.style.display == 'block')
	{
		box.style.display = 'none';
		view_box.style.display = 'block';
	}
}

function showHideEditAbaya(a)
{
	var box 		= Config.getAbayaEditBox();//$(Config.edit_abaya_box_id);
	var view_box 	= Config.getAbayaViewBox();//$(a).getParent('.view_box');
	
	swapBoxes(box,view_box);	
}

function showEditAbaya()
{
	Config.getAbayaEditBox().style.display = 'block';
	Config.getAbayaViewBox().style.display = 'none';
}

function showHideEdit(a)
{
	var box 		= $(a.parentNode.parentNode).getElement('.edit_box');
	var view_box 	= $(a.parentNode.parentNode).getElement('.view_box');
	
	swapBoxes(box,view_box);
}

function applyCrystalValues(id, target_div)
{
	var elements 	= eval('document.forms[0].CrystalSize_'+id);
	
	var crystal_size  	= $(target_div[0]);
	var custom_crystals = $(target_div[1]);
	var requirements  	= $(target_div[2]);
		
	for(var i=0 ; i < elements.length ; i++)
	{
		if(elements[i].checked)
		{
			crystal_size.innerHTML = elements[i].value;
			break;
		}
	}
	
	var crystals 	= document.forms[0];
	var first_time 	= true; 

	for(var i=0 ; i < crystals.length ; i++)
	{
		if(crystals[i].name == 'CustomCrystals_'+id+'[]' && crystals[i].checked)
		{
			if(first_time)
			{
				custom_crystals.innerHTML = '';
				first_time = false;
			}
			
			custom_crystals.appendChild($(crystals[i].parentNode).getElement('img').cloneNode(false));			
		}
	}
	
	var temp = eval('document.forms[0].AdditionalRequirements_'+id+'.value');
	
	if(temp != '')
		requirements.innerHTML = temp;
	
	if(requirements.innerHTML.length > 100)
		requirements.innerHTML = requirements.innerHTML.substring(0,100) + '...';
}

function saveCrystalSettings( button , skip_swap )
{
	var box 	= $(button.parentNode.parentNode).getElement('.view_box');
	var parent 	= $(button.parentNode);
	
	var id 		= $(parent).getElement('.id_for_js').value;
	var target 	= $(box).getElements('.value');
	
	applyCrystalValues(id,target);
	
	if(skip_swap == null || skip_swap == false)
		swapBoxes(parent, box);
}

function saveShailaSettings(button, skip_swap)
{
	var box 	= $(button.parentNode.parentNode).getElement('.view_box');
	var parent 	= $(button.parentNode);	
	var id 		= parent.getElement('.id_for_js').value;
	
	var temp 	= $(box).getElements('.value');	
	var width  	= $(temp[0]);
	var length 	= $(temp[1]);
	var colors  = $(temp[2]);
	var fabric  = $(temp[3]);
	var requirements = $(temp[4]);
	var qty  	= $(temp[5]);
	
	width.innerHTML 	= eval('document.forms[0].Width_'+id+'.value');  
	length.innerHTML 	= eval('document.forms[0].Length_'+id+'.value');
	qty.innerHTML 		= eval('document.forms[0].ItemQty_'+id+'.value');
	fabric.innerHTML 	= eval('document.forms[0].FabricOption_'+id+'.value');
	
	if((temp = eval('document.forms[0].CustomColors_'+id+'.value')) != '')
		colors.innerHTML 	= temp;
	
	if((temp = eval('document.forms[0].AdditionalRequirements_'+id+'.value')) != '')
		requirements.innerHTML = temp;	
	
	if(requirements.innerHTML.length > 100)
		requirements.innerHTML = requirements.innerHTML.substring(0,100) + '...';
	
	if(skip_swap == null || skip_swap == false)
		swapBoxes(parent, box);
}

function isAbayaFormFilled()
{
	return ($('Neck') && $('Neck').value != '');	
}

function getShailaNumbers()
{
	var array = new Array();
	var elements = $('ShailaNumberBox').getElements('input');
	
	for(var i=0; i < elements.length ; i++)
	{
		if(elements[i].checked)
		{
			var str = elements[i].parentNode.innerHTML;
			str = str.substring(str.indexOf(">")+1);
			array.push(str);//elements[i].value);
		}	
	}
	
	return array;
}

function getAbayaMeasurementFields()
{
	return new Array('Neck','Shoulder','ArmHole','SleeveLength','BottomHand','RoundElbow','RoundDown','Length','Chest');
}

function getAbayaFields()
{
	var array = getAbayaMeasurementFields();
	array.push('AdditionalRequirements');
	array.push('PlainAbaya');
		
	return array;
}

function showAbayaPrelude()
{
	if(!$('abaya_instruction1') || !$('abaya_instruction2'))
		return;
	
	if(isAbayaFormFilled())
	{
		$('abaya_instruction1').style.display = 'none';
		$('abaya_instruction2').style.display = 'block';
		
		displayAbayaDetails();
		$(Config.edit_abaya_link_id).innerHTML = Config.edit_abaya_link_message_edit;
	}
	else
	{
		$('abaya_instruction1').style.display = 'block';
		$('abaya_instruction2').style.display = 'none';
		$(Config.edit_abaya_link_id).innerHTML = Config.edit_abaya_link_message_add;
	}
}

function displayAbayaDetails()
{
	var array = getAbayaMeasurementFields();
	var nos = getShailaNumbers();
	var temp = '';
	
	for(var i=0; i<nos.length ; i++)
		temp += nos[i]+', ';
	
	temp = temp.substring(0,temp.length-2);		
	var str = '<li><span>For Shaila(s) #</span> : '+temp+'</li>';
	
	var names = {"ArmHole": "Arm hole", "SleeveLength":"Sleeve length", "BottomHand": "Bottom hand", "RoundElbow":"Round elbow", "RoundDown":"Round down" }
	
	for(var i=0; i<array.length ; i++)
	{
		name = array[i];
		
		if(names[name])
			name  = names[name];
			 
		str += '<li><span>'+name+'</span> : '+$(array[i]).value+'"</li>';
	}
	
	str += '<li><span>Plain Abaya</span> : '+(($('PlainAbaya').checked)?'yes':'no')+'</li>';
	str += '<li><span>Additional requirements</span> : '+$('AdditionalRequirements').value+'</li>';
	str = '<ul>'+str+'</ul>'; 
	$('abaya_details').innerHTML = str;
}

function validateAbaya()
{
	var array = getAbayaMeasurementFields();	
	var errors = '';
	
	for(var i=0; i < array.length ; i++)
	{
	  	if(!parseInt($(array[i]).value))
	 		errors = '<li>All measurements are mandatory. Please enter all measurements in inches</li>';
	}
	
	if(getShailaNumbers().length < 1)
		errors += '<li>Please select atleast one shaila number</li>';
	
	if(errors != '')
	{
	 	var elem = $('abaya_error'); //#abaya_error should be a div tag. <p> will generate an error	 	
	 	elem.innerHTML = "<ul style='margin-bottom:1em;'>"+errors+"</ul>";	 		
	 	return false;
	}
	else
	 	$('abaya_error').innerHTML = '';
	 
	return true;
}

function prepareShoppingBag()
{
	$(Config.order_submit_button_id).addEvent('click', onSubmitHandler );
	
	$$('a.'+Config.edit_abaya_link_class).each( function(a){	
		a.addEvent('click',function(){ showHideEditAbaya(this); return false; });		
	});	
	
	if($(Config.edit_abaya_save_button_id))
		$(Config.edit_abaya_save_button_id).addEvent('click', function(){ 
			
			if(!validateAbaya())
				return false;
			
			showHideEditAbaya();
			showAbayaPrelude();
						
			return false;			
		});	
	
	if($(Config.edit_abaya_clear_button_id))
		$(Config.edit_abaya_clear_button_id).addEvent('click', function(){ 
			var array = getAbayaFields();
			
			for(var i=0; i < array.length ; i++)
			{
				var temp = $(array[i]);
				if(temp) temp.value=''; 
				if(temp.checked) temp.checked = false;				
			}
			
			$$('#ShailaNumberBox input').each( function(input){ input.checked = false; });
			
			$('abaya_error').innerHTML = '';				
			showHideEditAbaya();
			showAbayaPrelude();						
		});
	
	
	$$('a.edit').each( function(a){	
		a.addEvent('click',function(){ this.style.display = 'none'; showHideEdit(this); return false;});		
	});
	
	$$('input.crystal_button').each( function(button){	
		button.addEvent('click',function(){ showEditLink(button); saveCrystalSettings(this); return false; });
		saveCrystalSettings(button,true);	
	});	
	
	$$('input.shaila_button').each( function(button){	
		button.addEvent('click',function(){ showEditLink(button); saveShailaSettings(this); return false; });
		saveShailaSettings(button,true);
	}); 
}

window.addEvent('domready', function(){

	$$('#menu li').forEach(function(el){
	
	el.addEvent("mouseenter", function(evt){
			
			var ul = $(this.getElement('ul'));
			if(!ul)	return;
			
			ul.style.display = 'block';
			ul.fade('in');
			/* PROBLEM : First time the menu is displayed it doesnt 'appear', but immediately becomes visible. 
				After that it fades in and fades out. 
				
				This is one of computer science's toughest problems. How do i make it appear the first time?
				
				Tried making in visible/invisible, but problem is when the mouse moves over the content, the menu suddenly shows up
				since it was already 'open'. just not visible.
			*/			
		});
		
	el.addEvent("mouseleave", function(){
			// Resets the tween and changes the element back to its original size
			var ul =  $(this.getElement('ul'));
			if(!ul)	return;
			ul.fade('out');			
		});
			
	});
	
	
	if($$('h1 span')[0] && $$('h1 span')[0].innerHTML == 'Shopping Bag')
	{
		prepareShoppingBag();
		showAbayaPrelude();
	}
	
});