// JavaScript Document

(function($) {
  //plugin code will go here...
	$.jLoader = {
		defaults: {
			imgDir: "loaderImages/",
			imgContainer: "",
			imgTotal: 9,
			xmlDocument:"",
			imgFormat: ".jpg",
			simpleFileNames: true
		}
	};
	
  

		$.fn.extend({
		jLoader:function(config, fileNames) {
			
			//use defaults or properties supplied by user
			var config = $.extend({}, $.jLoader.defaults, config);
		
			//get the id of the selected element
			config.imgContainer = this.attr("id");
			
			loadXML(config.xmlDocument,config.imgContainer);
			//use simpleLoad to load numerically named images or complexLoad for user-specified file names
		
		
			//return the jquery object for chaining
			return this;
		}
	});
	
	function loadXML(xml,imageContainer){
		var counter = 0;
		$.ajax({
			   type: "GET",
			   url: xml,
			   dataType: "xml",
			   success:function(xml){
				
				   	$(xml).find('fighter').each(function()
					{
						counter++;
						$("<div/>", {
							  "class": "image_thumb",
							   "id" : "div" + counter
							}).appendTo('#' + imageContainer).append("<ul><li>");
						
						$('<a>').attr({
									id: "image" + counter,	  
									href: $(this).find('image').attr('redirect'),
									title: $(this).find('image').attr('title')
									
						}).appendTo("#div" + counter + " ul li" );
						
						$('<img>').attr({
								alt: $(this).find('name').text(),
								src: $(this).find('image').attr('src'),
								title: $(this).find('name').text()								
						}).appendTo('a#image' + counter );
						$("<div/>", {
							  "class": "block"
						}).appendTo("#div" + counter + " ul li").append("<h2>" +  $(this).find('name').text());

					});
			   }
		});
	
	

	}

/*
  <div class="image_thumb">
                        <ul>
                            <li>
                                <a href="Images/Fighters/amberStance.jpg"><img src="Images/Fighters/amberThumb.gif" alt="Image Name" /></a>
                                <div class="block">
                                    <h2>Amber Ignatowski</h2>
                                    <p>Copy</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                     <div class="image_thumb">
                        <ul>
                            <li>
                                <a href="Images/Fighters/BrandonX.gif"><img src="Images/Fighters/BrandonXThumb.gif" alt="Image Name" /></a>
                                <div class="block">
                                    <h2>Brandon Hance</h2>
                                    <p>Copy</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                          <div class="image_thumb">
                        <ul>
                            <li>
                                <a href="Images/Fighters/amberStance.jpg"><img src="Images/Fighters/amberThumb.gif" alt="Image Name" /></a>
                                <div class="block">
                                    <h2>Amber Ignatowski</h2>
                                    <p>Copy</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                     <div class="image_thumb">
                        <ul>
                            <li>
                                <a href="Images/Fighters/BrandonX.gif"><img src="Images/Fighters/BrandonXThumb.gif" alt="Image Name" /></a>
                                <div class="block">
                                    <h2>Brandon Hance</h2>
                                    <p>Copy</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                       <div class="image_thumb">
                        <ul>
                            <li>
                                <a href="Images/Fighters/BrandonX.gif"><img src="Images/Fighters/BrandonXThumb.gif" alt="Image Name" /></a>
                                <div class="block">
                                    <h2>Brandon Hance</h2>
                                    <p>Copy</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                       <div class="image_thumb">
                        <ul>
                            <li>
                                <a href="Images/Fighters/BrandonX.gif"><img src="Images/Fighters/BrandonXThumb.gif" alt="Image Name" /></a>
                                <div class="block">
                                    <h2>Brandon Hance</h2>
                                    <p>Copy</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                     <div class="image_thumb">
                        <ul>
                            <li>
                                <a href="Images/Fighters/BrandonX.gif"><img src="Images/Fighters/BrandonXThumb.gif" alt="Image Name" /></a>
                                <div class="block">
                                    <h2>Brandon Hance</h2>
                                    <p>Copy</p>
                                </div>
                            </li>
                        </ul>
                    </div>

*/	
	
	
	
//	
//	function simpleLoad(config) {
//	  for (var x = 1; x < config.imgTotal + 1; x++) {
//		$("<img>").attr({
//		  id: "image" + x,
//		  src: config.imgDir + x + config.imgFormat,
//		  title: "Image" + x
//		}).appendTo("#" + config.imgContainer).css({ display: "none" });
//	  }
//	};
//	function complexLoad(config, fileNames) {
//		  for (var x = 0; x < fileNames.length; x++) {
//			$("<img>").attr({
//			  id: fileNames[x],
//			  src: config.imgDir + fileNames[x] + config.imgFormat,
//			  title: "The " + fileNames[x] + " nebula"
//			}).appendTo("#" + config.imgContainer).css({ display: "none" });
//		  }
//	};

  

 
  
})(jQuery);

