/**
 * Add a ready event handler
 * 
 */

// Turn jQuery into no conflict mode
//$.noConflict();

jQuery(document).ready(function()
{
	// Enable the product review tabs
	enableTabs();
	
	// Enable the product image handler
	productImageHandler();
});

/**
 * Product Image Click Handler
 */
function productImageHandler()
{
	// When we click on the small product image
	jQuery('.jsProductImage').click(function()
	{							
		// Change the main product image
		// Set the main image src to this images href
		jQuery('#product-image-img').attr('src',jQuery(this).attr('rel'));	
		jQuery('#product-image-img').attr('alt',jQuery(this).attr('title'));	// and set it's alt to this ones title
		
		// Work out the path of the new huge image
		var newImage = "/images/__products/huge/" + jQuery(this).attr('rel2');
		
		// Change the cloud zoom image
		jQuery('#cloud-zoom').attr('href', newImage);
		jQuery('#cloud-zoom').attr('title', jQuery(this).attr('title'));
		jQuery('#cloud-zoom').data('zoom').destroy();
		jQuery('#cloud-zoom').CloudZoom();
		
		return false;
	});
}

/**
 * Adds the click functionality to the two top tabs
 * 
 * @return
 */
function enableTabs()
{
	// When clicking rating tab button
	jQuery('.ratingtab').click(function()
	{
		// Add an over class to this
		jQuery(this).addClass('over');
		
		// Remove the over class from the other button
		jQuery('.relatedtab').removeClass('over');
		jQuery('.speciestab').removeClass('over');
		
		// Now fade out the current panel
		jQuery('#related-products').fadeOut('50');
		jQuery('#related-species').fadeOut('50');
		
		// Then fade in the one we want to show
		jQuery('#customer-reviews').delay('100').fadeIn('50');
	});
	
	// When clicking the related products tab
	jQuery('.relatedtab').click(function()
	{
		// Add an over class to this
		jQuery(this).addClass('over');
		
		// Remove the over class from the other button
		jQuery('.ratingtab').removeClass('over');
		jQuery('.speciestab').removeClass('over');
		
		// Now fade out the current panel
		jQuery('#customer-reviews').fadeOut('50');
		jQuery('#related-species').fadeOut('50');
		
		// Then fade in the one we want to show
		jQuery('#related-products').delay('100').fadeIn('50');
	});
	
	// When clicking the related species
	jQuery('.speciestab').click(function()
	{
		// Add an over class to this
		jQuery(this).addClass('over');
		
		// Remove the over class from the other button
		jQuery('.ratingtab').removeClass('over');
		jQuery('.relatedtab').removeClass('over');
		
		// Now fade out panels
		jQuery('#customer-reviews').fadeOut('50');
		jQuery('#related-products').fadeOut('50');
		
		// Then fade in the one we want to show
		jQuery('#related-species').delay('100').fadeIn('50');
	});
	
	// When clicking on the small 'Reviews >' link next to a product
	jQuery('.review-link').click(function()
	{
		// Add an over class to the ratings tab button
		jQuery('.ratingtab').addClass('over');
		
		// Remove the over class from the related button
		jQuery('.relatedtab').removeClass('over');
		
		// Fade out the information we don't want
		jQuery('#related-products').fadeOut('50');
		
		// Fade in the information we do want
		jQuery('#customer-reviews').delay('100').fadeIn('50');
		
		// Now use dan's scroller to animate the window to the top of the reviews
		jQuery('html, body').animate({scrollTop: jQuery('.ratingtab').offset().top}, 500);
	});
	
	// We need to add a click event to the jsMoreReviews Button too
	jQuery('button#jsMoreReviews').live('click',function(){
		
		// Fade out and detach the button
		jQuery(this).fadeOut('fast').detach();
		
		// Get the product Id and the offset
		var $offset 	= jQuery('#customer-reviews').attr('data-offset');
		var $productId 	= jQuery('#customer-reviews').attr('data-product');
		
		// Update offset by adding 10 to it
		$offset = ($offset*1)+10;
		
		// Fetch the product reviews
		jQuery.get('/product-reviews/',{
			productId:	$productId,
			offset:		$offset
		},function(data){
			
			// Insert into document
			jQuery('#customer-reviews').append(data);
			
			// Set an initial delay of 100ms
			var $delay = 100;
			
			// Hide all 'hidden' items
			jQuery('div.review.hidden').hide().each(function(index){
				
				// Loop through and fade the items in 1 by 1
				jQuery(this).removeClass('hidden').delay($delay).fadeIn('fast');
				
				// Add 10ms to the delay (so it looks like they fade in one after the other
				$delay = $delay + 10;
			});

			// Put it back into the page
			jQuery('#customer-reviews').attr('data-offset',$offset);
		});
		
	});
}


