//Product JavaScript Document

// Drop Down Style Product Options Handlers

$(function() {
	// Add on change to product option one.
	$("#ProductOptions1").change(function(){
			counter = $(this).attr("counter");
			
			// Hack attack
			if($(this).attr("attributeId" == 2)){
				// We need to use the opposite attribute to what we have already got
				attributeId = 3;
			}
			else{
				attributeId = 2;
			}
			productId = $(this).attr("productId");
			parentValue = $(this).val();
			
			loadProductMenu2(counter, attributeId, productId, parentValue);
			
			/* we also need to check the value of this item against our product images */
			var groupVal = $(this).val();
			
			/* Replace spaces with slashes */
			groupVal = groupVal.replace(" ","-");
			groupVal = groupVal.replace(" ","-");
			groupVal = groupVal.replace(" ","-");
			groupVal = groupVal.replace(" ","-");
			groupVal = groupVal.replace(" ","-");
			
			// alert(groupVal);

			/* Make this item click (it can only be an image) */
			$('p.jsProductImage[rel2=group-'+groupVal+']').click();
		}
	);
});


function loadProductMenu2(counter, attributeId, productId, parentValue){
	// Load 
	$.ajax({url: "/ajax/options/?counter="+counter+"&attributeId="+attributeId+"&productId="+productId+"&parentValue="+parentValue,
		  	success: function(data){
		    			$('#ProductOptions2Wrapper').html(data);
		    			setupSecondAttributes();
		    			loadPrice();
		  			}
			});
}

$(function(){
	
	// If the form item name attribute 1 changes run a function
	$('[name=attribute3]').change(function(){
		// Get the value of this option
		var option1 = $('[name=attribute3] option:selected').val();
		
		// We want the product id
		productId = $(this).attr("productId");
		
		// Chuck this to the updater only if we have a product Id
		if(productId){
			updatePrice(option1, productId);
		}

	});
	setupSecondAttributes();
});

function setupSecondAttributes(){
	// If the form item name attribute 2 changes run a function
	$('[name=attribute2]').change(function(){
		// Get the value of this option
		var option2 = $('[name=attribute2] option:selected').val();
		
		// We want the product id
		productId = $(this).attr("productId");
		
		// Chuck this to the updater only if we have a product Id
		if(productId.length > 0){
			updatePrice(option2, productId);
		}
		
	});
}

// This will call in the ajax required to update the price shown on the site
function updatePrice(option, productId){
	/* REWRITING THE WAY THIS WORKS PLEASE */
	if($('div#productPrices').length > 0){
		
		var option1 = "";
		var option2 = "";
		
		/* First do we have an attribute 3? */
		if($('[name=attribute3]').length > 0){
			// Is it nto blank, and not please select?
			if(($('[name=attribute3]').val() != "Please select ->") && ($('[name=attribute3]').val() != "")){
				// Set value of option 1
				option1 = $('[name=attribute3]').val();
			}
		}
		
		/* Now do we have an attribute 2? */
		if($('[name=attribute2]').length > 0){
			// Is it nto blank, and not please select?
			if(($('[name=attribute2]').val() != "Please select ->") && ($('[name=attribute2]').val() != "")){
				// Set value of option 2
				option2 = $('[name=attribute2]').val();
			}
		}
		
		/* Now run our get request */
		$.get("/ajax/prices/",{
			skuOption1:option1,
			skuOption2:option2,
			productId:productId
		},function(data){
			/* Put the data into the productPrices area */
			$('div#productPrices').html(data);
		});
	}
	

//	
//	// Load 
//	$.ajax({url: "/ajax/prices/?skuOption="+option+"&productId="+productId,
//		  success: function(data) {
//		    $('div#productPrices').html(data);
//		  }
//		});
}

/**
 * Will run the updater code on load
 * 
 * 
 */
$(function(){
	counter = $("#ProductOptions1").attr("counter");
	
	// Hack attack
	if($("#ProductOptions1").attr("attributeId" == 2)){
		// We need to use the opposite attribute to what we have already got
		attributeId = 3;
	}
	else{
		attributeId = 2;
	}
	productId = $("#ProductOptions1").attr("productId");
	parentValue = $("#ProductOptions1").val();
	
	if($('#ProductOptions1').length > 0){
		loadProductMenu2(counter, attributeId, productId, parentValue);
	}
	
});

/**
 * Will run the price call on load
 * 
 */
