(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");
				setTimeout("adjustBodyManual()",200);
			},
			function () {
				$(this).next().slideDown(200);
				updateNavImg($(this), "_on");
				setTimeout("adjustBodyManual()",200);
			}
		);		
	};
	
	jQuery.fn.slideOpen = function() {
		$(this).next().slideDown(200);
		updateNavImg($(this), "_on");
		setTimeout("adjustBodyManual()",200);
	};
	
	//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.
	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');
				
				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.
						PreviouslyOpen = CurrentlyOpen;
						CurrentlyOpen = $(this).attr("name");
						
						//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
						}
						//Validate the previous open section
						validateSection(PreviouslyOpen);
	
						//Category is valid so allow user to open other options.
						curClass = $(this).attr("class");
						//Will only open the section if it is closed.
						if (curClass == "nav-header-off") {
							openOption(this);
						}
						
						//Calculate the estimated ebay fee for the listing info
						calculateEstimatedEbayCost();						
					} else {
						//Display an message to user to select category first.
						displayInvalidCatMessage()
					}//if (ValidCategory) {
				}//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
	
	//Open just one of the options
	function openOption(elem) {
		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);
		
		//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(200);
		//update the bar nav
		$(elem).attr("class","nav-header-on");
		//update the arrow image.
		updateNavImgAccordion($(elem), "off");
		
	}
	
	//Close all options
	function closeAll(){
		$("div[nav]").each(
			function() {
		
				$(this).next().slideUp(200);
				//$(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) {
		//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);
		
	}
	
	
	

	
})(jQuery);