jQuery.iMarqueePromo = {
	build : function(user_options) {
		var user_options;
		var defaults = {
			slide_enabled: true,
			auto_play: true,
			show_prev_next: false,
			slide_speed: 5000,
			thumb_width: 50,
			thumb_height: 28,
			buttons_text: { previous: "Previous", next: "Next" },
			image_play: 'images/play.gif',
			image_pause: 'images/pause.gif',
			delay_caption: true,
			user_thumbs: false
		};

		return jQuery(this).each(function() {
			//bring in options
			var options = jQuery.extend(defaults, user_options);

			// grab our images
			var images = jQuery(this).children('li').children('img');

			// disable slideshow if only 1 image
			if (images.length <= 1) {
				options = jQuery.extend(options, {slide_enabled: false, auto_play: false })
			} else {
				//hide the images
				images.fadeOut(1);
			}

			//save our list for future ref
			var ulist = jQuery(this);
			// Process thumbnails
			images.each(LoadImages);
			
			//start building structure
			jQuery(this).before("<div class='marquee_main'></div>");
			// houses eveything about the UL
			var main_div = jQuery(this).prev(".marquee_main");
			
			// Add in slideshow elements when appropriate
			if (options.slide_enabled){
				main_div.append("<div class='marquee_play'></div>");
				var play_div = jQuery(this).prev(".marquee_main").children(".marquee_play");
				play_div.html("<a class='marquee_play_button'><img src='" + options.image_play + "' /></a><a class='marquee_stop_button'><img src='" + options.image_pause + "' /></a>");
				var play_anchor = play_div.children('a:first');
				var stop_anchor = play_div.children('a:last');
			
				// position the Play button based on our thumbnail-position class
				if (jQuery(this).parent().attr('class') === "UpperLeft") {
					play_div.css("bottom", "auto");
					play_div.css("right", "auto");
					play_div.css("left", (images.length * (options.thumb_width + 14)) + 20 + "px");
					play_div.css("top", "30px");
				} else if (jQuery(this).parent().attr('class') === "UpperRight") {
					play_div.css("bottom", "auto");
					play_div.css("left", "auto");
					play_div.css("right", "25px");
					play_div.css("top", "30px");
				} else if (jQuery(this).parent().attr('class') === "LowerRight") {
					play_div.css("top", "auto");
					play_div.css("left", "auto");
					play_div.css("right", "25px");
					play_div.css("bottom", "25px");
				} else  { //  default is (jQuery(this).parent().attr('class') === "LowerLeft")
					play_div.css("top", "auto");
					play_div.css("right", "auto");
					play_div.css("left", (images.length * (options.thumb_width + 14)) + 20 + "px");
					play_div.css("bottom", "25px");
				}
			}

			//the main image we'll be using to load
			main_div.append("<img />");
			var main_img = main_div.children("img");

			jQuery(this).after("<div class='marquee_navigation'></div>");
			var navigation_div = jQuery(this).next(".marquee_navigation");
			//fill in sub elements
			navigation_div.prepend("<a>" + options.buttons_text.previous + "</a> :: <a>" + options.buttons_text.next + "</a>");
			var previous_image_anchor = navigation_div.children('a:first');
			var next_image_anchor = navigation_div.children('a:last');
					
			//playing triggers the loop for the slideshow
			var playing = options.auto_play;

			function LoadImages() {
				jQuery(this).bind("load", function() {
					// Create the divs for the progress bar.
					jQuery(this).after('<div class="progress" ' +
							(options.slide_enabled ? '' : 'style="display:none;" ') +
							'><div class="progressInner"></div></div>');

					//had to make a seperate function so that the thumbnails wouldn't have problems
					//from beings resized before loaded, thus not h/w

					// Get native image info
					var w = jQuery(this).width();
					var h = jQuery(this).height();
					if(w==0) {w = jQuery(this).attr("width");}
					if(h==0) {h = jQuery(this).attr("height");}

					// Set thumbnail size and position
					var width = options.thumb_width;
					var height = options.thumb_height;
					var left = 0;
					if (false) {
						// Use fixed thumbnail sizes (stretches image aspect as needed)
						jQuery(this).css({left:left});
						jQuery(this).css("position","relative");
						jQuery(this).width(width).height(height);
					} else {
						// Maintain image aspect ratio for thumbnails, so thumbnails 
						// will be different sizes if images have different aspects ratios.
						var rw = options.thumb_width/w;
						var rh = options.thumb_height/h;
						//determine which has the smallest ratio (thus needing
						//to be the side we use to scale so our whole thumb is filled)
						if(rw > rh) {    // PEM fix to be > instead of <.
							//we'll use ratio later to scale and not distort
							var ratio = rh;
							left = ((w*ratio - options.thumb_width)/2)*-1;
							left = Math.round(left);
							//set images left offset to match
							jQuery(this).css({left:left});
						} else {
							var ratio = rw;
							var top = 0;
							jQuery(this).css({top:top});
						}			
						//use those ratios to calculate scale
						width = Math.round(w*ratio);
						height = Math.round(h*ratio);
						jQuery(this).css("position","relative");
						jQuery(this).width(width).height(height);
					}
					var imgcss= {
						width: width,
						height: height,
						display: options.slide_enabled ? 'block' : 'none'
					};
					jQuery(this).css(imgcss);					
					jQuery(this).hover(
						function(){jQuery(this).css("border", "3px solid #FC9200");},
						function(){if(!jQuery(this).hasClass("marquee_selected")){jQuery(this).css("border", "3px solid #FFF");}}
					);

					if(jQuery(this).hasClass('marquee_first')){
						jQuery(this).trigger("click",["auto"]);
					}
				});

				//clone so the on loads will fire correctly
				var newImage = jQuery(this).clone(true).insertAfter(this);
				
				jQuery(this).remove();

				//reset images to the clones
				images = ulist.children('li').children('img');
			}

			function activate() {
				//sets the intial phase for everything
				
				//image_click is controls the fading
				images.bind("click",image_click);

				//hiding refrence to slide elements if slide is disabled or unneeded
				if (options.slide_enabled){
					if (options.auto_play){
						playing = true;
						play_anchor.hide();
						stop_anchor.show();
					} else {
						play_anchor.show();
						stop_anchor.hide();
					}
				}
				
				images.filter(":last").addClass("marquee_last");
				images.filter(":first").addClass("marquee_first");
				//css for the list
				var licss = {
					width: options.thumb_width+6+"px",
					"list-style": "none",
					'float': 'left',
					'margin-right': '8px'
				};
				images.each(function() {
					jQuery(this).parent('li').css(licss);
					//fixes a bug where images don't get the correct display after loading
				});
				//previous link to go back an image
				previous_image_anchor.bind("click",previous_image);
				//ditto for forward, also the item that gets auto clicked for slideshow
				next_image_anchor.bind("click",next_image);
			} //end activate function

			function image_click(event, how) {
					//catch when user clicks on an image Then cancel current slideshow
					if (how!="auto") {
						if (options.slide_enabled) {
							stop_anchor.hide();
							play_anchor.show();
							playing=false;
						}
						main_img.stop();
						main_img.dequeue();
						$('.progressInner').stop().width(0);
					}
					//all our image variables
					if (options.user_thumbs) {		
						var image_source = jQuery(this).attr("ref");
					} else {
						var image_source = jQuery(this).attr("src");
					}
					var image_link = jQuery(this).attr("ref");
					var image_caption = jQuery(this).next("span").html();
					var image_progress = jQuery(this).next('.progress').children('.progressInner');
					var image_map = jQuery(this).siblings("map").attr('name');
								
					//fade out the old thumb
					images.filter(".marquee_selected").css("border", "3px solid #FFF"); 
					images.filter(".marquee_selected").removeClass("marquee_selected"); 
					//fade in the new thumb
					jQuery(this).css("border", "3px solid #FC9200");
					jQuery(this).addClass("marquee_selected");
					
					main_img.fadeTo(500,0.05,function(){
						main_img.attr("src",image_source);
						main_img.attr("useMap", '#' + image_map);
						
						main_img.fadeTo(800,1,function(){
							if (playing){
								image_progress.animate({width: '100%'}, options.slide_speed);
								jQuery(this).animate({top:0},options.slide_speed, function() {
									
									//redudency needed here to catch the user clicking on an image during a change.
									if(playing){next_image_anchor.trigger("click",["auto"]);}
								});
							}
						});
					});
			}//end image_click function
			
			function next_image(event, how) {
				if(images.filter(".marquee_selected").hasClass("marquee_last")) {
					images.filter(":first").trigger("click",how);
					$('.progressInner').width(0);
				} else {
					images.filter(".marquee_selected").parent('li').next('li').children('img').trigger("click",how);
				}
			}//end next image function
			
			function previous_image(event, how) {
				if(images.filter(".marquee_selected").hasClass("marquee_first")){
					images.filter(":last").trigger("click",how);
				} else {
					images.filter(".marquee_selected").parent('li').prev('li').children('img').trigger("click",how);
				}
			}//end previous image function

			function play_button(){
				play_anchor.bind("click", function() {
					main_img.stop();
					main_img.dequeue();
					playing = true;
					next_image_anchor.trigger("click",["auto"]);
					jQuery(this).hide();
					stop_anchor.show();
				});
				stop_anchor.bind("click", function() {
					playing = false;
					$('.progressInner').stop().width(0);
					jQuery(this).hide();
					play_anchor.show();
				});
			}

			//hide the navigation if the user doesn't want it
			if (!options.show_prev_next){
				navigation_div.css("display","none");
			}

			if (options.slide_enabled) { 
				play_button();
			}

			activate();
			
		});//end return this.each
	}//end build function
	
	//activate applies the appropriate actions to all the different parts of the structure.
	//and loads the sets the first image
};//end jquery.iMarqueePromo		
jQuery.fn.marqueePromo = jQuery.iMarqueePromo.build;