$(document).ready(function(){
	$("#content").find(".product").each(function(){
		var id = $(this).children(".productHeader").children("h3").children("a").attr("rel"); //Find the ID of the current range.
		/*var theDocument = "javascript" + id + ".php" //Using the ID, build the string that finds the document*/
		var theDocument = "roller_rangelist.asp?SubCatID=" + id +""
		/* 
			theDocument variable is used in the final .load() jquery statement. .load() will accept GET urlstrings and POST variables
			read thefollowing link for info on how this works:
			
			http://docs.jquery.com/Ajax/load#urldatacallback
		*/
		$(this).append("<div class='holding'></div>"); // Using some DOM jQuery Shorthand build a containing DIV for the loading content to sit in
		$(this).children(".holding").load(theDocument, function(){
			$(this).children('p.showMore').wrap("<div class=\"hideNSlide\"></div>");
			$(this).children('div.hideNSlide').css("display","none").before('<a href="#" class="showclass">More Information</a>');
			
			$(this).children('a.showclass').click(function() {
	   			$(this).next().slideToggle(800);
				var $this = $(this);
                if( $this.is('.swap') ) {
                        $this.removeClass('swap');
                }
                else {
                        $this.addClass('swap');
                }

				return false;
			});
		 }); // Loads the necessary HTML and runs javaScript for the newly loaded.		
	});
});