// JavaScript Document for Olay UK global elements.

$(document).ready(function(){

	// Removing submit button for some forms and replacing it with a link which we will submit using javascript
	$('#submitBtn').html(
		'<div class="btnFlare"></div>' +
		'<div class="containerBtn">' +
			'<div class="containerBtnLink">' +
				'<div class="btnTopRight"></div>' +
				'<div class="btnLink">' +
					'<a href="">' + $('#submitBtn input').attr('value') + '</a>' +
				'</div>' +
			'</div>' +
		'</div>'							
	);
	
	$('#submitBtn .btnLink a').click(function() {
																				 
		$('#frm').submit();	
		return false;
			
	});

	// Fix for IE to make buttons shrink wrap to the size of the link text.
	$('.containerBtn').each(function(i){
																	 
		$(this).width($('.btnLink a').eq(i).width() + 18);
		
	});	
	
	// Inserts a lightbox container dynamically.
	$('#containerFooter').after(
															
		'<div id="lightBoxBg"></div>' + 
		'<div id="lightBoxContainer">' +
			'<div id="lightBox"></div>' +
		'</div>'
		
	);
	
	// Subsequent code generates a lightbox to display a 'About the brand' page.
	$('.aboutTheBrand').click(function() {
																														
		$('#quickLinks').css({visibility: 'hidden'});
		var url = this.href;
	
		$('#lightBox').load(url + ' .overlay', function() {
																										
			$('.overlay p.last').after('<a id="closeBtn">Close</a>');
			$("#closeBtn").css({cursor:'pointer'}).click(closeLightBox);																									
																									
		});
		$('#lightBoxBg').height($('#containerMain').height());
		$(document).scrollTop(0);
		$('#lightBoxBg').css('opacity', '0.85').fadeIn('slow');
		$('#lightBoxContainer').fadeIn('slow');
		
		return false;
	
	});
	
});

// Close function for lightboxes.
function closeLightBox() {
	
	$('#lightBoxContainer').fadeOut('slow'); 
	$('#lightBoxBg').fadeOut('slow').css({display:'none'}); 
	$('#quickLinks').css({visibility: 'visible'});
	
}

/* Got this code from alistapart. It basically makes IE6 behave and allows us to use CSS to control our dropdown lists. */
startList = function() {
	// Check that we are IE5+
	if (document.all&&document.getElementById) {
		// Then loop over the DOM looking for all the children of the element with an id of "navMain", our container <ul> in this case.
		navRoot = document.getElementById("navMain");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			// Append the classname "over" to our <li> elements and allow the CSS to do the rest.
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					this.className+=" over";
				}
				node.onmouseout=function() {
					this.className=this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload=startList;
//function to open new windo

function openWindow(urlName){
	mywindow = window.open (urlName,"newWindow","location=1,status=1,scrollbars=1,width=500,height=500");
	mywindow.moveTo(0,0);
	return false;
}