/***** Plugin Documentation
Author: Zachary Abresch
Version: 0.1

------------------------------------------------------------------

Description: This plugin will create an image gallery from an XML file of images. The XML file should be in the following form:

<?xml version="1.0" encoding="utf-8"?>
<gallery>
	<image>
		<path>path/to/your/images.jpg</path>
		<title>Title of image. Will be caption of image being viewed and title under thumbnail.</title>
	</image>
	<image>
		<path>path/to/your/images2.jpg</path>
		<title>Title of image. Will be caption of image being viewed and title under thumbnail.</title>
	</image>
	.
	.
	.
</gallery>

For every <image></image> tag a gallery image will be created.

------------------------------------------------------------------

CSS

The following CSS rules should be in effect. Feel free to modify the specifics to match your layout and application. 
(Coming soon: settable CSS or classes for extensible styling)


.chooser {
	text-align: center;
}

.chooser ul li {
	float:left;
	text-align: center;
	min-width:150px;
	min-height:125px;
	margin:15px 8px;
	border: 1px solid transparent;
	padding: 3px;
}

.chooser ul li a img {
	width:150px;
}

.viewer {
	padding:10px;
	margin-bottom: 5px;
	text-align: center;
}

.viewer img {
	width:500px;
}

div.caption {
	margin: 8px;
}

div.navigation {
	margin: 5px;
}

a.nextPrev {
	text-decoration: none;
	font-size:130%;
	font-weight: bold;
	border:1px solid #eee;
	padding:3px;
}

a.nextPrev:hover {
	color:#633;
	background:#ddd;
	border: 1px solid #aaf;
}

li.thumbSelected {
	border:1px solid #F00 !important;
	background:#eee;
}

a.thumbLink {
	
}

div.thumbCaption {
	font-size:80%;
}

.breaker {
	float: none;
	clear: both;
}

------------------------------------------------------------------
Usage: You use the plugin like so:

XHTML
<div id="#myGallery"></div>

Javscript
var myOptions = { //These are the defaults
	xmlFile:'gallery.xml',
	thumbWidth:150,
	viewerWidth:400,
	fadeSpeed: 200
}
$("#myGallery").zgallery(myOptions)
;
------------------------------------------------------------------
Miscellaneous

The plugin can also be controlled using the left and right arrow keys to navigate
from next and previous images.

*****/
(function($) {
	$.fn.extend({
		zgallery: function(options) {
			var defaults = {
				xmlFile:'gallery.xml',
				thumbWidth:150,
				viewerWidth:400,
				fadeSpeed: 200
			};
			
			var options = $.extend(defaults, options);
			
			return this.each(function() {
				var o = options;
				var $t = $(this);
				$t.empty();
				$('<div class="zgallery"><div class="viewer"><img src="" /></div><div class="caption"></div><div class="navigation"></div><div class="chooser"></div></div>').appendTo($t);
				$('div.viewer img').width(o.viewerWidth);
				var galleryXML = $.get(o.xmlFile, function(data, textStatus) {
					if (textStatus == 'success') {
						var thumbList = thumbBuilder(data);
						var $chooser = $t.children('div.zgallery').children('div.chooser');
						$chooser.append(thumbList);
						$chooser.children('ul:first li, ul:first li img').width(o.thumbWidth);
						$("a.thumbLink:eq(0)").parent('li').addClass('thumbSelected').siblings('li').removeClass('thumbSelected');
						$("div.viewer img").attr("src", $("li.thumbSelected").children('a.thumbLink').attr("href"));
						$("div.caption").text($("li.thumbSelected").children('a.thumbLink').attr("title"));
						buildEvents();
					} else {
						return false;
					}
				}, "xml");
			});
			
			function thumbBuilder(xml) {
				var htmlArray = [];
				htmlArray.push('<ul>');
				$(xml).find('image').each(function(e) {
					var $t = $(this);
					var src = $t.children('path').text();
					var title = $t.children('title').text();
					var li = '<li><a href="'+src+'" title="'+title+'" class="thumbLink"><img src="'+src+'" width="'+options.thumbWidth+'" /><!-- <br /><div class="thumbCaption">'+title+'</div>--></a></li>';
					htmlArray.push(li);
				});
				htmlArray.push('</ul>');
				htmlArray.push('<div class="breaker"></div>');
				return htmlArray.join('');
			}
			
			function buildEvents() {
				//thumbClick event
				buildThumbEvent();
				//next / previous event
				buildNextPrevEvent();
				//50% image event
				buildHalfEvent();
				//Keyboard events
				buildKeyboardEvents();
			}
			
			function buildKeyboardEvents() {
				$(document).keydown(function(event) {
					if (event.keyCode == 37) {
						var $a = $("a[href=#prev]");
						if ($a.css("display") != "none") {
							$a.click();
						}
						return false;
					} else if (event.keyCode == 39) {
						var $a = $("a[href=#next]");
						if ($a.css("display") != "none") {
							$a.click();
						}
						return false;
					}
				});
			}
			
			function buildThumbEvent() {
				$("a.thumbLink").click(function() {
					var $t = $(this);
					var src = $t.attr('href');
					var title = $t.attr('title');
					swapImage(src, title);
					showSelected($t.parent('li'));
					checkNextPrev();
					return false;
				});
			}
			
			function buildNextPrevEvent() {
				$('<a href="#prev" class="nextPrev">&lt; &lt; Prev </a> <a href="#next" class="nextPrev">Next &gt; &gt;</a>').appendTo('.navigation');
				checkNextPrev();
				$("a.nextPrev").click(function() {
					var currHref = $(this).attr("href");
					var src;
					var $currLi = $("li.thumbSelected");
					if (currHref == "#next") {
						src = $currLi.next('li').children('a.thumbLink').attr('href');
						title = $currLi.next('li').children('a.thumbLink').attr('title');
						$sendLi = $currLi.next('li');
						
					} else if (currHref == "#prev") {
						src = $currLi.prev('li').children('a.thumbLink').attr('href');
						title = $currLi.prev('li').children('a.thumbLink').attr('title');
						$sendLi = $currLi.prev('li');
					}
					swapImage(src, title);
					showSelected($sendLi);
					checkNextPrev();
				});
			}
			
			function buildHalfEvent() {
				$("div.viewer img").click(function(event) {
					var x = event.pageX - this.offsetLeft;
					var y = event.pageY - this.offsetTop;
					var newEvent = jQuery.Event('click');
					if (x <= ($(this).width() / 2)) {
						var $a = $("a[href=#prev]");
						if ($a.css("display") != "none") {
							$a.click();
						}
					} else if (x > ($(this).width() / 2)) {
						var $a = $("a[href=#next]");
						if ($a.css("display") != "none") {
							$a.click();
						}
					}
				});
			}
			
			function checkNextPrev() {
				var $sel = $("li.thumbSelected");
				var ncnt = $sel.next('li').length;
				var pcnt = $sel.prev('li').length;
				$("a[href=#prev], a[href=#next]").show();
				if (ncnt == 0) {
					$("a[href=#next]").hide();
				} else if (pcnt == 0) {
					$("a[href=#prev]").hide();
				}
			}
			
			function swapImage(src, title) {
				var $img = $("div.viewer img");
				$img.add('div.caption').fadeOut(options.fadeSpeed, function() {
					$img.attr('src', src).fadeIn(options.fadeSpeed);
					$("div.caption").text(title).fadeIn(options.fadeSpeed);
				});
			}
			
			function showSelected($li) {
				$li.addClass('thumbSelected').siblings('li').removeClass('thumbSelected');
			}
		}
	});
})(jQuery);