var productReviewsDomain = null;

$j(document).ready(function() {
	$j("p.javascript-enabled").show();
	//$j("a.javascript-enabled").css({visibility: 'visible'});
	$j("a.javascript-enabled").removeClass("javascript-enabled");
	$j(".javascript-disabled").hide();
	
	if ($j.browser.opera) {
		$j("div.corner").show();
	}
	
	// Get the version of flash installed and hide or show content - this is dependent on Flowplayer
	var version = flashembed.getVersion();
	if (version[0] < 8) {
		$j(".flash-disabled").show();
		$j(".flash-enabled").hide();
	}
	else {
		$j(".flash-enabled").show();
	}
	
	$j("div.related-products").jCarouselLite({
        btnNext: "a.next",
        btnPrev: "a.prev",
        visible: 4,
        scroll: 4,
        start: 0,
        circular: false,
        speed: 650
    });
    if ($j("div.related-products ul:first > li").length < 5) {
		$j("a.next").css({visibility: 'hidden'});
		$j("a.prev").css({visibility: 'hidden'});
    }

	$j("input.read-more").click(function(event) {
		var el = $j(this);
		var parent = null;
		var readMore = el.attr("read-more");
		
		if (readMore != null && readMore != "") {
			parent = $j(readMore);
		}
		else {
			parent  = $j("div.department-details");
		}

		// Check for IE6 - we only need to hide the corners in IE6, all other browsers work fine
		// the problem with the corners not moving appears to be related to CSS floats, had a look at changing the styles but couldn't get it to work correctly
		// and was also starting to cause problems in other browsers, since this only affects IE6, decided to leave this simple hack in for now
		var isIE6 = $j.browser.msie && $j.browser.version < 7;
		if (isIE6) {
			$j("div.gift-in-action div.bottomLeft").hide();
			$j("div.gift-in-action div.bottomRight").hide();
		}
			
		var moreContent = $j("div.more-content", parent);
		if (moreContent.is(":visible")) {	
			// Expand the details
			$j("div.more-content", parent).slideUp("slow", function() {
				if (isIE6) {
					$j("div.gift-in-action div.bottomLeft").show();
					$j("div.gift-in-action div.bottomRight").show();
				}
			});
			
			// Hide the '...' text if it exists
			$j("span.more", parent).fadeIn("fast");

			el.attr("value", "Read more");
			el.removeClass("show-less");
		}
		else {
			// Hide the '...' text if it exists
			$j("span.more", parent).fadeOut("fast");

			// Expand the details
			$j("div.more-content", parent).slideDown("slow", function() {
				if (isIE6) {
					$j("div.gift-in-action div.bottomLeft").show();
					$j("div.gift-in-action div.bottomRight").show();
				}
			});

			el.attr("value", "Show less");
			el.addClass("show-less");
		}
		
		el.blur();

		event.returnValue = false;
		return false;
	});
	
	// Find all buttons on the page that need to be converted to links
	$j("input[class*=link-button]").mouseover(function() {
		$j(this).addClass("hover");
	}).mouseout(function(){
		$j(this).removeClass("hover");
	});
    
    $j("a.leave-a-review").click(function() {
		if ($j("div.js-LeaveComment").is(":visible")) {
			$j("div.js-commentControl:first").click();
			$j("div.reviews-message").fadeIn("slow");
		}
    });
    
    if (productReviewsDomain == null) {
		productReviewsDomain = "oxfam.org.uk";
    }
    
    // Delay loading js-kit so that the rest of the page has finished first
    window.setTimeout(function() {
		$j("#jskit-placeholder").append("<script type=\"text/javascript\" src=\"http://js-kit.com/for/" + productReviewsDomain + "/comments.js\"></script>");
	    
		// Now instigate a timeout to check whether jsKit has loaded
		window.setTimeout(checkJsKitLoad, 500);
	}, 1000);
});


var totalWaitTime = 0;
function checkJsKitLoad() {
	// First check to see if jsKit has loaded by injecting itself into the comments div
	if ($j("div.js-kit-comments").children().length === 0) {
		totalWaitTime += 1000;

		// Wait 20 seconds, then cancel loading js-kit
		if (totalWaitTime > 20000) {
			$j("#jskit-placeholder").empty();
			$j("div.js-kit-comments").empty();
		}
		else {
			window.setTimeout(checkJsKitLoad, 1000);
		}
	}
	// jsKit is loading, now check to see if the comments area exists
	else if ($j("div.js-CommentsArea").length === 0) {
		window.setTimeout(checkJsKitLoad, 1000);
	}
	else {
		jsKitLoad();
	}
}

function jsKitLoad() {
	// Hide the JS-Kit comments panel if no comments have been posted on this page
	if ($j("div.js-OldComments").children().length === 0 || $j("div.js-OldComments").children(":first").children().length === 0) {
		$j("div.jsk-ThreadWrapper").hide();
	}
	else {
		$j("#no-reviews").hide();
	}

	$j("div.product-reviews").fadeIn("slow");
	// The link needs to be display block for the icon to show correctly, so we have to play around with the CSS here so that jQuery correctly fades it in
	// with the final display value being block
	$j("a.leave-a-review").css({display:'none', visibility:'visible'}).fadeIn("slow");
	
	// Attach a mouseup handler to the 'post' button and then show the comments.
	// Using a click handler doesn't work in IE, most likely event bubbling is being cancelled by JS-Kit
	$j("input.jsk-CommentFormButton").live("mouseup", function(){
		if($j(this).attr("name") == "js-Cmtsubmit") {
			$j("div.jsk-ThreadWrapper").show();
			$j("#no-reviews").hide();
		}
		$j("div.reviews-message").fadeOut("slow");
	});
	
	$j("a.js-singleCommentReply").live("mouseup", function() {
		$j("div.reviews-message").fadeIn("slow");
	});
	
	$j("div.js-commentControl a").click(function() {
		$j("div.reviews-message").fadeIn("slow");
	});
}


function selectImage(event, thumbLink) {
	thumbLink = $j(thumbLink);
	var thumbImg = $j("img:first", thumbLink);
	
	// Find the preview link and image
	var previewDiv = $j("#imagediv");
	var previewLink = $j("div.overlay a:first", previewDiv);
	var previewImage = $j("div.overlay img:first", previewDiv);
	
	// Change the main image src and link to the selected thumbnail
	previewImage.attr("src", thumbLink.attr("href").replace("large", "preview"));
	previewLink.attr("href", thumbLink.attr("href"));
	previewImage.attr("title", thumbImg.attr("title"));
	previewImage.attr("alt", thumbImg.attr("alt"));
	previewLink.attr("title", thumbLink.attr("title"));
	previewLink.attr("alt", thumbLink.attr("alt"));
	
	// Update the click to enlarge link
	var clickEnlarge = previewDiv.find("div.click-to-enlarge a:first");
	clickEnlarge.attr("href", previewLink.attr("href"));

	event.returnValue = false;
	return false;
}