(function() {

	/*
	* Determine the height of the content so that the btm image can reflect the correct position.
	* This is needed because of the faded effect.
	*/
	jQuery.fn.adjustBody = function() {	
		//Determine the location of contentBtm	
		//var topOffset=100;	
		//var bodyBtmPos= $("#contentBody").offset();
		//var height = bodyBtmPos.top - topOffset;
		var height = jQuery(this).height();
		var setHeight;
		if (height>=560) {
			setInt = 5;
			setHeight = height+10;
		} else if (height >=530) {
			setInt = 4;
			setHeight = 560;
		} else if (height >=500) {
			setInt = 3;
			setHeight = 530;
		} else if (height >=470) {
			setInt = 2;
			setHeight = 500;
		} else {
			setInt = 1;
			setHeight = 470;
		}

		//jQuery("#contentBtm").css("backgroundImage","url(../images/global/content_box_btm_"+setInt+".jpg)");
		jQuery("#contentBtm").attr("src", "/images/global/content_box_btm_"+setInt+".jpg");
		jQuery("#contentBody").css("height",setHeight);	
		//alert(jQuery("#contentBtm").css("backgroundImage"));
		
		//Adjust the threefourth column size
		tempHeight = setHeight - 30;
		jQuery(".threefourthColumn").css("height",tempHeight);	

		
		//Adjust the bodyWhite div for full pages.
		//jQuery(".whiteBody").css("height",tempHeight);	
	};
	
	
	//dynamically switch button image from the on state to the off state.
	jQuery.fn.switchBtnOff = function() {
		curSrc = $(this).attr('src');
		newSrc = curSrc.replace("_on", "_off");
		//alert(newSrc);
		$(this).attr('src',newSrc);
	};
	
	//dynamically switch button image from the off state to the on state.
	jQuery.fn.switchBtnOn = function() {
		curSrc = $(this).attr('src');
		newSrc = curSrc.replace("_off", "_on");
		//alert(newSrc);
		$(this).attr('src',newSrc);
	};
	
	/***
	* Switch input type text to password and viceversa
	* 
	* @param	name1	name of one of the password field
	* @param	name2	name of the other password field
	* @param	checkId	id of the checkbox
	***/
	jQuery.fn.unmaskPassword = function() {
		$(this).click(
			function() {
				
				//Will only execut if oldpassword field exists.
				if ($("input[name=oldpassword]").length>0) {	
					var passVal3 = $("input[name=oldpassword]").val();
					var input3 = $("#pass3").html();
					if ( $("#mask").attr("checked") ) {
						if ($.browser.msie) { //IE
							newInput3 = input3.replace('type=password', 'type=text');
						} else {
							//Firefox
							newInput3 = input3.replace('type="password"', 'type="text"');  
						}
					} else {
						newInput3 = input3.replace('type=text', 'type=password');
						if ($.browser.msie) { //IE
							newInput3 = input3.replace('maxLength=50', 'maxLength=50 type=password');
						} else {
							//Firefox
							newInput3 = input3.replace('type="text"', 'type="password"');
						}
					}
					$("#pass3").html(newInput3);
					$("input[name=oldpassword]").val(passVal3);	
				}
				
				//Get the value of the passaord fields
				var passVal1 = $("input[name=password]").val();
				var passVal2 = $("input[name=password2]").val();
				
				//Get the html input
				var input1 = $("#pass1").html();
				var input2 = $("#pass2").html();	
				
				
				//Major bug issue
				//different browser displays the input field differently because of graphite
				//To accomodate that various replace have to be executed to cover all browser.
				if ( isChecked("#mask") ) {
					if ($.browser.msie) { //IE
						newInput1 = input1.replace('type=password', 'type=text');
						newInput2 = input2.replace('type=password', 'type=text');
					} else {
						//Firefox
						newInput1 = input1.replace('type="password"', 'type="text"');  
						newInput2 = input2.replace('type="password"', 'type="text"'); 
					}

				} else {	
				
					if ($.browser.msie) { //IE
					
						newInput1 = input1.replace('maxLength=50', 'maxLength=50 type=password');
						newInput2 = input2.replace('maxLength=50', 'maxLength=50 type=password');
					} else {
						//Firefox
						newInput1 = input1.replace('type="text"', 'type="password"');
						newInput2 = input2.replace('type="text"', 'type="password"');
					}
					
				}
				//Change the input type
				$("#pass1").html(newInput1);
				$("input[name=password]").val(passVal1);
				$("#pass2").html(newInput2);
				$("input[name=password2]").val(passVal2);
				
			}//function() {	
		);//$(this).click(
	};
	

/********************************************
slideToggle Accordion Style. Mainly used for the dashboard
********************************************/

	//Mainly for the dashboard navigation to open and close individual sections.
	jQuery.fn.slideToggle = function() {

		$(this).toggle( 
			function() {
				$(this).next().slideUp(1);
				updateNavImg($(this), "_off");
			},
			function () {
				$(this).next().slideDown(200);
				updateNavImg($(this), "_on");
			}
		);		
	};
	
	jQuery.fn.slideOpen = function() {
		$(this).next().slideDown(200);
		updateNavImg($(this), "_on");
	};
	
	//Expand all the sections of the accordion.
	jQuery.fn.expandAll = function() {
		$(this).each(
			function() {
				//Determine if the nav is open or closed.
				arrowImg = $(this).children().children().attr("src");
				var tempIndex = arrowImg.indexOf('arrow_off');
				//Will only expand those that are closed.
				//This is to prevent the confusion of the toggle effect.
				//alert(curHeight);
				if (tempIndex>=0) {					
					$(this).click();					
				}//if
			}//functon
		);//$(this).each(
	};
	
	//Collaspe all the sections of the accordion.
	jQuery.fn.collapseAll = function() {
		$(this).each(
			function() {
				//Determine if the nav is open or closed.
				arrowImg = $(this).children().children().attr("src");
				var tempIndex = arrowImg.indexOf('arrow_on');
				//Will only expand those that are closed.
				//This is to prevent the confusion of the toggle effect.
				if (tempIndex>=0) {
					$(this).click();
					
				}//if
			}//function() {
		);//$(this).each(
	};
	
	//Collaspe all the sections of the accordion.
	jQuery.fn.openArrowImg = function() {
		$(this).each(
			function() {
				updateNavImg($(this), "_on");
			}//function() {
		);//$(this).each(
	};
	
	//Update the bar image and the arrow image to reflect the current status.
	function updateNavImg(elem, imgOnOff) {
	/*
			var bkgdSrc = $(elem).css('backgroundImage');
			var tempIndex = bkgdSrc.indexOf('header_on');
			
			if (tempIndex>=0) {
				var bkgdColor = "_orange";
			} else {
				var bkgdColor = "_blue";
			}
		*/	
			var newImgSrc = "../images/accordion/white_arrow"+imgOnOff+".gif";
			$(elem).children("div.ieFix").children("img").attr("src",newImgSrc);		
	}
	
	

/********************************************
Variable Height Accordion
This accordion is different than the homepage one because the acoordion hight is not a set height but adjsts to the content that is currently open.
********************************************/
var PreviouslyOpen; //Keep track of which section was previously open
var CurrentlyOpen; //Kepp track of which seciton is currently open.
	
	//Accordion used on the homepage
	jQuery.fn.normalClickedOption = function() {
		$(this).click( function() {

			//Detect if what is clicked is the open one. Will only execut if it isn't.
			var bkgdSrc = $(this).css('backgroundImage');
			var tempIndex = bkgdSrc.indexOf('header_on');				
			if (tempIndex<0) {
				//Section not open  so execute.
				//Track what has been open.
				PreviouslyOpen = CurrentlyOpen;
				CurrentlyOpen = $(this).attr("name");
				curClass = $(this).attr("class");
				//Will only open the section if it is closed.
				if (curClass == "nav-header-off") {
					openOption(this);
				}
			}//if (tempIndex<0) {  
		})//$(this).click( 		
	}//jQuery.fn.normalClickedOption = function() {
	
	//Expand all the sections of the accordion.
	//Accordion used on listing info page.
	jQuery.fn.clickedOption = function() {
		//Will only active on click events
		$(this).click( 
			function() {
				
				//Ensure that when the category section is clicked that it will reset the search/browse option
				if ( $(this).attr("name") == "category") {
					chooseCategoryMethod('SEARCH');
				};
			
				//Detect if what is clicked is the open one. Will only execut if it isn't.
				var bkgdSrc = $(this).css('backgroundImage');
				var tempIndex = bkgdSrc.indexOf('header_on');
				PreviouslyOpen = CurrentlyOpen;
				CurrentlyOpen = $(this).attr("name");
				
				if (tempIndex<0) {
					//Section not open  so execute.
	
					//Check to see if cateogry has been selected and is valid.
					//ValidCategory is global variable set in listing.js
					//if ($(PRIMARY_CATEGORY).val() != "") { //ValidCategory
					//if (true) { //for testing
						//Track what has been open.
						

						//Determine if the current selected section is the description
						//This will hide or show the page design to prevent any music and video from displaying.
						if (CurrentlyOpen == "description") {
							showPageDesign(); //function found in listingInfoForm.jsp
						} else {
							hidePageDesign();//function found in listingInfoForm.jsp
						}
						
						//If no category has been selected, then there won't be any item condition values
						//So this will display the message to user that they need to select the category.
						
						if (CurrentlyOpen == "itemDetails" || PreviouslyOpen == "itemDetails") {
							//funciton located in listingInfoForm.js
							var errorBeforeElem = $(ITEM_CONDITION_TEXT); 
							var errorAfterElem = $(ITEM_CONDITION);
							validateItemCondition(errorBeforeElem, errorAfterElem); //function found in listingInfoForm.jsp
						} 
						
						//If there was no previouslyOpen value then user started out with category section.
						if (!PreviouslyOpen) {
							validateCategory(); 
						}
						
						//Validate the previous open section
						validateSection(PreviouslyOpen);
	
						//Category is valid so allow user to open other options.
						curClass = $(this).attr("class");
						
						
						var prevElem = $("div[nav=header][name="+PreviouslyOpen+"]");
						if (!$(prevElem).attr("name")) {
							//There was no previous open so it must be categories.
							prevElem = $("div[nav=header][name=category]");
						}

						//Will only open the section if it is closed.
						if (curClass == "nav-header-off") {
							//user is uploading image which means that image section is open. This will automatically scroll user to that section.
							if (!isUploading()) {
								var imageSection = "div[nav][name=image]";

								if ( $(imageSection).hasClass('nav-header-on') ) {
									closeOption(imageSection);
								}
								closeOption(prevElem);
							} else if (isUploading() && PreviouslyOpen!="image") {
								closeOption(prevElem);
							}
							openOption(this);
						}
						
						
						
						//Calculate the estimated ebay fee for the listing info
						//calculateEstimatedEbayCost();						
					//} else {
						//Display an message to user to select category first.
						//don't display message anymore 
						//Category is no longer required to continue
						//displayInvalidCatMessage()
					//}//if (ValidCategory) {
				} else if ( PreviouslyOpen != CurrentlyOpen) {
					//This is a case where user is upload image and the image section is still open. This means that we have to close the previousl setion
					var prevElem = $("div[nav=header][name="+PreviouslyOpen+"]");
					closeOption(prevElem);
					scrollToSection(this);
				} else {
					//Scroll to that section
					scrollToSection(this);
				}//if (tempIndex<0) {
			}//function() {
		);//$(this).click( 
	}//jQuery.fn.clickedOption
	
	//Clicking the continue button
	jQuery.fn.clickedContinue = function() {
		//Will only active on click events
		$(this).click( 
			function() {
				optionName = $(this).attr("name");
				$("div[nav=header][name="+optionName+"]").next().next().click();
			}//function() {
		);//$(this).click( 
	}//jQuery.fn.clickedContinue
	
	//Close a section of the accordion.
	jQuery.fn.closeSection = function() {
		closeOption(this);
	}//jQuery.fn.clickedContinue
	
	
	
	//Open just one of the options
	function openOption(elem) {
		/*
		//If user is uploading picture then don't close all
		if (isUploading()) {
			closeAll("image");
		} else {
			closeAll("");
		}
		*/
		//Open current option
		$(elem).next().slideDown(200);
		//update the bar nav
		$(elem).attr("class","nav-header-on");
		//update the arrow image.
		updateNavImgAccordion($(elem), "on");	
		
		//Scroll to the section on the page
		scrollToSection(elem);
		
		doAdditionalActions(elem);
		//Open the first input in the section
		// $(elem).next().children("input:first").focus() ;
		
	}
	
	//Close just one of the options
	function closeOption(elem) {
		//close current option
		$(elem).next().slideUp(1);
		//update the bar nav
		$(elem).attr("class","nav-header-off");
		//update the arrow image.
		updateNavImgAccordion($(elem), "off");
		
		
	}
	
	//Close all options
	function closeAll(exception){
		$("div[nav]").each(
			function() {
				var secName = $(this).attr("name");
				if (secName != exception) {
					$(this).next().slideUp(1);
					//$(this).next().hide();
					//update the bar nav
					$(this).attr("class","nav-header-off");
					//update the arrow image.
					updateNavImgAccordion($(this), "off");
				}
			}); 
	}
	
	function updateNavImgAccordion(elem, arrowImg) {
		var newImgSrc = "../images/accordion/white_arrow_"+arrowImg+".gif";
		$(elem).children().children().attr("src",newImgSrc);
		
		if (arrowImg == "on") {
			$(elem).children().children(".editTxt").html("");	
		} else {			
			$(elem).children().children(".editTxt").html("&nbsp;&nbsp;(edit)");
		}
	}
	
	/*
	* Scroll the page to the previous section of what was clicked.
	*
	* @param	elem	the elem section that was clicked.
	*/
	function scrollToSection(elem) {

		var secName = $(elem).attr("name");
		var elemPos = $(elem).prev().prev().position();		
		//If elemPos is image then need to check if uploading.
		//If uploading picture then that section will no be closing.
		//So just use the cur element rather than previous element.

		if (secName=="category") {
			elemPos = $(elem).position();	
		} else if (isUploading() && secName=="itemDetails") {
			elemPos = $(elem).position();		
		} 

		/*
		//Locate the previous section
		prevName = $(elem).prev().prev().attr("name");
		//Figure out where the previous section header is located on the page.
		if ( prevName == "listingType"){
			multiplier = 1;
		} else if ( prevName == "itemDetails"){
			multiplier = 2;
		} else if ( prevName == "schedule"){
			multiplier = 3;
		} else if ( prevName == "imageUpload"){
			multiplier = 4;
		} else if ( prevName == "description"){
			multiplier = 5;
		} else if ( prevName == "shipping"){
			multiplier = 6;
		} else if ( prevName == "payment"){
			multiplier = 7;
		} else if ( prevName == "upgrades"){
			multiplier = 8;
		} else if ( prevName == "others"){
			multiplier = 9;
		} else {
			multiplier = 0;	
		}
		targetOffset = (multiplier * 31);
		//Sroll the the previous name offset.
		$('html,body').animate({scrollTop: targetOffset}, 10);
	*/	
		$('html,body').animate({scrollTop: elemPos.top}, 10);
	}
	
	/*
	* Upon opening the section, do additional actions.
	*/
	function doAdditionalActions(elem) {
		
		var elemName =  $(elem).attr("name");
		if ( elemName == "itemSpecifics"){
			//frames['cat1AttrInfo'].stupidTest("description");
			//$("#cat1AttrInfo")
			if ( isNotNullEmpty( $(PRIMARY_CATEGORY).val() ) ) { 
				//Hid the item specifics message
				$(ITEM_SPECIFICS_MSG).hide();
				setAttrFrameHeight($(PRIMARY_CATEGORY).val(), false);
			} else {
				$(ITEM_SPECIFICS_MSG).show();
			}
			
			if ( isNotNullEmpty( $(SECONDARY_CATEGORY).val() ) ){ 
				setAttrFrameHeight($(SECONDARY_CATEGORY).val(), false);
			}
			
		}  
		

	}
	
	
	
	
	

	
})(jQuery);