function loadPrice()
{
	// Check for an option 1
	var option1 = $('[name=attribute3] option:selected').val();
	
	// Check for a product Id
	var productId1 = $('[name=attribute3]').attr("productId");
	
	if(productId1){
		updatePrice(option1, productId1);
	}
	
	// Check for an option 2
	var option2 = $('[name=attribute2] option:selected').val();
	
	// Check for product Id
	var productId2 = $('[name=attribute2]').attr("productId");
	
	if(productId2){
		updatePrice(option2, productId2)
	}	
}

/**
 * Handles clicks for the add to basket button
 * 
 */
$(function(){
	// On out basket button click
	$('#product-add-basket').click(function(){
		// Check the value of attribute 1
		if($('[name=attribute3]').val() == "Please select ->"){
			// Alert an error
			alert("Please select an option from the drop down menus to add an item to your basket.");
			
			// Return false so we can't post a nothing
			return false;
		}
		// Now check attribute 2
		else if($('[name=attribute2]').val() == "Please select ->"){
			// Alert an error
			alert("Please select an option from the drop down menus to add an item to your basket.");
			
			// Return false so we can't post a nothing
			return false;
		}
		else{
			// Else return true and good to go
			return true;
		}
		
	});
});



/** THIS HANDLES THE PRODUCT PAGE TABS **/
$(function(){
	// Show the panel tabs
	// They would be hidden normally since we are gracefully degrading
	$('.infoTab').show();
	
	// Each infopanel
	$('.infoTab:first').addClass('selected');
	
	// Each infopanel
	$('.infoPanel').each(function(index){
		// Does it have a class of selected
		if(index == 0){
			// yes, do nothing
		}else{
			// no hide it
			$(this).hide();
		}
	});
	
	// When click on an infotab
	$('.infoTab').click(function(){
		// Remove all infotab selected states
		$('.infoTab').removeClass('selected');
		// Add selected to the clicked item
		$(this).addClass('selected');
		
		// Get the id from this attr
		var id = $(this).attr('id');
		// Replace tab with panel in the id
		id = id.replace("tab","panel");
		// Hide the infopanle
		$('.infoPanel').hide();
		// Now show the panel with the correct name
		$('#'+id).show();
		// And focus
		$(this).focus();
		
	});
	
	
	// Create something that will fire tab 2 off should the review link be clicked.
	$('p.review-link').click(function(){
		
		// Fire a click on tab 2
		$('#tab3').click();
		
		// Scroll down to it in 500ms
		$('html, body').animate({scrollTop: $('#panel2').offset().top}, 500);
	});
});


$(function(){
	newImageHandler();
});

/**
 * Product Image Click Handler
 */
function newImageHandler(){
	$('p.jsProductImage').click(function(){							// Each a tag with class jsProductImage
		$('#product-image-img').attr('src',$(this).attr('rel'))		// Set the main image src to this images href
								.attr('alt',$(this).attr('title'));	// and set it's alt to this ones title
		
		//$('#cloud-zoom').attr('href', $(this).attr('href')).attr('title', $(this).attr('title'));
		//$('#cloud-zoom').data('zoom').destroy();
		//$('#cloud-zoom').CloudZoom();
		
		/* we also need to check the value of this item against our product images */
		var groupVal = $(this).attr('rel2');
		
		/* Replace spaces with slashes */
		groupVal = groupVal.replace("group-","");
		groupVal = groupVal.replace("-"," ");
		groupVal = groupVal.replace("-"," ");
		groupVal = groupVal.replace("-"," ");
		groupVal = groupVal.replace("-"," ");
		groupVal = groupVal.replace("-"," ");
		//alert(groupVal);
		
		/* Change the selected item in the dropdown */
		$('#ProductOptions1Wrapper select').val(groupVal).attr('selected',true);
		
		counter = $('#ProductOptions1Wrapper select').attr("counter");
		
		// Hack attack
		if($('#ProductOptions1Wrapper select').attr("attributeId" == 2)){
			// We need to use the opposite attribute to what we have already got
			attributeId = 3;
		}
		else{
			attributeId = 2;
		}
		productId = $('#ProductOptions1Wrapper select').attr("productId");
		parentValue = $('#ProductOptions1Wrapper select').val();
		
		loadProductMenu2(counter, attributeId, productId, parentValue);
		
		// Get the value of this option
		var option1 = $('[name=attribute3] option:selected').val();
		
		// We want the product id
		var productId = $('[name=attribute3]').attr("productId");
		
		// Chuck this to the updater only if we have a product Id
		if(productId){
			updatePrice(option1, productId);
		}

		return false;
	});
}