/*
* File product-list-navbar-functions.js
* Date: 06/28/2010
*
* History:
*
*/

//global variable to store the css styles for the listing.
var css_style_array = new Array();
css_style_array["1"] = "product-list-grid.css";
css_style_array["2"] = "product-list-list.css";
css_style_array["3"] = "product-list-detail.css";


//called when DOM is ready.
$(document).ready(function() {
	//set product navigation
	$("#productnav_form").jqTransform({imgPath:'jqtransformplugin/img/'});

	//determine if customer can add to wish list.
	$(".wishlist a").click(function(evt){
		var customer_id = $.cookie("CUSTOMERID");
		
		if(customer_id != null && customer_id.length > 0){
			return true;
		} else {
			alert("Please login to you account before adding a product to your wish list.");
			return false;
		}
	});
	
	//handle the 'Sort By' drop-down selection.
	$("#sortByContainer ul li a").click(onChangeSortBy);
	
	//handle the 'View As' drop-down selection.
	$("#viewAsContainer ul li a").click(onChangeViewAs);
});


/*
* Change the stylesheet displaying the product list
*
* @param {Object} view_id
*/
function setCSSStyle(view_id){
	//get the stylesheet name.
	var stylesheetTitle = css_style_array[view_id];
	
	//loop over each stylesheet and enable the correct product list stylesheet.
	$('link[rel*=style][title]').each(function(i){
		$('link[title=prod_list_css]').attr('href', "/stylesheet/" + stylesheetTitle);
	});
	
	//set all product areas to background 1.
	$(".product").css('background-image', 'url("/images/product-list/bg_list_1.jpg")');
	
	//list style. set every other row as a different different background color.
	if(stylesheetTitle == "product-list-list.css" || stylesheetTitle == "product-list-detail.css"){
		$(".product:odd").css('background-image', 'url("/images/product-list/bg_list_2.jpg")');
	}
	
	//grid style. 
	else{
		//the current product cell.
		var counter = 1;
		
		//number of products per row.
		var total_per_row = 3;
		
		//flag to determine which background color to use.
		var background_1_row_flg = 1;
		
		//loop over each product cell and set the background color.
		$.each($(".product"), function(i, optionData){			
			if(background_1_row_flg == 1 && counter <= total_per_row){
				$(this).css('background-image', 'url("/images/product-list/bg_grid_1.jpg")');				
				counter++;
			}else if(background_1_row_flg == 0 && counter <= total_per_row){				
				$(this).css('background-image', 'url("/images/product-list/bg_grid_2.jpg")');
				counter++;;
			}
			else{
				counter = 1;							
				background_1_row_flg = (background_1_row_flg == 1) ? 0 : 1;
				
				if(background_1_row_flg == 1){
					$(this).css('background-image', 'url("/images/product-list/bg_grid_1.jpg")');	
				}else{
					$(this).css('background-image', 'url("/images/product-list/bg_grid_2.jpg")');
				}
				
				counter++;
			}						
		});
	}
	
	
	$("#viewBySelect option:last").attr("selected", "selected");
	
}

/*
* Called when a user changes the view product list option. Update links containing the listing
* option with the new listing option.
*
* @param {Object} evt - Event object.
*/
function onChangeViewAs(evt){
	evt.preventDefault();
	
	var view_as_value = $("#viewAsContainer span").text();
	var view_as_id = getListingOption();
	
	//update links with new listAs parameter.
	updateListByUrlParameterLink($(".next-button a"), view_as_id);
	updateListByUrlParameterLink($(".back-button a"), view_as_id);
	updateListByUrlParameterLink($(".sortarrows a"), view_as_id);
	
	//update drop-downs
	updateListByUrlParameterLink($("#topProductSearchResultsNextPreviousLinks a"), view_as_id);
	updateListByUrlParameterLink($("#bottomProductSearchResultsNextPreviousLinks a"), view_as_id);
			
	//update drop-downs
	updateListByUrlParameterDropDown($(".goto-page-select"), view_as_id);

	updateListByUrlParameterDropDown($(".results-per-page-select"), view_as_id);
	
	return false;	
}

