/* Add behaviours for the gallery
   Author:			Andrew Hedges, andrew@bookabach.co.nz
   Date:			2008-10-20
   Requires:		jquery.js, jquery.simplemodal.js
*/

if ('undefined' === typeof BOOKABACH) {
	BOOKABACH = {};
}

BOOKABACH.gallery = (function () {
	// private members
	var
		// constants
		L		= 'L',
		XL		= 'XL',
		ALT		= 'alt',
		IDX		= 'idx',
		IMG		= 'img',
		SRC		= 'src',
		FAST	= 'fast',
		HREF	= 'href',
		BLOCK	= 'block',
		NORMAL	= 'normal',
		// values
		_containerId,
		_tmpls,
		_selectors,
		_css,
		_curPhoto,
		_numPhotos,
		_links,
		// functions
		_next,
		_prev,
		_close,
		_doTransition,
		_buildHTML,
		_initIE6
	;
	
	_containerId = 'galleryModalContainer';
	
	_tmpls = {
		photo : BOOKABACH.templates.make((function () {
			var html;
			html  =	'<div class="modalData">';
			html += 	'<div class="count">';
			html +=			'#{idx} of #{num}<br />';
			html +=		'</div>';
			html +=		'<div class="close">';
			html +=			'<a title="Click to close" href="#" onclick="BOOKABACH.gallery.close();return false;"><img onmouseover="this.src=this.src.replace(\'-lo\', \'-hi\');" onmouseout="this.src=this.src.replace(\'-hi\', \'-lo\');" src="/images/modal/close-x-lo.png" alt="Close" /></a>';
			html += 	'</div>';
			html += 	'<div class="nav">';
			html +=			'&lt; <a title="Click for previous photo" href="#" onclick="BOOKABACH.gallery.prev();return false;">Prev</a> | ';
			html +=			'<a title="Click for next photo" href="#" onclick="BOOKABACH.gallery.next();return false;">Next</a> &gt;';
			html +=		'</div>';
			html +=		'<div class="photo">';
			html += 		'<a title="Click for next photo" href="#" onclick="BOOKABACH.gallery.next();return false;"><img src="#{src}" alt="#{caption}" /></a>';
			html += 	'</div>';
			html += 	'<div class="caption">#{caption}</div>';
			html +=	'</div>';
			return html;
		})()),
		single : BOOKABACH.templates.make((function () {
			var html;
			html  =	'<div class="modalData">';
			html +=		'<div class="close">';
			html +=			'<a title="Click to close" href="#" onclick="BOOKABACH.gallery.close();return false;"><img onmouseover="this.src=this.src.replace(\'-lo\', \'-hi\');" onmouseout="this.src=this.src.replace(\'-hi\', \'-lo\');" src="/images/modal/close-x-lo.png" alt="Close" /></a>';
			html += 	'</div>';
			html +=		'<div class="photo">';
			html += 		'<a title="Click to close" href="#" onclick="BOOKABACH.gallery.close();return false;"><img src="#{src}" alt="#{caption}" /></a>';
			html += 	'</div>';
			html += 	'<div class="caption">#{caption}</div>';
			html +=	'</div>';
			return html;
		})()),
		// src-full, src-thumb, caption
		thumb : BOOKABACH.templates.make((function () {
			var html;
			html  = '<a title="Click to view full size image" href="#{src-full}">';
			html += '<img style="border: medium none;margin: 0 1px 1px 0;padding: 0;width: 72px;height: 48px;float: left;line-height: 12px;" alt="#{caption}" src="#{src-thumb}"/>';
			html += '</a>';
			return html;
		})())
	};
	// END: _tmpls
	
	_selectors = {
		tableGalleryA         : 'table.gallery a',
		galleryModalContainer : '#galleryModalContainer',
		modalData             : '.modalData',
		fadables              : '.photo,.caption',
		nav                   : '.nav',
		img                   : 'img',
		firstImg              : 'table.gallery img:first',
		captionElement        : 'table.gallery em'
	};
	// END: _selectors
	
	_css = {
		container : {
			XL : {
				'top'         : '10%',
				'margin-left' : '-280px',
				'width'       : '560px'
			},
			L : {
				'top'         : '20%',
				'margin-left' : '-140px',
				'width'       : '280px'
			}
		}
	};
	// END: _css
	
	_next = function () {
		var html, size;
		++_curPhoto;
		if (_curPhoto > _numPhotos) _curPhoto = 1;
		html = _buildHTML(_links[_curPhoto - 1]);
		size = _links[_curPhoto - 1].href.indexOf(XL) > -1 ? XL : L;
		_doTransition(html, size);
	};
	// END: _next
	
	_prev = function () {
		var html, size;
		--_curPhoto;
		if (_curPhoto < 1) _curPhoto = _numPhotos;
		html = _buildHTML(_links[_curPhoto - 1]);
		size = _links[_curPhoto - 1].href.indexOf(XL) > -1 ? XL : L;
		_doTransition(html, size);
	};
	// END: _prev
	
	_close = function () {
		// hit the onClose function
		$.modal.impl.close(false);

	};
	// END: _close
	
	_doTransition = function (html, size) {
		$(_selectors.fadables).fadeOut(FAST, function () {
			$(_selectors.galleryModalContainer)
				.removeClass(L)
				.removeClass(XL)
				.addClass(size)
				.css(_css.container[size])
				.html(html)
			;
			$(_selectors.nav).css({
				display : BLOCK
			});
			$(_selectors.fadables)
				.hide()
				.fadeIn(FAST)
			;
		});
	};
	// END: _doTransition
	
	_buildHTML = function (a) {
		var classname, src, caption, tmpl, html;
		
		classname = a.href.indexOf(XL) > -1 ? XL : L;
		src       = a.href;
		caption   = $(IMG, a).attr(ALT);
		_curPhoto = +$(a).attr(IDX);
		tmpl      = _numPhotos > 1 ? _tmpls.photo : _tmpls.single;
		html      = tmpl.evaluate({
			classname : classname,
			src       : src,
			caption   : caption,
			idx       : _curPhoto,
			num       : _numPhotos
		});
		
		return html;
	};
	// END: _buildHTML
	
	_initIE6 = function () {
		var mainImg, captionElement, srcFull, srcThumb, caption, vals;
		captionElement = $(_selectors.captionElement);
		_links         = $(_selectors.tableGalleryA);
		if (_links.length > 0) {
			// first in the list is the main image
			mainImg  = _links[0];
			srcFull  = $(mainImg).attr(HREF);
			srcThumb = srcFull;
			caption  = $(_selectors.img, mainImg).attr(ALT);
			vals     = {
				'src-full'  : srcFull,
				'src-thumb' : srcThumb, // we won't worry about using the actual thumb since the main image has already loaded
				'caption'   : caption
			};
			// remove the link around the main image
			$(mainImg).replaceWith($(mainImg).html());
			mainImg = $(_selectors.firstImg);
			// if it's more than just the main image...
			if (_links.length > 1) {
				// prepend new thumbnail
				$(_links[1]).before(_tmpls.thumb.evaluate(vals));
				// add click handlers to the new set of links
				$(_selectors.tableGalleryA).click(function (evt) {
					var caption, src;
					caption = $(_selectors.img, this).attr(ALT);
					src     = $(this).attr(HREF);
					captionElement.html(caption);
					mainImg.attr(SRC, src);
					// don't follow the link
					evt.preventDefault();
				});
			}
		}
	};
	// END: _initIE6
	
	// public members
	return {
		init: function () {
			var idx;
			
			// swapping photos blows up on IE6 and below
			if (BOOKABACH.is.ie(6) || BOOKABACH.is.ie(5)) {
				_initIE6();
				return;
			}
			
			_links     = $(_selectors.tableGalleryA);
			_numPhotos = _links.length;
			
			// add attributes to links so they can self-identify in the sequence & pre-load images
			idx = 1;
			$.each(_links, function () {
				var img;
				img     = new Image();
				img.src = this.href;
				$(this).attr(IDX, idx);
				++idx;
			});
			
			_links.click(function (evt) {
				var size, html, opts;
				
				size = this.href.indexOf(XL) > -1 ? XL : L;
				html = _buildHTML(this);
				opts = {
					containerCss : _css.container[size],
					containerId  : _containerId,
					onOpen : function (modal) {
						$(modal.container).addClass(size);
						$('#horizAdBanner').hide();
						$('#towerAdBanner').hide();
						
						modal.overlay.fadeIn(FAST, function () {
							modal.container.fadeIn(FAST, function () {
								$(_selectors.nav).show(NORMAL);
								modal.data.slideDown(NORMAL);
							});
						});
						// attach listener to body outside of modal
						modal.overlay.click(function () {
							_close();
						});
					},
					onClose : function (modal) {
						// get this reference afresh, as the the node may have been swapped out
						modal.data = $(_selectors.modalData, modal.container);
						$(_selectors.nav).hide(FAST);
						modal.data.slideUp(NORMAL, function () {
							modal.container.fadeOut(FAST, function () {
								modal.overlay.fadeOut(FAST, function () {
									$.modal.close();
									$('#horizAdBanner').show();
									$('#towerAdBanner').show();											
								});
							});
						});
					}
				};
				
				$(html).modal(opts);
				
				// don't follow the link
				evt.preventDefault();
			});
			// END: _links.click
		},
		// public wrappers to these methods
		next: function () {
			_next();
		},
		prev: function () {
			_prev();
		},
		close: function () {
			_close();
		}
	};
	// END: return
})();
// END: BOOKABACH.gallery

$(BOOKABACH.gallery.init);