/*
 *	zoomImage jquery plugin
 *
 *	new bespoke plugin - rcomley - bugsoftware.co.uk - 20090812
 *
 *************************************************
 * HTML Before plugin run
 *
 * <div class="media-carousel">
 * <ul>
 * 	<li>
 * 		<a href="{{ MEDIA_URL }}/images/3.png" rel="image"><img src="{{ MEDIA_URL }}/images/mediacentre/im1.png" alt=""/></a>
 * 	</li>
 * 	<li>
 * 		<a href="{{ MEDIA_URL }}/video/videoplayermutescrubtime.swf" rel="flash"><img src="{{ MEDIA_URL }}/images/mediacentre/im2.png" alt=""/></a>
 * 	</li>
 * 	<li>
 * 		<a href="{{ MEDIA_URL }}/images/4.png" rel="image"><img src="{{ MEDIA_URL }}/images/mediacentre/im3.png" alt=""/></a>
 * 	</li>
 * 	<li class="last">
 * 		<a href="{{ MEDIA_URL }}/video/videoplayermutescrubtime.swf" rel="flash"><img src="{{ MEDIA_URL }}/images/mediacentre/im4.png" alt=""/></a>
 * 	</li>
 * 	<li class="last">
 * 		<a href="{{ MEDIA_URL }}/video/videoplayermutescrubtime.swf" rel="flash"><img src="{{ MEDIA_URL }}/images/mediacentre/im4.png" alt=""/></a>
 * 	</li>
 * </ul>
 * </div>
 * 
 **************************************************
 * HTML Augmented after plugin run
 * 
 * <div class="media-carousel loaded">
 * <div class="mediaWrapper"></div>
 * <div class="carouselWrapper">
 * <ul>
 * 	<li>
 * 		<a href="{{ MEDIA_URL }}/images/3.png" rel="image" title="description 1">
 *			<img src="{{ MEDIA_URL }}/images/mediacentre/im1.png" alt=""/>
 *		</a>
 * 	</li>
 * 	<li>
 * 		<a href="{{ MEDIA_URL }}/video/videoplayermutescrubtime.swf" rel="flash">
 *			<img src="{{ MEDIA_URL }}/images/mediacentre/im2.png" alt=""/>
 *		</a>
 * 	</li>
 * 	<li>
 * 		<a href="{{ MEDIA_URL }}/images/4.png" rel="image">
 *			<img src="{{ MEDIA_URL }}/images/mediacentre/im3.png" alt=""/>
 *		</a>
 * 	</li>
 * 	<li>
 * 		<a href="{{ MEDIA_URL }}/video/videoplayermutescrubtime.swf" rel="flash">
 *			<img src="{{ MEDIA_URL }}/images/mediacentre/im4.png" alt=""/>
 *		</a>
 * 	</li>
 * 	<li>
 * 		<a href="{{ MEDIA_URL }}/images/3.png" rel="image">
 *			<img src="{{ MEDIA_URL }}/images/mediacentre/im1.png" alt=""/>
 *		</a>
 * 	</li>
 * </ul>
 * </div>
 * <div class="scroll">
 * <a href="#" class="prev">prev</a>
 * <a href="#" class="next">next</a>
 * </div>
 * <div class="description">Some descriptive stuff...</div>
 * </div>
 *  
 *  
 ****************************************************
 *  
 * Requires CSS file:
 * bug.jquery.bacMediaCarousel.css
 *
 *
 *
 */

jQuery.fn.uniqueId = function(suffix, force)
{
	if(suffix == null)
	{
		suffix = "UniqueId";
	}

	return this.each(function()
	{
		if (!this.id || force)
		{
			this.id = "n" + (++jQuery.fn.uniqueId.index) + suffix;
		}
	});
};