/*
* Update a link url parameter containing the product listing preference.
*
* @param {Object} jquery_obj - jQuery object containing the link to update the product listing choice.
* @param {Object} view_as_id - identifier containing the product listing choice id.
*/
function updateListByUrlParameterLink(jquery_obj, view_as_id){
	$.each(jquery_obj, function(i, option_data){		
		var modified_link = updateListByUrlParameter($(option_data).attr("href"), view_as_id);
		
		//set the href attribute.
		$(this).attr("href", modified_link);
	});
}

/*
* Update a link url parameter containing the product listing preference for a drop down. Loop over each option in
* the drop-down and set the link.
*
* @param {Object} jquery_obj - jQuery object containing the link to update the product listing choice.
* @param {Object} view_as_id - identifier containing the product listing choice id.
*/
function updateListByUrlParameterDropDown(jquery_obj, view_as_id){
	$.each(jquery_obj.children(), function(i, option_data){
		var option = $(option_data);
		var modified_link = updateListByUrlParameter(option.val(), view_as_id);
		option.val(modified_link);
	});
}

/*
* Update a link url parameter containing the product listing preference.  Return the modified
* link.
*
* @param {Object} url_string - the url to change.
* @param {Object} view_as_id - identifier containing the product listing choice id.
*/
function updateListByUrlParameter(url_string, view_as_id){
	var full_link_array = url_string.split("?");
	var url_attributes_array = full_link_array[1].split("&");
	var modified_link = full_link_array[0] + "?";
	
	//loop over the array and update the listAs parameter. the array will contain values in the
	//following format name=value. Also set the new link that will be used.
	for(var i=0; i<url_attributes_array.length; i++){
		var value = url_attributes_array[i];
	
		if(/listAs/.test(value)){
			modified_link = modified_link + "listAs=" + view_as_id + "&";				
		}else{
			modified_link = modified_link + value + "&";	
		}
	}
	
	//remove trailing '&' character.
	modified_link = modified_link.substring(0, modified_link.length - 1);
	
	return modified_link;	
}

/*
* Get the current listing option that is selected in the drop-down.
*
*/
function getListingOption(){
	var view_as_value = $("#viewAsContainer span").text();
	var view_as_id = 1;
	
	//set style.
	if(view_as_value.toUpperCase() == "GRID"){
		setCSSStyle("1");
		view_as_id = 1;
		$.cookie("listAs", "1");
	}else if(view_as_value.toUpperCase() == "LIST"){
		setCSSStyle("2");
		view_as_id = 2;
		$.cookie("listAs", "2");
	}else{
		setCSSStyle("3");
		view_as_id = 3;
		$.cookie("listAs", "3");
	}
	
	return view_as_id;
}

/*
* Called when the sort by option has changed.
*
*/
function onChangeSortBy(evt){
	evt.preventDefault();
	var sortByLink = $("#sortBySelect option:selected").val()
	
	window.location = sortByLink;
	
	return false;
}

/*
* Set the sorting arrow graphic that will be displayed. The graphic that will be
* displayed is determined by the sort order of the page.
*
* @param {Object} sort_order - the sort order of the page.
*
*/
function setSortOrderImage(sort_order){
	//variable to store the sort arrows element.
	var sort_arrows_link = $(".sortarrows");
	
	//set click event for the sort arrows element.
	sort_arrows_link.click(function(evt){
		evt.preventDefault();
		window.location = $(this).find("a").attr("href");
	});
	
	
	//set the sort arrow to display determined by the sort_order parameter.
	if(sort_order == 1){
		sort_arrows_link.css('background-position', 'left top');
		sort_arrows_link.attr("title", "Click to change the sort order to descending (bottom to top)");
	}else{
		sort_arrows_link.css('background-position', '0px -18px');
		sort_arrows_link.attr("title", "Click to change the sort order to ascending (top to bottom)");
	}
}

/*
* Set the hover-on/hover-off state for the sort arrow element. Determine what sort graphic to be displayed
* by examining the current background postion of the sort arrow element.
*
* @param {Object} sort_arrow_object - the jQuery object containing the sort arrow element.
*
*/
function onHoverForSortArrows(sort_arrow_object){
	var current_background_position = sort_arrow_object.css("background-position");
	
	//check if css style background-postion contains the number 18 to determine what graphic to display.
	if(/18/.test(current_background_position)){
		sort_arrow_object.css("background-position", "left top");
	}else{
		sort_arrow_object.css("background-position", "left -18px");
	}	
}