// jquery noConflict (since using other libs)
var $j = jQuery.noConflict();
var MIGHTY_BIG_IMAGE_ORIGINAL_HEIGHT = 0;
var MIGHTY_BIG_IMAGE_IS_ORIGINAL = true;

 
$j(document).ready(function() {
	if (_urlRequest != '' & $j('body').attr('id') == 'products') {
		loadList(_urlRequest);
	};
	
	$j('#searchBoxForm').submit(function() {
			doSearch();
	});	
	
	$j("#contest_rules_link").click(function(){
		$j("#contest_rules").show("fast");
	});
	
	$j("#resize_image_link").click(function(){
		resizeDetailImage();
	});	
	
	$j("#mighty_big_image").click(function(){
		resizeDetailImage();
	});		
	//Load the slideshow
	theRotator();
	
});

function resizeDetailImage(){
	var viewportheight = window.innerHeight - 190; 
	if(MIGHTY_BIG_IMAGE_IS_ORIGINAL){
		MIGHTY_BIG_IMAGE_ORIGINAL_HEIGHT = $j("#mighty_big_image").height();
		MIGHTY_BIG_IMAGE_IS_ORIGINAL = false;
	}else{
		MIGHTY_BIG_IMAGE_IS_ORIGINAL = true;
	}
	if(!MIGHTY_BIG_IMAGE_IS_ORIGINAL){
		newHeight = viewportheight;
		$j("#resize_image_link").text("Expand image to full size");
	}else{
		newHeight = MIGHTY_BIG_IMAGE_ORIGINAL_HEIGHT;	
		$j("#resize_image_link").text("Fit image to display area");		
	}
	$j("#mighty_big_image").animate({ 
	    height: newHeight
	  }, 500 );
}

/* reverted back to loading each view of the thumbnails via page 
 * refresh since do not know correct aspect ratio of width when 
 * shrunk and loading another image of different dimensions */
function changeDetailImage(theImage){
	var loadThisImage = _MIGHTY_BIG_IMAGE_PATH + theImage;
	$j("#mighty_big_image_hidden").attr("alt", theImage);
	$j("#mighty_big_image_hidden").attr("src", loadThisImage);
	$j("#mighty_big_image").attr("src", loadThisImage);	
}
	
function loadList (url) {
	var complete_url = _htmlBaseURL + url;
	// Before Ajax Request
	$j("#product_list_ajax_wrap").ajaxStart(function(){
		var product_list_ajax_wrap_height = $j("#product_list_ajax_wrap").height();
		$j("#product_list_ajax_wrap").css({height: product_list_ajax_wrap_height});
	});
	
 	// Ajax Request
	$j("#product_list_ajax_wrap").load(complete_url);		
}

function doSearch(){
	var searchStr = jQuery.trim($j("#search_criteria").val());
	if(searchStr == ""){
		return false;
	}
	// Google Analytics
	if(INCLUDE_GOOGLE_SEARCH == "true"){
		pageTracker._trackPageview('/?keywordsearch=' + searchStr);
	}
	return true;
}

function theRotator() {
	//Set the opacity of all images to 0
	$j('div#rotator ul li').css({opacity: 0.0});
	
	//Get the first image and display it (gets set to full opacity)
	$j('div#rotator ul li:first').css({opacity: 1.0});
		
	//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
	setInterval('rotate()',5000);
	
}

function rotate() {	
	//Get the first image
	var current = ($j('div#rotator ul li.show')?  $j('div#rotator ul li.show') : $j('div#rotator ul li:first'));

	//Get next image, when it reaches the end, rotate it back to the first image
	var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $j('div#rotator ul li:first') :current.next()) : $j('div#rotator ul li:first'));	
	
	//Set the fade in effect for the next image, the show class has higher z-index
	next.css({opacity: 0.0})
	.addClass('show')
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	current.animate({opacity: 0.0}, 1000)
	.removeClass('show');
	
};