jQuery.fn.uniqueId.index = 0; 
 
 
jQuery.fn.bacMediaCarousel = function() {

	var settings = {
		percent:30,
		duration:300
	}; 

	function showOverlay(jOverlay)
	{
		jOverlay.css({display:"block"});
		
		jOverlay.stop().animate(
		{
			opacity: .8
		},
		{
			duration:settings.duration
		});
	}
	
	function hideOverlay(jOverlay)
	{
		jOverlay.stop().animate(
		{
			opacity: 0
		},
		{
			duration:settings.duration,
			complete:function()
			{ 
				jOverlay.css({display:"none"});
			}
		});
	}
	
	function loadMedia(jMedia, paths, types, descriptions)
	{
		jMedia.find("div.description p").html(descriptions[0]);
		
		Cufon.replace('div.media-carousel div.description p');
		
		var mediaWrapper = jMedia.find("div.mediaWrapper");
		
		mediaWrapper.find(" > *").remove();
		
		if(paths.length > 1)
		{
		
			var scrollable = jQuery("<div class='scrollable'></div>").appendTo(mediaWrapper);
			mediaList = jQuery("<div class='thumbs'></div>").appendTo(scrollable);
			
			
			for(var i = 0; i < paths.length; i++)
			{
				var mediaListItem = jQuery("<div></div>").appendTo(mediaList);
			
			
				if(types[i] == "image")
				{
					mediaListItem.append("<img alt='" + descriptions[i] + "' src='" + paths[i] + "'/>");
					
					
				}
				else if(types[i] == "flash")
				{
					var id = jQuery("<div></div>").uniqueId().appendTo(mediaListItem).attr("id"); 
					
					var att = {data:paths[i], width: mediaWrapper.width(), height:mediaWrapper.height()};
					var par = {wmode:"transparent"};
					
					var newFlash = swfobject.createSWF(att, par, id);
				}
			}
		
		}
		else
		{
			if(types[0] == "image")
			{
				mediaWrapper.append("<img alt='" + descriptions[0] + "' src='" + paths[0] + "'/>");
			}
			else if(types[0] == "flash")
			{
				var id = jQuery("<div></div>").uniqueId().appendTo(mediaWrapper).attr("id"); 
				
				var att = {data:paths[0], width: mediaWrapper.width(), height:mediaWrapper.height()};
				var par = {wmode:"transparent"};
				
				var newFlash = swfobject.createSWF(att, par, id);
			}
		}
		
		
		if(paths.length > 1)
		{			
			mediaWrapper.addClass("detailImage");
			jQuery("<a class='prev'></a><a class='next'></a>").appendTo(mediaWrapper);
		
			scrollable.scrollable({
				size: 1,
				items: 'div.thumbs',
				hoverClass: 'hover',
				loop: true, 
				speed: settings.duration,
				easing: 'easeOutSine',
				onSeek: function(index)
					{
						jMedia.find("div.description p").text(descriptions[index]);

						Cufon.replace('div.media-carousel div.description p');
					}
			});	
		}
	}
	
	function makeThumbActive(mediaThumb, jMedia)
	{
		mediaThumb.addClass("active");

		var paths = [];
		var types = [];
		var descriptions = [];

		var subList = mediaThumb.parent().find("> ul")
		
		if(subList.size())
		{
			subList.children().each(function(){
			
				var subListItemThumb = jQuery(this).find("a");
				
				descriptions.push(subListItemThumb.attr("title"));
				types.push(subListItemThumb.attr("rel"));
				paths.push(subListItemThumb.attr("href"));
			
			});
		}
		else
		{
			descriptions.push(mediaThumb.attr("title"));
			types.push(mediaThumb.attr("rel"));
			paths.push(mediaThumb.attr("href"));
		}
		
		loadMedia(jMedia, paths, types, descriptions);
	}

	return this.each(function()
	{
		var jMedia = jQuery(this);
		var origWidth = jMedia.width();
		var origHeight = jMedia.height();
		
		jMedia.addClass("loaded");
		
		jQuery("<div class='mediaWrapper'></div>").prependTo(jMedia);
		jQuery("<div class='description'><p>Some descriptive stuff...</p></div>").appendTo(jMedia);

		
		var jListItems = jMedia.find("> ul > li");
		
		jListItems.each(function()
		{
			jListItem = jQuery(this);
			
			if(jListItem.find("> ul").size())
			{	
				var groupDesc = jListItem.find(" > span").text();
				
				jListItem.find(" > span").remove();
				
				var groupLink = jListItem.find("a:first").clone().appendTo(jListItem);
				
				groupLink.attr("title", groupDesc);
			}
		});
		
		var jThumbs = jListItems.find("> a");
		
		var i = 0;
		
		jThumbs.each(function()
		{
			var jThumbLink = jQuery(this);
			
			var subImagesCount = jThumbLink.parent().find("> ul > li").size();
			
			var countHTML = "";
			
			if(subImagesCount)
			{
				countHTML = "<p>" + subImagesCount + " items</p>";
			}
			
			
			var html = "<div class='thumbOverlay'><p class='title'>" + jThumbLink.attr("title") + "</p>" + countHTML + "</div>";
			
			var jOverlay = jQuery(html).appendTo(jThumbLink);
			
			
			
			if(i != 0)
			{
				jOverlay.css({opacity: 0, display: "none"});
			}
			else
			{
				makeThumbActive(jThumbLink, jMedia);
			
				jOverlay.css({opacity: .8});
				
			}
			
			i++;
		});
		
		
		
		
		var jMediaList = jMedia.find("> ul");
		var mediaCount = jMediaList.find("> li").size();
		
		
		if(mediaCount > 4)
		{
			var active = false;
		
			jMediaList.before("<div class='scroll'><a href='#' class='prev'>prev</a><a href='#' class='next'>next</a></div>");

			var stepPixels = jMedia.find("> div.scroll").height();
			
			jMedia.find("> div.scroll > a.prev").click(function(evt)
			{
				evt.preventDefault();
				
				if(active)
				{
					return false;
				}
				
				active = true;
				
				// get the last elems in the list and put 'em on the front so we can scroll up to them
				jMediaList.find("> li:gt(" + (mediaCount-5) + ")").clone(true).insertBefore(jMediaList.find("> li:first"));
				jMediaList.css({top:-(stepPixels)});
				
				jMediaList.animate(
				{
					top: (0)
				},
				{
					duration:settings.duration,
					complete:function()
					{
						jMediaList.find("> li:gt(" + (mediaCount-1) + ")").remove();
						active = false;
					}
				});
			});
			
			jMedia.find("> div.scroll > a.next").click(function(evt)
			{
				evt.preventDefault();
			
				if(active)
				{
					return false;
				}
			
				active = true;
				
				jMediaList.find("> li:lt(4)").clone(true).insertAfter(jMediaList.find("> li:last"));
				
				jMediaList.animate(
				{
					top: -(stepPixels)
				},
				{
					duration:settings.duration,
					complete:function()
					{
						jMediaList.find("> li:lt(4)").remove();
						jMediaList.css({top:0});
						active = false;
					}
				});
				
			});

		}

		jThumbs.mouseover(function(evt)
		{
			if(jQuery(this).hasClass("active"))
			{
				return;
			}

			showOverlay(jQuery(this).find(">div"));
		});
		
		jThumbs.mouseout(function(evt)
		{
			if(jQuery(this).hasClass("active"))
			{
				return;
			}
		
			hideOverlay(jQuery(this).find(">div"));
		});
		
		jThumbs.click(function(evt)
		{
			evt.preventDefault();
		
			var mediaThumb = jQuery(this);
		
			if(mediaThumb.hasClass("active"))
			{
				return;
			}
		
			// hide the old active
			hideOverlay(jMediaList.find("> li > a.active > div"));
			
			// jThumbs is not reliable any more since during scroll we clone and delete...
			jMediaList.find("li > a").removeClass("active");
		
			makeThumbActive(mediaThumb, jMedia);
			
			
		});

		jMedia.find(" > ul").wrap("<div class='carouselWrapper'></div>");
	});
};