/**
 * jQuery function to show and then hide the basket feedback
 * 
 */
jQuery(function(){
	// This will fade the feedback in and out if no mouse interaction
	jQuery('#feedback-container').delay(500).fadeIn(500, enableMouseStop).delay(4000).fadeIn(1,disableMouseStop).fadeOut(500);
	// $('#feedback-container').delay(1000).fadeIn(1000); << USE THIS LINE TO STYLE UP THE BASKET FEEDBACK (won't dissapear)
	
	// Once we have rolled over this will handle the click on continue button
	jQuery('#continue-button').click(function(){
		// FIRST unbind the mouseout (so it doesn't stop again)
		jQuery('#mini-basket-feedback').unbind('mouseover');
		
		// Now fade out
		jQuery('#feedback-container').fadeOut(200);
		
		// And return false so that our fallback link isn't followed!
		return false;
	});
});

/**
 * Enables the mouseover event on the Basket Feedback
 *  
 * @return
 */
function enableMouseStop(){
	// Create a listener for the feedback on mouseover
	jQuery('#mini-basket-feedback').mouseover(function(){
		// Stop all animation, clear queue and do not jump to end
		jQuery('#feedback-container').stop(true,false);
	});
}

/**
 * Disables the mouseoever event on the basket feedback
 * 
 * @return
 */
function disableMouseStop(){
	jQuery('#mini-basket-feedback').unbind('mouseover');
}



/**
 * New function to handle the notify me buttons
 * 
 */
jQuery(function(){
	
	// When we click the first check button
	jQuery('.notifyCheck').click(function(){
		
		// First traverse up to find the parent form
		$form = jQuery(this).parents('form');
		
		// Now find the customerRef field
		$customer = jQuery($form).find('input[name=customerRef]');
		
		// Now get the value of this
		$customerRef = jQuery($customer).val();
		
		// Is this 0?
		if($customerRef == '0'){
			
			// It's 0 we need to show the hidden form
			jQuery($form).find('.hiddenNotifyFields').show();
			
			// Return False
			return false;
			
		}
		
	});
	
	// now put some validation on the form that displays itself afterwards
	jQuery('.notifySubmit').click(function(){
		
		// First Traverse up the tree to find the parent form
		$form = jQuery(this).parents('form');
		
		$email = jQuery($form).find('input[name=email]').val();
		
		if(checkValidEmail($email) == false){
			return false;
		}
		
	});
});



function checkValidEmail(str) 
{
	var at="@";
	var dot=".";
	var lat=str.indexOf(at);
	var lstr=str.length;
	var ldot=str.indexOf(dot);
	
	if (str.indexOf(at)==-1)
	{
		alert("Please check that you have correctly entered your email address");
		return false;
	}

	if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr)
	{
		alert("Please check that you have correctly entered your email address");
		return false;
	}

	if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr)
	{
		alert("Please check that you have correctly entered your email address");
		return false;
	}

	if (str.indexOf(at,(lat+1))!=-1)
	{
		alert("Please check that you have correctly entered your email address");
		return false;
	}

	if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot)
	{
		alert("Please check that you have correctly entered your email address");
		return false;
	}

	if (str.indexOf(dot,(lat+2))==-1)
	{
		alert("Please check that you have correctly entered your email address");
		return false;
	}
		
	if (str.indexOf(" ")!=-1)
	{
		alert("Please check that you have correctly entered your email address");
		return false;
	}

 		return true;				
}