// WGC image slide show
// a little merry go round of images
// parses a list of image hrefs and appends 2 transparent images, the current and next image is 
// then applied as a background image to the transparent images.... these are then faded between each other
// to produce the animation. can also optionally link images, show labels and image navigation.
// Usage:
// ss = new WGC_slideshow('ss','div#rightColumn');
// ss.setPauseInterval(4000);
// ss.linkImages(true);
// ss.showTitleLabels(true);
// ss.rolloverTitleLabels(true);
// ss.showNavigation('div#galleryNav');
// ss.loadSlideshowList('ul#imgList li a');
// ss.startSlideshow();
// Author: HdotNET@cfp

function WGC_slideshow(slideShowName,slideShowTarget)
{
	this.slides = new Array();
	this.links = new Array();
	this.titles = new Array();
	this.ssName = slideShowName;
	this.ssTarget = $(slideShowTarget);
	this.timer;
	this.paused = false;
	this.currentIndex = 0;
	this.next_slideIndex = 0;
	this.next_targetIndex = 0;
	this.prev_slideIndex = 0;
	this.prev_targetIndex = 0;
	this.linkedImages = false;
	this.showTitles = false;
	this.rolloverTitles = false;
	this.showLabels = false;
	this.positionLabels = false;
	this.fading = false;
	this.manually_loaded_slide = false;
	this.pauseInterval = 6000;
	this.fadeInterval = 2000;
	this.navTarget = false;
	
	this.loadSlideshowList = function(listEle)
	{
		var _self = this;
		// we are to show the navigation so we must build up a list of images for it.
		if(this.navTarget)
		{
			var navhtml = '<ul><li>Gallery images:</li>';	
		}
		
		$(listEle).each(function(index)
		{
			if(!_self.linkedImages) // not linked images, the image is in the href
			{
				_self.slides[_self.slides.length] = $(this).attr('href');
			}
			else
			{
				_self.links[_self.links.length] = $(this).attr('href');	
				_self.slides[_self.slides.length] = $(this).attr('rel');
			}
			
			if(_self.showTitles)
			{
				_self.titles[_self.titles.length] = $(this).attr('title');
			}
			
			if(_self.navTarget)
			{
				navhtml += '<li><a style="cursor:pointer" onclick="'+_self.ssName+'.loadSlide('+index+')" id="'+_self.ssName+'SlideLinkA'+index+'">'+(index+1)+'</a></li>';	
			}			
		});
		
		if(this.navTarget)
		{
			navhtml += '</ul>';	
			this.navTarget.html(navhtml);
		}		
	}
	this.setFadeInterval = function(interval)
	{
		this.fadeInterval = interval;
	}
	this.setPauseInterval = function(interval)
	{
		this.pauseInterval = interval;
	}
	this.linkImages = function(bool)
	{
		this.linkedImages = bool;
	}
	this.placeLabels = function(bool)
	{
		this.positionLabels = bool;
	}
	this.showTitleLabels = function(bool)
	{
		this.showTitles = bool;
		this.showLabels = bool;
	}
	this.rolloverTitleLabels = function(bool)
	{
		// showLabels is toggled in the mouseover
		this.showTitles = bool;
		this.rolloverTitles = bool;
	}
	this.showNavigation = function(ele)
	{
		this.navEle = ele;
		this.navTarget = $(ele);
	}
	this.startSlideshow = function()
	{
		width = this.ssTarget.width();
		height = this.ssTarget.height();
		events1 = '';
		events2 = '';
		style1 = '';
		style2 = '';
		
		if(this.linkedImages)
		{
			events1 = ' onclick="'+this.ssName+'.clickImage()"';
			events2 = ' onclick="'+this.ssName+'.clickImage()"';
			style1 = ' style="cursor:pointer"';
			style2 = ' style="cursor:pointer"';
		}
		
		var _self = this;
		
		if(this.rolloverTitles)
		{
			this.ssTarget.mouseover(function(){_self.showLabel()});
			this.ssTarget.mouseout(function(){_self.hideLabel()});
		}
		
		if(this.navTarget)
		{
			$(this.navEle + ' a').mouseover(function(){_self.rotateStop()});
			$(this.navEle + ' a').mouseout(function(){_self.rotateResume()});	
		}

		this.ssTarget.append('<img src="/images/shim.gif" class="image-slideshow-target" width='+width+' height='+height+' id="'+this.ssName+'img1" '+style1+' '+events1+' />');
		this.ssTarget.append('<img src="/images/shim.gif" class="image-slideshow-target" width='+width+' height='+height+' id="'+this.ssName+'img2" '+style2+' '+events2+' />');
			
		if(this.showTitles)
		{
			html = '<div id="'+this.ssName+'titleBox" class="image-slideshow-title-box">';
			html += '<div id="'+this.ssName+'title1" class="image-slideshow-title-display">&nbsp;</div>';
			html += '<div id="'+this.ssName+'title2" class="image-slideshow-title-display">&nbsp;</div>';
			html += '</div>';
			this.ssTarget.append(html);
		}
		
		if(!this.rolloverTitles && this.showTitles)
		{
			debug('showing my box');
			$('div#'+this.ssName+'titleBox').show();
		}		
		
		this.preloadSlide(0,1);
	}
	this.preloadSlide = function(slideIndex,targetIndex)
	{
		if(IE_version == 7 || IE_version == 6)
		{
			// preload is a bit flaky in <=7, really don't know why. only seems to not work on the themes page.
			this.transitionSlide(slideIndex,targetIndex);
		}
		else
		{
			var _self = this;	
			$.preLoadImages(
				 [
				 this.slides[slideIndex]
				 ],function(){
					 _self.transitionSlide(slideIndex,targetIndex);
				 }
			);

		}
	}
	this.loadSlide = function(index)
	{
		
		if(index == this.currentIndex)
		{
			debug('nothing to do, we are on '+this.currentIndex);
			return;	
		}
		
		if(this.fading)
		{
			debug('still fading. not doing nuffink.');
			return;	
		}
		
		this.manually_loaded_slide = true;
		
		clearTimeout(this.timer);

		this.timer=setTimeout(this.ssName+'.preloadSlide('+index+','+this.next_targetIndex+')',10);
		
	}
	this.clickImage = function()
	{
		callmethod = 'processSlideshowLink'; // if a function by this name exists we will pass the href to it to do what it likes with it.
		
		href = this.links[this.currentIndex];
		
		if(window[callmethod] ) 
		{
			window[callmethod](href);
		}
		else
		{
			// just go to the href
			document.location.href = href;	
		}
	}
	this.showLabel = function()
	{
		this.showLabels = true;
		debug('showing label '+ this.titles[this.currentIndex]);
		$('div#'+this.ssName+'titleBox').show();
		if(!this.fading)
		{
			$('div#'+this.ssName+'title'+this.prev_targetIndex).show();
		}
		
	}
	this.hideLabel = function()
	{
		this.showLabels = false;
		$('div#'+this.ssName+'titleBox').hide();
		if(!this.fading)
		{
			$('div#'+this.ssName+'title'+this.prev_targetIndex).hide();
		}
	}
	this.rotateStop = function()
	{
		if(this.paused)
		{
			return;	
		}
		
		this.paused = true;
		
		clearTimeout(this.timer);// clear the timeout everytime otherwise we get timers flying off everywhere and it goes mad
	}
	this.rotateResume = function()
	{
		this.paused = false;
		
		if(this.manually_loaded_slide)
		{
			return;	
		}
		// use a timer to make everythign a bit smoother.
		this.timer=setTimeout(this.ssName+'.preloadSlide('+this.next_slideIndex+','+this.next_targetIndex+')',(this.pauseInterval/2));
	}

	this.transitionSlide = function(slideIndex,targetIndex)
	{
		
		var _self = this;
		this.fading = true;
		this.manually_loaded_slide = false;	
			
		$('img#'+this.ssName+'img'+targetIndex).css('backgroundImage','url('+this.slides[slideIndex]+')'); //swap the background image
		
		var _currimgpath = this.slides[slideIndex]; // used to work out the correct width to position the label
		// fade it in, set a boolean to stop further navigation during the fade
		$('img#'+this.ssName+'img'+targetIndex).fadeIn(this.fadeInterval,function()
		{
			_self.fading = false;
		});

				if(this.showTitles && this.positionLabels)
				{
					imgwh = new Image();			
					imgwh.src = _currimgpath;
					imagewidth = imgwh.width;
					containerwidth = this.ssTarget.width();
					leftpos = Math.ceil((containerwidth-imagewidth)/2);
					debug('The image size is '+imgwh.width+'*'+imgwh.height+' and in a box of width '+ containerwidth + ' and on pos '+leftpos);				
					$('div#'+this.ssName+'titleBox').css('left',leftpos);
				}

		debug(this.titles[slideIndex]);
			
		// set the text of the titles
		if(this.showTitles)
		{
			$('div#'+this.ssName+'title'+targetIndex).html(this.nl2br(this.titles[slideIndex]));
		}

		this.prev_targetIndex = targetIndex;
		// determine the next target image to apply a background to.
		if(targetIndex == 1)
		{
			targetIndex = 2;	
		}
		else
		{
			targetIndex = 1;	
		}
		
		this.next_targetIndex = targetIndex;
		
		// fade it out ready for the next cycle
		$('img#'+this.ssName+'img'+targetIndex).fadeOut(this.fadeInterval);
		
		// transition the titles, when finished fading out fade the next one in
		if(this.showTitles && this.showLabels)
		{
			var _self = this;
			$('div#'+this.ssName+'title'+targetIndex).fadeOut((this.fadeInterval/2),
			function(){
				$('div#'+_self.ssName+'title'+_self.prev_targetIndex).fadeIn(_self.fadeInterval/2); 

				/*if(_self.positionLabels)
				{
					imgwh = new Image();			
					imgwh.src = _currimgpath;
					imagewidth = imgwh.width;
					containerwidth = _self.ssTarget.width();
					leftpos = Math.ceil((containerwidth-imagewidth)/2);
					debug('The image size is '+imgwh.width+'*'+imgwh.height+' and in a box of width '+ containerwidth + ' and on pos '+leftpos);				
					$('div#'+_self.ssName+'titleBox').css('left',leftpos);
				}*/
			}); 
		}
		
		// set the current index in case it gets clicked.
		this.previousIndex = this.currentIndex;
		this.currentIndex = slideIndex;
		
		// highlight the next item in the navigation
		if(this.navTarget)
		{
			$('a#'+this.ssName+'SlideLinkA'+this.previousIndex).removeClass('active');
			$('a#'+this.ssName+'SlideLinkA'+this.currentIndex).addClass('active');
		}
		
		// determine the next image in the slideshow
		if(slideIndex == (this.slides.length-1))
		{
			slideIndex = 0;	
		}
		else
		{
			slideIndex++;
		}
		
		this.next_slideIndex = slideIndex;
		
		// do it all again in 6 seconds
		if(!this.paused)
		{
			this.timer=setTimeout(this.ssName+'.preloadSlide('+slideIndex+','+targetIndex+')',this.pauseInterval);
		}
		else
		{
			clearTimeout(this.timer); // just in case its been triggered again.
		}
	}
	this.nl2br = function (str) {
		// http://kevin.vanzonneveld.net
		// +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
		// +   improved by: Philip Peterson
		// +   improved by: Onno Marsman
		// +   improved by: Atli Þór
		// +   bugfixed by: Onno Marsman
		// +      input by: Brett Zamir (http://brett-zamir.me)
		// +   bugfixed by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
		// +   improved by: Brett Zamir (http://brett-zamir.me)
		// +   improved by: Maximusya
		// *     example 1: nl2br('Kevin\nvan\nZonneveld');
		// *     returns 1: 'Kevin<br />\nvan<br />\nZonneveld'
		// *     example 2: nl2br("\nOne\nTwo\n\nThree\n", false);
		// *     returns 2: '<br>\nOne<br>\nTwo<br>\n<br>\nThree<br>\n'
		// *     example 3: nl2br("\nOne\nTwo\n\nThree\n", true);
		// *     returns 3: '<br />\nOne<br />\nTwo<br />\n<br />\nThree<br />\n'
	
		var breakTag = '<br />';
	
		return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
	}	
}