/*
options
display: inline or modal
xml: xml file to use
banner: jquery refernce to banner link (link that opens the modal). only used for modal
(inline finds it by searching the container. with modal its not in the container)

If using modal, make sure to include the modal file: jquery.simplemodal-1.3.5.min.js

Inline mode the banner is located inside the container div, & toggles visibility opposite the slideshow.
Modal mode the banner is totally separate & remains visible

Use like so:
$(document).ready(
	function(){
		$("#slideShowPlaceHolder .ss_banner").click(
			function(){
				// load slideshow on first click
				$(this).parent().slideshow({ display: 'inline', xml : 'ss_children_surgery.xml' , banner : this});
				// this is unbound & replaced in the slideshow
			}	
		);
		
		$("#modalBanner").click(
			function(){					
				// load slideshow on first click
				$("#ss2").slideshow({ display: 'modal', xml : 'test.xml', banner : this });
				// this is unbound & replaced in the slideshow
			}	
		);
	}	
);

*/

(function($) {

  $.fn.slideshow = function(callerSettings) {
	// defaults
	var settings = $.extend({
		display: 'inline',
		xml: 'test.xml'
	},callerSettings||{});	
	
	var container = this; // div this function was called on 
	container.id = $(container).attr('id');
	var slideCount = 0; //used for css class names
	

	$.fn.slideshow.build = function(xml){
		// prevent multi clicks while ajax loads
		// this is rebound later
		$(settings.banner).unbind('click'); 
		container.addClass("ss_slideShowContainer");
			
		var ssTitle = $(xml).find("title").first().text();
		// title if there is one
		if (ssTitle && (ssTitle.length > 0)){
			container.append('<div class="ss_title">' + ssTitle + "</div>\n");
		}
		// create div structure	
		container.append("<div class=\"ss_slideShowShadow\"><div class=\"ss_slideShowWrap\"><div class=\"ss_slides\"></div><div class=\"ss_controls\"></div></div></div>");
		container.find(".ss_controls").html("<span class=\"ss_counter\"></span><span class=\"ss_vcr\"><span class=\"ss_back\">previous</span><span class=\"ss_sep\">|</span><span class=\"ss_next\">next</span></span><span class=\"ss_close\"></span>");
		
		var slideTemplate = "<div class=\"ss_slide ss_slide#id#\"><div class=\"ss_image\"><img src=\"#image#\" width=\"#width#\" height=\"#height#\" border=\"0\" alt=\"#title#\"></div><div class=\"ss_text\"><div class=\"ss_slide_title\">#title#</div><div class=\"ss_caption\">#caption#</div></div></div>";
		
		// generate slides
		$(xml).find("slide").each(function(){
			slideCount++;
			tmp = slideTemplate;
			tmp = tmp.replace(/#title#/g, $(this).find("title").text());
			tmp = tmp.replace("#id#", slideCount);
			tmp = tmp.replace("#caption#", $(this).find("caption").text());
			tmp = tmp.replace("#image#", $(this).find("image").text());
			tmp = tmp.replace("#width#", $(this).find("image").attr('width'));
			tmp = tmp.replace("#height#", $(this).find("image").attr('height'));
			// pop slide into container div
			container.find(".ss_slides").append(tmp);
		});
		// add the slide count text
		container.find(".ss_counter").html("Image <span class=\"ss_index\">1</span> of " + slideCount);
		
		// activate the controls
		container.find(".ss_back").click(function(){
			$.fn.slideshow.swapSlide("back", container.id);
		});
		container.find(".ss_next").click(function(){
			$.fn.slideshow.swapSlide("next", container.id);
		});
		// hide the children (next, sep, back)
		// show container
		container.find(".ss_vcr").children().hide();
		container.find(".ss_vcr").show();
		
		// modal controls
		if (settings.display == "modal")
		{
			// needs to start out hidden, so the modal hides it on close
			container.hide();
			container.find('.ss_close').click(
				function(){
					$.modal.close();
				}	
			);
			//var modalOptions = {persist:true, closeClass:'ss_close', overlayClose:true};
			var modalOptions = {persist:true, overlayClose:true};
			container.modal(modalOptions);

			// re-wire banner to show the modal rather than reloading the xml + images
			$(settings.banner).unbind('click');
			$(settings.banner).click(
				function(){
					//container.find(".ss_slide1").show();
					container.modal(modalOptions);
				}	
			);

		// end of modal controls	
		} else{
	
		// inline controls
			//activate close button
			// by removing the ss_slideShowContainer class, the slide wrapper is hidden
			container.find(".ss_close").click(
				function(){
					$(this).parents(".ss_slideShowContainer").first().find(".ss_banner").show();
					$(this).parents(".ss_slideShowContainer").first().removeClass("ss_slideShowContainer");
				}	
			);
			// re-wire banner to show the slideshow by adding the wrapper class
			// rather than reloading the xml + images
			container.find(".ss_banner").unbind('click');
			container.find(".ss_banner").click(
				function(){
					$(this).parent().addClass("ss_slideShowContainer");
					$(this).hide();
				}	
			);
			//hide the banner
			container.find(".ss_banner").hide();
		}	// end of inline controls
		
		// and things that need to happen for both display modes
		// make the 1st slide & next button  visible
		$.fn.slideshow.swapSlide("init", container.id);

	}
	// EOF build **********************************
	
	// import xml & kick things off
	// build method has to be declared above this
	$.ajax({
		type:"GET",
		cache: true,
		url: settings.xml,
		dataType: "xml",
		success: $.fn.slideshow.build // passes xml to this function automatically
	});

	// allow chaining
	return this;
  };
/* ************************************************** END of slideshow */

	// back & next buttons call this, also called when slideshow is initialized
	$.fn.slideshow.swapSlide = function(direction, parentId){

		var container = $("#" + parentId); // ancestor with unique id
		var showSlide; // the slide to show
		
		// how many slides? count children of passed in continer
		var slideCount = container.find(".ss_slide").length;
		
		// what slide is currently showing (if any)?
		var activeSlide = container.find(".ss_slide:visible").first();
		// on init no slide is active
		if (activeSlide.length < 1)
			activeSlide = container.find(".ss_slide1");
		
		//hide all slides
		container.find(".ss_slide").hide();
		
		// figure out which to show
		switch(direction)
		{
			
			case "next":
				showSlide = activeSlide.next(".ss_slide");
			break;
			
			case "back":
				showSlide = activeSlide.prev(".ss_slide");
			break;
			
			case "init":
			default:
				showSlide = activeSlide;
			break;
			
		} // end switch	of showing slide
		showSlide.show();
		
		// now do buttons
		// hide them all
		container.find(".ss_vcr").children().hide();
		// show next btn for first slide
		if(showSlide.attr("class") == showSlide.parent().children().first().attr("class"))
			container.find(".ss_next").show();
		// show back btn for last slide
		else if(showSlide.attr("class") == showSlide.parent().children().last().attr("class"))
			container.find(".ss_back").show();
		// show it all for middle slides	
		else 
			container.find(".ss_vcr").children().show();	
			
		// update the counter text
		// its a 0 based index so increment
		count = showSlide.parent().children().index(showSlide)+1;
		container.find(".ss_index").html(count);


	} // END of function swapSlide

})(jQuery);