(function($){  
	$.fn.peek = function(categoryName) {
	
		var brand ="";
		var category=categoryName;
		brandPeek($(this));
		
		function brandPeek(e){
			$(e).each(function() 
			{
				var $this = $(this);
				var title = this.title;
				if ($this.is('a') && $this.attr('title') != '' && $this.attr('id')==category)
				{  
					$this.hover(
						function(over){
							brand= this.title;
							$('#peek_container').remove();
							loadBrandPeeks();
						},
						function(out){
							$('#peek_container').remove();
							//$('#peek_container').css('display','none');
							//$("div.overout").mouseout(function(){$('#peek_container').remove();});
						}
					);
				}
			});
		}//EOF brandpeek
		
		function loadBrandPeeks() {
			$.ajax({
				type: "GET",
				url: "xml/peek_menu.xml",
				//ie bug : it send wrong datatype on localmachine
				dataType: ($.browser.msie) ? "text" : "xml",
				success: function(data) {
					var xml;
					 if (typeof data == "string") {
					   xml = new ActiveXObject("Microsoft.XMLDOM");
					   xml.async = false;
					   xml.loadXML(data);
					 } else {
					   xml = data;
					 }
					//could have used $(xml).find(category).each(function() but jquery is intelligent enough to know wat element is currently selected
					$(category, xml).each(
						function(){
							$(brand,this).each(
								function(){
									var title = $(this).attr('title');
									var imgurl = $(this).attr('imgurl');
									var description = $(this).find('description').text();
									var feature1 = $(this).find('feature1').text();
									var feature2 = $(this).find('feature2').text();
									var feature3 = $(this).find('feature3').text();
									var feature4 = $(this).find('feature4').text();
									
									var html =  '<div id="peek_container"><img src="' + imgurl + '" alt="" /><br /><br /><h1>'+title+'</h1><br />';
									html += '<p>' + description + '</p><br />';
									html += '<ul><li>'+feature1+'</li><li>'+feature2+'</li><li>'+feature3+'</li><li>'+feature4+'</li></ul><br /></div>';
									$this.parent().append(html);
									//$("div.overout").mouseout(function(){$('#peek_container').remove();});
								}
							);
						}
					);
				}
			}
			);
		}//EOF loadBrandPeeks
		
	}//EOF peek 
})(jQuery); 
/*
complete: function()
					{
						$(".main_image .desc").show(); //Show Banner
						$(".main_image .block").animate({ opacity: 0.8 }, 1 ); //Set Opacity
	
						//Click and Hover events for thumbnail list
						//$(".image_thumb ul li:first").addClass('active');
						$(".main_image .block").hide();//hide image description by default
						
							$(".image_thumb ul li").click(function(){ 
									//Set Variables
									var imgAlt = $(this).find('img').attr("alt"); //Get Alt Tag of Image
									var imgTitle = $(this).find('a').attr("href"); //Get Main Image URL
									var imgDesc = $(this).find('.block').html(); 	//Get HTML of block
									var imgDescHeight = $(".main_image").find('.block').height();	//Calculate height of block	
									
									if ($(this).is(".active")) {  //If it's already active, then...
										return false; // Don't click through
									} else {
										//Animate the Teaser				
										$(".main_image .block").animate({ opacity: 0, marginBottom: -imgDescHeight }, 250 , 
																			function() 
																			{
																				$(".main_image .block").html(imgDesc).animate({ opacity: 0.85,	marginBottom: "0" }, 250 );
																				//$(".main_image img").attr({ src: "images/indicator.gif" , alt: imgAlt});
																				//$(".main_image img").animate({opacity:0},200,function(){$(".main_image img").animate({opacity:1},200);$(".main_image img").attr({ src: imgTitle , alt: imgAlt})});
																				$(".main_image img").attr({ src: imgTitle , alt: imgAlt});
																			}
																		);
									}
									$(".image_thumb ul li").removeClass('active'); //Remove class of 'active' on all lists
									$('.highlight').remove();
									$(this).prepend('<div style="float:left;"><div class="highlight"></div></div>');
									$(this).addClass('active');  //add class of 'active' on this list only
									return false;
									
								}) .hover(function(){
									$(this).addClass('hover');
									}, function() {
									$(this).removeClass('hover');
								});
									
							//Toggle Teaser
							$("a.collapse").click(function(){
								$(".main_image .block").slideToggle();
								$("a.collapse").toggleClass("show");
							});

					}//EOF ajax complete
*/
